我的房屋流程对接接口，缴费页面功能修改一版

property-uniapp-project/pageSubPack/payment-list/arrearsPayment.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="contentStyle" style="">
 		<view class="status-bar"></view>
-		<uni-nav-bar :title="arrearsPayment" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
+		<uni-nav-bar :title="arrearsPayment.value" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
 			:border="false">
 		</uni-nav-bar>
 
@@ -21,32 +21,9 @@
 					<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
 					<!-- 缴费信息 -->
 					<view class="info-section" style="">
-						<view v-if="arrearsPayment=='物业费'">
-							<view class="info-item">
-								<text class="info-label">户名</text>
-								<text class="info-value">桂花园（别墅）2号楼2层</text>
-							</view>
-							<view class="info-item">
-								<text class="info-label">户主</text>
-								<text class="info-value">周大声</text>
-							</view>
-							<view class="info-item">
-								<text class="info-label">缴费单位</text>
-								<text class="info-value">CT物业</text>
-							</view>
-							<view class="info-item">
-								<text class="info-label">可用余额</text>
-								<text class="info-value">0.00</text>
-							</view>
-							<!-- <view class="info-payAmountItem">
-								<text class="info-payAmount">{{'￥'+payAmount}}</text>
-							</view> -->
-						</view>
-						<view v-else>
-							<view class="info-item" v-if="arrearsPayment=='暖气费'">
-								<text class="info-label">房屋</text>
-								<text class="info-value">桂花园（别墅）2号楼2层</text>
-							</view>
+
+						<view>
+
 							<view class="info-item">
 								<text class="info-label">户号</text>
 								<text class="info-value">101123456</text>
@@ -68,10 +45,13 @@
 								</input>
 							</view>
 							<view style="border-bottom: 2rpx solid #ededed;margin:10rpx 0rpx;"></view>
-							<view class="arrears-row">
+							<view class="arrears-row" v-if="outstandingPayment==true">
 								<text class="arrears-text">当前欠费金额¥{{ arrearsAmount }}元</text>
 								<text class="auto-fill-btn" @click="handleAutoFill">点击自动填入</text>
 							</view>
+							<view class="arrears-row" v-if="outstandingPayment==false">
+								<text class="arrears-text">暂未查询到欠费</text>
+							</view>
 						</view>
 					</view>
 
@@ -102,22 +82,14 @@
 						<view class="pay-way">
 							<text class="way-label">支付方式</text>
 							<view class="way-content">
-								<image class="bank-icon" src="http://47.104.199.163:9090/images/propertyImgs/bank-logo.png" mode="aspectFit">
+								<image class="bank-icon"
+									src="http://47.104.199.163:9090/images/propertyImgs/bank-logo.png" mode="aspectFit">
 								</image>
 								<text class="bank-name">建设银行储蓄卡(8888)</text>
 								<text class="arrow-icon">></text>
 							</view>
 						</view>
 
-						<!-- 银行卡选择列表 -->
-						<!-- <view v-if="showBankList" class="bank-list">
-							<view v-for="(item, index) in bankList" :key="index" class="bank-item"
-								@click="selectBank(item)">
-								<image class="bank-item-icon" :src="item.icon" mode="aspectFit"></image>
-								<text class="bank-item-name">{{ item.name }}</text>
-								<text v-if="selectedBank.id === item.id" class="check-icon">&#xe60c;</text>
-							</view>
-						</view> -->
 
 						<!-- 密码输入框 -->
 						<view class="password-input">
@@ -189,158 +161,198 @@
 
 </template>
 
-<script>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref
+	} from 'vue'
 
+	// 响应式数据
+	const statusBarHeight = ref(20)
+	const outstandingPayment = ref(true)
+	const arrearsPayment = ref(uni.getStorageSync('arrearsPayment'))
+	const currentStep = ref(1)
+	const payAmount = ref('1680.00')
+	const password = ref('')
+	const showBankList = ref(false)
+	const arrearsAmount = ref('21.21')
+	const payNum = ref('')
+
+	// 银行卡列表
+	const bankList = ref([{
+			id: 1,
+			name: '建设银行储蓄卡(8888)',
+			icon: '/static/bank-logo.png'
 		},
-
-		computed: {
-
-
-
-
+		{
+			id: 2,
+			name: '工商银行储蓄卡(6666)',
+			icon: '/static/icbc-logo.png'
 		},
-		created() {
+		{
+			id: 3,
+			name: '招商银行储蓄卡(9999)',
+			icon: '/static/cmb-logo.png'
+		}
+	])
 
-		},
-		onShow() {
+	// 默认选中的银行卡
+	const selectedBank = ref({
+		id: 1,
+		name: '建设银行储蓄卡(8888)',
+		icon: '/static/bank-logo.png'
+	})
 
-		},
+	// 自动填充欠费金额
+	const handleAutoFill = () => {
+		payNum.value = arrearsAmount.value
+		uni.vibrateShort({
+			type: 'light'
+		})
+	}
 
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
+	// 返回
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
+	}
 
+	// 立即缴费
+	const handlePay = () => {
+		if (!payAmount.value || Number(payAmount.value) <= 0) {
+			uni.showToast({
+				title: '请输入正确的缴费金额',
+				icon: 'none'
 			})
-		},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				outstandingPayment: true, //是否欠费
-				arrearsPayment: uni.getStorageSync('arrearsPayment'),
-				currentStep: 1, // 1: 详情页 2: 密码弹窗 3: 成功页
-				payAmount: "1680.00", // 缴费金额
-				password: "", // 输入的密码
-				showBankList: false, // 是否显示银行卡列表
-				arrearsAmount: "21.21",
-				payNum: '',
-				// 银行卡列表
-				bankList: [{
-						id: 1,
-						name: "建设银行储蓄卡(8888)",
-						icon: "/static/bank-logo.png"
-					},
-					{
-						id: 2,
-						name: "工商银行储蓄卡(6666)",
-						icon: "/static/icbc-logo.png"
-					},
-					{
-						id: 3,
-						name: "招商银行储蓄卡(9999)",
-						icon: "/static/cmb-logo.png"
-					}
-				],
-				// 默认选中的银行卡
-				selectedBank: {
-					id: 1,
-					name: "建设银行储蓄卡(8888)",
-					icon: "/static/bank-logo.png"
-				}
+			return
+		}
+		requestPayOrder()
+		// 原支付注释
+		// currentStep.value = 2
+	}
+	// 统一下单后后端返回的支付参数
+	const payInfo = ref({
+		appId: '', // 公众号/小程序ID
+		timeStamp: '', // 时间戳
+		nonceStr: '', // 随机串
+		package: '', // 数据包 如 prepay_id=xxx
+		signType: 'MD5', // 签名方式
+		paySign: '' // 签名
+	})
+
+	// 1. 先请求后端接口生成预支付订单
+	const requestPayOrder = async () => {
+		try {
+			uni.showLoading({
+				title: '发起支付中'
+			})
+
+			const res = await getMyHouseList({
+				deviceNo: '设备号',
+				money: 0.01, // 金额
+				openid: '用户openid'
+			})
+
+
+			uni.hideLoading()
+
+			// 后端返回支付所需参数
+			const data = res.data
+			if (data.code !== 0) {
+				uni.showToast({
+					title: data.msg || '下单失败',
+					icon: 'none'
+				})
+				return
 			}
-		},
 
+			// 赋值支付参数
+			payInfo.value = {
+				appId: data.appId,
+				timeStamp: data.timeStamp,
+				nonceStr: data.nonceStr,
+				package: data.package,
+				signType: data.signType,
+				paySign: data.paySign
+			}
 
-		methods: {
-			handleAutoFill() {
-				this.payNum = this.arrearsAmount;
-				uni.vibrateShort({
-					type: "light"
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			// 点击立即缴费
-			handlePay() {
-				if (!this.payAmount || Number(this.payAmount) <= 0) {
+			// 2. 调起微信支付
+			wx.requestPayment({
+				...payInfo.value,
+				success(res) {
+					console.log('支付成功', res)
 					uni.showToast({
-						title: "请输入正确的缴费金额",
-						icon: "none"
-					});
-					return;
+						title: '支付成功'
+					})
+					currentStep.value == 3
+				},
+				fail(err) {
+					console.log('支付失败', err)
+					uni.showToast({
+						title: '支付取消或失败',
+						icon: 'none'
+					})
 				}
-				this.currentStep = 2;
-			},
+			})
 
-			// 关闭密码弹窗
-			closePasswordModal() {
-				this.currentStep = 1;
-				this.password = "";
-				this.showBankList = false;
-			},
+		} catch (err) {
+			uni.hideLoading()
+			console.log('请求异常', err)
+			uni.showToast({
+				title: '支付请求异常',
+				icon: 'none'
+			})
+		}
+	}
+	// 关闭密码弹窗
+	const closePasswordModal = () => {
+		currentStep.value = 1
+		password.value = ''
+		showBankList.value = false
+	}
 
-			// 选择银行卡
-			selectBank(item) {
-				this.selectedBank = item;
-				this.showBankList = false;
-			},
+	// 选择银行卡
+	const selectBank = (item) => {
+		selectedBank.value = item
+		showBankList.value = false
+	}
 
-			// 输入密码
-			inputPassword(num) {
-				if (this.password.length >= 6) return;
-				this.password += num.toString();
+	// 输入密码
+	const inputPassword = (num) => {
+		if (password.value.length >= 6) return
+		password.value += num.toString()
 
-				// 密码满6位，自动提交
-				if (this.password.length === 6) {
-					this.handleConfirmPay();
-				}
-			},
+		// 满6位自动提交
+		if (password.value.length === 6) {
+			handleConfirmPay()
+		}
+	}
 
-			// 删除密码
-			deletePassword() {
-				this.password = this.password.slice(0, -1);
-			},
+	// 删除密码
+	const deletePassword = () => {
+		password.value = password.value.slice(0, -1)
+	}
 
-			// 确认支付
-			handleConfirmPay() {
-				// 这里模拟支付请求，实际项目中调用后端接口
-				uni.showLoading({
-					title: "支付中...",
-					mask: true
-				});
-
-				setTimeout(() => {
-					uni.hideLoading();
-					// 支付成功，跳转到成功页
-					this.currentStep = 3;
-					this.password = "";
-					this.showBankList = false;
-				}, 1500);
-			},
-
-			// 返回生活缴费列表
-			handleBackToList() {
-				uni.redirectTo({
-					url: '/pageSubPack/payment-list/paymentIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			}
-
-		},
+	// 确认支付（模拟）
+	const handleConfirmPay = () => {
+		uni.showLoading({
+			title: '支付中...',
+			mask: true
+		})
 
+		setTimeout(() => {
+			uni.hideLoading()
+			currentStep.value = 3
+			password.value = ''
+			showBankList.value = false
+		}, 1500)
+	}
 
+	// 返回缴费列表
+	const handleBackToList = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/payment-list/paymentIndex'
+		})
 	}
 </script>
 <style lang="scss">