127 lines
4.1 KiB
Vue
127 lines
4.1 KiB
Vue
<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>
|