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;">2000.48</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>
		<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom">
			<view class="lf-font-32" style="width: 50%;border-right: 1px solid rgba(0, 0, 0, 0.1);box-sizing: border-box;" :class="tabIndex ==0?'text-orange':'text-black1'" @click="tabIndex = 0">佣金记录</view>
			<view class="lf-font-32" style="width: 50%;" :class="tabIndex ==1?'text-orange':'text-black1'" @click="tabIndex = 1">提取记录</view>
		</view>
		<block v-if="tabIndex == 0">
			<scroll-view class="com" :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">
					<view class="flex align-center text-center justify-between">
						<view class="lf-font-36 lf-color-price">-¥10.00</view>
						<view class="lf-font-32 text-black1">结余 ¥34.43</view>
					</view>
					<view class="flex align-center text-center justify-between lf-m-t-10">
						<view class="lf-font-24 lf-color-999">内部粉丝购买商品获得</view>
						<view class="lf-font-24 lf-color-999">2021-7-6 22:32:43</view>
					</view>
				</view>
				<!-- 空数据的情况 -->
				<view class="loading-more">
					<text v-if="!tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
					<my-nocontent v-else></my-nocontent>
				</view>
				<!-- 回到顶部 -->
				<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
			</scroll-view>
		</block>
		
		<block v-else>
			<scroll-view class="com" :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">
					<view class="flex align-center text-center justify-between">
						<view class="lf-font-36 lf-color-price">-¥11.00</view>
						<view class="lf-font-28 text-orange">申请中</view>
					</view>
					<view class="flex align-center text-center justify-between lf-m-t-10">
						<view class="lf-font-24 lf-color-999">流水号 638763485895875</view>
						<view class="lf-font-24 lf-color-999">2021-7-6 22:32:43</view>
					</view>
				</view>
				<!-- 空数据的情况 -->
				<view class="loading-more">
					<text v-if="!tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
					<my-nocontent v-else></my-nocontent>
				</view>
				<!-- 回到顶部 -->
				<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				pageSize: 10,
				isRefresher: false, // scroll-view下拉刷新状态，当前默认没有触发
				page: 1,
				isPage: false
			}
		},
		methods: {
			// 页面触底，加载下一页
			onScrolltolower(){
				console.log('加载下一页')
			},
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.isRefresher = true;
				console.log('下拉刷新')
				setTimeout(() => {
					this.isRefresher = false;
				},1000)
			}
		}
	}
</script>
<style scoped>
	.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;
	}
</style>