Implement localization for bank selection in WithdrawBankSelectSheet component

- Added internationalization support for bank selection titles, placeholders, and messages in English, Indonesian, and Chinese.
- Updated the component to use localized strings for improved user experience and accessibility.
- Refactored the title and placeholder logic to utilize the new localization features, enhancing clarity in the bank selection process.

app/components/wallet/WithdrawBankSelectSheet.vue

@@ -2,6 +2,8 @@
 import { computed, ref, watch } from 'vue'
 import { BANKS, HOT_BANK_CODES, type BankItem } from '~/constants/banks'
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<{
   show: boolean
   modelValue: string
@@ -9,11 +11,13 @@ const props = withDefaults(defineProps<{
   title?: string
   options?: BankItem[]
 }>(), {
-  title: '请选择银行',
+  title: '',
   code: '',
   options: () => BANKS,
 })
 
+const sheetTitle = computed(() => props.title || t('wallet.withdraw.bankSelect.title'))
+
 const emit = defineEmits<{
   (e: 'update:show', value: boolean): void
   (e: 'update:modelValue' | 'update:code', value: string): void
@@ -75,7 +79,7 @@ const handleSelect = (option: BankItem) => {
           />
         </button>
         <h3 class="withdraw-bank-select-sheet__title">
-          {{ props.title }}
+          {{ sheetTitle }}
         </h3>
         <div class="withdraw-bank-select-sheet__header-right" />
       </div>
@@ -86,7 +90,7 @@ const handleSelect = (option: BankItem) => {
           class="withdraw-bank-select-sheet__search-input"
           type="text"
           autocomplete="off"
-          placeholder="搜索银行"
+          :placeholder="t('wallet.withdraw.bankSelect.searchPlaceholder')"
         >
       </div>
 
@@ -117,7 +121,7 @@ const handleSelect = (option: BankItem) => {
             class="withdraw-bank-select-sheet__section"
           >
             <div class="withdraw-bank-select-sheet__section-title">
-              热门银行
+              {{ t('wallet.withdraw.bankSelect.hotBanks') }}
             </div>
             <button
               v-for="item in hotBanks"
@@ -140,7 +144,7 @@ const handleSelect = (option: BankItem) => {
 
           <div class="withdraw-bank-select-sheet__section">
             <div class="withdraw-bank-select-sheet__section-title">
-              全部银行
+              {{ t('wallet.withdraw.bankSelect.allBanks') }}
             </div>
             <button
               v-for="item in allBanks"
@@ -166,7 +170,7 @@ const handleSelect = (option: BankItem) => {
           v-if="filteredOptions.length === 0"
           class="withdraw-bank-select-sheet__empty"
         >
-          暂无匹配银行
+          {{ t('wallet.withdraw.bankSelect.empty') }}
         </div>
       </section>
     </div>

app/pages/wallet/withdraw/auth.vue

@@ -521,7 +521,7 @@ const onBack = () => {
               >
                 <div class="withdraw-auth-form-row__content">
                   <span class="withdraw-auth-form-row__label">
-                    Bank
+                    {{ t('wallet.withdraw.auth.form.bankName.label') }}
                   </span>
                   <button
                     type="button"
@@ -530,7 +530,7 @@ const onBack = () => {
                     :disabled="isBankNameDisabled"
                     @click="isBankSelectVisible = true"
                   >
-                    {{ bankName ? bankName : '请选择银行' }}
+                    {{ bankName ? bankName : t('wallet.withdraw.auth.form.bankName.placeholder') }}
                   </button>
                 </div>
                 <div class="withdraw-auth-form-row__divider" />
@@ -563,6 +563,7 @@ const onBack = () => {
             v-model:show="isBankSelectVisible"
             v-model="bankName"
             v-model:code="bankCode"
+            :title="t('wallet.withdraw.bankSelect.title')"
           />
 
           <!-- Tip -->

i18n/locales/en.json

@@ -308,8 +308,8 @@
             "placeholder": "Enter your ID number"
           },
           "bankName": {
-            "label": "Bank Name",
-            "placeholder": "Enter bank name"
+            "label": "Bank",
+            "placeholder": "Select bank"
           },
           "bankCard": {
             "label": "Bank Card",
@@ -331,6 +331,13 @@
         "failed": "Submission failed, please try again",
         "partialSuccess": "Submission partially successful"
       },
+      "bankSelect": {
+        "title": "Select bank",
+        "searchPlaceholder": "Search bank",
+        "hotBanks": "Popular banks",
+        "allBanks": "All banks",
+        "empty": "No matching bank"
+      },
       "apply": {
         "title": "Income Swap",
         "actions": {

i18n/locales/id.json

@@ -309,8 +309,8 @@
             "placeholder": "Masukkan nomor KTP"
           },
           "bankName": {
-            "label": "Nama Bank",
-            "placeholder": "Masukkan nama bank"
+            "label": "Bank",
+            "placeholder": "Pilih bank"
           },
           "bankCard": {
             "label": "No. Rekening",
@@ -332,6 +332,13 @@
         "failed": "Gagal mengirim, silakan coba lagi",
         "partialSuccess": "Sebagian berhasil dikirim"
       },
+      "bankSelect": {
+        "title": "Pilih bank",
+        "searchPlaceholder": "Cari bank",
+        "hotBanks": "Bank populer",
+        "allBanks": "Semua bank",
+        "empty": "Tidak ada bank yang cocok"
+      },
       "apply": {
         "title": "Tukar Penghasilan",
         "actions": {

i18n/locales/zh.json

@@ -309,8 +309,8 @@
             "placeholder": "请输入本人身份证号"
           },
           "bankName": {
-            "label": "银行名称",
-            "placeholder": "请输入银行名称"
+            "label": "银行",
+            "placeholder": "请选择银行"
           },
           "bankCard": {
             "label": "银行卡号",
@@ -332,6 +332,13 @@
         "failed": "提交失败，请重试",
         "partialSuccess": "提交部分成功"
       },
+      "bankSelect": {
+        "title": "请选择银行",
+        "searchPlaceholder": "搜索银行",
+        "hotBanks": "热门银行",
+        "allBanks": "全部银行",
+        "empty": "暂无匹配银行"
+      },
       "apply": {
         "title": "收益兑换",
         "actions": {