pay/dax-pay-h5
1
0
Fork 0
mirror of https://gitee.com/bootx/dax-pay-h5 synced 2026-08-12 07:25:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(h5): 授权页图标改用内联 SVG, 修复微信内置浏览器 iconfont 不显示

Browse Source 
将微信/支付宝授权页成功、失败、复制与盾牌图标从 van-icon 改为内联 SVG，加载态品牌 logo 使用从管理端同步的 wechat/alipay 图标资源。
This commit is contained in:
bootx
2026-07-09 20:02:32 +08:00
parent ae2d769eed
commit 87cca2cda1
5 changed files with 49 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/mobile/views/auth/alipay/index.vue
View File

@@ -5,6 +5,7 @@ import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { authAndGet } from '@/shared/api/channel-auth'
import alipayLogo from '@/shared/assets/icons/channel/alipay.svg'
defineOptions({ name: 'AlipayAuthPage' })
@@ -124,15 +125,15 @@ function handleClose() {
<!-- 加载中 -->
<div v-if="loading" class="loading-box">
<div class="logo-wrapper">
<div class="channel-logo">
支
</div>
<img class="channel-logo" :src="alipayLogo" alt="Alipay" width="64" height="64">
</div>
<van-loading vertical color="#1677ff" size="32px">
<span class="loading-text">{{ t('auth.alipay.loading') }}</span>
</van-loading>
<div class="footer-tip">
<van-icon name="shield-o" />
<svg class="tip-icon" viewBox="0 0 1024 1024" width="14" height="14" aria-hidden="true">
<path fill="#1677ff" d="M512 64 128 224v320c0 198 154 366 384 416 230-50 384-218 384-416V224L512 64z m0 380c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128z" />
</svg>
<span>{{ t('auth.alipay.secureTip') }}</span>
</div>
</div>
@@ -140,7 +141,9 @@ function handleClose() {
<!-- 失败 -->
<div v-else-if="failed" class="result-box">
<div class="status-icon">
<van-icon name="close" color="#ee0a24" size="64px" />
<svg viewBox="0 0 1024 1024" width="64" height="64" aria-hidden="true">
<path fill="#ee0a24" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m193.5 561.7-41.8 41.8L512 515.8 360.3 667.5l-41.8-41.8L470.2 474 318.5 322.3l41.8-41.8L512 432.2l151.7-151.7 41.8 41.8L553.8 474l151.7 151.7z" />
</svg>
</div>
<h3 class="result-title">
{{ t('auth.alipay.failTitle') }}
@@ -158,7 +161,9 @@ function handleClose() {
<!-- 成功结果 -->
<div v-else class="result-box">
<div class="status-icon">
<van-icon name="checked" color="#07c160" size="64px" />
<svg viewBox="0 0 1024 1024" width="64" height="64" aria-hidden="true">
<path fill="#07c160" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m193.5 225.7L416 615.5 318.5 518l-45.3 45.3L416 706l351.8-351.8-45.3-45.3z" />
</svg>
</div>
<h3 class="result-title">
{{ t('auth.alipay.successTitle') }}
@@ -168,7 +173,9 @@ function handleClose() {
<span class="label">{{ t('auth.alipay.userId') }}</span>
<div class="value-box" @click="handleCopy">
<span class="value">{{ authResult.userId || authResult.openId }}</span>
<van-icon name="records" class="copy-icon" />
<svg class="copy-icon" viewBox="0 0 1024 1024" width="16" height="16" aria-hidden="true">
<path fill="#1677ff" d="M768 128H192a64 64 0 0 0-64 64v512h64V192h576V128z m192 192v512a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64V320a64 64 0 0 1 64-64h512a64 64 0 0 1 64 64z m-64 0H384v512h512V320z" />
</svg>
</div>
</div>
</div>
@@ -212,16 +219,10 @@ function handleClose() {
margin-bottom: 24px;
.channel-logo {
display: flex;
align-items: center;
justify-content: center;
display: block;
width: 64px;
height: 64px;
font-size: 28px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #1677ff, #69b1ff);
border-radius: 16px;
object-fit: contain;
}
}
@@ -238,10 +239,9 @@ function handleClose() {
font-size: 12px;
color: #999;
.van-icon {
.tip-icon {
flex-shrink: 0;
margin-right: 4px;
font-size: 14px;
color: #1677ff;
}
}
}
@@ -249,6 +249,7 @@ function handleClose() {
.result-box {
.status-icon {
margin-bottom: 16px;
line-height: 0;
}
.result-title {
@@ -305,8 +306,6 @@ function handleClose() {
.copy-icon {
flex-shrink: 0;
font-size: 16px;
color: #1677ff;
}
}
}

39
src/mobile/views/auth/wechat/index.vue
View File

@@ -5,6 +5,7 @@ import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { authAndGet } from '@/shared/api/channel-auth'
import wechatLogo from '@/shared/assets/icons/channel/wechat.svg'
defineOptions({ name: 'WechatAuthPage' })
@@ -91,15 +92,15 @@ function handleBack() {
<!-- 加载中 -->
<div v-if="loading" class="loading-box">
<div class="logo-wrapper">
<div class="channel-logo">
微
</div>
<img class="channel-logo" :src="wechatLogo" alt="WeChat" width="64" height="64">
</div>
<van-loading vertical color="#07c160" size="32px">
<span class="loading-text">{{ t('auth.wechat.loading') }}</span>
</van-loading>
<div class="footer-tip">
<van-icon name="shield-o" />
<svg class="tip-icon" viewBox="0 0 1024 1024" width="14" height="14" aria-hidden="true">
<path fill="#07c160" d="M512 64 128 224v320c0 198 154 366 384 416 230-50 384-218 384-416V224L512 64z m0 380c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128z" />
</svg>
<span>{{ t('auth.wechat.secureTip') }}</span>
</div>
</div>
@@ -107,7 +108,9 @@ function handleBack() {
<!-- 失败 -->
<div v-else-if="failed" class="result-box">
<div class="status-icon">
<van-icon name="close" color="#ee0a24" size="64px" />
<svg viewBox="0 0 1024 1024" width="64" height="64" aria-hidden="true">
<path fill="#ee0a24" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m193.5 561.7-41.8 41.8L512 515.8 360.3 667.5l-41.8-41.8L470.2 474 318.5 322.3l41.8-41.8L512 432.2l151.7-151.7 41.8 41.8L553.8 474l151.7 151.7z" />
</svg>
</div>
<h3 class="result-title">
{{ t('auth.wechat.failTitle') }}
@@ -125,7 +128,9 @@ function handleBack() {
<!-- 成功结果 -->
<div v-else class="result-box">
<div class="status-icon">
<van-icon name="checked" color="#07c160" size="64px" />
<svg viewBox="0 0 1024 1024" width="64" height="64" aria-hidden="true">
<path fill="#07c160" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m193.5 225.7L416 615.5 318.5 518l-45.3 45.3L416 706l351.8-351.8-45.3-45.3z" />
</svg>
</div>
<h3 class="result-title">
{{ t('auth.wechat.successTitle') }}
@@ -135,7 +140,9 @@ function handleBack() {
<span class="label">{{ t('auth.wechat.openId') }}</span>
<div class="value-box" @click="handleCopy">
<span class="value">{{ authResult.openId }}</span>
<van-icon name="records" class="copy-icon" />
<svg class="copy-icon" viewBox="0 0 1024 1024" width="16" height="16" aria-hidden="true">
<path fill="#07c160" d="M768 128H192a64 64 0 0 0-64 64v512h64V192h576V128z m192 192v512a64 64 0 0 1-64 64H384a64 64 0 0 1-64-64V320a64 64 0 0 1 64-64h512a64 64 0 0 1 64 64z m-64 0H384v512h512V320z" />
</svg>
</div>
</div>
</div>
@@ -179,16 +186,10 @@ function handleBack() {
margin-bottom: 24px;
.channel-logo {
display: flex;
align-items: center;
justify-content: center;
display: block;
width: 64px;
height: 64px;
font-size: 28px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #07c160, #5fd39a);
border-radius: 16px;
object-fit: contain;
}
}
@@ -205,10 +206,9 @@ function handleBack() {
font-size: 12px;
color: #999;
.van-icon {
.tip-icon {
flex-shrink: 0;
margin-right: 4px;
font-size: 14px;
color: #07c160;
}
}
}
@@ -216,6 +216,7 @@ function handleBack() {
.result-box {
.status-icon {
margin-bottom: 16px;
line-height: 0;
}
.result-title {
@@ -272,8 +273,6 @@ function handleBack() {
.copy-icon {
flex-shrink: 0;
font-size: 16px;
color: #07c160;
}
}
}

15
src/pc/views/auth/wechat/Index.vue
View File

@@ -4,6 +4,7 @@ import { onMounted, onUnmounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { authAndGet } from '@/shared/api/channel-auth'
import wechatLogo from '@/shared/assets/icons/channel/wechat.svg'
defineOptions({ name: 'PcWechatAuth' })
@@ -115,7 +116,7 @@ function handleBack() {
<!-- 加载中 -->
<div v-if="loading" class="pc-wechat-auth__panel">
<div class="pc-wechat-auth__logo">
<span>微</span>
<img :src="wechatLogo" alt="WeChat" width="48" height="48">
</div>
<div class="pc-wechat-auth__spinner" />
<p class="pc-wechat-auth__loading-text">
@@ -215,14 +216,16 @@ function handleBack() {
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #07c160, #5fd39a);
border-radius: 18px;
margin-bottom: 28px;
}
.pc-wechat-auth__logo img {
display: block;
width: 64px;
height: 64px;
object-fit: contain;
}
.pc-wechat-auth__spinner {
width: 36px;
height: 36px;

1
src/shared/assets/icons/channel/alipay.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1783580453512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6683" width="200" height="200"><path d="M0 512c0 283.428571 228.571429 512 512 512s512-228.571429 512-512S795.428571 0 512 0 0 228.571429 0 512z" fill="#5A9EF7" p-id="6684"></path><path d="M637.696 558.701714s17.846857-25.892571 35.693714-77.677714c19.638857-51.821714 21.430857-81.408 21.430857-81.408l-142.738285-1.828571V347.794286l173.056-1.828572V308.955429h-174.848V227.547429h-85.650286v81.408H300.470857V345.965714l162.377143-1.828571v55.478857H334.372571v29.622857h267.666286c-1.828571 18.468571-7.168 35.108571-12.507428 51.785143-10.715429 27.721143-21.394286 53.650286-21.394286 53.650286s-124.928-46.262857-192.731429-46.262857c-66.011429 0-146.285714 27.757714-155.245714 107.300571-7.131429 79.542857 37.485714 123.977143 101.741714 138.752 62.427429 14.811429 121.307429 0 173.056-25.892571s101.705143-85.101714 101.705143-85.101715l265.874286 135.058286s16.091429-25.892571 28.525714-49.956571c8.96-16.64 16.091429-35.145143 23.222857-51.821715l-276.589714-98.011428zM362.934857 690.102857c-94.573714 0-112.420571-48.091429-112.420571-81.408 0-33.28 19.638857-72.155429 99.913143-77.677714 78.518857-5.558857 187.355429 59.172571 187.355428 59.172571S457.508571 690.102857 362.934857 690.102857z" fill="#FFFFFF" p-id="6685"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/shared/assets/icons/channel/wechat.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1781956677353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11244" width="200" height="200"><path d="M0 0h1024v1024H0z" fill-opacity="0" p-id="11245"></path><path d="M1024 636c0-141.9-141.9-257.4-301.5-257.4-169.1 0-301.9 115.5-301.9 257.4 0 142.3 132.8 257.4 301.9 257.4 35.4 0 71.1-9 106.5-17.6l97.5 53.4-26.7-88.8C970.9 787 1024 715.8 1024 636z m-399.4-44.4c-17.6 0-35.3-17.7-35.3-35.4 0-17.6 17.7-35.3 35.3-35.3 26.8 0 44.5 17.7 44.5 35.3 0 17.8-17.7 35.4-44.5 35.4z m195.4 0c-17.7 0-35.3-17.7-35.3-35.4 0-17.6 17.6-35.3 35.3-35.3 26.7 0 44.4 17.7 44.4 35.3 0 17.8-18.1 35.4-44.4 35.4zM693.2 347.2c11.6 0 23.3 0.8 34.9 2C696.9 203.1 540.8 94.8 362.5 94.8 163.4 94.8 0 230.4 0 403c0 99.6 54.2 181.4 144.9 244.9L108.8 757l126.8-63.8c45.4 8.8 81.9 18.1 126.8 18.1 11.2 0 22.5-0.4 33.7-1.6C389 685.6 385 660 385 633.9c0-158.2 136.1-286.7 308.2-286.7z m-195.1-98.3c27.3 0 45.3 18.1 45.3 45.4 0 27.3-18.1 45.3-45.3 45.3-27.3 0-54.6-18.1-54.6-45.3 0.5-27.4 27.7-45.4 54.6-45.4z m-253.6 90.7c-27.3 0-54.6-18-54.6-45.3 0-27.3 27.3-45.4 54.6-45.4s45.4 18.1 45.4 45.4c-0.1 26.8-18.1 45.3-45.4 45.3z" fill="#21C110" p-id="11246"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB