offerpai/offerpai_web
7
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

新版交互调整

Browse Source
This commit is contained in:
xuxin
2026-06-24 19:03:41 +08:00
parent 065553f53e
commit 8143a89dab
37 changed files with 4929 additions and 4409 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MemberDialog.vue
+31 -5
View File
@@ -90,7 +90,7 @@
<!-- 用户评价 -->
<div class="member-dialog__testimonial">
<div class="member-dialog__testimonial-avatar">
<img src="@/assets/images/home/avatar-temporary.png" alt="用户头像" />
<img src="@/assets/images/home/alex-avatar.png" alt="用户头像" />
</div>
<div class="member-dialog__testimonial-content">
<div class="member-dialog__testimonial-stars">★★★★★</div>
@@ -107,7 +107,7 @@
<div v-else-if="currentView === 'order1'" class="member-dialog__order">
<!-- 顶部导航 -->
<div class="member-dialog__order-header">
<span class="member-dialog__order-back" @click="currentView = 'intro2'">‹ 返回会员介绍</span>
<span class="melmber-dialog__order-back" @click="currentView = 'intro2'">‹ 返回会员介绍</span>
<!-- 步骤条 — 二维码弹窗打开时显示第2步 -->
<div class="member-dialog__steps">
<div class="member-dialog__step" :class="showQrCode ? 'member-dialog__step--done' : 'member-dialog__step--active'">
@@ -340,15 +340,23 @@
<h3 class="member-dialog__qrcode-subtitle">{{ selectedPayment === 'alipay' ? '扫码完成支付' : '扫码完成支付' }}</h3>
<p class="member-dialog__qrcode-desc">{{ selectedPayment === 'alipay' ? '请在支付宝页面完成支付，完成后点击下方按钮确认。' : '请使用微信 App 扫描二维码完成支付，完成后此窗口会自动关闭。' }}</p>
<!-- 支付宝：iframe 渲染支付表单 -->
<div class="member-dialog__qrcode-image">
<div v-if="selectedPayment === 'alipay' && paymentFormHtml" class="member-dialog__qrcode-image">
<iframe
v-if="paymentFormHtml"
:srcdoc="paymentFormHtml"
frameborder="0"
class="member-dialog__payment-iframe"
scrolling="auto"
></iframe>
</div>
<!-- 微信：使用 qrcode.js 渲染二维码 -->
<div v-if="selectedPayment === 'wechat' && wechatCodeUrl" class="member-dialog__qrcode-image">
<iframe
:srcdoc="wechatQrHtml"
frameborder="0"
class="member-dialog__wechat-qr-iframe"
scrolling="no"
></iframe>
</div>
<!-- 金额 -->
<div class="member-dialog__qrcode-amount">¥{{ currentPlan.price }}</div>
</div>
@@ -428,6 +436,15 @@ const showQrCode = ref(false)
/** 支付宝表单 HTML（用于 iframe 渲染） */
const paymentFormHtml = ref('')
/** 微信支付 code_url（用于生成二维码） */
const wechatCodeUrl = ref('')
/** 微信二维码 iframe 的 srcdoc HTML */
const wechatQrHtml = computed(() => {
if (!wechatCodeUrl.value) return ''
return `<!DOCTYPE html><html><head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"><\/script><style>body{display:flex;align-items:center;justify-content:center;margin:0;height:100%;}</style></head><body><div id="qrcode"></div><script>new QRCode(document.getElementById("qrcode"),{text:"${wechatCodeUrl.value}",width:200,height:200,colorDark:"#000000",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.H});<\/script></body></html>`
})
/** 当前订单ID（用于后续轮询支付状态） */
const orderId = ref('')
@@ -442,6 +459,7 @@ watch(() => props.modelValue, (val) => {
showQrCode.value = false
agreeProtocol.value = false
paymentFormHtml.value = ''
wechatCodeUrl.value = ''
orderId.value = ''
// 清除轮询计时器
if (pollTimer) {
@@ -586,7 +604,15 @@ async function handleShowQrCode() {
})
if (res.data) {
orderId.value = String(res.data.orderId)
paymentFormHtml.value = res.data.payData
if (selectedPayment.value === 'wechat') {
// 微信支付 — payData 为 code_url，用于生成二维码
wechatCodeUrl.value = res.data.payData
paymentFormHtml.value = ''
} else {
// 支付宝 — payData 为 HTML 表单
paymentFormHtml.value = res.data.payData
wechatCodeUrl.value = ''
}
showQrCode.value = true
// 创建订单成功后立即开始轮询支付状态
confirmPayment()