powerbank/pages/detail/index.vue

<template>
	<view class="page">
		<u-navbar title="提现明细" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar>
		<view class="title">
			总提现金额：<text>{{totalWithdraw}}</text>元
		</view>
		<view class="bdlist">
			<view class="list" @scrolltolower="onReachBottom" v-for="(item,index) in wateringList" :key="index">
				<view class="left">
					<view class="bh">
						 {{item.orderNo}}<u-icon name="file-text" size="40" style="margin-left: 5rpx;"
							@click="btnfz(item.orderNo)"></u-icon>
					</view>
					<view class="sh" v-if="item.status == 1">
						待审核
					</view>
					<view class="sh" v-if="item.status == 2">
						审核通过
					</view>
					<view class="sh" v-if="item.status == 3">
						驳回
					</view>
					<view class="sh" v-if="item.status == 4">
						已打款
					</view>
					<view class="sj">
						{{item.createTime}}
					</view>
				</view>
				<view class="right" @click="btnnav(item.orderId)">
					<view><u-icon name="arrow-right"></u-icon></view>
					<view class="xia" v-if="item.type == 1">
						<u-icon name="red-packet" size="30" style="margin-right: 5rpx;"></u-icon> 线上
					</view>
					<view class="xia" v-if="item.type == 2">
						<u-icon name="red-packet" size="30" style="margin-right: 5rpx;"></u-icon> 线下
					</view>
					<view class="je">
						￥{{item.amount}}
					</view>
				</view>
			</view>
			
			<view class="" style="width: 448rpx;height: 448rpx;margin: auto;margin-top: 100rpx;text-align: center;"
				v-if="showflag">
				<image style="width: 448rpx;height: 448rpx;"
					src="https://api.ccttiot.com/smartmeter/img/static/ufLi6IZd5kh1MIEZFYTo" mode=""></image>
				<view class="" style="font-size: 30rpx;color: #ccc;margin-top: 30rpx;">暂无更多记录...</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pagenum: 1,
				wateringList: [],
				pagesize: 10, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0,
				bgc: {
					background: '#25CE88'
				},
				totalWithdraw:'',
				showflag: false
			}
		},
		onShow() {
			this.pagenum = 1
			this.wateringList = []
			this.getlist()
		},
		methods: {
			getlist() {
				this.$u.get('/agent/withdraw/list?pageNum=' + this.pagenum + '&pageSize=' + this.pagesize).then(res => {
					if (res.code == 200) {
						this.total = res.total;
						if (this.total > 0) {
							this.showflag = false
						} else {
							this.showflag = true
						}
						this.totalWithdraw = res.totalWithdraw
						this.wateringList = this.wateringList.concat(res.rows);
						this.pagenum++;
					} else {
						// 没有更多数据  
						this.noMoreData = true;
					}
					this.isLoading = false
				})
			},
			onReachBottom() {
				let sum = this.total / this.pagesize
				if (this.pagenum - 1 < sum) {
					this.getlist();
				} else {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
				}
			},
			btnfz(text) {
				uni.setClipboardData({
					data: text,
					success: function(res) {
						// console.log('复制的信息：', text);
						uni.showToast({
							title: '复制成功',
						});
					}
				});
			},
			btnnav(orderId) {
				uni.navigateTo({
					url: '/pages/detail/detailed/index?orderId=' + orderId
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}

	page {
		// background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
		// border-radius: 0rpx 0rpx 0rpx 0rpx;
		background-color: #F4F5F7;
	}

	.page {
		width: 750rpx;
		.title {
			width: 750rpx;
			height: 98rpx;
			line-height: 98rpx;
			background: #FFFFFF;
			padding-left: 40rpx;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
            position: fixed;
			z-index: 99;
			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FF8157;
			}
		}

		.bdlist {
			width: 750rpx;
			height:100%;
			margin-top: 105rpx;
			background: #F4F5F7;
			padding: 24rpx 34rpx;
			box-sizing: border-box;
			padding-bottom: 200rpx !important;
			.noshuju {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #979797;
				margin-top: 38rpx;
			}

			.list {
				width: 680rpx;
				height: 208rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 24rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.left {
					.bh {
						font-size: 28rpx;
						color: #3D3D3D;
					}

					.sh {
						font-weight: 600;
						font-size: 30rpx;
						color: #3D3D3D;
						margin-top: 16rpx;
					}

					.sj {
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
						margin-top: 16rpx;
					}
				}

				.right {
					text-align: right;

					.xia {
						font-size: 28rpx;
						color: #3D3D3D;
						margin-top: 15rpx;
					}

					.je {
						font-weight: 500;
						font-size: 40rpx;
						color: #FF8157;
						margin-top: 15rpx;
					}
				}
			}
		}
	}
</style>