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

src/locales/ar.json

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

src/locales/en.json

@@ -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",

src/locales/zh.json

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

src/views/Wallet/CashOut/BankCard.vue

@@ -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="display: flex; justify-content: space-between; align-items: center">
-          <div style="font-weight: 510; color: rgba(0, 0, 0, 0.4)">
+          <div style="flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px">
-            {{ t('card_number') }}: {{ card.cardNo }}
+            <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)">
+          <div style="display: flex; flex-direction: column; gap: 4px">
-            {{ t('payee') }}: {{ card.payee }}
-          </div>
-          <div style="display: flex; align-items: center; gap: 8px">
             <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) {
+      const usedCard = bankCardList.value.find((card) => card.use)
-          usedBankCard.value = card
+      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 || '')