pay/dax-pay-ui
1
0
Fork 0
mirror of https://gitee.com/bootx/dax-pay-ui synced 2026-08-12 15:35:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(develop-auth): 二维码扫码成功后蒙层灰化, 引导重新生成避免重复扫码(6 语种)

Browse Source
This commit is contained in:
DaxPay Dev
2026-07-20 21:24:15 +08:00
parent 3877fefa14
commit c442e14e11
7 changed files with 63 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/daxpay-admin/src/locales/langs/en-US/payment/develop.json
View File

@@ -189,7 +189,8 @@
"tip": "Scan with Alipay to authorize",
"tipWechat": "Scan with WeChat to authorize",
"tipDouyin": "Scan with Douyin to authorize",
"empty": "No QR code yet"
"empty": "No QR code yet",
"consumed": "QR code has been used. Please regenerate the authorization link."
},
"form": {
"mchNo": "Merchant",

3
apps/daxpay-admin/src/locales/langs/ja-JP/payment/develop.json
View File

@@ -189,7 +189,8 @@
"tip": "Alipayでスキャンして認証します",
"tipWechat": "WeChatでスキャンして認証します",
"tipDouyin": "Douyin でスキャンして認証します",
"empty": "QRコードはまだありません"
"empty": "QRコードはまだありません",
"consumed": "QRコードは使用済みです。認証リンクを再生成してください。"
},
"form": {
"mchNo": "商人",

3
apps/daxpay-admin/src/locales/langs/ko-KR/payment/develop.json
View File

@@ -189,7 +189,8 @@
"tip": "Alipay로 스캔하여 승인하세요",
"tipWechat": "WeChat으로 스캔하여 승인하세요",
"tipDouyin": "승인하려면 Douyin으로 스캔하세요.",
"empty": "아직 QR 코드가 없습니다."
"empty": "아직 QR 코드가 없습니다.",
"consumed": "QR 코드가 사용되었습니다. 인증 링크를 다시 생성해 주세요."
},
"form": {
"mchNo": "상인",

3
apps/daxpay-admin/src/locales/langs/zh-CN/payment/develop.json
View File

@@ -189,7 +189,8 @@
"tip": "请使用支付宝扫码授权",
"tipWechat": "请使用微信扫码授权",
"tipDouyin": "请使用抖音扫码授权",
"empty": "暂未生成二维码"
"empty": "暂未生成二维码",
"consumed": "二维码已使用，请重新生成授权链接"
},
"form": {
"mchNo": "商户",

3
apps/daxpay-admin/src/locales/langs/zh-HK/payment/develop.json
View File

@@ -189,7 +189,8 @@
"tip": "請使用支付寶掃碼授權",
"tipWechat": "請使用微信掃碼授權",
"tipDouyin": "請使用抖音掃碼授權",
"empty": "暫未生成二維碼"
"empty": "暫未生成二維碼",
"consumed": "QR Code 已使用，請重新產生授權鏈接"
},
"form": {
"mchNo": "商户",

3
apps/daxpay-admin/src/locales/langs/zh-TW/payment/develop.json
View File

@@ -189,7 +189,8 @@
"tip": "請使用支付寶掃碼授權",
"tipWechat": "請使用微信掃碼授權",
"tipDouyin": "請使用抖音掃碼授權",
"empty": "暫未生成二維碼"
"empty": "暫未生成二維碼",
"consumed": "QR Code 已使用，請重新產生授權連結"
},
"form": {
"mchNo": "商戶",

53
apps/daxpay-admin/src/views/payment/develop/auth/ChannelAuth.vue
View File

@@ -87,6 +87,9 @@
: $t('payment.develop.auth.qr.tipWechat'),
);
/** 二维码已被扫码消费(轮询到成功态): 阻止重复扫码, 引导重新生成 */
const qrConsumed = computed(() => authResult.value.status === AuthStatus.SUCCESS);
/** 当前标签文案 */
const tagLabel = computed(() => {
if (authType.value === 'wechatMp') return $t('payment.develop.auth.tag.wechatMp');
@@ -381,8 +384,17 @@
<a-col :xs="24" :lg="13" class="auth-display-col">
<div class="display-section">
<div v-if="authUrl.authUrl" class="qr-block">
<div class="qr-card">
<QrCode :value="authUrl.authUrl" :width="220" :margin="0" />
<div class="qr-card-wrap">
<div class="qr-card">
<QrCode :value="authUrl.authUrl" :width="220" :margin="0" />
</div>
<!-- 二维码已扫码消费: 蒙层提示重新生成, 避免重复扫码触发会话失效错误 -->
<div v-if="qrConsumed" class="qr-consumed-mask">
<IconifyIcon icon="lucide:check-circle-2" class="qr-consumed-icon" />
<p class="qr-consumed-text">
{{ $t('payment.develop.auth.qr.consumed') }}
</p>
</div>
</div>
<p class="qr-tip">
<IconifyIcon icon="lucide:scan-line" class="qr-tip-icon" />
@@ -547,6 +559,43 @@
box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
}
/* 二维码卡片 wrapper(包裹卡片与消费蒙层, 提供相对定位基准) */
.qr-card-wrap {
position: relative;
display: inline-block;
}
/* 二维码已扫码消费蒙层: 半透明白底 + 模糊底层二维码, 阻止重复扫码 */
.qr-consumed-mask {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px;
background: rgb(255 255 255 / 92%);
backdrop-filter: blur(2px);
border-radius: 12px;
text-align: center;
}
.qr-consumed-icon {
font-size: 40px;
color: #16a34a;
}
.qr-consumed-text {
margin: 0;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
color: #6b7280;
word-break: break-all;
}
.qr-tip {
display: flex;
align-items: center;