lingrui-score/pages/useRrecord/useRrecord.vue

<template>
	<view class="template-integral tn-safe-area-inset-bottom">
		<view class="top-backgroup">
			<image src='/static/adn4.jpg' mode='widthFix' class='backgroud-image'>
			</image>
		</view>
		<view style="position: absolute;top: 10%;width: 100%;">
			<view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center tn-color-white">
				<view class="tn-text-bold tn-text-xxl">本月个人累计积分 ：{{userMyScore.my_employee_score.score}}</view>
				<view class="tn-text-bold tn-text-xxl" style="margin-top: 20rpx;">本月团队累计积分 ：{{userMyScore.my_team_score.score}}</view>
			</view>
		</view>

		<view :style="{top: vuex_custom_bar_height + 'px'}">
			<!-- 顶部标签 -->
			<view class="tn-bg-white" style="padding-bottom: 20rpx;">
				<tn-tabs-swiper ref="tabs" activeColor="#3165CC" inactiveColor="#080808" :list="list"
					:current="tabsIndex" :isScroll="false" @change="tabsChange"></tn-tabs-swiper>
			</view>
			<view v-for="(item,index) in integral" :key="index" class="order__item">
				<view class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
					style="padding:10rpx 20rpx;">
					<view class=" tn-flex tn-flex-nowrap tn-flex-col-center">
						<image @click="openImg(item)" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" :src="item.images[0]"
							mode="aspectFill">
						</image>
						<view style="margin-left: 20rpx;">
							<view style="font-size: 30rpx;font-weight: 600;">{{item.name}}</view>
							<view style="margin-top: 30rpx;font-size: 25rpx;color: #999999">{{item.createtime_text}}</view>
						</view>
					</view>
					<view
						class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
						<view style="padding-right: 10rpx;color: #3465CC;font-size: 28rpx;font-weight: 600;">
							积分：+{{item.score}}
						</view>
					</view>
				</view>
				<view style="height: 1px;background-color: aliceblue;width: 100%;margin: 30rpx auto;"></view>
			</view>
			<view style="padding-bottom: 50rpx;">
				<tn-load-more class="tn-margin-top" :status="status" :loadText="loadText" ></tn-load-more>
			</view>
			<view class="tn-padding-bottom"></view>
		</view>
	</view>
</template>

<script>
	import {
		scoreLog,scoreMonth
	} from "@/utils/api";
	export default {
		data() {
			return {
				loadText: {
					loading: '快速加载中...',
					nomore: '下面没有了'
				},
				list: [{
						name: '申请中'
					},
					{
						name: '申请通过'
					},
					{
						name: '被拒绝'
					}
				],
				tabsIndex: 0,
				integral: [],
				page: 1,
				size: 10,
				status: 'loading',
				userMyScore:{}
			}
		},
		onLoad() {
			this.getScoreLog();
			this.getSum();
		},
		onReachBottom() {
			this.page += 1;
			this.getScoreLog();
		},
		methods: {
			// 标签栏值发生改变
			tabsChange(index) {
				this.status = 'loading';
				this.page = 1;
				this.integral = [];
				this.tabsIndex = index
				this.getScoreLog();
			},
			openImg(item) {
				uni.previewImage({
					urls: item.images,
					current: 0,
					indicator: 'number'
				});
			},
			getSum() {
				scoreMonth()
					.then(res => {
						console.log(res);
						this.userMyScore=res.data;
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			getScoreLog() {
				scoreLog({
						page: this.page,
						limit: this.size,
						status: this.tabsIndex,
						time: 'month',
					})
					.then(res => {
						console.log(res);
						if (res.data.list.length == 0 || res.data.list.length < 9) {
							this.status = 'nomore';
						}
						this.integral.push(...res.data.list);
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template-order {
		background-color: #F7F7F7CC;
	}

	/* 自定义导航栏内容 end */

	.order {
		&--wrap {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
		}

		/* 导航栏 start */
		&__tabs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: inherit;
		}

		/* swiper end */

		/* 订单内容 start */
		&__item {
			background-color: #FFFFFF;
			border-radius: 18rpx;

			/* 头部 start */
			&__head {

				&__title {
					font-weight: bold;
					line-height: normal;

					&--right-icon {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}

				&__status {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}

			/* 操作按钮 end */
		}

		/* 订单内容 end */
	}


	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}
</style>