赛事报名银行卡支付显示
This commit is contained in:
parent
cf1558071a
commit
a57a748cc2
@ -82,9 +82,13 @@ export const usereventregistrationListGet = (params) => {
|
||||
* teamProjectLimit: number
|
||||
* },
|
||||
* feeConfig: {
|
||||
* chargeMode: string,
|
||||
* price: number
|
||||
* },
|
||||
chargeMode: string,
|
||||
price: number,
|
||||
merchantName: string,
|
||||
creditCode: string,
|
||||
bankName: string,
|
||||
accountNumber: string
|
||||
},
|
||||
* parentProjectTypeName: string,
|
||||
* registrationId: number,
|
||||
* userRegistrationStatus: string
|
||||
|
||||
@ -1220,7 +1220,9 @@ const viewCertificate = async (id) => {
|
||||
try {
|
||||
const { succeeded, data, errors } = await eventscoreGetCertificateDetailGet(id);
|
||||
if (succeeded) {
|
||||
if (data?.url) {
|
||||
if (data?.CertificateUrl) {
|
||||
window.open(data.CertificateUrl, '_blank');
|
||||
} else if (data?.url) {
|
||||
window.open(data.url, '_blank');
|
||||
} else if (data?.Url) {
|
||||
window.open(data.Url, '_blank');
|
||||
|
||||
@ -286,29 +286,37 @@
|
||||
<el-skeleton :rows="10" animated v-if="previewLoading" />
|
||||
<template v-else>
|
||||
<!-- 银行转账信息显示区域 -->
|
||||
<div v-if="paymentData && paymentMethod === 3" class="bank-transfer-section">
|
||||
<div class="bank-transfer-title">银行卡转账</div>
|
||||
<div class="bank-transfer-content">
|
||||
<div class="info-item">
|
||||
<text class="info-label">收款商户：</text>
|
||||
<text class="info-value">上海跃动文化科技有限公司</text>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<text class="info-label">收款账号：</text>
|
||||
<text class="info-value">456498465198456261</text>
|
||||
<el-button type="primary" size="small" @click="copyAccount">复制</el-button>
|
||||
</div>
|
||||
<div v-if="paymentData && paymentMethod === 3" class="bank-transfer-section">
|
||||
<div class="bank-transfer-title">银行卡转账</div>
|
||||
|
||||
<!-- 商户信息显示 -->
|
||||
<div v-if="merchantInfo.merchantName && merchantInfo.accountNumber" class="bank-transfer-content">
|
||||
<div class="info-item">
|
||||
<text class="info-label">收款商户：</text>
|
||||
<text class="info-value">{{ merchantInfo.merchantName }}</text>
|
||||
</div>
|
||||
<div class="payment-amount">
|
||||
<span class="amount-label">转账金额：</span>
|
||||
<span class="amount-value">¥ {{ finalPaymentAmount }}</span>
|
||||
</div>
|
||||
<div class="payment-tip">
|
||||
<el-alert title="提示" type="info" :closable="false">
|
||||
请使用银行APP或网银进行转账，转账完成后系统会自动审核。
|
||||
</el-alert>
|
||||
<div class="info-item">
|
||||
<text class="info-label">收款账号：</text>
|
||||
<text class="info-value">{{ merchantInfo.accountNumber }}</text>
|
||||
<el-button type="primary" size="small" @click="copyAccount">复制</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无商户信息时的提示 -->
|
||||
<div v-else class="bank-transfer-content">
|
||||
<el-empty description="暂未配置商户信息，请联系赛事管理员" :image-size="80" />
|
||||
</div>
|
||||
|
||||
<div class="payment-amount">
|
||||
<span class="amount-label">转账金额：</span>
|
||||
<span class="amount-value">¥ {{ finalPaymentAmount }}</span>
|
||||
</div>
|
||||
<div class="payment-tip">
|
||||
<el-alert title="提示" type="info" :closable="false">
|
||||
请使用银行APP或网银进行转账，转账完成后系统会自动审核。
|
||||
</el-alert>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付二维码显示区域（微信/支付宝） -->
|
||||
<div v-else-if="paymentData" class="payment-qrcode-section">
|
||||
<div class="qrcode-title">请使用{{ paymentMethod === 2 ? '支付宝' : '微信' }}扫码支付</div>
|
||||
@ -903,6 +911,12 @@ const pollingStatus = ref('');
|
||||
let pollingTimer = null;
|
||||
let qrcodeInstance = null;
|
||||
|
||||
// 商户信息
|
||||
const merchantInfo = ref({
|
||||
merchantName: '',
|
||||
accountNumber: ''
|
||||
});
|
||||
|
||||
// 计算最终支付金额
|
||||
const finalPaymentAmount = computed(() => {
|
||||
if (!previewData.value) return 0;
|
||||
@ -963,6 +977,11 @@ const clearRegisterState = () => {
|
||||
couponValidationLoading.value = false;
|
||||
validatedCoupon.value = null;
|
||||
showCouponSection.value = true;
|
||||
// 商户信息
|
||||
merchantInfo.value = {
|
||||
merchantName: '',
|
||||
accountNumber: ''
|
||||
};
|
||||
};
|
||||
|
||||
const currentEventId = ref(null);
|
||||
@ -1033,6 +1052,14 @@ const openRegistrationDialog = async (row) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取商户信息
|
||||
if (data?.feeConfig) {
|
||||
merchantInfo.value = {
|
||||
merchantName: data.feeConfig.merchantName || '',
|
||||
accountNumber: data.feeConfig.accountNumber || ''
|
||||
};
|
||||
}
|
||||
|
||||
// 保存完整的详情数据，用于项目类型显示等
|
||||
detailData.value = data;
|
||||
projects.value = Array.isArray(data?.projects) ? data.projects : [];
|
||||
@ -2003,12 +2030,17 @@ const refreshPayment = async () => {
|
||||
|
||||
// 复制银行账号
|
||||
const copyAccount = () => {
|
||||
navigator.clipboard.writeText('456498465198456261').then(() => {
|
||||
const accountNumber = merchantInfo.value.accountNumber;
|
||||
if (!accountNumber) {
|
||||
ElMessage.warning('暂无收款账号可复制');
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText(accountNumber).then(() => {
|
||||
ElMessage.success('账号已复制');
|
||||
}).catch(() => {
|
||||
// 如果clipboard API不可用，使用备用方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = '456498465198456261';
|
||||
textArea.value = accountNumber;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
@ -2559,7 +2591,29 @@ const handleCreateOrderAndPay = async () => {
|
||||
}
|
||||
|
||||
.payment-tip {
|
||||
margin: 24px 0;
|
||||
margin: 24px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert__content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert__title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.free-project-hint {
|
||||
@ -2780,6 +2834,51 @@ const handleCreateOrderAndPay = async () => {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 银行转账区域响应式适配 */
|
||||
.bank-transfer-section {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.bank-transfer-title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.bank-transfer-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.bank-transfer-content .info-item {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bank-transfer-content .info-value {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.payment-tip {
|
||||
margin: 16px 0;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert__content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert__title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
@ -2791,5 +2890,63 @@ const handleCreateOrderAndPay = async () => {
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 小屏幕银行转账区域适配 */
|
||||
.bank-transfer-section {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.bank-transfer-title {
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.bank-transfer-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.bank-transfer-content .info-item {
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.bank-transfer-content .info-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.bank-transfer-content .info-value {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.amount-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.payment-tip {
|
||||
margin: 12px 0;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert {
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert__content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.payment-tip .el-alert__title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user