新增银行

src/assets/sass/variables.scss

@@ -1,7 +1,8 @@
 //颜色
 $white: #fff !default;
-$green: #E9332E !default;
+$green: #e9332e !default;
 $red: #f56123 !default;
+$red1: #ee0a24 !default;
 $yellow: #f56123 !default;
 $orange: #dd9c56 !default;
 $gray: #b1b1b1 !default;
@@ -19,28 +20,12 @@ $font-size-xl: 18px !default;
 $font-size-xll: 26px !default;
 
 // 宽度列表
-$width-list:2 8 10 12 15 18 20 35 40 41 45 50 60 70 80 86 90 100 105 110 120 130 140 150 155 160 165 180 192 200 220 240 250 260 280 300 315 325 345 350 365 400 440 445 450 550 700 1340;
+$width-list: 2 8 10 12 15 18 20 35 40 41 45 50 60 70 80 86 90 100 105 110 120 130 140 150 155 160 165 180 192 200 220
+  240 250 260 280 300 315 325 345 350 365 400 440 445 450 550 700 1340;
 
 // 内外边距列表
 $distance-list: -25 0 1 2 5 6 7 8 9 10 12 15 20 25 30 35 40 45 50 60 70 80 86 90 100 145 150 165 185 210 250;
-$distance-class-list: m,
+$distance-class-list: m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb, top, left, right, bottom;
-mv,
-mh,
-mt,
-ml,
-mr,
-mb,
-p,
-pv,
-ph,
-pt,
-pl,
-pr,
-pb,
-top,
-left,
-right,
-bottom;
 
 //圆角弧度
 $radius: 1 2 3 4 5 6 7 8 9 10 12 15 18 20 50 100;

src/components/ebiz/account/SelectBankName.vue

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <!-- 开户银行选择 -->
+    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
+      <div v-if="inputShow">
+        <van-field v-model="inputvalue" left-icon="search" placeholder="请输入银行名称" />
+      </div>
+
+      <div class="vanlist">
+        <van-list>
+          <van-cell v-for="item in bankList" :key="item.code" :title="item.bankName" class="text-center" @click="clickList(item)" />
+        </van-list>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { Popup, Field, List } from 'vant'
+
+Vue.use(Popup)
+  .use(Field)
+  .use(List)
+import { getBankList } from '@/api/ebiz/sale/sale'
+export default {
+  data() {
+    return {
+      inputvalue: '',
+      // 银行列表
+      bankList: [],
+      bankList1: []
+    }
+  },
+  components: {},
+  name: 'SelectBankName',
+  props: {
+    operateType: {
+      type: String
+    },
+    listShow: {
+      type: Boolean,
+      default: false
+    },
+    inputShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  created() {
+    this.getBankList()
+  },
+  watch: {
+    inputvalue(val) {
+      if (val) {
+        this.bankList = this.bankList.filter(item => {
+          return item.bankName.indexOf(val) != -1
+        })
+      } else {
+        this.bankList = this.bankList1
+      }
+      document.querySelector('.vanlist').scrollTo(0, 0) //重置滚动条
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.listShow
+      },
+      set(value) {
+        this.$emit('update:listShow', value)
+      }
+    }
+  },
+  methods: {
+    // 获取银行卡列表
+    getBankList() {
+      let data = {
+        operateType: this.operateType
+      }
+      getBankList(data).then(res => {
+        if (res.result == '0') {
+          this.bankList = res.content
+          this.bankList1 = res.content
+          this.$emit('getBankList', this.bankList)
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // 选择银行卡
+    clickList(item, bankCode) {
+      console.log(item, 'item')
+      this.$emit('getBank', item)
+      this.show = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.vanlist {
+  height: calc(100% - 50px);
+  overflow: auto;
+}
+</style>

src/components/ebiz/account/getBankName.js

@@ -0,0 +1,7 @@
+export default function getBankName(data, code) {
+  if (code) {
+    return data.filter(item => {
+      return item.code == code
+    })[0].bankName
+  }
+}

src/views/ebiz/sale/AccountInformation.vue

@@ -10,7 +10,16 @@
       </van-radio-group>
       <div v-if="radio == '0'">
         <van-cell-group class="pl20 fs14">
-          <van-field v-model="bank" label="开户银行" placeholder="请选择" required @click="focus" readonly v-validate="'required'" data-vv-name="开户银行" />
+          <van-field
+            v-model="bank"
+            label="开户银行"
+            placeholder="请选择"
+            required
+            @click="islistShow = true"
+            readonly
+            v-validate="'required'"
+            data-vv-name="开户银行"
+          />
         </van-cell-group>
         <van-cell-group class="pl20 flex align-items-c">
           <van-field
@@ -98,29 +107,26 @@
           <van-button type="danger" size="large" @click="next" :disabled="isDisabled" v-no-more-click="1000">下一步</van-button>
         </div>
       </div> -->
-
-      <!-- 开户银行选择 -->
-      <van-popup v-model="show" position="bottom">
-        <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>
     </div>
     <!-- 银行卡扫描 -->
     <BankCardScan :scanShow="isScan" :clear="isClear" @getScanInfo="getBankCardInfo"></BankCardScan>
+    <!--开户银行选择-->
+    <SelectBankName :inputShow="inputShow" :listShow.sync="islistShow" :operateType="'bank_type'" @getBank="getBank"></SelectBankName>
   </div>
 </template>
 
 <script>
 import { Cell, CellGroup, Field, RadioGroup, Radio, Popup, List, Switch, Toast, SwitchCell, Icon } from 'vant'
-import { saveInformation, getBankList, getOrderDetail, checkCard } from '@/api/ebiz/sale/sale'
+import { saveInformation, getOrderDetail, checkCard } from '@/api/ebiz/sale/sale'
 import utilsAge from '@/assets/js/utils/age'
 import BankCardScan from '@/components/ebiz/sale/BankCardScan'
 import IndexBar from '@/components/ebiz/sale/IndexBar'
-
+import SelectBankName from '@/components/ebiz/account/SelectBankName'
 export default {
   data() {
     return {
+      inputShow: true, //模糊查询功能
+      islistShow: false, //选择银行弹窗
       // 选中后传给后端的投保人或者被保险人名字
       name: '',
       // 开户银行
@@ -143,8 +149,7 @@ export default {
       saleInsuredInfo: {},
       // 下一步是否可以点击
       isDisabled: true,
-      // 银行列表
+
-      bankList: [],
       // 银行卡code
       bankCode: '',
       // 银行卡扫描是否显示
@@ -165,6 +170,15 @@ export default {
     }
   },
   methods: {
+    closePop(value) {
+      //关闭选择银行弹窗
+      this.islistShow = false
+    },
+    getBank(bank) {
+      //获取银行
+      this.bank = bank.bankName
+      this.bankCode = bank.code
+    },
     //获取身份证扫描信息
     getBankCardInfo(data) {
       this.bankId = data.name
@@ -178,31 +192,7 @@ export default {
       })
       this.isScan = false
     },
-    // 获取银行卡列表
+
-    getBankList() {
-      let data = {
-        operateType: 'bank_type'
-      }
-      getBankList(data).then(res => {
-        if (res.result == '0') {
-          this.bankList = res.content
-        } else {
-          this.$toast(res.resultMessage)
-        }
-      })
-    },
-    // 获取银行列表的focus
-    focus() {
-      let that = this
-      that.show = true
-    },
-    // 选择银行卡
-    clickList(item, bankCode) {
-      let that = this
-      that.bank = item
-      that.bankCode = bankCode
-      that.show = false
-    },
     // 银行卡扫描
     cardScanning(cardScanningType) {
       window.localStorage.setItem('cardScanningType', cardScanningType)
@@ -287,9 +277,9 @@ export default {
         this.$toast('本产品年龄大于65岁不能投保')
         return
       }
-      let data
+      let cardData = {}
       if (this.saleInsuredInfo.idNo) {
-        data = {
+        cardData = {
           account: this.bankId,
           idNo: this.saleInsuredInfo.idNo,
           idType: this.saleInsuredInfo.idType,
@@ -297,7 +287,7 @@ export default {
           name: this.saleInsuredInfo.name
         }
       } else {
-        data = {
+        cardData = {
           account: this.bankId,
           idNo: this.appntDTO.idNo,
           idType: this.appntDTO.idType,
@@ -312,14 +302,16 @@ export default {
         loadingType: 'spinner',
         message: '加载中……'
       })
-      let res = await checkCard(data)
+      let that = this
+      let valid = await this.$validator.validate()
+      // that.$validator.validate().then(valid => {
+      if (valid === true) {
+        let res = await checkCard(cardData)
         this.$toast.clear()
         if (res.result != '0') {
           return this.$toast(res.resultMessage)
         }
-      let that = this
+
-      that.$validator.validate().then(valid => {
-        if (valid === true) {
         let data = {}
         //支付失败换卡
         if (localStorage.changeCard) {
@@ -450,7 +442,7 @@ export default {
       } else {
         that.$toast(that.errors.all()[0])
       }
-      })
+      // })
     },
     handleRenew(v) {
       //大于65不能续保
@@ -512,8 +504,7 @@ export default {
       // 默认是投保人名字
       that.name = this.saleInsuredInfo.name
     }
-    // 获取银行卡列表
+
-    that.getBankList()
     // 是否显示自动垫交
     this.isAutoPay = localStorage.isAutoPay
     // 是否显示自动续保
@@ -570,6 +561,7 @@ export default {
     [Toast.name]: Toast,
     [SwitchCell.name]: SwitchCell,
     BankCardScan,
+    SelectBankName,
     [Icon.name]: Icon,
     [IndexBar.name]: IndexBar
   }
@@ -577,6 +569,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/assets/sass/variables.scss';
 .accountInformation-container {
   height: 100%;
 }
@@ -593,4 +586,8 @@ export default {
   position: absolute;
   left: 140px;
 }
+/deep/ .van-field__left-icon .van-icon {
+  color: $red1;
+  font-weight: bold;
+}
 </style>