fix: 移除收银台多余的打开支付页面按钮,简化扫码支付流程

This commit is contained in:
2026-05-28 02:07:20 +08:00
parent 175022a3fd
commit 23badb4526
+11 -62
View File
@@ -25,21 +25,12 @@
<div class="amount-cny">订单金额¥{{ orderAmount }}</div>
</div>
<div class="address-section" v-if="paymentInfo.payment_url">
<div class="address-label">支付链接</div>
<div class="address-box">
<span class="address-text">{{ paymentInfo.payment_url }}</span>
<el-button type="primary" size="small" @click="copyText(paymentInfo.payment_url)">复制</el-button>
</div>
<el-button type="success" size="small" class="open-link-btn" @click="openPaymentUrl">打开支付页面</el-button>
</div>
<div class="qr-section" v-if="paymentInfo.payment_url">
<div class="qr-section">
<div class="qr-label">扫码支付</div>
<div class="qr-wrapper">
<canvas ref="qrCanvas"></canvas>
</div>
<div class="qr-tip">请使用手机浏览器扫码打开支付页面</div>
<div class="qr-tip">请使用手机浏览器扫码完成支付</div>
</div>
<div class="tips">
@@ -101,12 +92,15 @@ async function createPayment() {
const orderRes: any = await orderApi.getById(orderId)
orderAmount.value = orderRes.data?.total_amount || 0
if (qrCanvas.value && res.data.payment_url) {
await QRCode.toCanvas(qrCanvas.value, res.data.payment_url, {
width: 180,
margin: 2,
color: { dark: '#000', light: '#fff' }
})
if (qrCanvas.value) {
const qrContent = res.data.payment_url || res.data.token || ''
if (qrContent) {
await QRCode.toCanvas(qrCanvas.value, qrContent, {
width: 180,
margin: 2,
color: { dark: '#000', light: '#fff' }
})
}
}
startCountdown()
@@ -141,17 +135,6 @@ function startPolling() {
}, 5000)
}
function copyText(text: string) {
navigator.clipboard.writeText(text)
ElMessage.success('已复制')
}
function openPaymentUrl() {
if (paymentInfo.value?.payment_url) {
window.open(paymentInfo.value.payment_url, '_blank')
}
}
onMounted(() => {
createPayment()
})
@@ -254,35 +237,6 @@ onUnmounted(() => {
}
}
.address-section {
width: 100%;
margin-bottom: 24px;
.address-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 8px;
}
.address-box {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 10px 12px;
.address-text {
flex: 1;
font-size: 13px;
color: #fff;
word-break: break-all;
font-family: monospace;
}
}
}
.qr-section {
margin-bottom: 24px;
text-align: center;
@@ -307,11 +261,6 @@ onUnmounted(() => {
}
}
.open-link-btn {
margin-top: 8px;
width: 100%;
}
.tips {
width: 100%;
background: rgba(255, 255, 255, 0.03);