选择银行组件添加

src/views/ebiz/agentEenter/AgentEenterBasicInfor.vue

@@ -117,8 +117,17 @@
       </van-field>
       <van-field v-model="userInfo.address" label="联系地址" name="联系地址" placeholder="请输入" v-validate="'required'" required clearable />
       <!-- <van-field v-model="userInfo.zip" label="邮政编码" name="邮政编码" placeholder="请输入" v-validate="'required|zipCode'" required clearable /> -->
-      <van-field v-model="userInfo.zip" label="邮政编码" name="邮政编码" placeholder="请输入" clearable />
+      <van-field v-model="userInfo.zip" label="邮政编码" name="邮政编码" placeholder="请输入" v-validate="'zipCode'" clearable />
-      <van-field :value="userInfo.bankName" label="开户银行" name="开户银行" v-validate="'required'" required readonly />
+      <van-field
+        placeholder="请选择"
+        @click="islistShow = true"
+        v-model="userInfo.bankName"
+        label="开户银行"
+        name="开户银行"
+        v-validate="'required'"
+        required
+        readonly
+      />
       <!-- @click="focus"
         right-icon="arrow"
         data-vv-name="开户银行" -->
@@ -140,6 +149,17 @@
       >
         <van-button slot="button" size="small" type="danger" round @click="cardScanning('0')">银行卡扫描</van-button>
       </van-field>
+      <van-field
+        v-model="bankCode"
+        maxlength="19"
+        label="确认银行卡号"
+        name="银行卡号"
+        placeholder="请再次输入银行卡号"
+        required
+        clearable
+        v-validate="'required|bankCard'"
+      >
+      </van-field>
       <van-field
         v-model="userInfo.perationPeriod"
         type="digit"
@@ -252,20 +272,23 @@
     <van-popup v-model="isScan" style="height:100vh" position="bottom">
       <BankCardScan :scanShow="isScan" @getScanInfo="getBankCardInfo" :clear="isClear"></BankCardScan>
     </van-popup>
-    <!-- 开户银行选择 -->
+
-    <van-popup v-model="show" position="bottom" style="height:400px">
-      <van-list>
-        <van-cell v-for="item in bankList" :key="item.code" :title="item.bankName" class="text-center" @click="clickList(item.bankName, item.code)" />
-      </van-list>
-    </van-popup>
     <!-- 二次输入银行卡号校验弹出 -->
-    <van-dialog v-model="checkShow" show-cancel-button @confirm="bankCodeConfirm(bankCode)">
+    <van-dialog id="card" v-model="checkShow" show-cancel-button @confirm="bankCodeConfirm(bankCode)">
       <p class="p10 fs16 text-center green mt5">请再次输入银行卡号</p>
       <van-cell-group class="flex align-items-c pr5 mb15">
-        <van-field label="银行卡号：" name="银行卡号" maxlength="19" v-model="bankCode" clearable />
+        <van-field label="银行卡号：" name="银行卡号" maxlength="19" v-model="bankCode" clearable placeholder="请输入银行卡号" required />
       </van-cell-group>
       <p class="fs14 mt5 ml5">注：是否确认提交，一旦提交在人管审批之前无法再次进行修改</p>
     </van-dialog>
+    <!--开户银行选择-->
+    <SelectBankName
+      :inputShow="inputShow"
+      :listShow.sync="islistShow"
+      :operateType="'enter_bank_type'"
+      @getBankList="getBankList"
+      @getBank="getBank"
+    ></SelectBankName>
   </div>
 </template>
 <script>
@@ -277,16 +300,18 @@ import CustomerPicker from '@/components/ebiz/customer/CustomerPicker'
 import BankCardScan from '@/components/ebiz/sale/BankCardScan'
 import areaList from '@/assets/js/utils/area'
 import idNoCheck from '@/assets/js/utils/idNoCheck'
-import DataDictionary from '@/assets/js/utils/data-dictionary'
+// import DataDictionary from '@/assets/js/utils/data-dictionary'
 import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
 import beforeDate from '@/assets/js/utils/getBeforeDate.js'
-import { getBankList } from '@/api/ebiz/sale/sale'
+
 import RsTop from '@/components/ebiz/agentEenter/RsTop'
 import { saveOrUpdateInfo, agentAll } from '@/api/ebiz/agentEenter/agentEenter.js'
 import { idToData } from '@/views/ebiz/customer/js/verification'
+import SelectBankName from '@/components/ebiz/account/SelectBankName'
+import getBankName from '@/components/ebiz/account/getBankName'
 import {
   selectComp,
-  appCallBack,
+  // appCallBack,
   chooseOccupation,
   toSelect,
   onConfirm,
@@ -301,6 +326,7 @@ import {
 export default {
   name: 'insuredInfo',
   components: {
+    SelectBankName, //开户银行弹窗
     [SelectRadio.name]: SelectRadio,
     [FieldDatePicter.name]: FieldDatePicter,
     [OccupationPicker.name]: OccupationPicker,
@@ -321,15 +347,15 @@ export default {
   },
   data() {
     return {
+      inputShow: false, //模糊查询功能
+      islistShow: false, //选择银行弹窗
+      bankList: [], //银行名称列表
+      code: '',
       bankCode: '', //二次输入的银行卡号
       checkShow: false, //银行卡校验弹框是否显示 false-不显示 true-显示
       isScan: false, //是否显示证件扫描组件
       //是否清空
       isClear: false,
-      // 银行列表弹框
-      show: false,
-      // 银行卡列表
-      bankList: [],
       sexRadio: [
         {
           label: '男',
@@ -394,7 +420,7 @@ export default {
         address: '', //现住址
         bankProvince: '', // 开户省
         bankCity: '', // 开户市
-        bankName: '工商银行', // 开户银行
+        bankName: '', // 开户银行
         // 银行卡号
         bankCode: '',
         rgtAddress: '', //户口所在地
@@ -430,10 +456,19 @@ export default {
     // window.appCallBack = this.appCallBack
     window.appCallBack = this.appCallBack
     this.agentAll()
-    // // 获取银行卡
-    // this.getBankList()
   },
   methods: {
+    getBankList(value) {
+      //获取银行列表
+      this.bankList = value
+
+      console.log('getBankList', value)
+    },
+    getBank(bank) {
+      //获取银行名称
+      this.userInfo.bankName = bank.bankName
+      this.code = bank.code
+    },
     //获取推荐人信息
     agentAll() {
       let data = {
@@ -457,39 +492,13 @@ export default {
             this.userInfo.age = idToData(this.userInfo.idNo).age
             this.userInfo.sex = idToData(this.userInfo.idNo).sex
           }
-          this.userInfo.bankName = '工商银行'
+          this.userInfo.bankName = getBankName(this.bankList, this.userInfo.bankName)
+          console.log('getBankName', getBankName(this.bankList, this.userInfo.bankName))
           this.userInfo.nationality = 'CHN'
         }
       })
     },
-    // 获取银行卡列表
+
-    getBankList() {
-      let self = this
-      let data = {
-        operateType: 'enter_bank_type'
-      }
-      getBankList(data).then(res => {
-        if (res.result == '0') {
-          console.log('银行卡列表', res.content)
-          self.bankList = res.content
-        } else {
-          this.$toast(res.resultMessage)
-        }
-      })
-    },
-    // 选择银行卡
-    clickList(item, bankCode) {
-      console.log('英航卡', item, bankCode)
-      let that = this
-      // that.userInfo.bankName = item
-      // // that.userInfo.bankCode = bankCode
-      // that.show = false
-    },
-    // 获取银行列表的focus
-    focus() {
-      let that = this
-      that.show = true
-    },
     //监听名字变化
     nameChange(name) {
       this.userInfo.name = name
@@ -520,6 +529,9 @@ export default {
     },
     // 点击下一步
     nextStep() {
+      if (this.userInfo.bankCode.trim() && this.bankCode.trim() && this.userInfo.bankCode !== this.bankCode) {
+        return this.$toast('两次输入的银行卡号不一致!')
+      }
       this.$validator.validate().then(valid => {
         if (valid == true) {
           if (this.userInfo.idType == '1') {
@@ -548,9 +560,10 @@ export default {
           if (this.userInfo.name != this.userInfo.accountName) {
             return this.$toast('姓名与开户名要一致')
           }
-          if (this.userInfo.bankName == '工商银行') {
+          // if (this.userInfo.bankName == '工商银行') {
-            this.userInfo.bankName = '102'
+          //   this.userInfo.bankName = '102'
-          }
+          // }
+          this.userInfo.bankName = this.code
           if (
             //学历为初中、小学、其他、文盲阻断入司
             Number(this.userInfo.degree) == 13 ||
@@ -560,7 +573,7 @@ export default {
           ) {
             return this.$toast('您的学历不符合入司要求，不允许入司。')
           }
-          this.checkShow = true //
+          this.bankCodeConfirm()
         } else {
           this.$toast(this.errors.all()[0])
         }
@@ -595,7 +608,7 @@ export default {
       sureArea(this, area, type)
     },
     //设为联系地址
-    setAddress(val) {
+    setAddress() {
       //上面是0下面是1
       if (this.homeDefault) {
         this.userInfo.addressStatus = 1
@@ -681,13 +694,8 @@ export default {
       })
       this.isScan = false
     },
-    bankCodeConfirm(val) {
+    bankCodeConfirm() {
-      if (val == this.userInfo.bankCode) {
+      this.save()
-        this.save()
-      } else {
-        this.$toast('两次输入的银行卡号不一致，请重新输入！')
-        this.bankCode = ''
-      }
     }
   },
   beforeDestroy() {
@@ -712,6 +720,11 @@ export default {
       width: 120px;
     }
   }
+  #card {
+    /deep/.van-cell__value {
+      border-bottom: 2px solid #e9332e;
+    }
+  }
 }
 /deep/ .van-field__label {
   display: flex;