uniapp-shikongwang/pages/center/wallet.vue

<template>
	<view>
		<!-- 钱包余额信息 -->
		<view class="wallet-top">
			<view class="bg-white wallet-wraptop flex-direction flex justify-around align-center text-center">
				<view class="text-black1 text-price1" style="font-size: 72rpx;">{{walletBalance}}</view>
				<view class="text-gray lf-font-24 lf-m-b-20">佣金（元）</view>
				<view>
					<button class="btn" @click="$url('/pages/center/widthdraw')">提取佣金</button>
				</view>
			</view>
		</view>
		<!-- tabs -->
		<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom">
			<view class="tab-item" :class="current==index?'text-orange':'text-black1'"
				v-for="(item, index) in tab_list" :key="index"
				@click="changeTab(index)">{{ item.name }}
			</view>
		</view>
		<!-- scroll page -->
		<block v-if="current == 0">
			<scroll-view :style="{height: 'calc('+ windowHeight +'px - 530rpx)'}"
				class="scroll-view"
				:scroll-y="true" :refresher-enabled="true" 
				:refresher-triggered="isRefresher" 
				@scrolltolower="onScrolltolower" 
				@refresherrefresh="onRefresherrefresh">
				<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom" v-for="(item, index) in tab_list[current].list" :key="item">
					<view class="flex align-center text-center justify-between">
						<view class="lf-font-36 lf-color-price">+¥{{item.add_price}}</view>
						<view class="lf-font-32 text-black1">结余 ¥{{item.final_price}}</view>
					</view>
					<view class="flex align-center text-center justify-between lf-m-t-10">
						<view class="lf-font-24 lf-color-999">{{item.reffer}}</view>
						<view class="lf-font-24 lf-color-999">{{item.created_at}}</view>
					</view>
				</view>
				<!-- 空数据的情况 -->
				<view class="loading-more">
					<text v-if="tab_list[0].list.length" :class="{'loading-more-text': tab_list[0].loadingClass}">{{ tab_list[0].loadingText }}</text>
					<my-nocontent v-else></my-nocontent>
				</view>
			</scroll-view>
		</block>
		
		<block v-else>
			<scroll-view :style="{height: 'calc('+ windowHeight +'px - 524rpx)'}"
				:scroll-y="true" :refresher-enabled="true" 
				:refresher-triggered="isRefresher"
				@scrolltolower="onScrolltolower"
				@refresherrefresh="onRefresherrefresh">
				<view class="flex flex-direction justify-between lf-p-t-20 lf-p-b-20 lf-p-l-32 lf-p-r-32 solid-bottom" v-for="(item, index) in tab_list[current].list" :key="item">
					<view class="flex align-center text-center justify-between">
						<view class="lf-font-36 lf-color-price">+¥{{item.extract_price}}</view>
						<view class="lf-font-28 text-orange">{{item.state}}</view>
					</view>
					<view class="flex align-center text-center justify-between lf-m-t-10">
						<view class="lf-font-24 lf-color-999">流水号 {{item.order_no}}</view>
						<view class="lf-font-24 lf-color-999">{{item.created_at}}</view>
					</view>
				</view>
				<!-- 空数据的情况 -->
				<view class="loading-more">
					<text v-if="tab_list[1].list.length" :class="{'loading-more-text': tab_list[1].loadingClass}">{{ tab_list[1].loadingText }}</text>
					<my-nocontent v-else></my-nocontent>
				</view>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				pageSize: 10,
				isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
				tab_list: [{
					name: '佣金记录',
					list: [],
					page: 1,
					isPage: false,
					loadingClass: false,
					loadingText: '已加载全部数据'
				},{
					name: '提取记录',
					list: [],
					page: 1,
					isPage: false,
					loadingClass: true,
					loadingText: '正在加载中'
				}],
				windowHeight: 0,
				walletBalance: 0
			}
		},
		onLoad(){
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.getIncomeList()
		},
		methods: {
			changeTab(index) {
				if(this.current == index) {
					return
				}else {
					this.current = index
					if(index == 0) {
						this.getIncomeList()
					}else {
						this.getWidthList()
					}
				}
			},
			//提取记录
			getWidthList() {
				let per_page = this.pageSize;
				let tab_item = this.tab_list[this.current];
				this.$http(this.API.API_EXTRACTLIST, {
					page: tab_item.page,
					limit: per_page
				}).then(res => {
					this.isRefresher = false;
					let isPage = res.data.has_more_page;
					tab_item.isPage = isPage;
					if(!isPage){
						tab_item.loadingClass = false;
						tab_item.loadingText = '没有更多数据啦~';
					}
					if(tab_item.page == 1){
						tab_item.list = res.data.items;
					}else{
						tab_item.list.push(...res.data.items);
					}
				})
			},
			//佣金记录
			getIncomeList() {
				let per_page = this.pageSize;
				let tab_item = this.tab_list[this.current];
				this.$http(this.API.API_INCOMELIST, {
					page: tab_item.page,
					limit: per_page
				}).then(res => {
					this.isRefresher = false;
					this.walletBalance = res.data.income || 0
					let isPage = res.data.has_more_page;
					tab_item.isPage = isPage;
					if(!isPage){
						tab_item.loadingClass = false;
						tab_item.loadingText = '没有更多数据啦~';
					}
					if(tab_item.page == 1){
						tab_item.list = res.data.items;
					}else{
						tab_item.list.push(...res.data.items);
					}
				})
			},
			// 页面触底，加载下一页
			onScrolltolower(){
				let tab_item = this.tab_list[this.current];
				if(tab_item.isPage){
					tab_item.page = tab_item.page + 1;
					this.getIncomeList()
				}
				console.log('加载下一页')
			},
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.isRefresher = true;
				this.getIncomeList()
			}
		}
	}
</script>
<style scoped lang="scss">
	.tab-item{
		font-size: 32rpx;
		width: 50%;
		box-sizing: border-box;
		&:first-child{
			border-right: 2rpx solid rgba(0, 0, 0, 0.1);
		}
	}
	
	.com {
		height: 900rpx;
	}
	.wallet-top {
		height: 404rpx;
		width: 100%;
		padding: 28rpx 32rpx;
		background-color: #FE9903;
	}
	.wallet-wraptop {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		padding: 46rpx 0 44rpx 0;
	}
	.btn{
		margin: 0;
		padding: 0;
		width: 320rpx;
		height: 84rpx;
		background-color: #FE9903;
		color: #FFFFFF;
		line-height: 84rpx;
		font-size: 32rpx;
		border-radius: 42rpx;
	}
	.scroll-view{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>