zhengyi/pages/user/integral.vue

<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<image src="../../static/img/img38.png" mode="scaleToFill"></image>
			<view class="money">{{+integralAll || 0}}</view>
			<view class="transfer">佣金转账</view>
		</view>
		<!-- 收入和支出 -->
		<view class="navbar">
			<view class="nav-item" v-for="(item, index) in navList" :key="index" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper class="swiper-box" :current="tabCurrentIndex" duration="300" @change="changeTab" :style="{'height':height}">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<!-- 空白页 -->
				<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
				<!-- 推广奖励 -->
				<scroll-view class="scorll" scroll-y="true" :style="{'height':height}">
					<view class="cost">
						<view class="award" v-for="item in tabItem.orderList">
							<view class="award-left">
								<view class="text clamp">{{ item.mark }}</view>
								<view class="time">{{ item.add_time }}</view>
							</view>
							<view class="award-right">{{ item.pm == 1 ? '+' : '-' }}{{ item.number }}</view>
						</view>
					</view>
				</scroll-view>
				<uni-load-more :status="tabItem.loadingType"></uni-load-more>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
// 组件
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
//接口
import { integral } from '@/api/wallet.js';
import { getUserInfo } from '@/api/user.js';
export default {
	components: {
		empty,
		uniLoadMore
	},
	data() {
		return {
			height: '',
			tabCurrentIndex: 0,
			navList: [
				{
					state: 1,
					text: '收入',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 0,
					text: '支出',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
			],
			list: [],
			// money: '',
			integralAll: '',//当前积分
		};
	},
	onLoad() {
		this.loadData();
		this.userinfo()
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.swiper-box').boundingClientRect();
				query.exec(function(res) {
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	methods: {
		//加载用户信息
		userinfo() {
			getUserInfo({}).then(({ data }) => {
				this.integralAll = data.integral;
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		loadData(type) {
			let obj = this;
			let index = obj.tabCurrentIndex;
			let navItem = obj.navList[index];
			if (navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
				return;
			}
			if (type == 'tabChange' && navItem.loaded == 'loaded') {
				return;
			}
			navItem.loadingType == 'loading';
			integral({
				page: navItem.page,
				limit: navItem.limit,
				pm: navItem.state
			}).then(res => {
				navItem.orderList = navItem.orderList.concat(res.data);
				if (navItem.limit == res.data.length) {
					navItem.loadingType = 'more';
					return;
				} else {
					navItem.loadingType = 'noMore';
				}
				uni.hideLoading();
				this.$set(navItem, 'loaded', true);
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	width: 750rpx;
	height: 1334rpx;
	background-color: #f1f1f1;

	.header {
		position: relative;
		image {
			width: 750rpx;
			height: 400rpx;
		}

		.money {
			font-size: 72rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3f7c1f;
			position: absolute;
			top: 60%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	

	

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

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

			&.current {
				color: #333333;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #3f7c1f;
				}
			}
		}
	}

	.cost {
		width: 750rpx;
		height: auto;
		background-color: #fff;

		.award {
			width: 100%;
			border-bottom: 1px solid #f0f4f8;
			padding: 20rpx 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.award-left {
				width: 60%;
				.text {
					width: 100%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #666666;
					margin-bottom: 16rpx;
				}

				.time {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #aeaeae;
				}
			}

			.award-right {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff0000;
				margin-right: 30rpx;
			}
		}
	}
}
.swiper-box {
		// height: calc(100% - 536rpx);
		background-color: #fff;
	}
</style>