sange-bridge/pages/withdraw/index.vue

<template>
	<app-layout class="c-wrapper">
		<!--tab-->
		<view class="u-tabs-box">
			<u-tabs-swiper ref="tabs"
						   :active-color="$u.color['mainBgColor']"
						   inactive-color="#666666"
						   bar-height="4"
						   height="90"
						   :list="tabs"
						   :current="currentTab"
						   @change="changeTabs"
						   :is-scroll="false" swiperWidth="750"
			></u-tabs-swiper>
		</view>
		<!--内容-->
		<swiper class="swiper-box" :current="currentSwiper" @transition="swiperTransition" @animationfinish="swiperAnimationFinish">
			<swiper-item class="swiper-item" v-for="(arr,index) in dataList" :key="index">
				<scroll-view scroll-y
							 class="scroll-item"
							 lower-threshold="80"
							 @scrolltolower="scrollBottom">
					<view class="page-box">
						<view class="cell-box">
							<view class="stamp">
								<u-image
										width="150"
										height="150"
										mode="aspectFit"
										src="@/static/images/agree.png"
								></u-image>
							</view>
							<view class="header main-between">
								<text class="nickname">微信昵称：Z是一颗星</text>
								<text>待审核</text>
							</view>
							<view class="section main-between cross-cente">
								<view class="info main-left cross-center">
									<text>提现金额</text>
									<view class="price">¥76</view>
								</view>
								<view class="name cross-center">
									张三(2390573452730)
								</view>
							</view>
							<view class="footer">
								<text>申请时间：2021/07/21 15:45</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</app-layout>
</template>

<script>
	import appLayout from '@/components/app-layout'
	export default {
		components:{
			appLayout
		},
		data() {
			return {
				currentTab: 0,
				tabs: [
					{name: '全部', value: -1},
					{name: '待审核', value: 1},
					{name: '已通过', value: 2},
					{name: '已驳回', value: 3},
				],
				currentSwiper: 0,
				dataList: [],
				isReload: false,
			}
		},
		onLoad(options){
			this.getTabsData();
			if(options.status){
				const index = options.status - 2;
				this.currentTab = index;
				this.currentSwiper = index;
				this.getList(index, 1);
			}
		},
		onPullDownRefresh(){
			this.isReload = true;
			this.getList(this.currentSwiper,1);
		},
		methods: {
			getTabsData(){
				let _this = this;
				_this.tabs.forEach((obj, index) => {
					_this.dataList.push({
						data: [],
						status: 'loadmore',
						currentPage: 1,
						totalPage: 0,
						initData: false,
					});
				});
				_this.getList(0, 1);
			},
			getList(index, page){

			},
			// tabs 切换
			changeTabs(index){
				this.currentSwiper = index;
				if(!this.dataList[index].initData){
					this.getList(index, 1);
				}
			},
			// 滚动到底部
			scrollBottom(){
				let index = this.currentTab;
				let activeData = this.dataList[index];
				if(activeData.currentPage < activeData.totalPage){
					activeData.status = 'loading';
					//this.getList(index,activeData.currentPage + 1);
				}else{
					activeData.status = 'nomore';
				}
			},
			// 左右切换 设置滑块位置
			swiperTransition({ detail: { dx } }){
				this.$refs.tabs.setDx(dx);
			},
			// 切换完成
			swiperAnimationFinish({ detail: { current } }){
				this.$refs.tabs.setFinishCurrent(current);
				this.currentSwiper = current;
				this.currentTab = current;
				if(!this.dataList[current].initData){
					this.getList(current, 1);
				}
				if(this.dataList[current].data.length === 0 && this.dataList[current].status !== 'nomore'){
					this.dataList[current].status = 'loading';
					//this.getList(current,this.dataList[current].currentPage);
				}
			},
		},
		computed:{
		},
	}
</script>

<style lang="scss">
	.swiper-box {
		flex: 1;
		.swiper-item {
			height: 100%;
		}
		.scroll-item{
			height: 100%;
			width: 100%;
		}
	}
	.page-box{
		flex: 1;
		padding: 20rpx 30rpx;
		.cell-box{
			position: relative;
			background: #fff;
			border-radius: 16rpx;
			padding: 36rpx 32rpx;
			.stamp{
				position: absolute;
				right: 0;
				z-index: 9;
			}
			.header{
				.nickname{
					color: #666666;
					font-size: 30rpx;
				}
			}
			.section{
				color: #666666;
				margin: 36rpx 0;
				font-size: 30rpx;
				.info {
					.price{
						color: $main-color;
						font-weight: bold;
						font-size: 56rpx;
						margin-left: 10rpx;
						&:first-letter{
							font-size: .5em;
						}
					}
				}
			}
			.footer{
				text{
					color: #999999;
				}
			}
		}
	}
</style>