team/zacfrontuser_v2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bank

Browse Source
This commit is contained in:
Mrx
2026-03-23 17:13:59 +08:00
parent 06322b8ad0
commit 88d2b9ec1b
2 changed files with 118 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/agent.js
View File

@@ -218,8 +218,12 @@ export function getWithdrawalList(params) {
* 申请提现 * 申请提现
* @param {object} params - 提现参数 * @param {object} params - 提现参数
* @param {number} params.amount - 提现金额 * @param {number} params.amount - 提现金额
* @param {string} params.payee_account - 收款账户 * @param {number} params.withdraw_method - 提现方式：1=支付宝，2=银行卡
* @param {string} params.payee_name - 收款人姓名 * @param {string} params.payee_account - 收款账户（支付宝）
* @param {string} params.payee_name - 收款人姓名/持卡人姓名
* @param {string} params.bank_name - 开户行（银行卡）
* @param {string} params.bank_card_no - 银行卡号（银行卡）
* @param {string} params.bank_reserved_mobile - 银行预留手机号（银行卡）
*/ */
export function applyWithdrawal(params) { export function applyWithdrawal(params) {
return useApiFetch("/agent/withdrawal/apply").post(params).json(); return useApiFetch("/agent/withdrawal/apply").post(params).json();

137
src/views/Withdraw.vue
View File

@@ -23,26 +23,32 @@
<!-- 提现卡片 --> <!-- 提现卡片 -->
<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="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"> <div class="flex items-center mb-6">
<van-icon name="alipay" class="text-xl mr-2" style="color: #1677FF;" /> <van-icon :name="withdrawMethod === 1 ? 'alipay' : 'balance-o'" class="text-xl mr-2" style="color: #1677FF;" />
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">支付宝提现</h1> <h1 class="text-xl font-bold" style="color: var(--van-text-color);">{{ withdrawMethod === 1 ? "支付宝提现" : "银行卡提现" }}</h1>
</div> </div>
<!-- 支付宝账号 -->
<div class="mb-6"> <div class="mb-6">
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">支付宝账号</label> <label class="text-sm mb-2 block" style="color: var(--van-text-color);">提现方式</label>
<van-field v-model="alipayAccount" placeholder="请输入支付宝账号" <div class="flex justify-center items-center gap-3">
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" <button type="button"
:rules="[{ required: true, message: ' ' }]"> class="withdraw-method-btn"
<template #left-icon> :class="{ active: withdrawMethod === 1 }"
<van-icon name="phone-o" style="color: var(--van-text-color-2);" /> @click="withdrawMethod = 1">
</template> 支付宝
</van-field> </button>
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">可填写支付宝账户绑定的手机号</small> <button type="button"
class="withdraw-method-btn"
:class="{ active: withdrawMethod === 2 }"
@click="withdrawMethod = 2">
银行卡
</button>
</div>
</div> </div>
<!-- 支付宝实名姓名 -->
<!-- 收款人姓名 -->
<div class="mb-6"> <div class="mb-6">
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">实名姓名</label> <label class="text-sm mb-2 block" style="color: var(--van-text-color);">收款人姓名</label>
<van-field v-model="realName" placeholder="请输入支付宝认证姓名" <van-field v-model="realName" :placeholder="withdrawMethod === 1 ? '请输入支付宝认证姓名' : '请输入持卡人姓名'"
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[ class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
{ {
required: true, required: true,
@@ -55,7 +61,38 @@
<van-icon name="contact-o" style="color: var(--van-text-color-2);" /> <van-icon name="contact-o" style="color: var(--van-text-color-2);" />
</template> </template>
</van-field> </van-field>
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">请填写支付宝账户认证的真实姓名</small> </div>
<!-- 支付宝账号 -->
<div v-if="withdrawMethod === 1" 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 v-else class="space-y-4 mb-6">
<div>
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">银行卡号</label>
<van-field v-model="bankCardNo" placeholder="请输入银行卡号"
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" />
</div>
<div>
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">开户行</label>
<van-field v-model="bankName" placeholder="请输入开户行"
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" />
</div>
<div>
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">预留手机号</label>
<van-field v-model="bankReservedMobile" placeholder="请输入银行预留手机号"
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" />
</div>
</div> </div>
<!-- 提现金额 --> <!-- 提现金额 -->
<div class="mb-4"> <div class="mb-4">
@@ -201,11 +238,8 @@
</h2> </h2>
<template v-if="status === 2"> <template v-if="status === 2">
<p class="text-sm" style="color: var(--van-text-color-2);"> <p class="text-sm" style="color: var(--van-text-color-2);">
已向 已提交至
<span style="color: var(--van-theme-primary);">{{ <span style="color: var(--van-theme-primary);">{{ transferTargetText }}</span>
alipayAccount
}}</span>
转账
</p> </p>
<p class="text-2xl font-bold mt-2" style="color: #10b981;"> <p class="text-2xl font-bold mt-2" style="color: #10b981;">
¥{{ amount }} ¥{{ amount }}
@@ -326,10 +360,17 @@ const statusMessages = {
}; };
// 表单数据 // 表单数据
const withdrawMethod = ref(1);
const alipayAccount = ref(""); const alipayAccount = ref("");
const bankCardNo = ref("");
const bankName = ref("");
const bankReservedMobile = ref("");
const amount = ref(0); const amount = ref(0);
const availableAmount = ref(null); const availableAmount = ref(null);
const realName = ref(""); const realName = ref("");
const transferTargetText = computed(() =>
withdrawMethod.value === 1 ? alipayAccount.value : `银行卡(${bankCardNo.value})`
);
const getData = async () => { const getData = async () => {
const { data, error } = await getRevenueInfo(); const { data, error } = await getRevenueInfo();
@@ -359,8 +400,24 @@ const validateForm = () => {
return false; return false;
} }
if (!alipayAccount.value.trim()) { if (!alipayAccount.value.trim()) {
showToast("请输入支付宝账号"); if (withdrawMethod.value === 1) {
return false; showToast("请输入支付宝账号");
return false;
}
}
if (withdrawMethod.value === 2) {
if (!/^\d{13,19}$/.test((bankCardNo.value || "").trim())) {
showToast("请输入正确的银行卡号");
return false;
}
if (!bankName.value.trim()) {
showToast("请输入开户行");
return false;
}
if (!/^1[3-9]\d{9}$/.test((bankReservedMobile.value || "").trim())) {
showToast("请输入正确的预留手机号");
return false;
}
} }
const amountNum = Number(amount.value); const amountNum = Number(amount.value);
@@ -409,10 +466,17 @@ const confirmWithdraw = async () => {
isSubmitting.value = true; isSubmitting.value = true;
try { try {
const { applyWithdrawal } = await import('@/api/agent'); const { applyWithdrawal } = await import('@/api/agent');
const { data, error } = await applyWithdrawal({ const payload = {
payee_account: alipayAccount.value, withdraw_method: Number(withdrawMethod.value),
amount: Number(amount.value), amount: Number(amount.value),
payee_name: realName.value, payee_name: realName.value,
payee_account: withdrawMethod.value === 1 ? alipayAccount.value : "",
bank_name: withdrawMethod.value === 2 ? bankName.value : "",
bank_card_no: withdrawMethod.value === 2 ? bankCardNo.value : "",
bank_reserved_mobile: withdrawMethod.value === 2 ? bankReservedMobile.value : "",
};
const { data, error } = await applyWithdrawal({
...payload,
}); });
if (data.value?.code === 200 && !error.value) { if (data.value?.code === 200 && !error.value) {
status.value = 1; // 新系统：申请后状态为1（待审核） status.value = 1; // 新系统：申请后状态为1（待审核）
@@ -448,6 +512,9 @@ const fillMaxAmount = () => {
const resetForm = () => { const resetForm = () => {
status.value = null; status.value = null;
alipayAccount.value = ""; alipayAccount.value = "";
bankCardNo.value = "";
bankName.value = "";
bankReservedMobile.value = "";
amount.value = ""; amount.value = "";
realName.value = ""; realName.value = "";
}; };
@@ -506,4 +573,24 @@ const resetForm = () => {
.pointer-events-none { .pointer-events-none {
pointer-events: none; pointer-events: none;
} }
.withdraw-method-btn {
min-width: 108px;
height: 38px;
padding: 0 16px;
border-radius: 9999px;
border: 1px solid var(--van-border-color);
background: #ffffff;
color: var(--van-text-color-2);
font-size: 14px;
font-weight: 600;
transition: all 0.2s ease;
}
.withdraw-method-btn.active {
border-color: var(--van-theme-primary);
background: var(--van-theme-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
</style> </style>