bank

src/assets/bankCode.json

@@ -0,0 +1,65 @@
+[
+    { "code": " AB", "name": "ALLBANK(A Thirft Bank)" },
+    { "code": " Asenso", "name": "Asenso" },
+    { "code": " AUB", "name": "Asia United Bank Corporation" },
+    { "code": " BNB", "name": "BDO NeTwork Bank" },
+    { "code": " Unibank", "name": "BDO Unibank" },
+    { "code": " bpi", "name": "BPI Bank" },
+    { "code": "A Subsidiary of BPI", "name": "BanKo" },
+    { "code": " BM", "name": "Bangko Mabuhay" },
+    { "code": " BC", "name": "Bank of Commerce" },
+    { "code": " Bayad", "name": "Bayad" },
+    { "code": " CARD Bank", "name": "CARD Bank" },
+    { "code": " CTBC", "name": "CTBC Bank (Philippines) Corporation" },
+    { "code": " CB", "name": "Camalig Bank" },
+    { "code": " CLB", "name": "Cebuana Lhuillier Bank / Cebuana Xpress" },
+    { "code": " CBS", "name": "China Bank Savings" },
+    { "code": " CBC", "name": "China Banking Corporation" },
+    { "code": " Coins", "name": "Coins.ph (DCPay)" },
+    { "code": " DBP", "name": "Development Bank of the Philippines" },
+    { "code": " DCDB", "name": "Dumaguete City Development Bank" },
+    { "code": " DB", "name": "Dungganon Bank" },
+    { "code": " EWBC", "name": "East West Banking Corporation" },
+    { "code": " ESB", "name": "Equicom Savings Bank" },
+    { "code": " gcash", "name": "Gcash" },
+    { "code": " GP", "name": "GrabPay" },
+    { "code": " IB", "name": "ING Bank N.V." },
+    { "code": " ISLA", "name": "ISLA Bank" },
+    { "code": " JC", "name": "JuanCash" },
+    { "code": " Komo", "name": "Komo / EastWest Rural Bank" },
+    { "code": " LBOB", "name": "LANDBANK / OFBank" },
+    { "code": " LSB", "name": "Legazpi Saving Bank" },
+    { "code": " MBS", "name": "Malayan Bank Saving and Mortage Bank" },
+    { "code": " MBP", "name": "Maybank Philippnies" },
+    { "code": " mbt", "name": "Metropolitan Bank and Trust Co" },
+    { "code": " MCCB", "name": "Mindanao Consolidated CoopBank" },
+    { "code": " NB", "name": "Netbank" },
+    { "code": " OP", "name": "OmniPay" },
+    { "code": " PRB", "name": "Partner Rural Bank" },
+    { "code": " PMP", "name": "PayMaya Philippines" },
+    { "code": " PBC", "name": "Philippine Bank of Communications" },
+    { "code": " PBB", "name": "Philippine Business Bank" },
+    { "code": " PNB", "name": "Philippine National Bank" },
+    { "code": " PSB", "name": "Philippine Savings Bank" },
+    { "code": " PTC", "name": "Philippine Trust Company" },
+    { "code": " PDB", "name": "Producers Bank" },
+    { "code": " QB", "name": "Queenbank" },
+    { "code": " QCRB", "name": "Quezon Capital Rural Bank" },
+    { "code": " RSB", "name": "RCBC Saving Bank" },
+    { "code": " RCBC", "name": "RCBC/DiskarTech" },
+    { "code": " RBB", "name": "Robinsons Bank Corporation" },
+    { "code": " SB", "name": "Seabank" },
+    { "code": " SBC", "name": "Security Bank Corporation" },
+    { "code": " SP", "name": "ShopeePay" },
+    { "code": " SCB", "name": "Standard Chartered Bank" },
+    { "code": " STP", "name": "Starpay" },
+    { "code": " SLB", "name": "Sterling Bank of Asia" },
+    { "code": " SSB", "name": "Sun Savings Bank" },
+    { "code": " TC", "name": "TayoCash" },
+    { "code": " USB", "name": "UCPB Savings Bank" },
+    { "code": " USSC", "name": "USSC Monet Services" },
+    { "code": " UBP", "name": "Union Bank of the Philippines" },
+    { "code": " UCPB", "name": "United Coconut Planters Bank (UCPB)" },
+    { "code": " VB", "name": "Veterans Bank" },
+    { "code": " WDB", "name": "Wealth Development Bank" }
+]

src/locales/en.json

@@ -51,7 +51,10 @@
         "noRecords": "No records",
         "notAvailable": "Not available",
         "wait": "stay tuned",
-        "save": "Save"
+        "save": "Save",
+        "saving": "Saving",
+        "saveSuccess": "Saved successfully",
+        "saveFail": "Save failed"
     },
     "delegate": {
         "tip": "The consignment sale has not started yet, it will start today at ${time}",
@@ -244,11 +247,20 @@
     "bank": {
         "bank": "Bank",
         "addBankCard": "Add Bank Account",
+        "editBankCard": "Edit Bank Account",
+        "deleteBankCard": "Delete Bank Account",
         "cardNumber": "Card Number",
         "cardName": "Name on Card",
         "phone": "Phone Number",
         "mail": "Mail",
         "saveBankCard": "Save Bank Account",
-        "selectBank": "Select Bank"
+        "selectBank": "Select Bank",
+        "invalidCard": "Invalid Card Number",
+        "invalidName": "Invalid Name",
+        "invalidPhone": "Invalid Phone Number",
+        "invalidMail": "Invalid Mail",
+        "invalidBank": "Invalid Bank",
+        "deletePrompt": "Are you sure you want to delete this bank account?",
+        "deleteSuccess": "Bank account deleted successfully"
     }
 }

src/locales/zh.json

@@ -26,7 +26,10 @@
         "noRecords": "暂无记录",
         "notAvailable": "暂未开放",
         "wait": "敬请期待",
-        "save": "保存"
+        "save": "保存",
+        "saving": "保存中",
+        "saveSuccess": "保存成功",
+        "saveFailed": "保存失败"
     },
     "order": {
         "id": "订单编号",
@@ -243,11 +246,20 @@
     "bank": {
         "bank": "银行",
         "addBankCard": "添加银行卡",
+        "editBankCard": "编辑银行卡",
+        "deleteBankCard": "删除银行卡",
         "cardNumber": "银行卡号",
         "cardName": "持卡人姓名",
         "phone": "手机号",
         "mail": "邮箱",
         "saveBankCard": "保存银行卡",
-        "selectBank": "选择银行"
+        "selectBank": "选择银行",
+        "invalidCard": "无效的银行卡号",
+        "invalidName": "无效的持卡人姓名",
+        "invalidPhone": "无效的手机号",
+        "invalidMail": "无效的邮箱",
+        "invalidBank": "无效的银行名称",
+        "deletePrompt": "确定删除该银行卡吗？",
+        "deleteSuccess": "删除成功"
     }
 }

src/views/EditBankPage.vue

@@ -5,14 +5,15 @@
                 <ion-buttons slot="start">
                     <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                 </ion-buttons>
-                <ion-title>{{ $t('mine.bankCard') }}</ion-title>
+                <ion-title>{{ $t('bank.addBankCard') }}</ion-title>
             </ion-toolbar>
         </ion-header>
         <ion-content>
             <div class="input-sec">
                 <div class="title">{{ $t('bank.bank') }}</div>
-                <div class="input-wrapper">
-                    <div class="placeholder">{{ $t('bank.selectBank') }}</div>
+                <div class="input-wrapper" @click="showBankModal = true">
+                    <div class="input" v-if="formData.bankName">{{ formData.bankName }}</div>
+                    <div class="placeholder" v-else>{{ $t('bank.selectBank') }}</div>
                     <ion-icon :icon="chevronForwardOutline"></ion-icon>
                 </div>
             </div>
@@ -26,14 +27,16 @@
                         clear-input
                         type="number"
                         inputmode="decimal"
-                    ></ion-input>
+                        v-model="formData.account"
+                    >
+                    </ion-input>
                 </div>
             </div>
 
             <div class="input-sec">
                 <div class="title">{{ $t('bank.cardName') }}</div>
                 <div class="input-wrapper">
-                    <ion-input :placeholder="$t('bank.cardName')" clear-input></ion-input>
+                    <ion-input :placeholder="$t('bank.cardName')" clear-input v-model="formData.name"></ion-input>
                 </div>
             </div>
 
@@ -46,6 +49,7 @@
                         clear-input
                         type="number"
                         inputmode="decimal"
+                        v-model="formData.phone"
                     ></ion-input>
                 </div>
             </div>
@@ -53,25 +57,105 @@
             <div class="input-sec">
                 <div class="title">{{ $t('bank.mail') }}</div>
                 <div class="input-wrapper">
-                    <ion-input :placeholder="$t('bank.mail')" clear-input></ion-input>
+                    <ion-input :placeholder="$t('bank.mail')" clear-input v-model="formData.mail"></ion-input>
                 </div>
             </div>
             <div style="padding: 28px">
-                <van-button type="primary" block>{{ $t('bank.saveBankCard') }}</van-button>
+                <van-button type="primary" block @click="save">{{ $t('bank.saveBankCard') }}</van-button>
             </div>
         </ion-content>
+        <ion-modal class="bank-modal" ref="bankModal" :is-open="showBankModal" @didDismiss="showBankModal = false">
+            <ion-header>
+                <ion-toolbar>
+                    <ion-buttons slot="start">
+                        <ion-button @click="showBankModal = false">Cancel</ion-button>
+                    </ion-buttons>
+                    <ion-title>{{ $t('bank.selectBank') }}</ion-title>
+                </ion-toolbar>
+                <ion-toolbar>
+                    <ion-searchbar v-model="searchText"></ion-searchbar>
+                </ion-toolbar>
+            </ion-header>
+            <ion-content>
+                <ion-list>
+                    <ion-item v-for="item in filteredBankCode" :key="item.code" button @click="selectBank(item)">
+                        <ion-label>{{ item.name }}</ion-label>
+                    </ion-item>
+                </ion-list>
+            </ion-content>
+        </ion-modal>
     </ion-page>
 </template>
 <script>
 import { chevronForwardOutline } from 'ionicons/icons'
+import bankCode from '@/assets/bankCode.json'
 export default {
     setup() {
         return {
-            chevronForwardOutline
+            chevronForwardOutline,
+            bankCode
         }
     },
     data() {
-        return {}
+        return {
+            showBankModal: false,
+            searchText: '',
+            formData: {
+                bankName: '',
+                bankCode: '',
+                account: '',
+                name: '',
+                phone: '',
+                mail: ''
+            }
+        }
+    },
+    computed: {
+        filteredBankCode() {
+            if (!this.searchText) return this.bankCode
+            return this.bankCode.filter(item => {
+                return item.name.toLowerCase().includes(this.searchText.toLowerCase())
+            })
+        }
+    },
+    methods: {
+        selectBank(item) {
+            this.formData.bankName = item.name
+            this.formData.bankCode = item.code
+            this.showBankModal = false
+        },
+        save() {
+            if (!this.formData.bankName) {
+                this.$toast.error(this.$t('bank.invalidBank'))
+                return
+            }
+            if (!this.formData.account) {
+                this.$toast.error(this.$t('bank.invalidCard'))
+                return
+            }
+            if (!this.formData.name) {
+                this.$toast.error(this.$t('bank.invalidName'))
+                return
+            }
+            if (!/^9\d{9}$/.test(this.formData.phone)) {
+                this.$toast.error(this.$t('bank.invalidPhone'))
+                return
+            }
+            if (!/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(this.formData.mail)) {
+                this.$toast.error(this.$t('bank.invalidMail'))
+                return
+            }
+            this.$toast.loading(this.$t('common.saving'))
+            this.$http
+                .post('/user/saveBank', this.formData, { body: 'json' })
+                .then(res => {
+                    this.$toast.success(this.$t('common.saveSuccess'))
+                    this.$router.back()
+                })
+                .catch(e => {
+                    this.$toast.error(this.$t('common.saveFailed'))
+                })
+        }
     }
 }
 </script>

src/views/UserBankPage.vue

@@ -9,27 +9,67 @@
             </ion-toolbar>
         </ion-header>
         <ion-content>
+            <div class="bank-card" v-if="bankCard">
+                <img src="@/assets/bg_bank_card.png" class="bg" />
+                <div class="content">
+                    <div class="num">{{ bankCard.account }}</div>
+                    <div class="name">{{ bankCard.bankName }}</div>
+                </div>
+            </div>
             <div class="btn-add" @click="$router.push({ name: 'editBank' })">
                 <div class="icon-box">
-                    <ion-icon :icon="addOutline"></ion-icon>
+                    <ion-icon :icon="bankCard ? createOutline : addOutline"></ion-icon>
+                </div>
+                <div class="text">{{ bankCard ? $t('bank.editBankCard') : $t('bank.addBankCard') }}</div>
+            </div>
+            <div class="btn-add danger" v-if="bankCard" @click="del">
+                <div class="icon-box">
+                    <ion-icon :icon="trashOutline"></ion-icon>
                 </div>
-                {{ $t('bank.addBankCard') }}
+                <div class="text">{{ $t('bank.deleteBankCard') }}</div>
             </div>
         </ion-content>
     </ion-page>
 </template>
 <script>
-import { addOutline } from 'ionicons/icons'
+import { addOutline, createOutline, trashOutline } from 'ionicons/icons'
 import { IonIcon } from '@ionic/vue'
+import { showConfirmDialog } from 'vant'
 export default {
     setup() {
         return {
+            IonIcon,
             addOutline,
-            IonIcon
+            createOutline,
+            trashOutline
         }
     },
+    ionViewWillEnter() {
+        this.$http.get('/user/myBankCard').then(res => {
+            if (res) {
+                this.bankCard = res
+            }
+        })
+    },
     data() {
-        return {}
+        return {
+            bankCard: null
+        }
+    },
+    methods: {
+        del() {
+            showConfirmDialog({
+                title: this.$t('common.alert'),
+                message: this.$t('bank.deletePrompt')
+            })
+                .then(() => {
+                    this.$http.post('/user/delMyBankCard').then(res => {
+                        this.bankCard = null
+                        this.$toast.success(this.$t('bank.deleteSuccess'))
+                    })
+                })
+                .catch(() => {})
+        }
     }
 }
 </script>
@@ -41,19 +81,50 @@ export default {
     border-radius: 8px;
     color: rgba(255, 255, 255, 0.6);
     justify-content: center;
-    margin: 16px;
+    margin: 20px 16px;
+    font-size: 16px;
     &:active {
         background: var(--ion-color-step-100);
     }
     .icon-box {
-        width: 24px;
-        height: 24px;
-        border-radius: 12px;
-        background: var(--ion-color-step-200);
-        .f();
+        margin-right: 5px;
+        position: relative;
+        top: 1px;
+    }
+    &.danger {
+        color: rgba(var(--ion-color-danger-rgb), 0.8);
+    }
+}
+.bank-card {
+    height: 100px;
+    border-radius: 8px;
+    background: linear-gradient(90deg, #dfffcd 0%, #91fac5 48%, #39f3bb 100%);
+    margin: 20px 16px;
+    color: #000000;
+    position: relative;
+    overflow: hidden;
+    .bg {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
+    .content {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        .f-col();
         justify-content: center;
-        color: rgba(255, 255, 255, 0.6);
-        margin-right: 10px;
+        padding: 0 20px;
+    }
+    .num {
+        font-size: 18px;
+        font-weight: bold;
+    }
+    .name {
+        font-size: 14px;
+        margin-top: 10px;
     }
 }
 </style>