141 lines
5.3 KiB
Vue
141 lines
5.3 KiB
Vue
<template>
|
||
<view class="contentStyle">
|
||
<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 class="container" v-if="currentStep === 3">
|
||
<view class="fail-icon"><text class="icon-fail">✕</text></view>
|
||
<view class="title">缴费失败</view>
|
||
<view class="desc">未能完成缴费，请重新尝试</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" open-type="launchApp" app-parameter="payResult=success" @error="handleLaunchAppError">
|
||
返回
|
||
</button>
|
||
</view>
|
||
<view class="btn-section" v-if="currentStep === 3">
|
||
<!-- <button class="retry-btn" @click="handleRetry">重新缴费</button> -->
|
||
<button class="pay-btn" open-type="launchApp" app-parameter="payResult=fail" @error="handleLaunchAppError">
|
||
返回
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import { onShow, onLoad } from '@dcloudio/uni-app'
|
||
import { getAppPaymentData, getAppQueryParams, clearAppPaymentData, buildPaymentItemFromApp, getPaymentReturnResult, clearPaymentReturnResult, resolvePaymentResult } 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
|
||
const result = resolvePaymentResult(getPaymentReturnResult())
|
||
clearPaymentReturnResult()
|
||
currentStep.value = result === 'fail' ? 3 : 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
|
||
delete apiParams.billId // billId 已归一化为 billIds 数组，删除冗余字段
|
||
console.log('-----传递小程序参数2222------:', apiParams)
|
||
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
|
||
clearPaymentReturnResult()
|
||
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 handleLaunchAppError = () => {
|
||
uni.showToast({ title: '请点击左上角关闭返回', icon: 'none', duration: 2000 })
|
||
}
|
||
|
||
// const handleRetry = () => {
|
||
// currentStep.value = 1
|
||
// }
|
||
</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; }
|
||
.fail-icon { width: 220rpx; height: 220rpx; border-radius: 50%; background-color: #fa5151; display: flex; align-items: center; justify-content: center; margin-top: 200rpx; margin-bottom: 60rpx; }
|
||
.icon-fail { color: #fff; font-size: 130rpx; font-weight: bold; }
|
||
.retry-btn { width: 100%; height: 100rpx; line-height: 100rpx; background-color: #fff; color: #007aff; border: 2rpx solid #007aff; border-radius: 16rpx; font-size: 32rpx; margin-bottom: 20rpx; }
|
||
.title { font-size: 40rpx; font-weight: bold; color: #000; margin-bottom: 20rpx; }
|
||
.desc { font-size: 32rpx; color: #666; text-align: center; margin-bottom: 150rpx; }
|
||
</style>
|