hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(新页面): 主播专用的提现页面

Browse Source
This commit is contained in:
hzj 2026-03-13 15:50:35 +08:00
parent 4c1294a1dd
commit 6d0d244ebd
10 changed files with 868 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/icon/history.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

5
src/locales/ar.json
View File

@ -255,6 +255,7 @@
"cash_out_minimum": "*يجب أن يكون مبلغ السحب أكبر من أو يساوي 50 دولارًا",
"new_year_cash_out_minimum": "*يجب أن يكون مبلغ السحب أكبر من أو يساوي 10 دولارًا",
"cash_withdraw": "سحب نقدي",
"bank_card": "بطاقة مصرفية",
"currently_in_use": "بطاقتك (قيد الاستخدام)",
"no_bank_cards_in_use": "البطاقات المصرفية غير مستخدمة حالياً.",
@ -273,6 +274,10 @@
"enter_payee": "أدخل اسم المستفيد",
"change_kyc": "تغيير KYC",
"confirm_modify_kyc": "هل أنت متأكد من أنك تريد تعديل المعلومات الحالية؟",
"salary_balance": "رصيد الراتب: ${amount}",
"enter_withdraw_amount": "أدخل مبلغ السحب",
"withdrawal_rule_1": "*(1)يجب أن يكون مبلغ السحب >=$50",
"withdrawal_rule_2": "(2)ستفرض المنصة رسوم معالجة بنسبة 20% على مبلغ السحب الحالي.",
"admin_policy": "سياسة المشرف",

5
src/locales/bn.json
View File

@ -255,6 +255,7 @@
"cash_out_minimum": "*নগদ উত্তোলনের পরিমাণ >= $50 হতে হবে",
"new_year_cash_out_minimum": "*নগদ উত্তোলনের পরিমাণ >= $10 হতে হবে",
"cash_withdraw": "নগদ উত্তোলন",
"bank_card": "ব্যাংক কার্ড",
"currently_in_use": "আপনার কার্ড (ব্যবহারে)",
"no_bank_cards_in_use": "ব্যাংক কার্ড বর্তমানে ব্যবহারে নেই।",
@ -273,6 +274,10 @@
"enter_payee": "প্রাপক লিখুন",
"change_kyc": "KYC পরিবর্তন",
"confirm_modify_kyc": "আপনি কি বর্তমান তথ্য পরিবর্তন করতে চান?",
"salary_balance": "বেতন ব্যালেন্স: ${amount}",
"enter_withdraw_amount": "উত্তোলনের পরিমাণ লিখুন",
"withdrawal_rule_1": "*(1)উত্তোলনের পরিমাণ অবশ্যই >=$50 হতে হবে",
"withdrawal_rule_2": "(2)প্ল্যাটফর্ম বর্তমান উত্তোলনের পরিমাণের উপর 20% হ্যান্ডলিং ফি চার্জ করবে।",
"admin_policy": "অ্যাডমিন নীতি",

5
src/locales/en.json
View File

@ -255,6 +255,7 @@
"cash_out_minimum": "*The cash out amount must be >= $50",
"new_year_cash_out_minimum": "*The cash out amount must be >= $10",
"cash_withdraw": "Cash Withdraw",
"bank_card": "Bank Card",
"currently_in_use": "Your Card (In Use)",
"no_bank_cards_in_use": "Bank cards are not currently in use.",
@ -273,6 +274,10 @@
"enter_payee": "Enter the payee",
"change_kyc": "Change KYC",
"confirm_modify_kyc": "Are you sure you want to modify the current information?",
"salary_balance": "Salary Balance: ${amount}",
"enter_withdraw_amount": "Enter withdraw amount",
"withdrawal_rule_1": "*(1)Withdrawal amount must be >=$50",
"withdrawal_rule_2": "(2)The platform will charge a 20% handling fee on the current withdrawal amount.",
"admin_policy": "Admin Policy",

5
src/locales/tr.json
View File

@ -255,6 +255,7 @@
"cash_out_minimum": "*Nakit çekme miktarı >= $50 olmalıdır",
"new_year_cash_out_minimum": "*Nakit çekme miktarı >= $10 olmalıdır",
"cash_withdraw": "Nakit Çekim",
"bank_card": "Banka Kartı",
"currently_in_use": "Kartınız (Kullanımda)",
"no_bank_cards_in_use": "Banka kartları şu anda kullanımda değil.",
@ -273,6 +274,10 @@
"enter_payee": "Alıcıyı girin",
"change_kyc": "KYC Değiştir",
"confirm_modify_kyc": "Mevcut bilgileri değiştirmek istediğinizden emin misiniz?",
"salary_balance": "Maaş Bakiyesi: ${amount}",
"enter_withdraw_amount": "Çekim miktarını girin",
"withdrawal_rule_1": "*(1)Çekim miktarı >=$50 olmalıdır",
"withdrawal_rule_2": "(2)Platform, mevcut çekim miktarı üzerinden %20 işlem ücreti alacaktır.",
"admin_policy": "Yönetici Politikası",

5
src/locales/zh.json
View File

@ -255,6 +255,7 @@
"cash_out_minimum": "*提现金额必须大于等于50美元",
"new_year_cash_out_minimum": "*提现金额必须大于等于10美元",
"cash_withdraw": "现金提现",
"bank_card": "银行卡",
"currently_in_use": "您的银行卡 (使用中)",
"no_bank_cards_in_use": "当前未使用银行卡。",
@ -273,6 +274,10 @@
"enter_payee": "请输入收款人",
"change_kyc": "更改 KYC",
"confirm_modify_kyc": "您确定要修改当前信息吗？",
"salary_balance": "薪资余额：${amount}",
"enter_withdraw_amount": "请输入提现金额",
"withdrawal_rule_1": "*(1)提现金额必须 >=$50",
"withdrawal_rule_2": "(2)平台将收取当前提现金额 20% 的手续费。",
"admin_policy": "管理员政策",

6
src/router/index.js
View File

@ -247,6 +247,12 @@ const router = createRouter({
component: () => import('../views/Wallet/PayResult/payResult.vue'),
meta: { requiresAuth: true },
},
{
path: '/cash-withdraw',
name: 'cash-withdraw',
component: () => import('../views/Wallet/CashOut/CashWithdraw.vue'),
meta: { requiresAuth: true },
},
{
path: '/cash-out',
name: 'cash-out',

3
src/utils/permissionManager.js
View File

@ -82,7 +82,8 @@ export const ROLE_PERMISSIONS = {
'/recharge-agency-recruit', //充值代理介绍页面
'/search-payee', //搜索收款人
'/cash-out', // 提现页面
'/cash-withdraw', // 提现页面
'/cash-out', // 活动提现页面
'/cash-out-details', //提现详情页面
'/KYC', //提现资料提交
'/bank-card', //选择银行卡

3
src/utils/routeGuard.js
View File

@ -431,7 +431,8 @@ class RouteGuard {
'/pay-result', //支付结果页
'/search-payee', //搜索收款人
'/cash-out', // 提现页面
'/cash-withdraw', // 提现页面
'/cash-out', // 活动提现页面
'/cash-out-details', //提现详情页面
'/KYC', //提现资料提交
'/bank-card', //选择银行卡

833
src/views/Wallet/CashOut/CashWithdraw.vue Normal file
View File

@ -0,0 +1,833 @@
// src/views/Wallet/CashOut/CashOut.vue
<template>
<div class="fullPage">
<GeneralHeader :title="t('cash_withdraw')" style="width: 100%" color="rgba(0, 0, 0, 0.80)">
<template #extraFunction>
<img
v-smart-img
src="@/assets/icon/history.png"
alt=""
style=""
class="extra-icon-btn"
@click="lookDetails"
/>
</template>
</GeneralHeader>
<!-- 主体内容 -->
<div style="padding: 16px; display: flex; flex-direction: column; gap: 2vw">
<!-- 提现部分 -->
<div style="display: flex; flex-direction: column; gap: 2vw">
<!-- 收入金额 -->
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="font-weight: 600">{{ t('salary_balance', { amount: currentAmount }) }}</div>
</div>
<!-- 输入框 -->
<div
style="
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
"
>
<input
name=""
id=""
placeholder="50"
style="
width: 100%;
outline: none;
border: none;
background-color: transparent;
color: black;
"
:value="cashOutAmount"
@input="handleCashOutAmountInput"
dir="ltr"
inputmode="decimal"
/>
</div>
<!-- 规则 -->
<div style="color: #f00; font-weight: 500; font-size: 0.8em">
{{ t('withdrawal_rule_1') }}
<br />
{{ t('withdrawal_rule_2') }}
</div>
</div>
<!-- 使用的银行卡 -->
<div style="display: flex; flex-direction: column; gap: 2vw">
<!-- 标题 -->
<div style="display: flex; justify-content: space-between; align-items: center">
<div style="font-weight: 600">{{ t('currently_in_use') }}</div>
<!-- 跳转按钮 -->
<img
v-smart-img
src="/src/assets/icon/arrow.png"
alt=""
style="width: 6vw"
class="flipImg"
@click="gotoselectBank"
/>
</div>
<!-- 银行卡信息 -->
<div
style="
border-radius: 8px;
background: #fff;
padding: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
"
:style="
usedBankCard
? `border-radius: 11.75px;border: 0.5px solid rgba(255, 255, 255, 0.08);`
: ''
"
@click="cashOutTypeShow = true"
>
<!-- 无使用银行卡 -->
<div v-if="!usedBankCard" style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
{{ t('no_bank_cards_in_use') }}
</div>
<!-- 银行卡信息 -->
<div v-else style="display: flex; align-items: center; gap: 2vw">
<!-- 银行图标 -->
<div style="width: 4.5em">
<img
v-smart-img
v-if="usedBankCard?.cardType == 'BANK'"
src="@/assets/icon/bank/BANK.png"
alt=""
style="width: 100%; display: block"
/>
<img
v-smart-img
v-if="usedBankCard?.cardType == 'USDT'"
src="@/assets/icon/bank/USDT.png"
alt=""
style="width: 100%; display: block"
/>
</div>
<!-- 银行卡信息 -->
<div
style="
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
"
>
<div
style="
font-weight: 510;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ t('payee') }}: {{ usedBankCard?.payee }}
</div>
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
{{ t('card_number') }}: {{ usedBankCard?.cardNo }}
</div>
</div>
</div>
</div>
</div>
<!-- 个人信息 -->
<div style="display: flex; flex-direction: column; gap: 2vw">
<!-- 标题 -->
<div style="display: flex; align-items: center">
<div style="font-weight: 600">{{ t('kyc') }}</div>
<!-- 申请状态 -->
<div v-if="hasKYC" style="font-weight: 600; margin: 0 4px">:</div>
<!-- 通过 -->
<div
v-if="bankCardInfo?.status === 'PASS'"
style="
font-weight: 510;
font-size: 0.9em;
background: linear-gradient(248deg, #75ff98 5.66%, #3dff54 42.49%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
{{ t('review_passed') }}
</div>
<!-- 未通过 -->
<div
v-if="bankCardInfo?.status === 'NOT_PASS'"
style="
font-weight: 510;
font-size: 0.9em;
background: linear-gradient(248deg, #ff7578 5.66%, #ff3d40 42.49%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
{{ t('review_failed') }}
</div>
<!-- 审核中 -->
<div
v-if="bankCardInfo?.status === 'PENDING'"
style="
font-weight: 510;
font-size: 0.9em;
background: linear-gradient(248deg, #ffe675 5.66%, #ffc53d 42.49%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
"
>
{{ t('awaiting_review') }}
</div>
</div>
<!-- 资料内容 -->
<div
style="
background-color: white;
padding: 16px;
border-radius: 12px;
margin-bottom: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
"
>
<!-- 未上传 -->
<div
v-if="!hasKYC"
style="display: flex; justify-content: space-between; align-items: center"
@click="gotoKYC"
>
<span style="font-weight: 510; font-size: 1em">{{ t('complete_information') }}</span>
<img
v-smart-img
src="/src/assets/icon/arrow.png"
alt=""
style="width: 6vw"
class="flipImg"
/>
</div>
<!-- 获取到上传的资料 -->
<div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
<!-- 资料 -->
<div style="display: flex; justify-content: space-between; align-items: center">
<!-- 图片数量 -->
<span style="font-weight: 510; font-size: 1em">{{
t('passport_id_card', { current: bankCardInfo.previewUrls.length })
}}</span>
<!-- 跳转按钮 -->
<img
v-smart-img
src="/src/assets/icon/arrow.png"
alt=""
style="width: 6vw"
@click="gotoKYC"
class="flipImg"
/>
</div>
<!-- 资料图片列表 -->
<div style="display: flex; align-items: center; gap: 4px">
<img
:src="imgUrl"
alt=""
v-for="imgUrl in bankCardInfo.previewUrls"
style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px"
/>
</div>
<!-- 联系方式 -->
<div style="font-weight: 500">{{ t('contact_number') }}:</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
{{ bankCardInfo.contactNumber }}
</div>
<!-- 备注信息 -->
<div style="font-weight: 500">{{ t('other_description') }}:</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
{{ bankCardInfo.otherDescription }}
</div>
</div>
</div>
</div>
<!-- 提现按钮 -->
<div style="display: flex; justify-content: center; align-items: center">
<div
style="
margin-top: 10px;
width: 80%;
border-radius: 32px;
padding: 12px;
color: #fff;
font-weight: 590;
text-align: center;
"
:style="{
background: checkStatus
? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%), linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)'
: 'linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)',
}"
@click="Receive"
>
{{ t('cash_out') }}
</div>
</div>
</div>
<!-- 弹窗遮罩层 -->
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- 资料不足提示弹窗 -->
<div
v-if="cashOutTipShow"
style="
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
"
@click="closedPopup"
>
<div
style="
width: 80%;
border-radius: 12px;
background: #fff;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
"
@click.stop
>
<div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">{{ t('tips') }}</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
{{ t('fill_info_tips') }}
</div>
<div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.6em">
{{ t('card_issue_tips') }}
</div>
<div
style="
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
background: linear-gradient(
152deg,
rgba(198, 112, 255, 0.8) 7.01%,
rgba(119, 38, 255, 0.8) 92.99%
);
color: #fff;
font-weight: 800;
padding: 8px 12px;
width: 50%;
"
@click="gotoKYC"
>
{{ t('receive') }}
</div>
</div>
</div>
<!-- 选择提现方式抽屉 -->
<div
v-if="cashOutTypeShow"
style="position: fixed; bottom: 0; width: 100%"
@click="closedPopup"
>
<div
style="
background: white;
border-radius: 16px 16px 0 0;
max-height: 80vh;
display: flex;
flex-direction: column;
gap: 2vw;
padding: 20px 0;
"
@click.stop
>
<!-- 标题 -->
<div style="display: flex; justify-content: center; align-items: center">
<div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
{{ t('bd_salary') }}
</div>
</div>
<!-- 银行卡列表 -->
<div
style="
width: 100%;
height: 80vw;
padding: 16px;
display: flex;
flex-direction: column;
gap: 3vw;
"
class="overflow-y-auto"
>
<!-- 列表为空 -->
<div
v-if="bankCardList.length === 0"
style="
border-radius: 8px;
background: #fff;
padding: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
"
>
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
{{ t('no_bank_cards_added') }}
</div>
</div>
<!-- 列表不为空 -->
<div
v-else
v-for="card in bankCardList"
:key="card.id"
style="
border-radius: 8px;
background: #fff;
padding: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
gap: 2vw;
"
@click="setDefaultBankCard(card.id)"
>
<!-- 银行卡信息 -->
<div style="display: flex; align-items: center; gap: 2vw">
<!-- 银行图 -->
<div style="width: 4.5em">
<img
v-smart-img
v-if="card.cardType == 'BANK'"
src="@/assets/icon/bank/BANK.png"
alt=""
style="width: 100%; display: block"
/>
<img
v-smart-img
v-if="card.cardType == 'USDT'"
src="@/assets/icon/bank/USDT.png"
alt=""
style="width: 100%; display: block"
/>
</div>
<!-- 信息 -->
<div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px">
<div
style="
font-weight: 510;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ t('payee') }}: {{ card.payee }}
</div>
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
{{ t('card_number') }}: {{ card.cardNo }}
</div>
</div>
<div
style="
width: 1.5em;
aspect-ratio: 1/1;
border-radius: 50%;
border: 1px solid gray;
box-sizing: border-box;
position: relative;
display: flex;
justify-content: center;
align-items: center;
"
>
<div
v-if="card.use"
style="
width: 0.9em;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: #3dff54;
"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 等待审核提示弹窗 -->
<div
v-if="cashOutShow"
style="
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
"
@click="closedPopup"
>
<div
style="
width: 80%;
border-radius: 12px;
background: #fff;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
"
@click.stop
>
<div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">{{ t('tips') }}</div>
<div style="color: rgba(0, 0, 0, 0.8); font-weight: 600; font-size: 0.8em">
{{ t('cash_withdrawal_tips') }}
</div>
<div
style="
display: flex;
justify-content: center;
align-items: center;
border-radius: 999999px;
background:
linear-gradient(180deg, #d3acff 0%, rgba(222, 172, 255, 0) 58.38%),
linear-gradient(152deg, #c670ff 7.01%, #7726ff 92.99%), #ff4768;
box-shadow:
-1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
color: #fff;
font-weight: 700;
padding: 8px 12px;
width: 50%;
"
@click="closedPopup"
>
{{ t('receive') }}
</div>
</div>
</div>
</maskLayer>
</div>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { setDocumentDirection } from '@/locales/i18n'
import {
withdrawableAmount, // 获取可提现金额
withdrawApply, // 提交提现申请
} from '@/api/lottery'
import {
getBankBalance, // 获取余额
getBankCardList, // 获取正在使用的银行卡
getWithdrawInfoList, // 获取申请提现信息
useBankCard, // 设置默认银行卡
} from '@/api/wallet.js'
import GeneralHeader from '@/components/GeneralHeader.vue'
import maskLayer from '@/components/MaskLayer.vue'
const { t, locale } = useI18n()
const router = useRouter()
const route = useRoute()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
const cashOutTipShow = ref(false)
const cashOutTypeShow = ref(false)
const cashOutShow = ref(false)
const cashOutAmount = ref(null)
const maskLayerShow = computed(() => {
return cashOutTipShow.value || cashOutShow.value || cashOutTypeShow.value
})
const bankCardList = ref([]) // 银行卡列表
const usedBankCard = ref(null) //正在使用的银行卡
const closedPopup = () => {
cashOutTipShow.value = false
cashOutShow.value = false
cashOutTypeShow.value = false
}
const activityId = route.query.activityId || ''
const currentAmount = ref(0) //可提现金额
const bankCardInfo = ref(null)
const hasKYC = computed(() => {
return bankCardInfo.value != null
})
// 前往选择提交方式
const gotoselectBank = () => {
router.push('/bank-card')
}
// 查看历史提现信息
const lookDetails = () => {
router.push({ path: '/cash-out-details', query: { activityId: activityId } })
}
// 查看历史提现信息
const gotoKYC = () => {
router.push('/KYC')
}
// 是否可以提现
const checkStatus = computed(() => {
return bankCardInfo.value?.status == 'PASS' && usedBankCard.value?.id && cashOutAmount.value >= 50
})
// 确认提现
const Receive = async () => {
// 资料不足
if (!hasKYC.value) {
cashOutTipShow.value = true
return
}
// 资料填写完成 + 银行卡信息通过
else if (checkStatus.value) {
try {
const resApply = await withdrawApply({
activityId: activityId,
amount: cashOutAmount.value,
contactNumber: bankCardInfo.value.contactNumber,
cardImages: JSON.stringify(bankCardInfo.value.previewUrls),
description: bankCardInfo.value.otherDescription,
})
if (resApply.status) {
closedPopup()
await getDrawableAmount() // 刷新银行余额
cashOutShow.value = true
}
} catch (error) {
closedPopup()
console.log('提现失败:', error.response?.errorMsg)
showError(t('something_went_wrong'))
}
}
}
//获取可提现金额
const getDrawableAmount = async () => {
try {
const response = await getBankBalance()
if (response.status && typeof response.body === 'number') {
// 格式化余额显示，保留2位小数
currentAmount.value = response.body.toFixed(2)
} else {
currentAmount.value = 0
}
} catch (error) {
console.error('Failed to fetch bank balance:', error)
currentAmount.value = 0
// 可以显示错误提示
showError(t('failed_to_load_balance'))
}
}
// 数字处理
const handleCashOutAmountInput = (event) => {
let value = event.target.value
// 只保留数字和小数点
value = value.replace(/[^\d.]/g, '')
// 防止多个小数点
const parts = value.split('.')
if (parts.length > 2) {
value = parts[0] + '.' + parts.slice(1).join('')
}
// 如果输入值超过可用余额，则限制为最大值
const numericValue = parseFloat(value)
if (numericValue > currentAmount.value) {
value = currentAmount.value.toString()
}
// 更新输入框的值
event.target.value = value
// 更新 cashOutAmount 的值
cashOutAmount.value = parseFloat(value) || 0
}
// 获取提现信息列表
const getWithdrawInfoListData = async () => {
try {
const resWithdrawInfoList = await getWithdrawInfoList()
console.log('提现信息列表:', resWithdrawInfoList)
if (resWithdrawInfoList.status && resWithdrawInfoList.body?.length > 0) {
let imgList = JSON.parse(resWithdrawInfoList.body[0].passportFrontUrl)
let previewUrls = imgList.map((item) => item)
bankCardInfo.value = { previewUrls, ...resWithdrawInfoList.body[0] }
}
} catch (error) {
console.error('获取提现信息列表失败:', error)
showError(error.response?.errorMsg)
}
}
// 获取银行卡列表
const getBankCards = async () => {
try {
const resBankCards = await getBankCardList()
console.log('银行卡列表:', resBankCards)
if (resBankCards.status && resBankCards.body) {
// 处理银行卡列表数据
bankCardList.value = resBankCards.body
const usedCard = bankCardList.value.find((card) => card.use)
if (usedCard) {
usedBankCard.value = usedCard
} else {
// 没有使用中的银行卡
usedBankCard.value = null
}
}
} catch (error) {
console.error('获取银行卡列表失败:', error)
}
}
// 设置默认银行卡
const setDefaultBankCard = async (cardId) => {
if (usedBankCard.value?.id === cardId) {
return
}
try {
const resUseCard = await useBankCard({ id: cardId })
if (resUseCard.status) {
getBankCards() // 重新获取银行卡列表
}
} catch (error) {
showError(error.response?.errorMsg || '')
}
}
onMounted(() => {
getDrawableAmount() //获取可提现金额
getWithdrawInfoListData() // 获取提现信息列表
getBankCards() // 获取正在使用的银行卡
})
onUnmounted(() => {
setApplyInfo()
})
</script>
<style lang="scss" scoped>
* {
color: rgba(0, 0, 0, 0.8);
}
.fullPage {
width: 100vw;
min-height: 100vh;
background-color: #fff;
background-image: url(/src/assets/images/secondBg.png);
background-size: 100% auto;
background-repeat: no-repeat;
position: relative;
}
.extra-icon-btn {
width: 1.2em;
display: block;
object-fit: cover;
cursor: pointer;
transition: all 0.2s ease;
}
.extra-icon-btn:active {
transform: scale(0.9);
}
input[type='number'] {
font-family: 'Arial', sans-serif; /* 使用支持西方数字的字体 */
direction: ltr; /* 强制从左到右 */
}
.overflow-y-auto {
overflow-y: auto;
}
.overflow-y-auto::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 360px) {
* {
font-size: 10px;
}
}
@media screen and (min-width: 360px) {
* {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
* {
font-size: 24px;
}
}
@media screen and (min-width: 1024px) {
* {
font-size: 32px;
}
}
/* RTL支持 */
[dir='rtl'] .flipImg {
transform: scaleX(-1);
}
</style>