hookehuyr

feat: 新增支付确认页面

- 创建支付确认页面组件,包含金额展示和微信支付功能
- 在应用配置中注册新页面路由
- 集成微信小程序支付逻辑,支持订单号参数传递
......@@ -8,6 +8,7 @@ export default {
'pages/mine/index',
'pages/mine-backup/index',
'pages/pay-test/index',
'pages/pay-confirm/index',
'pages/pay-bridge/index',
'pages/webview-preview/index',
'pages/auth/index',
......
export default {
navigationBarTitleText: '支付确认',
}
<template>
<view class="pay-confirm-page">
<view class="hero-panel">
<text class="page-title">常住随用</text>
<view class="amount-card">
<text class="amount-label">支付金额:</text>
<view class="amount-value-group">
<text class="amount-value">{{ display_amount }}</text>
<text v-if="has_amount" class="amount-unit">元</text>
</view>
</view>
<text class="blessing-text">感恩随喜~</text>
</view>
<view class="footer-area">
<text v-if="status_text" class="status-text">{{ status_text }}</text>
<button
class="pay-button"
hover-class="pay-button-hover"
:loading="pay_loading"
:disabled="!order_id || pay_loading"
@tap="handlePay"
>
立即支付
</button>
</view>
</view>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
import { useLoad } from '@tarojs/taro'
import { useWechatMiniPay } from '@/composables/useWechatMiniPay'
const order_id = ref('')
const amount = ref('')
const status_text = ref('')
const {
pay_loading,
last_result_text,
pay_by_order_id,
} = useWechatMiniPay()
const display_amount = computed(() => {
const normalized_amount = String(amount.value || '').trim().replace(/元$/, '').trim()
return normalized_amount || '--'
})
const has_amount = computed(() => display_amount.value !== '--')
watch(last_result_text, (value) => {
if (!pay_loading.value) {
status_text.value = value
}
})
const handlePay = async () => {
if (!order_id.value || pay_loading.value) return
status_text.value = ''
await pay_by_order_id(order_id.value, {
auto_auth: true,
on_status: (text) => {
status_text.value = text
},
})
}
useLoad((options) => {
order_id.value = String(options?.order_id || '').trim()
amount.value = String(options?.amount || options?.money || '').trim()
if (!order_id.value) {
status_text.value = '缺少订单编号,暂时无法发起支付。'
}
})
</script>
<style lang="less">
.pay-confirm-page {
min-height: 100vh;
box-sizing: border-box;
padding: 0 0 calc(72rpx + env(safe-area-inset-bottom));
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-panel {
min-height: 612rpx;
padding: 132rpx 48rpx 88rpx;
box-sizing: border-box;
background: url('https://cdn.ipadbiz.cn/jls_weapp/images/bgg@2x.png') center top / 100% 100% no-repeat;
}
.page-title {
display: block;
text-align: center;
font-size: 55rpx;
line-height: 1.2;
font-weight: 600;
color: #2f3133;
}
.amount-card {
margin-top: 84rpx;
width: 100%;
min-height: 145rpx;
padding: 0 40rpx;
box-sizing: border-box;
background: url('https://cdn.ipadbiz.cn/jls_weapp/images/money_bg@2x.png') center / 100% 100% no-repeat;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24rpx;
}
.amount-label {
flex-shrink: 0;
font-size: 30rpx;
color: #353535;
}
.amount-value-group {
display: flex;
align-items: baseline;
justify-content: flex-end;
flex: 1;
min-width: 0;
color: #252525;
}
.amount-value {
max-width: 100%;
font-size: 72rpx;
line-height: 1;
font-weight: 500;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.amount-unit {
margin-left: 14rpx;
font-size: 30rpx;
line-height: 1;
}
.blessing-text {
display: block;
margin-top: 72rpx;
text-align: center;
font-size: 32rpx;
line-height: 1.4;
color: #3a3a3a;
}
.footer-area {
padding: 0 84rpx;
box-sizing: border-box;
}
.status-text {
display: block;
margin-bottom: 28rpx;
text-align: center;
font-size: 22rpx;
line-height: 1.7;
color: #8a6b45;
}
.pay-button {
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding: 0;
border: 0;
border-radius: 0;
font-size: 34rpx;
font-weight: 500;
color: #fff6eb;
background: url('https://cdn.ipadbiz.cn/jls_weapp/images/btnn@2x.png') center / 100% 100% no-repeat;
&::after {
border: 0;
}
&[disabled] {
opacity: 0.72;
color: #fff6eb;
background: url('https://cdn.ipadbiz.cn/jls_weapp/images/btnn@2x.png') center / 100% 100% no-repeat;
}
}
.pay-button-hover {
opacity: 0.92;
}
</style>