+
+ 收款商户:
+ {{ merchantInfo.merchantName }}
-
- 转账金额:
- ¥ {{ finalPaymentAmount }}
-
-
-
- 请使用银行APP或网银进行转账,转账完成后系统会自动审核。
-
+
+ 收款账号:
+ {{ merchantInfo.accountNumber }}
+ 复制
+
+
+
+
+
+
+
+ 转账金额:
+ ¥ {{ finalPaymentAmount }}
+
+
+
+ 请使用银行APP或网银进行转账,转账完成后系统会自动审核。
+
+
+
请使用{{ paymentMethod === 2 ? '支付宝' : '微信' }}扫码支付
@@ -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;
+ }
}
\ No newline at end of file