a
This commit is contained in:
@@ -20,94 +20,248 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<!-- 提现方式切换标签 -->
|
||||
<van-tabs v-if="showTabs" v-model:active="activeTab" class="mb-4" @change="onTabChange">
|
||||
<van-tab v-if="showAlipay" title="支付宝提现" name="alipay">
|
||||
<div class="rounded-xl shadow-lg p-6 mb-4 mt-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 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="alipayRealName" 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 v-if="showBankcard" title="银行卡提现" name="bankcard">
|
||||
<div class="rounded-xl shadow-lg p-6 mb-4 mt-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="credit-pay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">银行卡提现</h1>
|
||||
</div>
|
||||
|
||||
<!-- 实名信息展示 -->
|
||||
<div v-if="bankCardInfo.payee_name" class="mb-4 p-4 rounded-lg"
|
||||
style="background-color: rgba(22, 119, 255, 0.1);">
|
||||
<div class="text-xs mb-2" style="color: var(--van-text-color-2);">您的实名信息</div>
|
||||
<div class="text-sm" style="color: var(--van-text-color);">
|
||||
<div class="mb-1">姓名：<span class="font-semibold">{{ bankCardInfo.payee_name }}</span>
|
||||
</div>
|
||||
<div>身份证号：<span class="font-semibold">{{ formatIdCard(bankCardInfo.id_card) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs mt-2" style="color: #f59e0b;">
|
||||
<van-icon name="warning-o" class="mr-1" />提示：银行卡信息需与实名认证信息一致
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 银行卡号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">银行卡号</label>
|
||||
<van-field v-model="bankCardNo" type="number" placeholder="请输入银行卡号（16-19位）"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{ required: true, message: ' ' },
|
||||
{ validator: validateBankCardNo, message: ' ' },
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="credit-pay" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block"
|
||||
style="color: var(--van-text-color-2);">请输入16-19位银行卡号</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="请输入开户支行"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="location-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);">例如：中国工商银行XX支行</small>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<!-- 如果只显示一种方式，不显示 tabs，直接显示内容 -->
|
||||
<div v-if="!showTabs">
|
||||
<!-- 只显示支付宝提现 -->
|
||||
<div v-if="showAlipay && !showBankcard" class="rounded-xl shadow-lg p-6 mb-4 mt-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="alipayRealName" 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>
|
||||
|
||||
<!-- 只显示银行卡提现 -->
|
||||
<div v-if="showBankcard && !showAlipay" class="rounded-xl shadow-lg p-6 mb-4 mt-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="credit-pay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">银行卡提现</h1>
|
||||
</div>
|
||||
|
||||
<!-- 实名信息展示 -->
|
||||
<div v-if="bankCardInfo.payee_name" class="mb-4 p-4 rounded-lg"
|
||||
style="background-color: rgba(22, 119, 255, 0.1);">
|
||||
<div class="text-xs mb-2" style="color: var(--van-text-color-2);">您的实名信息</div>
|
||||
<div class="text-sm" style="color: var(--van-text-color);">
|
||||
<div class="mb-1">姓名：<span class="font-semibold">{{ bankCardInfo.payee_name }}</span>
|
||||
</div>
|
||||
<div>身份证号：<span class="font-semibold">{{ formatIdCard(bankCardInfo.id_card) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs mt-2" style="color: #f59e0b;">
|
||||
<van-icon name="warning-o" class="mr-1" />提示：银行卡信息需与实名认证信息一致
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 银行卡号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">银行卡号</label>
|
||||
<van-field v-model="bankCardNo" type="number" placeholder="请输入银行卡号（16-19位）"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{ required: true, message: ' ' },
|
||||
{ validator: validateBankCardNo, message: ' ' },
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="credit-pay" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">请输入16-19位银行卡号</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="请输入开户支行"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="location-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);">例如：中国工商银行XX支行</small>
|
||||
</div>
|
||||
</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 class="mb-4">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">提现金额</label>
|
||||
<van-field v-model.number="amount" type="number" placeholder="请输入提现金额"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{ required: true, message: ' ' },
|
||||
{ validator: validateAmount, message: ' ' },
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="gold-coin-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
<template #right-icon> 元 </template>
|
||||
<template #button>
|
||||
<van-button size="small" type="primary"
|
||||
class="rounded-full px-3 shadow-sm"
|
||||
style="background-color: var(--van-theme-primary); color: white;"
|
||||
@click="fillMaxAmount">
|
||||
全部提现
|
||||
</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
|
||||
<!-- 金额提示 -->
|
||||
<div class="text-sm mb-2" style="color: var(--van-text-color);">
|
||||
可提现金额：<span class="font-semibold" style="color: var(--van-theme-primary);">¥{{ availableAmount }}</span>
|
||||
<!-- 提现金额（共用） -->
|
||||
<div class="mb-4">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">提现金额</label>
|
||||
<van-field v-model.number="amount" type="number" placeholder="请输入提现金额"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{ required: true, message: ' ' },
|
||||
{ validator: validateAmount, message: ' ' },
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="gold-coin-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
<template #right-icon> 元 </template>
|
||||
<template #button>
|
||||
<van-button size="small" type="primary" class="rounded-full px-3 shadow-sm"
|
||||
style="background-color: var(--van-theme-primary); color: white;" @click="fillMaxAmount">
|
||||
全部提现
|
||||
</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
|
||||
<!-- 金额提示 -->
|
||||
<div class="text-sm mb-2" style="color: var(--van-text-color);">
|
||||
可提现金额：<span class="font-semibold" style="color: var(--van-theme-primary);">¥{{ availableAmount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 提现规则 -->
|
||||
<div class="p-4 rounded-xl backdrop-blur-sm mb-4" style="background-color: var(--van-theme-primary-light);">
|
||||
<div class="flex items-center text-sm mb-2" style="color: var(--van-theme-primary);">
|
||||
<van-icon name="warning" class="mr-1" />提现须知
|
||||
</div>
|
||||
<ul class="text-xs space-y-1" style="color: var(--van-text-color);">
|
||||
<li>· 每日限提现1次，最低50元</li>
|
||||
<li>· 提现收取6%税收</li>
|
||||
<li v-if="activeTab === 'alipay'">· 到账时间：24小时内</li>
|
||||
<li v-else>· 到账时间：管理员审核后手动转账</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 提现规则 -->
|
||||
<div class="p-4 rounded-xl backdrop-blur-sm" style="background-color: var(--van-theme-primary-light);">
|
||||
<div class="flex items-center text-sm mb-2" style="color: var(--van-theme-primary);">
|
||||
<van-icon name="warning" class="mr-1" />提现须知
|
||||
</div>
|
||||
<ul class="text-xs space-y-1" style="color: var(--van-text-color);">
|
||||
<li>· 每日限提现1次，最低50元</li>
|
||||
<li>· 提现收取6%税收</li>
|
||||
<li>· 到账时间：24小时内</li>
|
||||
</ul>
|
||||
<!-- 税收说明 -->
|
||||
<div class="p-4 rounded-xl backdrop-blur-sm mb-4" style="background-color: rgba(251, 191, 36, 0.1);">
|
||||
<div class="flex items-center text-sm mb-2" style="color: #f59e0b;">
|
||||
<van-icon name="info-o" class="mr-1" />税收说明
|
||||
</div>
|
||||
|
||||
<!-- 税收说明 -->
|
||||
<div class="p-4 rounded-xl backdrop-blur-sm mt-4" style="background-color: rgba(251, 191, 36, 0.1);">
|
||||
<div class="flex items-center text-sm mb-2" style="color: #f59e0b;">
|
||||
<van-icon name="info-o" class="mr-1" />税收说明
|
||||
</div>
|
||||
<div class="text-xs leading-relaxed" style="color: var(--van-text-color);">
|
||||
<p>根据相关规定，提现时将统一收取6%的税收，该税收用于相关税费支出。</p>
|
||||
<p class="mt-2" style="color: #f59e0b;">• 税率标准：统一按6%收取</p>
|
||||
<p style="color: #f59e0b;">• 适用范围：所有提现金额</p>
|
||||
</div>
|
||||
<div class="text-xs leading-relaxed" style="color: var(--van-text-color);">
|
||||
<p>根据相关规定，提现时将统一收取6%的税收，该税收用于相关税费支出。</p>
|
||||
<p class="mt-2" style="color: #f59e0b;">• 税率标准：统一按6%收取</p>
|
||||
<p style="color: #f59e0b;">• 适用范围：所有提现金额</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,11 +355,14 @@
|
||||
</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>
|
||||
转账
|
||||
<span v-if="activeTab === 'alipay'">
|
||||
已向
|
||||
<span style="color: var(--van-theme-primary);">{{ alipayAccount }}</span>
|
||||
转账
|
||||
</span>
|
||||
<span v-else>
|
||||
提现申请已通过，管理员将手动转账
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-2xl font-bold mt-2" style="color: #10b981;">
|
||||
¥{{ amount }}
|
||||
@@ -227,12 +384,13 @@
|
||||
<!-- 辅助文案 -->
|
||||
<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 v-if="activeTab === 'alipay'">预计24小时内到账</p>
|
||||
<p v-else>请等待管理员审核并转账</p>
|
||||
</template>
|
||||
<template v-if="status === 1">
|
||||
<p>您的申请已进入处理队列</p>
|
||||
<p>5分钟后结果在提现记录种查看</p>
|
||||
<p v-if="activeTab === 'alipay'">您的申请已进入处理队列</p>
|
||||
<p v-else>您的申请已提交，等待管理员审核</p>
|
||||
<p>可在提现记录中查看结果</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -258,12 +416,51 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { ref, computed, onBeforeMount } from "vue";
|
||||
import { showToast } from "vant";
|
||||
import RealNameAuthDialog from "@/components/RealNameAuthDialog.vue";
|
||||
|
||||
const agentStore = useAgentStore();
|
||||
const dialogStore = useDialogStore();
|
||||
|
||||
// ========== 提现方式配置开关 ==========
|
||||
// 可以通过环境变量或后端接口控制
|
||||
// 配置选项：
|
||||
// - 'alipay': 只显示支付宝提现
|
||||
// - 'bankcard': 只显示银行卡提现
|
||||
// - 'both': 显示两种提现方式（默认）
|
||||
// - 数组形式: ['alipay', 'bankcard'] 或 ['alipay'] 或 ['bankcard']
|
||||
const WITHDRAW_CONFIG = import.meta.env.VITE_WITHDRAW_METHODS || 'bankcard';
|
||||
// 解析配置：支持字符串和数组格式
|
||||
const getWithdrawMethods = () => {
|
||||
if (Array.isArray(WITHDRAW_CONFIG)) {
|
||||
return WITHDRAW_CONFIG;
|
||||
}
|
||||
if (typeof WITHDRAW_CONFIG === 'string') {
|
||||
if (WITHDRAW_CONFIG === 'alipay') return ['alipay'];
|
||||
if (WITHDRAW_CONFIG === 'bankcard') return ['bankcard'];
|
||||
if (WITHDRAW_CONFIG === 'both') return ['alipay', 'bankcard'];
|
||||
// 支持逗号分隔的字符串: "alipay,bankcard" 或 "alipay" 或 "bankcard"
|
||||
return WITHDRAW_CONFIG.split(',').map(s => s.trim()).filter(Boolean);
|
||||
}
|
||||
return ['alipay', 'bankcard']; // 默认都显示
|
||||
};
|
||||
|
||||
const enabledMethods = getWithdrawMethods();
|
||||
const showAlipay = enabledMethods.includes('alipay');
|
||||
const showBankcard = enabledMethods.includes('bankcard');
|
||||
const showTabs = showAlipay && showBankcard; // 只有两种都显示时才显示 tabs
|
||||
|
||||
// 标签页管理
|
||||
const getInitialTab = () => {
|
||||
// 如果只显示一种方式，直接设置为该方式
|
||||
if (showAlipay && !showBankcard) return 'alipay';
|
||||
if (showBankcard && !showAlipay) return 'bankcard';
|
||||
// 如果两种都显示，默认支付宝
|
||||
return 'alipay';
|
||||
};
|
||||
const activeTab = ref(getInitialTab());
|
||||
|
||||
// 状态管理
|
||||
const status = ref(null);
|
||||
const failMsg = ref("");
|
||||
@@ -272,17 +469,15 @@ const showStatusPopup = ref(false);
|
||||
const showTaxConfirmPopup = ref(false);
|
||||
|
||||
// 税务
|
||||
const taxFreeAmount = ref(0); // 免税额度
|
||||
const usedExemptionAmount = ref(0); // 已使用免税额度
|
||||
const remainingExemptionAmount = ref(0); // 剩余免税额度
|
||||
const taxRate = ref(0); // 税率
|
||||
const taxFreeAmount = ref(0);
|
||||
const usedExemptionAmount = ref(0);
|
||||
const remainingExemptionAmount = ref(0);
|
||||
const taxRate = ref(0);
|
||||
|
||||
// 计算扣税金额和实际到账金额
|
||||
const taxAmount = computed(() => {
|
||||
if (!amount.value) return 0;
|
||||
const withdrawAmount = Number(amount.value);
|
||||
|
||||
// 统一收取6%手续费，不再有免税额度
|
||||
return withdrawAmount * 0.06;
|
||||
});
|
||||
|
||||
@@ -321,17 +516,73 @@ const statusButtonColor = {
|
||||
2: "#10b981",
|
||||
3: "#ef4444",
|
||||
};
|
||||
|
||||
const statusMessages = {
|
||||
1: "提现申请处理中，请稍后再查询结果",
|
||||
1: activeTab.value === 'alipay' ? "提现申请处理中，请稍后再查询结果" : "提现申请已提交，等待管理员审核",
|
||||
2: "提现成功",
|
||||
3: "提现失败",
|
||||
};
|
||||
|
||||
// 表单数据
|
||||
// 表单数据 - 支付宝
|
||||
const alipayAccount = ref("");
|
||||
const alipayRealName = ref("");
|
||||
|
||||
// 表单数据 - 银行卡
|
||||
const bankCardNo = ref("");
|
||||
const bankName = ref("");
|
||||
const bankCardInfo = ref({
|
||||
bank_card_no: "",
|
||||
bank_name: "",
|
||||
payee_name: "",
|
||||
id_card: "",
|
||||
});
|
||||
|
||||
// 共用数据
|
||||
const amount = ref(0);
|
||||
const availableAmount = ref(null);
|
||||
const realName = ref("");
|
||||
|
||||
// 标签页切换
|
||||
const onTabChange = (name) => {
|
||||
if (name === 'bankcard') {
|
||||
loadBankCardInfo();
|
||||
}
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 加载银行卡信息
|
||||
const loadBankCardInfo = async () => {
|
||||
try {
|
||||
const { data, error } = await useApiFetch("/agent/withdrawal/bank-card/info")
|
||||
.get()
|
||||
.json();
|
||||
if (data.value?.code === 200 && !error.value) {
|
||||
bankCardInfo.value = data.value.data;
|
||||
// 自动填充历史银行卡信息
|
||||
if (data.value.data.bank_card_no) {
|
||||
bankCardNo.value = data.value.data.bank_card_no;
|
||||
}
|
||||
if (data.value.data.bank_name) {
|
||||
bankName.value = data.value.data.bank_name;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("加载银行卡信息失败", err);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化身份证号（显示前6位和后4位）
|
||||
const formatIdCard = (idCard) => {
|
||||
if (!idCard) return "";
|
||||
if (idCard.length <= 10) return idCard;
|
||||
return idCard.substring(0, 6) + "****" + idCard.substring(idCard.length - 4);
|
||||
};
|
||||
|
||||
// 验证银行卡号
|
||||
const validateBankCardNo = (val) => {
|
||||
if (!val) return false;
|
||||
const cardNo = String(val).replace(/\s/g, "");
|
||||
return /^\d{16,19}$/.test(cardNo);
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { data: res, error } = await useApiFetch("/agent/revenue")
|
||||
@@ -346,6 +597,10 @@ const getData = async () => {
|
||||
onBeforeMount(() => {
|
||||
getData();
|
||||
getTax();
|
||||
// 根据配置加载对应的数据
|
||||
if (showBankcard && (activeTab.value === 'bankcard' || !showTabs)) {
|
||||
loadBankCardInfo();
|
||||
}
|
||||
});
|
||||
|
||||
// 表单验证
|
||||
@@ -355,17 +610,35 @@ 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;
|
||||
if (activeTab.value === 'alipay') {
|
||||
// 支付宝提现验证
|
||||
if (!alipayRealName.value.trim()) {
|
||||
showToast("请输入账户实名姓名");
|
||||
return false;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5]{2,4}$/.test(alipayRealName.value)) {
|
||||
showToast("请输入2-4位中文姓名");
|
||||
return false;
|
||||
}
|
||||
if (!alipayAccount.value.trim()) {
|
||||
showToast("请输入支付宝账号");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
// 银行卡提现验证
|
||||
if (!bankCardNo.value.trim()) {
|
||||
showToast("请输入银行卡号");
|
||||
return false;
|
||||
}
|
||||
const cardNo = String(bankCardNo.value).replace(/\s/g, "");
|
||||
if (!/^\d{16,19}$/.test(cardNo)) {
|
||||
showToast("银行卡号格式不正确，请输入16-19位数字");
|
||||
return false;
|
||||
}
|
||||
if (!bankName.value.trim()) {
|
||||
showToast("请输入开户支行");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const amountNum = Number(amount.value);
|
||||
@@ -424,22 +697,44 @@ const handleSubmit = async () => {
|
||||
const confirmWithdraw = async () => {
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
const { data, error } = await useApiFetch("/agent/withdrawal")
|
||||
.post({
|
||||
let apiUrl, requestData;
|
||||
|
||||
if (activeTab.value === 'alipay') {
|
||||
// 支付宝提现
|
||||
apiUrl = "/agent/withdrawal";
|
||||
requestData = {
|
||||
payee_account: alipayAccount.value,
|
||||
amount: amount.value,
|
||||
payee_name: realName.value,
|
||||
})
|
||||
payee_name: alipayRealName.value,
|
||||
};
|
||||
} else {
|
||||
// 银行卡提现
|
||||
apiUrl = "/agent/withdrawal/bank-card";
|
||||
requestData = {
|
||||
bank_card_no: String(bankCardNo.value).replace(/\s/g, ""),
|
||||
bank_name: bankName.value,
|
||||
amount: amount.value,
|
||||
};
|
||||
}
|
||||
|
||||
const { data, error } = await useApiFetch(apiUrl)
|
||||
.post(requestData)
|
||||
.json();
|
||||
|
||||
if (data.value?.code === 200) {
|
||||
status.value = data.value.data.status;
|
||||
showTaxConfirmPopup.value = false;
|
||||
showStatusPopup.value = true;
|
||||
if (status.value === 3) {
|
||||
failMsg.value = data.value.data.fail_msg;
|
||||
failMsg.value = data.value.data.fail_msg || "提现失败";
|
||||
}
|
||||
getData();
|
||||
} else {
|
||||
showToast(data.value?.msg || "提现失败");
|
||||
}
|
||||
} catch {
|
||||
} catch (err) {
|
||||
showToast("提现失败，请重试");
|
||||
console.error("提现失败", err);
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
@@ -455,6 +750,7 @@ const handlePopupAction = () => {
|
||||
if (status.value === 2) resetPage();
|
||||
}
|
||||
};
|
||||
|
||||
// 填充最大金额
|
||||
const fillMaxAmount = () => {
|
||||
amount.value = availableAmount.value;
|
||||
@@ -463,9 +759,20 @@ const fillMaxAmount = () => {
|
||||
// 重置页面
|
||||
const resetForm = () => {
|
||||
status.value = null;
|
||||
alipayAccount.value = "";
|
||||
if (activeTab.value === 'alipay') {
|
||||
alipayAccount.value = "";
|
||||
alipayRealName.value = "";
|
||||
} else {
|
||||
// 银行卡提现不清空，保留历史信息
|
||||
// bankCardNo.value = "";
|
||||
// bankName.value = "";
|
||||
}
|
||||
amount.value = "";
|
||||
realName.value = "";
|
||||
};
|
||||
|
||||
const resetPage = () => {
|
||||
resetForm();
|
||||
// 可以跳转到提现记录页面
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user