jhlapp/pagesS/yg/txxq.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navlist" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.title }}</view>
		</view>
		<swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300" disable-touch>
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navlist" :key="tabIndex" :style="{ height: height }">
				<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="getData" :style="{ height: height }">
					<!-- 空白页 -->
					<u-empty text="暂无数据" mode="list" v-if="tabItem.loaded && tabItem.list.length == 0"></u-empty>

					<!-- 订单列表 -->
					<view class="order-item" v-for="(item, index) in tabItem.list" :key="index">
						<view class="title-box">
							<view class="title">
								提现金额:{{(item.money*1).toFixed(2)}}({{item.reflectType}})
							</view>
							<view class="title">
								提现账号:{{item.reflectInfo.name}}({{item.reflectInfo.account}})
							</view>
							<view class="time">
								{{$utils.formatDate(item.createTime)}}
							</view>
						</view>
						<view class="money">
							{{item.reflectStatus == 3?"无效":(item.reflectStatus == 4?"未打款":"已打款")}}
						</view>
					</view>
					<u-loadmore :status="tabItem.loadingType" v-if="!(tabItem.loaded && tabItem.list.length == 0)"/>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '',
				tabCurrentIndex: 0,
				navlist: [{
						status: 1,
						title: '未审核',
						list: [],
						page: 1,
						pageSize: 10,
						loaded: false,
						loadingType: 'loadmore'
					},
					{
						status: 2,
						title: '已审核',
						list: [],
						page: 1,
						pageSize: 10,
						loaded: false,
						loadingType: 'loadmore'
					}
				]
			}
		},
		onLoad(opt) {

		},
		onShow() {
			this.getData()
		},
		onReachBottom() {
			// this.getData()
		},
		onReady() {
			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: {
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.getData('tab')
			},
			getData(type) {
				let that = this
				let item = that.navlist[that.tabCurrentIndex]
				if(type == 'tab') {
					item.loadingType = 'loadmore'
					item.list = []
					item.page = 1
					item.loaded = false
				}
				if (item.loadingType == 'nomore' || item.loadingType == 'loading') {
					return
				}
				item.loadingType = 'loading'
				that.$u.api.ygTxList({
					page: item.page,
					pageSize: item.pageSize,
					auditStatus: item.status
				}).then(res => {
					item.list = item.list.concat(res.data)

					item.page++
					if (item.limit == res.data.length) {
						item.loadingType = 'loadmore'
					} else {
						item.loadingType = 'nomore'
					}
					item.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss">
	// .order-item {
	// 	height: 207rpx;
	// 	width: 100%;
	// 	background-color: #fff;
	// 	padding: 30rpx 30rpx;
	// 	line-height: 1.5;
	// 	display: flex;
	// 	align-items: center;
	// 	border-bottom: 1rpx solid #F0F0F0;

	// 	.logo {
	// 		flex-shrink: 0;
	// 		margin-right: 20rpx;
	// 		width: 147rpx;
	// 		height: 147rpx;
	// 		border-radius: 20rpx;
	// 		background-color: #eee;
	// 	}

	// 	.title-box {
	// 		height: 100%;
	// 		flex-grow: 1;
	// 		padding-right: 50rpx;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: space-between;
	// 		align-items: flex-start;

	// 		.title {
	// 			font-size: 30rpx;
	// 			color: #333333;
	// 		}

	// 		.time {
	// 			font-size: 36rpx;
	// 			font-weight: bold;
	// 			color: #E02020;

	// 			&::before {
	// 				content: '￥';
	// 				font-size: 24rpx;
	// 			}
	// 		}
	// 	}

	// 	.money {
	// 		flex-shrink: 0;
	// 		padding: 8rpx 12rpx;
	// 		background: #FEE1D7;
	// 		border-radius: 5px;
	// 		color: #fd5b23;
	// 		font-size: 26rpx;
	// 		text-align: right;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: flex-end;

	// 		image {
	// 			width: 10rpx;
	// 			height: 20rpx;
	// 			margin-left: 15rpx;
	// 		}

	// 		.status {
	// 			color: #AEAEAE;
	// 		}
	// 	}
	// }
	.swiper-box {
		background-color: #fff;
		.order-item:last-child {
			margin-bottom: 60rpx;
		}
	
		.order-item {
			width: 100%;
			// background-color: red;
			padding: 20rpx 30rpx;
			line-height: 1.5;
			display: flex;
			align-items: center;
	
			.title-box {
				flex-grow: 1;
				padding-right: 50rpx;
	
				.title {
					font-size: 30rpx;
					color: #333333;
				}
	
				.time {
					font-size: 26rpx;
					color: #AEAEAE;
				}
			}
	
			.money {
				color: #fd5b23;
				font-size: 26rpx;
				text-align: right;
	
				.status {
					color: #AEAEAE;
				}
			}
		}
	}

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

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

			&.current {
				color: #000;

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