104 lines
3.5 KiB
Vue
104 lines
3.5 KiB
Vue
<template>
|
|
<view class="contentStyle">
|
|
<view class="status-bar"></view>
|
|
<uni-nav-bar :title="paymentItem.type || '缴费'" left-icon="left" @clickLeft="goBack"
|
|
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="handleBackToList">返回</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue'
|
|
import { onShow, onLoad } from '@dcloudio/uni-app'
|
|
import { getAppPaymentData, clearAppPaymentData, buildPaymentItemFromApp } from '/pageSubPack/api/appLaunch.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
|
|
wx.navigateBackApp({
|
|
success: () => console.log('已返回花开物业 App'),
|
|
fail: () => {
|
|
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 goBack = () => uni.redirectTo({ url: '/pages/paymentIndex/paymentIndex' })
|
|
|
|
const handlePay = () => {
|
|
navigatedToPayment.value = true
|
|
wx.navigateToMiniProgram({
|
|
appId: 'wxc0189436c58b59cd',
|
|
path: 'pages/pay/pay',
|
|
extraData: { ...paymentItem },
|
|
envVersion: 'trial',
|
|
success: () => console.log('已跳转到日照银行支付小程序'),
|
|
fail: (err) => {
|
|
navigatedToPayment.value = false
|
|
console.error('跳转日照银行支付失败', err)
|
|
uni.showToast({ title: '拉起支付失败', icon: 'none' })
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleBackToList = () => uni.redirectTo({ url: '/pages/paymentIndex/paymentIndex' })
|
|
</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>
|