RentWeAppFront/pages/unpaid/unpaid.vue

<template>
	<view class="pending-bill-page">
		<!-- 自定义导航栏 -->
		<custom-navbar title="我的待付" />

		<scroll-view scroll-y class="scroll-content" :refresher-enabled="true" :refresher-triggered="isRefreshing"
			@refresherrefresh="refresh" @scrolltolower="loadMore">
			<view v-if="bills.length > 0">
				<view class="bill-item" v-for="item in bills" :key="item.id">
					<!-- 左侧勾选 + 信息 -->
					<view class="bill-left">
						<u-checkbox v-model="item.checked" @change="toggleCheck(item)" size="32"
							active-color="#EA414A" />
						<view class="bill-info">
							<text class="bill-name">{{ item.feeName }}</text>
							<text class="bill-date">缴费截止：<text class="date">{{ item.dueDate }}</text></text>
						</view>
					</view>

					<!-- 右侧金额 + 支付按钮 -->
					<view class="bill-right">
						<text class="amount">{{ formatMoney(item.amount) }}</text>
						<button class="pay-btn" @click="goPayTest([item])">去支付
						</button>
					</view>
				</view>
			</view>

			<view v-else class="empty">
				<u-empty mode="list" text="暂无待支付账单" />
			</view>

			<u-loadmore :status="loadStatus" />
		</scroll-view>

		<!-- 底部批量支付栏 -->
		<view v-if="selectedBills.length > 0" class="batch-pay-bar">
			<view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
			<view class="batch-pay-bar-center">
				合计：<text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
      </view>
      <view class="batch-pay-bar-right">
				<button class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary"
					size="small" @click="goPayTest(selectedBills)">
					批量支付
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bills: [],
				isRefreshing: false,
				loadStatus: 'more',
				sumAmount: 0,
				selectedBills: [], // 勾选的账单集合
			};
		},
		onLoad() {
			this.loadBills();
		},
		onShow() {},
		methods: {
			loadBills() {
				this.bills = [{
						id: 'p101',
						feeName: '第一期租金（2024.12.01-2024.12.31）',
						dueDate: '2024-12-15',
						amount: 300000,
						checked: false,
					},
					{
						id: 'p102',
						feeName: '第二期物业费（2025.01.01-2025.01.31）',
						dueDate: '2025-01-15',
						amount: 500,
						checked: false,
					},
				];
				this.updateSelected();
			},
			refresh() {
				this.isRefreshing = true;
				setTimeout(() => {
					this.loadBills();
					this.isRefreshing = false;
				}, 1000);
			},

			loadMore() {
				this.loadStatus = 'noMore';
			},

			formatMoney(val) {
				if (val === null || val === undefined || isNaN(val)) return '—';

				val = Number(val);

				if (val >= 10000) {
					return '¥' + (val / 10000).toFixed(2) + '万';
				}

				return '¥' + val.toFixed(2);
			},
			toggleCheck(item) {
				item.checked = !item.checked;
				if (item.checked && !this.selectedBills.some(b => b.id === item.id)) {
					this.selectedBills.push(item);
				} else {
					// 取消勾选时从已选数组移除
					this.selectedBills = this.selectedBills.filter(b => b.id !== item.id);
				}
				let sumFee = 0;
				this.selectedBills.forEach(b => sumFee += b.amount);
				this.sumAmount = sumFee;
			},
			updateSelected() {
				if (!Array.isArray(this.bills)) return;
				this.selectedBills = this.bills.filter(b => b.checked);
			},
			goPayTest(billList) {
				if (!billList || billList.length === 0) return;

				// 模拟后台生成订单返回
				const order = {
					timeStamp: String(Date.now()), // 时间戳
					nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串
					package: 'prepay_id=TEST1234567890', // 模拟预支付ID
					signType: 'MD5',
					paySign: 'TEST_SIGN', // 模拟签名
				};

				// 调用微信支付接口（测试）
				uni.requestPayment({
					...order,
					success: () => {
						uni.showToast({
							title: '支付成功（测试）',
							icon: 'success'
						});
						// 清空勾选状态
						billList.forEach(b => b.checked = false);
						this.updateSelected();
						// 刷新列表（可选）
						this.loadBills();
					},
					fail: () => {
						uni.showToast({
							title: '支付失败（测试）',
							icon: 'none'
						});
					}
				});
			},
			async goPay(billList) {
				if (!billList || billList.length === 0) return;

				try {
					// 1. 请求后台生成订单
					const res = await uni.request({
						url: 'https://api.example.com/payments/create',
						method: 'POST',
						data: {
							userId: this.userId,
							bills: billList.map(b => b.id),
						}
					});

					if (res[1].data.code !== 0) {
						uni.showToast({
							title: res[1].data.msg,
							icon: 'none'
						});
						return;
					}

					const order = res[1].data.data; // 后台返回的支付参数

					// 2. 调用微信支付
					uni.requestPayment({
						timeStamp: order.timeStamp,
						nonceStr: order.nonceStr,
						package: order.package,
						signType: order.signType,
						paySign: order.paySign,
						success: () => {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							});
							// 更新勾选状态
							billList.forEach(b => b.checked = false);
							this.updateSelected();
							// 刷新列表
							this.loadBills();
						},
						fail: () => {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
						}
					});

				} catch (error) {
					console.error('支付请求失败', error);
					uni.showToast({
						title: '支付请求失败',
						icon: 'none'
					});
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.pending-bill-page {
		background: #f7f8fa;
		min-height: 100vh;
		padding-top: 120rpx;
		/* 自定义导航栏高度 */
	}

	.scroll-content {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.bill-item {
		display: flex;
		justify-content: space-between;
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	.bill-left {
		display: flex;
		align-items: center;

		.bill-info {
			display: flex;
			flex-direction: column;

			.bill-name {
				font-size: 30rpx;
				color: #2D2B2C;
				font-weight: 500;
			}

			.bill-date {
				font-size: 26rpx;
				color: #86868C;
				margin-top: 6rpx;

				.date{
					font-size: 24rpx;
					color: #2D2B2C;
				}
			}
		}
	}

	.bill-right {
		flex-direction: column;
		align-items: flex-end;
		width: 30%;

		.amount {
			text-align: center;
			font-size: 30rpx;
			height: 28rpx;
			line-height: 28rpx;
			color: #EF8849;
		}

		.pay-btn {
			margin-top: 12rpx;
			padding: 0 40rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 6rpx; // 圆角
			font-size: 30rpx;
			color: #fff;
			background-color: #F34038;
			text-align: center;
		}

		.btn-text {
			padding-top: 13rpx;
		}
	}

	.batch-pay-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 170rpx;
		padding: 0 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
		z-index: 999;

		.batch-pay-bar-left {
			font-size: 28rpx;
			color: #86868C;
		}

    .batch-pay-bar-center {
      font-size: 28rpx;
      color: #222222;

			.sumAmount {
				font-size: 28rpx;
				color: #ff7f00;
			}
    }

		.batch-pay-bar-right {
			flex-direction: column;
			align-items: flex-end;

			.bottomPayBtn {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 40rpx;
				border-radius: 6rpx;
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				background: #F34038;
			}
		}
	}


	.empty {
		margin-top: 200rpx;
		text-align: center;
	}
</style>