BCMM/pages/user/user.vue

<template>
	<view class="container">
		<view class="topTitle">{{$t('user.我的收益')}}</view>
		<view class="flex moneyBox">
			<view class="moneyTpl bg2 flex">
				<view class="moneyNum">{{teamNum.num1}}</view>
				<view class="moneyTitle">{{$t('user.今日收益')}}</view>
			</view>
			<view class="moneyTpl bg flex">
				<view class="moneyNum">{{teamNum.num2}}</view>
				<view class="moneyTitle">{{$t('user.累计收益')}}</view>
			</view>
			<view class="moneyTpl bg1 flex">
				<view class="moneyNum">{{teamNum.num11}}</view>
				<view class="moneyTitle">{{$t('user.可用收益')}}</view>
			</view>
		</view>

		<view class="mybox" v-if='userInfo.point_level>0'>
			<view class="topTitle flex">{{$t('user.节点分布')}}<p class="p">{{$t('user.今日分红额度')}}{{teamNum.num12}}VGT</p>
			</view>
			<view class="flex fhboxs">
				<view class="fhli" @click="fhList(1)">
					<view class="fhtips os">L1</view>
					<view class="fhnum">
						<view class="fhnums">{{teamNum.num13}}</view>
						<view class="fhtxt">{{$t('user.人数')}}</view>
						<view class="fg"></view>
						<view class="fhnums">{{teamNum.num14}}</view>
						<view class="fhtxt">{{$t('user.分红比例')}}</view>
					</view>
				</view>
				<view class="fhli" @click="fhList(2)">
					<view class="fhtips ys">L2</view>
					<view class="fhnum">
						<view class="fhnums">{{teamNum.num15}}</view>
						<view class="fhtxt">{{$t('user.人数')}}</view>
						<view class="fg"></view>
						<view class="fhnums">{{teamNum.num16}}</view>
						<view class="fhtxt">{{$t('user.分红比例')}}</view>
					</view>
				</view>
				<view class="fhli" @click="fhList(3)">
					<view class="fhtips bs">L3</view>
					<view class="fhnum">
						<view class="fhnums">{{teamNum.num17}}</view>
						<view class="fhtxt">{{$t('user.人数')}}</view>
						<view class="fg"></view>
						<view class="fhnums">{{teamNum.num18}}</view>
						<view class="fhtxt">{{$t('user.分红比例')}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="topTitle">{{$t('user.我的团队')}}</view>
		<view class="flex listBox">
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img20.png"></image><!-- /static/img/img20.png -->
				<view class="tplBox">
					<view class="num">{{teamNum.num3 || 0}}</view>
					<view class="name">{{$t('user.分享地址')}}</view>
				</view>
			</view>
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img22.png"></image>
				<view class="tplBox">
					<view class="num">{{teamNum.num4 || 0}}</view>
					<view class="name">{{$t('user.社区地址')}}</view>
				</view>
			</view>
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img27.png"></image>
				<view class="tplBox">
					<view class="num">{{teamNum.num5 || 0}}</view>
					<view class="name">{{$t('user.分享预约')}}</view>
				</view>
			</view>
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img21.png"></image>
				<view class="tplBox">
					<view class="num">{{teamNum.num6 || 0}}</view>
					<view class="name">{{$t('user.社区预约')}}</view>
				</view>
			</view>
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img24.png"></image>
				<view class="tplBox">
					<view class="num">{{teamNum.num7 || 0}}</view>
					<view class="name">{{$t('user.今日分享业绩')}}</view>
				</view>
			</view>
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img26.png"></image>
				<view class="tplBox">
					<view class="num">{{teamNum.num8 || 0}}</view>
					<view class="name">{{$t('user.今日社区业绩')}}</view>
				</view>
			</view>
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img23.png"></image>
				<view class="tplBox">
					<view class="num">{{teamNum.num9 || 0}}</view>
					<view class="name">{{$t('user.分享业绩')}}</view>
				</view>
			</view>
			<view class="listTpl flex_item">
				<image class="tplIcon" src="/static/img/img25.png"></image>
				<view class="tplBox">
					<view class="num">{{teamNum.num10 || 0}}</view>
					<view class="name">{{$t('user.社区业绩')}}</view>
				</view>
			</view>
		</view>
		<view class="recordBox">
			<view class="recordNav flex">
				<view class="navItem" v-for="item,index in recordNav" :key="index"
					:class="{ active: tabIndex == index }" @click="changeTab(index)">
					{{item.langName}}
				</view>
			</view>
			<view class="recordList" v-if="tabIndex == 0">
				<view class="listTpls flex boderBom">
					<view class="tpls title">{{$t('user.地址')}}</view>
					<view class="tpls title">{{$t('user.时间')}}</view>
				</view>
				<view class="listTpls flex paddTop" v-for="item,index in recordNavList[0].list">
					<view class="tpls">{{item.addressSub}}</view>
					<view class="tpls time">{{item.timetext}}</view>
				</view>
			</view>
			<view class="recordList" v-if="tabIndex == 1 || tabIndex == 2 ">
				<view class="listTpls flex boderBom">
					<view class="tpls title" >{{$t('user.金额')}}</view>
					<view class="tpls title typeStatus" >{{tabIndex == 1 || tabIndex == 2 ?$t('user.说明'):$t('user.状态')}}</view>
					<view class="tpls title">{{$t('user.时间')}}</view>
				</view>
				<view class="listTpls flex paddTop" v-for="item,index in recordNavList[tabIndex].list">
					<view class="tpls" >{{item.money}}{{item.token}}</view>
					<view class="tpls" >{{item.title}}</view>
					<view class="tpls time">{{item.timetext}}</view>
				</view>
			</view>
			<view class="recordList" v-if=" tabIndex == 3">
				<view class="listTpls flex boderBom">
					<view class="tpls title u-line-1" >{{$t('user.金额')}}</view>
					<view class="tpls title typeStatus" >{{$t('user.状态')}}</view>
					<view class="tpls title">{{$t('user.时间')}}</view>
				</view>
				<view class="listTpls flex paddTop" v-for="item,index in recordNavList[tabIndex].list">
					<view class="tpls u-line-1" >{{item.number}}{{item.token}}</view>
					<view class="tpls" v-if="item.status==1">{{$t('user.已通过')}}</view>
					<view class="tpls" v-if="item.status==0">{{$t('user.待审核')}}</view>
					<view class="tpls" v-if="item.status==2">{{$t('user.已拒绝')}}</view>
					<view class="tpls time">{{item.timetext}}</view>
				</view>
			</view>
			<u-loadmore :status="loading" line :loadmoreText="$t('base.加载更多')" :loadingText="$t('base.正在加载')"
				:nomoreText="$t('base.没有更多了')" />
		</view>
		<taber></taber>
	</view>
</template>
<script>
	import {
		spreadList,
		getTokenLog,
		extractLog,
		group_info
	} from '@/api/index.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	import taber from "@/components/footer/footer.vue";
	export default {
		components: {
			taber
		},
		data() {
			return {
				tabIndex: 0,
				recordList: [{}, {}, {}, {}, {}, {}, {}, {}],
				recordNavList: [{
					name: "团队明细",
					langName: '',
					type: 1,
					list: [],
				}, {
					name: "余额明细",
					langName: '',
					type: 2,
					list: [],
				}, {
					name: "VGT明细",
					langName: '',
					type: 3,
					list: [],
				}, {
					name: "提现明细",
					langName: '',
					type: 4,
					list: [],
				}],
				page: 1,
				limit: 10,
				loading: 'loadmore', //加载状态
				teamNum: {}, //状态值
			}
		},
		computed: {
			...mapState({
				langList: "langList",
				lang: "lang",
			}),
			...mapState('user', ['userInfo', 'hasLogin']),
			label() {
				const label = this.langList.find((item) => {
					console.log(this.lang, item.value);
					return item.value == this.lang
				}).label;
				return label
			},
			recordNav() {
				for (var i = 0; i < this.recordNavList.length; i++) {
					this.recordNavList[i].langName = this.$t(`user.${this.recordNavList[i].name}`)
				}
				return this.recordNavList
			}
		},
		onLoad(option) {
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
		},
		onShow() {
			if (!this.hasLogin) {
				// 保存地址
				saveUrl();
				// 登录拦截
				interceptor();
			} else {
				this.group_info();
				this.changeTab(this.tabIndex)
			}
		},
		onReachBottom() {
			this.loadData();
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'login']),
			// 获取登录记录
			group_info() {
				group_info().then((res) => {
					for(let a in res.data ){
						res.data[a] = +(+res.data[a]).toFixed(2)
					}
					this.teamNum = res.data;
				}).catch((res) => {
					console.log(res);
				})
			},
			fhList(type) {
				// uni.navigateTo({
				// 	url: '/pages/user/fhlist?type=' + type
				// })
			},
			// 分类记录
			tokenLogType(item, type) {
				const that = this;
				getTokenLog({
					page: that.page,
					limit: that.limit,
					token: type,
				}).then((res) => {
					const arr = res.data.list.map((re) => {
						re.timetext = that.$util.getTime(re.createtime);
						re.money =+(+re.money).toFixed(2);						
						return re
					});
					item.list = item.list.concat(arr);
					console.log(arr.length);
					if (arr.length != that.limit) {
						console.log(that.loding,'5');
						that.loading = 'nomore'
					} else {
						console.log(that.loding,'3');
						that.page++
						that.loading = 'loadmore'
					}
				}).catch((res) => {
					console.log(res);
				})
			},
			// 分类记录
			extractLog(item) {
				const that = this;
				extractLog({
					page: that.page,
					limit: that.limit,
				}).then((res) => {
					const arr = res.data.list.map((re) => {
						re.timetext = that.$util.getTime(re.createtime);
						re.number = +re.number;
						return re
					});
					console.log(arr.length!=that.limit);
					item.list = item.list.concat(arr);
					if (arr.length != that.limit) {
						console.log(that.loading,'5');
						that.loading = 'nomore'
					} else {
						console.log(that.loading,'3');
						that.page++
						that.loading = 'loadmore'
						console.log(that.loading,'4');
					}
				}).catch((res) => {
					console.log(res);
				})
			},
			// 请求载入数据
			async loadData() {
				const that = this;
				const arr = this.recordNavList[this.tabIndex];
				if (that.loading == 'nomore' || that.loading == "loading") {
					return
				}
				that.loading = 'loading';
				switch (arr.type) {
					case 1:
						that.spreadList(arr)
						break;
					case 2:
						that.tokenLogType(arr, "USDT")
						break;
					case 3:
						that.tokenLogType(arr, "VGT")
						break;
					case 4:
						that.extractLog(arr)
						break;
					default:
						break;
				}
			},
			// 邀请人员记录
			spreadList(item) {
				const that = this;
				spreadList({
					page: that.page,
					limit: that.limit,
				}).then((res) => {
					const arr = res.data.data.list.map((re) => {
						if (re.address) {
							let st = re.address.slice(8, re.address.length - 8)
							re.addressSub = re.address.replace(st, "...")
						}
						re.timetext = that.$util.getTime(re.spread_time)
						return re
					});
					item.list = item.list.concat(arr);

					if (arr.length != that.limit) {
						that.loading = 'nomore'
					} else {
						that.page++
						that.loading = 'loadmore'
					}
				}).catch((res) => {
					console.log(res);
				})
			},
			//切换记录tab
			changeTab(index) {
				this.tabIndex = index;
				this.page = 1;
				this.loading = 'loadmore';
				this.recordNavList[index].list = [];
				this.loadData();
			},
		},
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		padding: 25rpx;
		line-height: 1;
	}

	.topTitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		padding: 25rpx 0rpx;

		.p {
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

	.moneyBox {
		margin-bottom: 25rpx;

		.moneyTpl {
			flex-direction: column;
			width: 218rpx;
			height: 230rpx;
			padding: 0 10rpx;
			position: relative;
			text-align: center;
			padding-top: 120rpx;
			line-height: 1;
			padding-bottom: 10rpx;

			.moneyNum {
				flex-grow: 1;
			}

			.moneyTitle {
				flex-grow: 1;
			}
		}
	}

	.bg {
		background: url('../../static/img/img17.png') no-repeat;
		background-size: 100% 100%;
		color: #D08500;
	}

	.bg1 {
		background: url('../../static/img/img18.png') no-repeat;
		background-size: 100% 100%;
		color: #D34D00;
	}

	.bg2 {
		background: url('../../static/img/img19.png') no-repeat;
		background-size: 100% 100%;
		color: #2DACD7;
	}

	.listBox {
		flex-wrap: wrap;

		.listTpl {
			width: 50%;

			.tplIcon {
				width: 158rpx;
				height: 158rpx;
			}

			.tplBox {
				width: calc(100% - 158rpx);
				position: relative;
				top: -10rpx;
				font-weight: bold;

				.num {
					font-size: 37rpx;
					color: #0041FD;
				}

				.name {
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #7E7E7E;
				}
			}
		}
	}

	.recordBox {
		padding: 0rpx 30rpx;
		background-color: #fff;
		border-radius: 25rpx;
		margin-top: 50rpx;
		padding-bottom: 10rpx;

		.recordNav {
			padding: 40rpx 0rpx;

			.navItem {
				width: 23%;
				text-align: center;
				font-size: 28rpx;
				font-weight: 500;
			}

			.active {
				background: #14C670;
				border-radius: 10rpx;
				color: #FFFFFF;
				line-height: 70rpx;
			}
		}

		.recordList {

			.listTpls {
				text-align: center;

				.title,
				.time {
					color: #666666;
				}

				.tpls {
					font-size: $font-base;
					text-align: center;
					width: 30%;
					flex-grow: 1;
					flex-shrink: 0;
					&.typeStatus{
						width: 20%;
						flex-grow: 1;
						flex-shrink: 0;
					}
				}
			}

			.boderBom {
				padding-bottom: 25rpx;
				border-bottom: 1rpx solid #EDF0FA;
				margin-bottom: 25rpx;
			}

			.paddTop {
				padding-top: 28rpx;
			}
		}
	}

	.mybox {
		margin-bottom: 30rpx;
		.title {
			color: #000;
			font-size: 36rpx;
			margin-left: 10rpx;
			align-items: flex-end;

			.p {
				color: #333;
				font-size: 24rpx;
				margin-left: 12rpx;
			}
		}


		.fhboxs {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 25rpx 0;
			justify-content: space-around;

			.fhli {
				background-color: #EDF5F9;
				border-radius: 16rpx;
				width: 191rpx;
				height: auto;

				.fhtips {
					width: 68rpx;
					height: 36rpx;
					border-radius: 16rpx 0px 24rpx 0px;
					text-align: center;
					font-size: 24rpx;
					color: #fff;
					line-height: 36rpx;
				}

				.fhnum {
					width: 74%;
					margin: 24rpx 24rpx 48rpx 24rpx;
					color: #41ADD0;
					text-align: center;

					.fhnums {
						font-size: 36rpx;
						font-weight: bold;
					}

					.fhtxt {
						font-size: 24rpx;
						margin-top: 8rpx;
					}

					.fg {
						width: 100%;
						height: 1rpx;
						background-color: #41ADD0;
						margin: 24rpx 0;
					}
				}

				.os {
					background-color: #FF630C;
				}

				.ys {
					background-color: #FFCB0C;
				}

				.bs {
					background-color: #0CAEFF;
				}
			}
		}
	}
</style>