hookehuyr

feat: 新增支付确认页面

- 创建支付确认页面组件,包含金额展示和微信支付功能
- 在应用配置中注册新页面路由
- 集成微信小程序支付逻辑,支持订单号参数传递
...@@ -8,6 +8,7 @@ export default { ...@@ -8,6 +8,7 @@ export default {
8 'pages/mine/index', 8 'pages/mine/index',
9 'pages/mine-backup/index', 9 'pages/mine-backup/index',
10 'pages/pay-test/index', 10 'pages/pay-test/index',
11 + 'pages/pay-confirm/index',
11 'pages/pay-bridge/index', 12 'pages/pay-bridge/index',
12 'pages/webview-preview/index', 13 'pages/webview-preview/index',
13 'pages/auth/index', 14 'pages/auth/index',
......
1 +export default {
2 + navigationBarTitleText: '支付确认',
3 +}
1 +<template>
2 + <view class="pay-confirm-page">
3 + <view class="hero-panel">
4 + <text class="page-title">常住随用</text>
5 +
6 + <view class="amount-card">
7 + <text class="amount-label">支付金额:</text>
8 + <view class="amount-value-group">
9 + <text class="amount-value">{{ display_amount }}</text>
10 + <text v-if="has_amount" class="amount-unit">元</text>
11 + </view>
12 + </view>
13 +
14 + <text class="blessing-text">感恩随喜~</text>
15 + </view>
16 +
17 + <view class="footer-area">
18 + <text v-if="status_text" class="status-text">{{ status_text }}</text>
19 +
20 + <button
21 + class="pay-button"
22 + hover-class="pay-button-hover"
23 + :loading="pay_loading"
24 + :disabled="!order_id || pay_loading"
25 + @tap="handlePay"
26 + >
27 + 立即支付
28 + </button>
29 + </view>
30 + </view>
31 +</template>
32 +
33 +<script setup>
34 +import { computed, ref, watch } from 'vue'
35 +import { useLoad } from '@tarojs/taro'
36 +import { useWechatMiniPay } from '@/composables/useWechatMiniPay'
37 +
38 +const order_id = ref('')
39 +const amount = ref('')
40 +const status_text = ref('')
41 +
42 +const {
43 + pay_loading,
44 + last_result_text,
45 + pay_by_order_id,
46 +} = useWechatMiniPay()
47 +
48 +const display_amount = computed(() => {
49 + const normalized_amount = String(amount.value || '').trim().replace(/元$/, '').trim()
50 + return normalized_amount || '--'
51 +})
52 +
53 +const has_amount = computed(() => display_amount.value !== '--')
54 +
55 +watch(last_result_text, (value) => {
56 + if (!pay_loading.value) {
57 + status_text.value = value
58 + }
59 +})
60 +
61 +const handlePay = async () => {
62 + if (!order_id.value || pay_loading.value) return
63 +
64 + status_text.value = ''
65 +
66 + await pay_by_order_id(order_id.value, {
67 + auto_auth: true,
68 + on_status: (text) => {
69 + status_text.value = text
70 + },
71 + })
72 +}
73 +
74 +useLoad((options) => {
75 + order_id.value = String(options?.order_id || '').trim()
76 + amount.value = String(options?.amount || options?.money || '').trim()
77 +
78 + if (!order_id.value) {
79 + status_text.value = '缺少订单编号,暂时无法发起支付。'
80 + }
81 +})
82 +</script>
83 +
84 +<style lang="less">
85 +.pay-confirm-page {
86 + min-height: 100vh;
87 + box-sizing: border-box;
88 + padding: 0 0 calc(72rpx + env(safe-area-inset-bottom));
89 + background: #fff;
90 + display: flex;
91 + flex-direction: column;
92 + justify-content: space-between;
93 +}
94 +
95 +.hero-panel {
96 + min-height: 612rpx;
97 + padding: 132rpx 48rpx 88rpx;
98 + box-sizing: border-box;
99 + background: url('https://cdn.ipadbiz.cn/jls_weapp/images/bgg@2x.png') center top / 100% 100% no-repeat;
100 +}
101 +
102 +.page-title {
103 + display: block;
104 + text-align: center;
105 + font-size: 55rpx;
106 + line-height: 1.2;
107 + font-weight: 600;
108 + color: #2f3133;
109 +}
110 +
111 +.amount-card {
112 + margin-top: 84rpx;
113 + width: 100%;
114 + min-height: 145rpx;
115 + padding: 0 40rpx;
116 + box-sizing: border-box;
117 + background: url('https://cdn.ipadbiz.cn/jls_weapp/images/money_bg@2x.png') center / 100% 100% no-repeat;
118 + display: flex;
119 + align-items: center;
120 + justify-content: space-between;
121 + gap: 24rpx;
122 +}
123 +
124 +.amount-label {
125 + flex-shrink: 0;
126 + font-size: 30rpx;
127 + color: #353535;
128 +}
129 +
130 +.amount-value-group {
131 + display: flex;
132 + align-items: baseline;
133 + justify-content: flex-end;
134 + flex: 1;
135 + min-width: 0;
136 + color: #252525;
137 +}
138 +
139 +.amount-value {
140 + max-width: 100%;
141 + font-size: 72rpx;
142 + line-height: 1;
143 + font-weight: 500;
144 + text-align: right;
145 + overflow: hidden;
146 + text-overflow: ellipsis;
147 + white-space: nowrap;
148 +}
149 +
150 +.amount-unit {
151 + margin-left: 14rpx;
152 + font-size: 30rpx;
153 + line-height: 1;
154 +}
155 +
156 +.blessing-text {
157 + display: block;
158 + margin-top: 72rpx;
159 + text-align: center;
160 + font-size: 32rpx;
161 + line-height: 1.4;
162 + color: #3a3a3a;
163 +}
164 +
165 +.footer-area {
166 + padding: 0 84rpx;
167 + box-sizing: border-box;
168 +}
169 +
170 +.status-text {
171 + display: block;
172 + margin-bottom: 28rpx;
173 + text-align: center;
174 + font-size: 22rpx;
175 + line-height: 1.7;
176 + color: #8a6b45;
177 +}
178 +
179 +.pay-button {
180 + width: 100%;
181 + height: 90rpx;
182 + line-height: 90rpx;
183 + padding: 0;
184 + border: 0;
185 + border-radius: 0;
186 + font-size: 34rpx;
187 + font-weight: 500;
188 + color: #fff6eb;
189 + background: url('https://cdn.ipadbiz.cn/jls_weapp/images/btnn@2x.png') center / 100% 100% no-repeat;
190 +
191 + &::after {
192 + border: 0;
193 + }
194 +
195 + &[disabled] {
196 + opacity: 0.72;
197 + color: #fff6eb;
198 + background: url('https://cdn.ipadbiz.cn/jls_weapp/images/btnn@2x.png') center / 100% 100% no-repeat;
199 + }
200 +}
201 +
202 +.pay-button-hover {
203 + opacity: 0.92;
204 +}
205 +</style>