save

@@ -20,7 +20,7 @@
 
     <p class="error-tip">{{errorTip}}</p>
     <div class="option-wrap">
-      <button class="save-btn" @click="saveBank">确定</button>
+      <button class="save-btn" @click="checkBankCardInfo">确定</button>
     </div>
 
   </LayoutApp>
@@ -44,21 +44,22 @@ export default {
           title: '持卡人',
           placeholder: '请输入持卡人姓名',
           type: 'name',
-          errorTip: '您输入的姓名不符合规范，请重新输入'
+          errorTip: '您输入的姓名不符合规范，请重新输入',
+          regx: /^[u4e00-u9fa5a-zA-Z]{2,}$/
         },
         {
           title: '身份证号',
           placeholder: '请输入身份证号',
           type: 'idCardNo',
-          errorTip: '您输入的身份证号码不符合规范，请重新输入' // 15个数字
+          errorTip: '您输入的身份证号码不符合规范，请重新输入',
+          regx: /^(\d|X|x){15,18}$/
         },
         {
           title: '开户行',
           placeholder: '请选择开户行',
-          type: 'bankName',
+          type: 'bankCode',
           errorTip: '请选择开户行',
           select: 'bankList',
-          bandCode: '',
         },
         {
           title: '分行 支行',
@@ -70,21 +71,44 @@ export default {
           title: '银行卡号',
           placeholder: '请输入银行卡号',
           type: 'bankCardNo',
-          errorTip: '您输入的银行卡号不符合规范，请重新输入'
+          errorTip: '您输入的银行卡号不符合规范，请重新输入',
+          regx: /^\d{10,22}$/
         },
       ],
       formValue: [],
       errorTip: '',
     };
   },
+  mounted() {
+    if (!this.banks.length) {
+      this.fetchBankList();
+    }
+  },
+  computed: {
+    ...mapState(['banks']),
+    selectOptions() {
+      let bankList = [];
+
+      this._bankObj = {};
+
+      if (this.banks && this.banks.length) {
+        this.banks.forEach(val => {
+          this._bankObj[val.bankCode] = val.bankName;
+          bankList.push({
+            text: val.bankName,
+            value: val.bankCode
+          });
+        });
+      }
+
+      return {bankList};
+    }
+  },
   methods: {
-    ...mapActions(['fetchBankList']),
+    ...mapActions(['fetchBankList', 'checkBankCard', 'bindBankCard']),
     isReadonly(item) {
       return !!item.tapGo;
     },
-    saveBank() {
-      this.errorTip = '您输入的银行卡号不符合规范，请重新输入'
-    },
     inputChange(index, e) {
       this.changeFormValue(index, e.target.value);
     },
@@ -103,6 +127,8 @@ export default {
       let max = Math.max(index, this.formValue.length);
       let formValue = [];
 
+      this.errorTip = '';
+
       for (let i = 0; i <= max; i++) {
         if (i === index) {
           formValue[i] = val || '';
@@ -112,39 +138,76 @@ export default {
       }
 
       this.formValue = formValue;
-    }
-  },
-  computed: {
-    ...mapState(['banks']),
-    selectOptions() {
-      let bankList = [];
+    },
+    checkBankCardInfo() {
+      let errorTip = '';
+      let data = {};
 
-      this._bankObj = {};
+      this.formList.some((val, index) => {
+        if (errorTip) {
+          return true;
+        }
 
-      if (this.banks && this.banks.length) {
-        this.banks.forEach(val => {
-          this._bankObj[val.bankCode] = val.bankName;
-          bankList.push({
-            text: val.bankName,
-            value: val.bankCode
-          });
+        let input = this.formValue[index] || '';
+        let value = input.value || input || '';
+
+        if (val.regx) {
+          if (!val.regx.test(value)) {
+            errorTip = val.errorTip;
+          }
+        } else if (!value) {
+          errorTip = val.errorTip;
+        }
+
+        data[val.type] = value;
+      });
+
+      if (errorTip) {
+        this.errorTip = errorTip;
+      } else {
+        this.checkBankCard(data).then(res => {
+          if (res.code === 200) {
+            this.bindBankCardInfo(data);
+          } else {
+            this.errorTip = res.message || '信息有误或网络异常，请稍后重试';
+          }
         });
       }
-
-      return {bankList};
+    },
+    bindBankCardInfo(info) {
+      let confirm = this.$createDialog({
+        type: 'confirm',
+        title: '提示',
+        content: `请确认您填写的银行信息，提交后只能致电客服修改<br><br>持卡人: ${info.name}<br>身份证号: ${info.idCardNo || ''}<br>银行卡号: ${info.bankCardNo || ''}`,
+        confirmBtn: {
+          text: '提交',
+          active: true,
+        },
+        cancelBtn: {
+          text: '取消',
+        },
+        onConfirm: () => {
+          this.bindBankCard(data).then(res => {
+            if (res.code === 200) {
+              this.$router.replace({name: 'bankcard'});
+            } else {
+              this.$createDialog({
+                type: 'alert',
+                content: res.message || '提交失败或网络异常，请稍后重试',
+                confirmBtn: {
+                  text: '我知道了',
+                  active: true
+                }
+              }).show()
+            }
+          });
+        }
+      }).show();
     }
   },
   components: {
     LayoutApp,
     Select
-  },
-  mounted() {
-
-    if (!this.banks.length) {
-      this.fetchBankList();
-    }
-
-    console.log(this)
   }
 };
 </script>

@@ -30,4 +30,26 @@ export default {
 
     return result || {};
   },
+  async checkBankCard({commit}, {name, idCardNo, bankCode, bankBranch, bankCardNo}) {
+    const result = await this.$api.post('/api/ufo/bankcard/checkBankCard', {
+      name,
+      idCardNo,
+      bankCode,
+      bankBranch,
+      bankCardNo
+    });
+
+    return result || {};
+  },
+  async bindBankCard({commit}, {name, idCardNo, bankCode, bankBranch, bankCardNo}) {
+    const result = await this.$api.post('/api/ufo/bankcard/checkBankCard', {
+      name,
+      idCardNo,
+      bankCode,
+      bankBranch,
+      bankCardNo
+    });
+
+    return result || {};
+  },
 };