feat: 新增支付确认页面
- 创建支付确认页面组件,包含金额展示和微信支付功能 - 在应用配置中注册新页面路由 - 集成微信小程序支付逻辑,支持订单号参数传递
Showing
3 changed files
with
209 additions
and
0 deletions
| ... | @@ -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', | ... | ... |
src/pages/pay-confirm/index.config.js
0 → 100644
src/pages/pay-confirm/index.vue
0 → 100644
| 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> |
-
Please register or login to post a comment