7131/pages/zero/gfz.vue

<template>
	<view class="content">
		<view class="" style="height: 20rpx;"></view>
		<view class="top-wrap">
			<view class="top-top flex">
				<view class="item ">
					<view class="val">
						{{pUser.holding_value}}
					</view>
					<view class="name">
						个人共富值
					</view>
				</view>
				<view class="item">
					<view class="val">
						{{pUser.trem_holding_value}}
					</view>
					<view class="">
						联盟共富值
					</view>
				</view>
			</view>
			<view class="flex top-btm">
				<view class="">
					当前等级：{{ pUser.zero_level ? pUser.zero_level.name:'暂无' }}
				</view>
				<view class="">
				</view>
			</view>
		</view>

		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300"
			@change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex" >
				<scroll-view scroll-y="true" class="good-content" @scrolltolower="loadData" :style="{ height: height }">
					<empty v-if="tabItem.loaded === true && tabItem.list.length === 0"></empty>
					<view>
						<view class="order-item flex" v-for="(item, index) in tabItem.list" :key="index">
							<view class="title-box">
								<view class="title">
									<text>{{ item.name }}</text>
								</view>
								<view class="time">
									<text>{{getTime(item.add_time) }}</text>
								</view>
							</view>
							<view class="money">
								<view>{{ item.holding_value }}</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType" v-if="!(tabItem.list.length == 0 && tabItem.loaded)"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';

	import {
		getCardList,
		createPass,
		getGsList,
		passUser,
		passLst
	} from '@/api/zero.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				height: '',
				tabCurrentIndex: 0,
				pUser: {
					holding_value: 0,
					trem_holding_value: 0,
					zero_level: {
						name: ''
					}
				},
				navList: [{
						text: '个人',
						state: 1,
						loaded: false,
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					},
					{
						text: '团队',
						state: 2,
						loaded: false,
						list: [],
						page: 1,
						limit: 10,
						loadingType: 'more'
					}
				]

			}
		},
		onLoad() {

		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onShow() {
			this.passUser()
			this.loadData()
		},
		onReachBottom() {

		},
		onReady() {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.swiper-box').boundingClientRect();
					query.exec(function(res) {
						that.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			getTime(time) {
				const num =13 - (time+'').length;
				let l = 1;//倍数
				for (let i = 0; i < num; i++) {
					l+='0';
				}
				// 重新解析为数字
				l = parseInt(l)
				const date = new Date(parseInt(time) * l);
				const year = date.getFullYear();
				const mon = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minu = date.getMinutes();
				const sec = date.getSeconds();
				return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			passUser() {
				passUser().then(res => {
					// console.log()
					this.pUser = res.data
				})
			},
			loadData() {
				let that = this;
				let item = that.navList[that.tabCurrentIndex]
				let qdata = {
					page: item.page,
					limit: item.limit
				}
				if (item.state == 1) {
					qdata.uid = that.userInfo.uid
				} else {
					qdata.sp_uid = that.userInfo.uid
				}
				if(item.loadingType == 'loading' || item.loadingType == 'noMore') {
					return 
				}
				item.loadingType = 'loading'
				passLst(qdata).then(res => {
					console.log(res)
					let arr = res.data.result.list
					item.list = item.list.concat(arr)
					
					if(item.limit == arr.length) {
						item.page++
						item.loadingType = 'more'
					}else {
						item.loadingType = 'noMore'
					}
					item.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-wrap {
		width: 690rpx;
		height: 320rpx;
		padding: 43rpx;
		padding-bottom: 0;
		background-color: #ebd4be;
		margin: auto;
		border-radius: 20rpx;
		text-align: center;
		font-size: 29rpx;
		font-weight: 400;
		color: #6E4019;

		.top-top {
			height: 200rpx;

			.item {
				flex-grow: 1;

				.val {
					font-size: 63rpx;
					font-weight: bold;
				}

			}
		}

		.top-btm {
			border-top: 1px solid #E3C5A8;

			view {
				flex-grow: 1;
				line-height: 80rpx;
			}
		}
	}

	.order-item {
		padding: 20rpx 30rpx;
		line-height: 1.5;

		.title-box {
			.title {
				font-size: $font-lg;
				color: $font-color-base;
			}

			.time {
				font-size: $font-base;
				color: $font-color-light;
			}
		}

		.money {
			color: #fd5b23;
			font-size: $font-lg;
			text-align: right;

			.status {
				color: $font-color-light;
			}
		}
	}

	.navbar {
		margin-top: 20rpx;
		display: flex;
		height: 88rpx;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #999999;
			position: relative;

			&.current {
				color: #000;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}
	.swiper-box {
		background-color: #fff;
	}
</style>