微信提现信息优化

This commit is contained in:
yml2213
2026-06-21 12:39:55 +08:00
parent cc88f46960
commit efdbb4066c
3 changed files with 97 additions and 3 deletions
@@ -2,6 +2,7 @@
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Upload, Delete, Loading } from '@element-plus/icons-vue'
import wechatReceiveQrExample from '@/assets/wechat-receive-qr-example.png'
import {
createPaymentAccount,
@@ -195,9 +196,21 @@ function removeImage(index: number) {
</el-form-item>
</template>
<el-form-item label="凭证截图">
<el-form-item :label="form.account_type === 'wechat' ? '收款二维码' : '凭证截图'">
<div v-if="form.account_type === 'wechat'" class="wechat-qr-tip">
<div>
<strong>微信收款二维码上传提醒</strong>
<p>请在微信收款码页面点击保存收款码上传保存后的二维码图片</p>
<p>不要上传收款码截图聊天截图或带页面背景的整屏截图</p>
</div>
<img :src="wechatReceiveQrExample" alt="微信收款二维码示例" />
</div>
<div style="font-size: 12px; color: #999; margin-bottom: 8px">
可上传收款码截图等凭证可选最多3张
{{
form.account_type === 'wechat'
? '请上传保存后的微信收款二维码图片(可选,最多3张)'
: '可上传收款码截图等凭证(可选,最多3张)'
}}
</div>
<div class="certificate-upload">
<div v-for="(url, index) in form.certificate_urls" :key="url" class="certificate-item">
@@ -271,6 +284,41 @@ function removeImage(index: number) {
gap: 12px;
}
.wechat-qr-tip {
display: grid;
grid-template-columns: minmax(0, 1fr) 128px;
gap: 12px;
align-items: center;
width: 100%;
margin-bottom: 12px;
border: 1px solid #fed7aa;
border-radius: 8px;
background: #fff7ed;
padding: 12px;
color: #92400e;
}
.wechat-qr-tip strong {
display: block;
margin-bottom: 6px;
color: #c2410c;
font-size: 13px;
}
.wechat-qr-tip p {
margin: 0;
font-size: 12px;
line-height: 1.6;
}
.wechat-qr-tip img {
display: block;
width: 128px;
border-radius: 8px;
border: 1px solid #fde6c8;
background: #ffffff;
}
.certificate-item {
position: relative;
width: 100px;
@@ -18,6 +18,7 @@ import { uploadFile } from '@/shared/api/files'
import { readError } from '@/shared/utils/error'
import { formatCent, formatMoney, yuanToCent } from '@/shared/utils/money'
import { formatDateMinute } from '@/shared/utils/time'
import wechatReceiveQrExample from '@/assets/wechat-receive-qr-example.png'
const router = useRouter()
@@ -461,9 +462,20 @@ function statusType(status: string): 'primary' | 'success' | 'danger' | 'warning
账户名必须与实名认证姓名一致提现将转账到该收款账号请确认账号信息准确
</div>
<div v-if="accountForm.account_type === 'wechat'" class="wechat-qr-tip">
<div>
<strong>微信收款二维码上传提醒</strong>
<p>请在微信收款码页面点击保存收款码上传保存后的二维码图片</p>
<p>不要上传收款码截图聊天截图或带页面背景的整屏截图</p>
</div>
<img :src="wechatReceiveQrExample" alt="微信收款二维码示例" />
</div>
<section class="certificate-section">
<div class="certificate-title">
<span>收款码/凭证截图</span>
<span>{{
accountForm.account_type === 'wechat' ? '微信收款二维码' : '收款码/凭证截图'
}}</span>
<small>最多3张</small>
</div>
<div class="certificate-grid">
@@ -807,6 +819,40 @@ function statusType(status: string): 'primary' | 'success' | 'danger' | 'warning
line-height: 1.6;
}
.wechat-qr-tip {
display: grid;
grid-template-columns: minmax(0, 1fr) 108px;
gap: 10px;
align-items: center;
margin: 12px 0;
padding: 10px;
border: 1px solid #fed7aa;
border-radius: 10px;
background: #fff7ed;
color: #92400e;
}
.wechat-qr-tip strong {
display: block;
margin-bottom: 5px;
color: #c2410c;
font-size: 13px;
}
.wechat-qr-tip p {
margin: 0;
font-size: 12px;
line-height: 1.55;
}
.wechat-qr-tip img {
display: block;
width: 108px;
border: 1px solid #fde6c8;
border-radius: 8px;
background: #ffffff;
}
.certificate-section {
margin: 14px 0;
}