Add Bank Card for Withdrawal
This commit is contained in:
@@ -22,41 +22,96 @@
|
||||
<div>
|
||||
<!-- 提现卡片 -->
|
||||
<div class="rounded-xl shadow-lg p-6 mb-4" style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8));">
|
||||
<div class="flex items-center mb-6">
|
||||
<van-icon name="alipay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">支付宝提现</h1>
|
||||
</div>
|
||||
|
||||
<!-- 支付宝账号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">支付宝账号</label>
|
||||
<van-field v-model="alipayAccount" placeholder="请输入支付宝账号"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="phone-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">可填写支付宝账户绑定的手机号</small>
|
||||
</div>
|
||||
<!-- 支付宝实名姓名 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">实名姓名</label>
|
||||
<van-field v-model="realName" placeholder="请输入支付宝认证姓名"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
validator: (val) =>
|
||||
/^[\u4e00-\u9fa5]{2,4}$/.test(val),
|
||||
},
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="contact-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">请填写支付宝账户认证的真实姓名</small>
|
||||
</div>
|
||||
<!-- 提现方式切换 -->
|
||||
<van-tabs v-model:active="withdrawalType" shrink class="mb-4" title-active-color="var(--van-theme-primary)" @change="onWithdrawalTypeChange">
|
||||
<van-tab title="支付宝" :name="1">
|
||||
<div class="pt-2">
|
||||
<div class="flex items-center mb-4">
|
||||
<van-icon name="alipay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<span class="text-base font-medium" style="color: var(--van-text-color);">支付宝提现</span>
|
||||
</div>
|
||||
<!-- 支付宝账号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">支付宝账号</label>
|
||||
<van-field v-model="alipayAccount" placeholder="请输入支付宝账号"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="phone-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">可填写支付宝账户绑定的手机号</small>
|
||||
</div>
|
||||
<!-- 支付宝实名姓名 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">实名姓名</label>
|
||||
<van-field v-model="realName" placeholder="请输入支付宝认证姓名"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
validator: (val) =>
|
||||
/^[\u4e00-\u9fa5]{2,4}$/.test(val),
|
||||
},
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="contact-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">请填写支付宝账户认证的真实姓名</small>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
<van-tab title="银行卡" :name="2">
|
||||
<div class="pt-2">
|
||||
<div class="flex items-center mb-4">
|
||||
<van-icon name="balance-list-o" class="text-xl mr-2" style="color: var(--van-theme-primary);" />
|
||||
<span class="text-base font-medium" style="color: var(--van-text-color);">银行卡提现</span>
|
||||
</div>
|
||||
<!-- 银行卡号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">银行卡号</label>
|
||||
<van-field v-model="bankCardNo" placeholder="请输入银行卡号" type="number"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="balance-list-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">请填写与实名一致的开户银行卡号</small>
|
||||
</div>
|
||||
<!-- 开户行名称 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">开户行名称</label>
|
||||
<van-field v-model="bankName" placeholder="请输入开户行名称，如：中国工商银行XX支行"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="shop-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
<!-- 收款人姓名 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">收款人姓名</label>
|
||||
<van-field v-model="bankPayeeName" placeholder="请输入银行卡户主姓名"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
validator: (val) =>
|
||||
/^[\u4e00-\u9fa5]{2,4}$/.test(val),
|
||||
},
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="contact-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">需与银行卡开户姓名一致</small>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<!-- 提现金额 -->
|
||||
<div class="mb-4">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">提现金额</label>
|
||||
@@ -94,7 +149,8 @@
|
||||
<ul class="text-xs space-y-1" style="color: var(--van-text-color);">
|
||||
<li>· 每日限提现1次，最低50元</li>
|
||||
<li>· 提现收取6%税收</li>
|
||||
<li>· 到账时间：24小时内</li>
|
||||
<li>· 到账时间：1-3个工作日（需人工审核）</li>
|
||||
<li>· 银行卡提现：请确保开户行、户名与实名一致，到账前会有审核</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -201,11 +257,16 @@
|
||||
</h2>
|
||||
<template v-if="status === 2">
|
||||
<p class="text-sm" style="color: var(--van-text-color-2);">
|
||||
已向
|
||||
<span style="color: var(--van-theme-primary);">{{
|
||||
alipayAccount
|
||||
}}</span>
|
||||
转账
|
||||
<template v-if="withdrawalType === 1">
|
||||
已向
|
||||
<span style="color: var(--van-theme-primary);">{{ alipayAccount }}</span>
|
||||
转账
|
||||
</template>
|
||||
<template v-else>
|
||||
已向
|
||||
<span style="color: var(--van-theme-primary);">尾号{{ displayBankCardTail }}</span>
|
||||
银行卡转账
|
||||
</template>
|
||||
</p>
|
||||
<p class="text-2xl font-bold mt-2" style="color: #10b981;">
|
||||
¥{{ amount }}
|
||||
@@ -227,8 +288,9 @@
|
||||
<!-- 辅助文案 -->
|
||||
<div class="text-xs space-y-1.5" style="color: var(--van-text-color-2);">
|
||||
<template v-if="status === 2">
|
||||
<p>预计24小时内到账</p>
|
||||
<p>可在支付宝账单中查看详情</p>
|
||||
<p>预计1-3个工作日到账（需人工审核）</p>
|
||||
<p v-if="withdrawalType === 1">可在支付宝账单中查看详情</p>
|
||||
<p v-else>请留意银行卡到账通知</p>
|
||||
</template>
|
||||
<template v-if="status === 1">
|
||||
<p>您的申请已进入处理队列</p>
|
||||
@@ -289,6 +351,12 @@ const estimatedActualAmount = computed(() => {
|
||||
return Number(amount.value) - estimatedTaxAmount.value;
|
||||
});
|
||||
|
||||
// 银行卡号尾号（成功弹窗展示用）
|
||||
const displayBankCardTail = computed(() => {
|
||||
const no = (bankCardNo.value || "").replace(/\s/g, "");
|
||||
return no.length >= 4 ? no.slice(-4) : no || "****";
|
||||
});
|
||||
|
||||
// 样式配置
|
||||
const statusIcon = {
|
||||
1: "clock",
|
||||
@@ -325,11 +393,29 @@ const statusMessages = {
|
||||
3: "提现失败",
|
||||
};
|
||||
|
||||
// 表单数据
|
||||
// 提现方式：1=支付宝，2=银行卡
|
||||
const withdrawalType = ref(1);
|
||||
// 表单数据 - 支付宝
|
||||
const alipayAccount = ref("");
|
||||
const amount = ref(0);
|
||||
const availableAmount = ref(null);
|
||||
const realName = ref("");
|
||||
// 表单数据 - 银行卡
|
||||
const bankCardNo = ref("");
|
||||
const bankName = ref("");
|
||||
const bankPayeeName = ref("");
|
||||
|
||||
// 切换提现方式时清空另一侧部分字段（金额保留）
|
||||
const onWithdrawalTypeChange = () => {
|
||||
if (withdrawalType.value === 1) {
|
||||
bankCardNo.value = "";
|
||||
bankName.value = "";
|
||||
bankPayeeName.value = "";
|
||||
} else {
|
||||
alipayAccount.value = "";
|
||||
realName.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { data, error } = await getRevenueInfo();
|
||||
@@ -350,35 +436,58 @@ const validateAmount = (val) => {
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
if (!realName.value.trim()) {
|
||||
showToast("请输入账户实名姓名");
|
||||
return false;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5]{2,4}$/.test(realName.value)) {
|
||||
showToast("请输入2-4位中文姓名");
|
||||
return false;
|
||||
}
|
||||
if (!alipayAccount.value.trim()) {
|
||||
showToast("请输入支付宝账号");
|
||||
return false;
|
||||
}
|
||||
|
||||
const amountNum = Number(amount.value);
|
||||
if (!amount.value || isNaN(amountNum)) {
|
||||
showToast("请输入有效金额");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (amountNum < 50) {
|
||||
showToast("提现金额不能低于50元");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (amountNum > availableAmount.value) {
|
||||
showToast("超过可提现金额");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (withdrawalType.value === 1) {
|
||||
// 支付宝
|
||||
if (!realName.value.trim()) {
|
||||
showToast("请输入账户实名姓名");
|
||||
return false;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5]{2,4}$/.test(realName.value)) {
|
||||
showToast("请输入2-4位中文姓名");
|
||||
return false;
|
||||
}
|
||||
if (!alipayAccount.value.trim()) {
|
||||
showToast("请输入支付宝账号");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
// 银行卡
|
||||
if (!bankCardNo.value.trim()) {
|
||||
showToast("请输入银行卡号");
|
||||
return false;
|
||||
}
|
||||
if (!/^\d{16,19}$/.test(bankCardNo.value.replace(/\s/g, ""))) {
|
||||
showToast("请输入正确的银行卡号");
|
||||
return false;
|
||||
}
|
||||
if (!bankName.value.trim()) {
|
||||
showToast("请输入开户行名称");
|
||||
return false;
|
||||
}
|
||||
if (!bankPayeeName.value.trim()) {
|
||||
showToast("请输入收款人姓名");
|
||||
return false;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5]{2,4}$/.test(bankPayeeName.value)) {
|
||||
showToast("请输入2-4位中文姓名");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
@@ -409,11 +518,19 @@ const confirmWithdraw = async () => {
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
const { applyWithdrawal } = await import('@/api/agent');
|
||||
const { data, error } = await applyWithdrawal({
|
||||
payee_account: alipayAccount.value,
|
||||
const payload = {
|
||||
withdrawal_type: withdrawalType.value,
|
||||
amount: Number(amount.value),
|
||||
payee_name: realName.value,
|
||||
});
|
||||
payee_name: withdrawalType.value === 1 ? realName.value : bankPayeeName.value,
|
||||
};
|
||||
if (withdrawalType.value === 1) {
|
||||
payload.payee_account = alipayAccount.value;
|
||||
} else {
|
||||
payload.payee_account = bankCardNo.value.replace(/\s/g, "");
|
||||
payload.bank_card_no = bankCardNo.value.replace(/\s/g, "");
|
||||
payload.bank_name = bankName.value.trim();
|
||||
}
|
||||
const { data, error } = await applyWithdrawal(payload);
|
||||
if (data.value?.code === 200 && !error.value) {
|
||||
status.value = 1; // 新系统：申请后状态为1（待审核）
|
||||
showTaxConfirmPopup.value = false;
|
||||
@@ -450,6 +567,9 @@ const resetForm = () => {
|
||||
alipayAccount.value = "";
|
||||
amount.value = "";
|
||||
realName.value = "";
|
||||
bankCardNo.value = "";
|
||||
bankName.value = "";
|
||||
bankPayeeName.value = "";
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user