sange-bridge/pages/withdraw/index.vue

<template>
	<app-layout class="c-wrapper dir-top-wrap">
		<!--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">
						<block v-if="arr.data.length || !arr.initData">
							<view class="cell-box" v-for="(item,itemIndex) in arr.data" :key="itemIndex">
								<view class="stamp" v-if="item.status == 1">
									<u-image
											width="150"
											height="150"
											mode="aspectFit"
											src="@/static/images/agree.png"
									></u-image>
								</view>
								<view class="header main-between">
									<text class="nickname">微信昵称：{{vuex_user_data.nickname}}</text>
									<text>{{item.status==1?'已通过':(item.status==2?'已驳回':'带审核')}}</text>
								</view>
								<view class="section main-between cross-cente">
									<view class="info main-left cross-center">
										<text>提现金额</text>
										<view class="price">¥{{item.price}}</view>
									</view>
									<view class="name cross-center">
										{{item.name}}({{item.account}})
									</view>
								</view>
								<view class="footer">
									<text>申请时间：{{item.created_at}}</text>
								</view>
							</view>
							<u-loadmore :status="arr.status" font-size="20" margin-top="40"></u-loadmore>
						</block>
						<block v-else>
							<view class="dir-top-wrap main-center cross-center no-order">
								<text class="tips">暂无数据</text>
							</view>
						</block>
					</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: 0},
					{name: '已通过', value: 1},
					{name: '已驳回', value: 2},
				],
				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){
				let params = {
					status: this.tabs[index].value,
					page: page
				};
				let activeData = this.dataList[index];
				this.$u.api.withdrawLists(params).then(data => {
					uni.stopPullDownRefresh()
					activeData.initData = true;
					activeData.data = this.isReload ? data.data : activeData.data.concat(data.data);
					activeData.currentPage = data.current_page;
					activeData.totalPage = data.last_page;
					if(activeData.currentPage >= activeData.totalPage){
						activeData.status = 'nomore';
					}else{
						activeData.status = 'loadmore';
					}
					this.isReload = false;
					console.log('-->data',activeData)
				})

			},
			// tabs 切换
			changeTabs(index){
				this.currentSwiper = index;
				console.log('-->data',this.dataList[index].initData)
				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">
	.c-wrapper{
		height: 100vh;
	}
	.swiper-box {
		height: calc(100vh - 90rpx);
		.swiper-item {
			height: 100%;
		}
		.scroll-item{
			height: 100%;
			width: 100%;
		}
	}
	.page-box{
		flex: 1;
		padding: 20rpx 30rpx;
		.no-order{
			height: 70vh;
			.tips{
				margin-top: 13upx;
				font-size: 26upx;
				color: #999999;
			}
		}
		.cell-box{
			position: relative;
			background: #fff;
			border-radius: 16rpx;
			padding: 36rpx 32rpx;
			margin-bottom: 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>