对接支付

huakai-app/pages/arrearsPayment/arrearsPayment.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="contentStyle">
+		<view class="status-bar"></view>
+		<uni-nav-bar title="缴费" backgroundColor="transparent" :border="false">
+		</uni-nav-bar>
+
+		<scroll-view class="page" scroll-y="true">
+			<view class="container">
+				<view v-if="currentStep === 2" class="container">
+					<view class="success-icon"><text class="icon-check">✓</text></view>
+					<view class="title">缴费成功</view>
+					<view class="desc">成功缴纳{{ paymentItem.type || '' }}费用</view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<view class="btn-section" v-if="currentStep === 1">
+			<button class="pay-btn" @click="handlePay">立即缴费</button>
+		</view>
+		<view class="btn-section" v-if="currentStep === 2">
+			<button class="pay-btn" @click="handleFinished">完成</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { onShow, onLoad } from '@dcloudio/uni-app'
+import { getAppPaymentData, getAppQueryParams, clearAppPaymentData, buildPaymentItemFromApp } from '/pageSubPack/api/appLaunch.js'
+import { getBankMiniProgramParams } from '/pageSubPack/api/apiSub.js'
+import { showApiError } from '/pageSubPack/api/request.js'
+
+const paymentItem = reactive({})
+const currentStep = ref(1)
+const navigatedToPayment = ref(false)
+
+onLoad(() => {
+	const data = loadPaymentItem()
+	Object.assign(paymentItem, data)
+})
+
+onShow(() => {
+	// 从日照银行支付小程序返回后，显示支付成功页
+	if (navigatedToPayment.value) {
+		navigatedToPayment.value = false
+		currentStep.value = 2
+	}
+})
+
+const loadPaymentItem = () => {
+	const appData = getAppPaymentData()
+	if (appData) {
+		console.log('检测到 App 跳转参数:', appData)
+		clearAppPaymentData()
+		const item = buildPaymentItemFromApp(appData)
+		uni.setStorageSync('arrearsPayment', item)
+		return item
+	}
+	const stored = uni.getStorageSync('arrearsPayment')
+	return (typeof stored === 'object' && stored !== null) ? stored : {}
+}
+
+const handlePay = async () => {
+	const apiParams = getAppQueryParams()
+	if (!apiParams) {
+		uni.showToast({ title: '支付参数缺失', icon: 'none' })
+		return
+	}
+	delete apiParams.token
+
+	uni.showLoading({ title: '加载中...', mask: true })
+	try {
+		const res = await getBankMiniProgramParams(apiParams)
+		uni.hideLoading()
+		if (res.code !== 200 || !res.data) {
+			uni.showToast({ title: res.msg || '获取支付参数失败', icon: 'none' })
+			return
+		}
+		navigatedToPayment.value = true
+		wx.navigateToMiniProgram({
+			appId: 'wxc0189436c58b59cd',
+			path: 'pages/pay/pay',
+			extraData: res.data.extraData,
+			envVersion: 'trial',
+			success: () => {
+				console.log('已跳转到日照银行支付小程序')
+			},
+			fail: (err) => {
+				navigatedToPayment.value = false
+				console.error('跳转日照银行支付失败', err)
+				uni.showToast({ title: '拉起支付失败', icon: 'none' })
+			}
+		})
+	} catch (err) {
+		uni.hideLoading()
+		showApiError(err)
+		console.error('支付失败：', err)
+	}
+}
+
+const handleFinished = () => {
+	uni.showModal({
+		title: '提示',
+		content: '请点击右上角关闭按钮返回花开物业',
+		showCancel: false,
+		confirmText: '知道了'
+	})
+}
+</script>
+
+<style lang="scss">
+page { background-color: #f9f9f9; }
+</style>
+
+<style scoped>
+.contentStyle { display: flex; flex-direction: column; height: 100vh; background-color: #f9f9f9; }
+.page { flex: 1; overflow-y: auto; padding: 0 40rpx; box-sizing: border-box; }
+.btn-section { padding: 20rpx 30rpx 40rpx; }
+.pay-btn { width: 100%; height: 100rpx; line-height: 100rpx; background-color: #007aff; color: #fff; border-radius: 16rpx; font-size: 32rpx; border: none; }
+.container { display: flex; flex-direction: column; align-items: center; }
+.success-icon { width: 220rpx; height: 220rpx; border-radius: 50%; background-color: #1677ff; display: flex; align-items: center; justify-content: center; margin-top: 200rpx; margin-bottom: 60rpx; }
+.icon-check { color: #fff; font-size: 130rpx; font-weight: bold; }
+.title { font-size: 40rpx; font-weight: bold; color: #000; margin-bottom: 20rpx; }
+.desc { font-size: 32rpx; color: #666; text-align: center; margin-bottom: 150rpx; }
+.status-bar { width: 100vw; height: 46px; }
+</style>

huakai-app/pages/paymentIndex/paymentIndex.vue

@@ -111,17 +111,17 @@
 	};
 
 	// ===== 获取缴费列表 =====
-	const getPayList = async () => {
-		if (!isLogin.value) return;
-		try {
-			const res = await getTopUpSelectByResident({
-				residentUserId: uni.getStorageSync('userId')
-			})
-			paymentList.value = res.data || []
-		} catch (err) {
-			console.error('列表接口报错：', err)
-		}
-	};
+	// const getPayList = async () => {
+	// 	if (!isLogin.value) return;
+	// 	try {
+	// 		const res = await getTopUpSelectByResident({
+	// 			residentUserId: uni.getStorageSync('userId')
+	// 		})
+	// 		paymentList.value = res.data || []
+	// 	} catch (err) {
+	// 		console.error('列表接口报错：', err)
+	// 	}
+	// };
 
 	// ===== 生命周期 =====
 	onLoad(() => {
@@ -155,7 +155,7 @@
 		// 存入 storage 供 arrearsPayment 使用
 		uni.setStorageSync("arrearsPayment", paymentItem)
 		// 直接跳转支付页
-		uni.redirectTo({ url: "/pageSubPack/payment-list/arrearsPayment" })
+		uni.redirectTo({ url: "/pages/arrearsPayment/arrearsPayment" })
 	}
 
 	// ===== 点击事件（统一用 isLogin 判断） =====
@@ -185,7 +185,7 @@
 			return;
 		}
 		uni.setStorageSync('arrearsPayment', item)
-		uni.redirectTo({ url: '/pageSubPack/payment-list/arrearsPayment' })
+		uni.redirectTo({ url: '/pages/arrearsPayment/arrearsPayment' })
 	};
 
 	// 点击缴费记录