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

style(银行卡页面): 样式更新，优化判断使用中的银行卡

Browse Source
This commit is contained in:
hzj 2025-11-20 10:49:48 +08:00
parent 9f29da854c
commit fdf3cea458
4 changed files with 79 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/locales/ar.json
View File

@ -287,6 +287,7 @@
"payee": "المستفيد",
"delete": "حذف",
"use": "استخدام",
"using": "قيد الاستخدام",
"add_new_payment_method": "إضافة طريقة دفع جديدة",
"choose_withdrawal_method": "اختر طريقة السحب",
"card_name": "اسم البطاقة",

1
src/locales/en.json
View File

@ -287,6 +287,7 @@
"payee": "Payee",
"delete": "Delete",
"use": "Use",
"using": "Using",
"add_new_payment_method": "Add new payment method",
"choose_withdrawal_method": "Choose withdrawal method",
"card_name": "Card Name",

1
src/locales/zh.json
View File

@ -287,6 +287,7 @@
"payee": "收款人",
"delete": "删除",
"use": "使用",
"using": "使用中",
"add_new_payment_method": "添加新的付款方式",
"choose_withdrawal_method": "选择提现方式",
"card_name": "卡名",

95
src/views/Wallet/CashOut/BankCard.vue
View File

@ -17,15 +17,28 @@
padding: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
"
:style="
usedBankCard.cardNo
? `border-radius: 11.75px;border: 0.5px solid rgba(255, 255, 255, 0.08);background: linear-gradient(137deg, #7352DD 11.08%, #AB91EA 42.04%, #9187E0 95.9%);box-shadow: -1px -3.25px 9.075px 0 rgba(88, 42, 255, 0.32) inset, 0.75px 3px 7.7px 0 rgba(115, 82, 221, 0.43) inset;backdrop-filter: blur(0.75px);`
: ''
"
>
<div v-if="!usedBankCard.cardNo" style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
{{ t('no_bank_cards_in_use') }}
</div>
<div v-else style="display: flex; flex-direction: column; justify-content: space-around">
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
<div style="font-weight: 510; color: #fff">
{{ t('card_number') }}: {{ usedBankCard.cardNo }}
</div>
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
<div
style="
font-weight: 510;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ t('payee') }}: {{ usedBankCard.payee }}
</div>
</div>
@ -59,14 +72,24 @@
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
"
>
<div style="display: flex; flex-direction: column; gap: 4px">
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
{{ t('card_number') }}: {{ card.cardNo }}
<div style="display: flex; justify-content: space-between; align-items: center">
<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.4)">
{{ t('card_number') }}: {{ card.cardNo }}
</div>
<div
style="
font-weight: 510;
color: rgba(0, 0, 0, 0.4);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
"
>
{{ t('payee') }}: {{ card.payee }}
</div>
</div>
<div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
{{ t('payee') }}: {{ card.payee }}
</div>
<div style="display: flex; align-items: center; gap: 8px">
<div style="display: flex; flex-direction: column; gap: 4px">
<div
style="
font-size: 0.9em;
@ -81,12 +104,17 @@
),
linear-gradient(180deg, #fff 0%, #000 100%), #ff6464;
background-blend-mode: normal, soft-light, normal;
display: flex;
justify-content: center;
align-items: center;
"
@click="removeBankCard(card.id)"
>
{{ t('delete') }}
</div>
<div
v-if="!card.use"
style="
font-size: 0.9em;
font-weight: 700;
@ -100,11 +128,38 @@
),
linear-gradient(180deg, #fff 0%, #000 100%), #b464ff;
background-blend-mode: normal, soft-light, normal;
display: flex;
justify-content: center;
align-items: center;
"
@click="setDefaultBankCard(card.id)"
>
{{ t('use') }}
</div>
<div
v-else
style="
font-size: 0.9em;
font-weight: 700;
padding: 2px 12px;
color: #fff;
border-radius: 16px;
background: radial-gradient(
107.94% 107.94% at 15.9% 13.54%,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
),
linear-gradient(180deg, #fff 0%, #000 100%), #9d9d9d;
background-blend-mode: normal, soft-light, normal;
display: flex;
justify-content: center;
align-items: center;
"
>
{{ t('using') }}
</div>
</div>
</div>
</div>
@ -446,11 +501,19 @@ const getBankCards = async () => {
if (resBankCards.status && resBankCards.body) {
// 处理银行卡列表数据
bankCardList.value = resBankCards.body
bankCardList.value.forEach((card) => {
if (card.use) {
usedBankCard.value = card
const usedCard = bankCardList.value.find((card) => card.use)
if (usedCard) {
usedBankCard.value = usedCard
} else {
// 没有使用中的银行卡
usedBankCard.value = {
cardType: '',
cardName: '',
cardNo: '',
payee: '',
}
})
}
}
} catch (error) {
console.error('获取银行卡列表失败:', error)
@ -463,12 +526,6 @@ const removeBankCard = async (cardId) => {
const resDeleteCard = await deleteBankCard({ id: cardId })
if (resDeleteCard.status) {
getBankCards() // 重新获取银行卡列表
usedBankCard.value = {
cardType: '',
cardName: '',
cardNo: '',
payee: '',
}
}
} catch (error) {
showError(error.response?.errorMsg || '')