From 1e057c3fd7992f4dc52bd7cf2a918a6901792ffa Mon Sep 17 00:00:00 2001
From: "na.guo" <guona@ebiz-fooge.com>
Date: Fri, 7 Aug 2020 19:27:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=93=B6=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.scss                |  27 +-
 .../ebiz/account/SelectBankName.vue           | 106 ++++++
 src/components/ebiz/account/getBankName.js    |   7 +
 src/views/ebiz/sale/AccountInformation.vue    | 321 +++++++++---------
 4 files changed, 278 insertions(+), 183 deletions(-)
 create mode 100644 src/components/ebiz/account/SelectBankName.vue
 create mode 100644 src/components/ebiz/account/getBankName.js

diff --git a/src/assets/sass/variables.scss b/src/assets/sass/variables.scss
index 1720a4d50..8eafd55fa 100644
--- a/src/assets/sass/variables.scss
+++ b/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,31 +20,15 @@ $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,
-mv,
-mh,
-mt,
-ml,
-mr,
-mb,
-p,
-pv,
-ph,
-pt,
-pl,
-pr,
-pb,
-top,
-left,
-right,
-bottom;
+$distance-class-list: m, 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;
 
 //透明度
-$opacity: 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9;
\ No newline at end of file
+$opacity: 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9;
diff --git a/src/components/ebiz/account/SelectBankName.vue b/src/components/ebiz/account/SelectBankName.vue
new file mode 100644
index 000000000..3a80e143d
--- /dev/null
+++ b/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>
diff --git a/src/components/ebiz/account/getBankName.js b/src/components/ebiz/account/getBankName.js
new file mode 100644
index 000000000..76d49a2bc
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/views/ebiz/sale/AccountInformation.vue b/src/views/ebiz/sale/AccountInformation.vue
index 6bb9595c2..a9122a367 100644
--- a/src/views/ebiz/sale/AccountInformation.vue
+++ b/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,145 +302,147 @@ export default {
         loadingType: 'spinner',
         message: '加载中……'
       })
-      let res = await checkCard(data)
-      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) {
-            data = {
-              orderType: 'ACCOUNTNEW_ORDER',
+      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)
+        }
 
-              orderDTO: {
-                orderInfoDTO: {
-                  orderNo: window.localStorage.getItem('orderNo')
-                },
-                orderAccountDTO: {
-                  bankName: that.bank,
-                  bankCode: that.bankCode,
-                  cvv2Code: '0',
-                  cardBookCode: that.bankId
-                }
+        let data = {}
+        //支付失败换卡
+        if (localStorage.changeCard) {
+          data = {
+            orderType: 'ACCOUNTNEW_ORDER',
+
+            orderDTO: {
+              orderInfoDTO: {
+                orderNo: window.localStorage.getItem('orderNo')
+              },
+              orderAccountDTO: {
+                bankName: that.bank,
+                bankCode: that.bankCode,
+                cvv2Code: '0',
+                cardBookCode: that.bankId
               }
             }
-          } else {
-            // 垫付
-            if (that.checked == true) {
-              // 续保
-              if (this.isChecked == true) {
-                data = {
-                  orderType: 'ACCOUNT_ORDER',
+          }
+        } else {
+          // 垫付
+          if (that.checked == true) {
+            // 续保
+            if (this.isChecked == true) {
+              data = {
+                orderType: 'ACCOUNT_ORDER',
 
-                  orderDTO: {
-                    orderInfoDTO: {
-                      orderNo: window.localStorage.getItem('orderNo')
-                    },
-                    orderAccountDTO: {
-                      accountType: that.radio,
-                      accountName: that.name,
-                      bankName: that.bank,
-                      bankCode: that.bankCode,
-                      cardBookType: '1',
-                      cardBookCode: that.bankId,
-                      isAutoPay: '0',
-                      isAutoRenewal: '0'
-                    }
-                  }
-                }
-              } else {
-                // 垫付不续保
-                data = {
-                  orderType: 'ACCOUNT_ORDER',
-
-                  orderDTO: {
-                    orderInfoDTO: {
-                      orderNo: window.localStorage.getItem('orderNo')
-                    },
-                    orderAccountDTO: {
-                      accountType: that.radio,
-                      accountName: that.name,
-                      bankName: that.bank,
-                      bankCode: that.bankCode,
-                      cardBookType: '1',
-                      cardBookCode: that.bankId,
-                      isAutoPay: '0',
-                      isAutoRenewal: this.isRenew == '0' ? '1' : ''
-                    }
+                orderDTO: {
+                  orderInfoDTO: {
+                    orderNo: window.localStorage.getItem('orderNo')
+                  },
+                  orderAccountDTO: {
+                    accountType: that.radio,
+                    accountName: that.name,
+                    bankName: that.bank,
+                    bankCode: that.bankCode,
+                    cardBookType: '1',
+                    cardBookCode: that.bankId,
+                    isAutoPay: '0',
+                    isAutoRenewal: '0'
                   }
                 }
               }
             } else {
-              // 不垫付 续保
-              if (this.isChecked == true) {
-                data = {
-                  orderType: 'ACCOUNT_ORDER',
+              // 垫付不续保
+              data = {
+                orderType: 'ACCOUNT_ORDER',
 
-                  orderDTO: {
-                    orderInfoDTO: {
-                      orderNo: window.localStorage.getItem('orderNo')
-                    },
-                    orderAccountDTO: {
-                      accountType: that.radio,
-                      accountName: that.name,
-                      bankName: that.bank,
-                      bankCode: that.bankCode,
-                      cardBookType: '1',
-                      cardBookCode: that.bankId,
-                      isAutoPay: this.isAutoPay == '0' ? '1' : '',
-                      isAutoRenewal: '0'
-                    }
+                orderDTO: {
+                  orderInfoDTO: {
+                    orderNo: window.localStorage.getItem('orderNo')
+                  },
+                  orderAccountDTO: {
+                    accountType: that.radio,
+                    accountName: that.name,
+                    bankName: that.bank,
+                    bankCode: that.bankCode,
+                    cardBookType: '1',
+                    cardBookCode: that.bankId,
+                    isAutoPay: '0',
+                    isAutoRenewal: this.isRenew == '0' ? '1' : ''
                   }
                 }
-              } else {
-                // 不垫付 不续保
-                data = {
-                  orderType: 'ACCOUNT_ORDER',
+              }
+            }
+          } else {
+            // 不垫付 续保
+            if (this.isChecked == true) {
+              data = {
+                orderType: 'ACCOUNT_ORDER',
 
-                  orderDTO: {
-                    orderInfoDTO: {
-                      orderNo: window.localStorage.getItem('orderNo')
-                    },
-                    orderAccountDTO: {
-                      accountType: that.radio,
-                      accountName: that.name,
-                      bankName: that.bank,
-                      bankCode: that.bankCode,
-                      cardBookType: '1',
-                      cardBookCode: that.bankId,
-                      isAutoPay: this.isAutoPay == '0' ? '1' : '',
-                      isAutoRenewal: this.isRenew == '0' ? '1' : ''
-                    }
+                orderDTO: {
+                  orderInfoDTO: {
+                    orderNo: window.localStorage.getItem('orderNo')
+                  },
+                  orderAccountDTO: {
+                    accountType: that.radio,
+                    accountName: that.name,
+                    bankName: that.bank,
+                    bankCode: that.bankCode,
+                    cardBookType: '1',
+                    cardBookCode: that.bankId,
+                    isAutoPay: this.isAutoPay == '0' ? '1' : '',
+                    isAutoRenewal: '0'
+                  }
+                }
+              }
+            } else {
+              // 不垫付 不续保
+              data = {
+                orderType: 'ACCOUNT_ORDER',
+
+                orderDTO: {
+                  orderInfoDTO: {
+                    orderNo: window.localStorage.getItem('orderNo')
+                  },
+                  orderAccountDTO: {
+                    accountType: that.radio,
+                    accountName: that.name,
+                    bankName: that.bank,
+                    bankCode: that.bankCode,
+                    cardBookType: '1',
+                    cardBookCode: that.bankId,
+                    isAutoPay: this.isAutoPay == '0' ? '1' : '',
+                    isAutoRenewal: this.isRenew == '0' ? '1' : ''
                   }
                 }
               }
             }
           }
-          saveInformation(data).then(res => {
-            if (res.result == '0') {
-              window.localStorage.setItem('accountInformationRadio', that.radio)
-
-              that.$jump({
-                flag: 'h5',
-                extra: {
-                  url: location.origin + '/#/sale/attachmentManagement'
-                },
-                routerInfo: {
-                  path: '/sale/attachmentManagement'
-                }
-              })
-            } else {
-              that.$toast(res.resultMessage)
-            }
-          })
-        } else {
-          that.$toast(that.errors.all()[0])
         }
-      })
+        saveInformation(data).then(res => {
+          if (res.result == '0') {
+            window.localStorage.setItem('accountInformationRadio', that.radio)
+
+            that.$jump({
+              flag: 'h5',
+              extra: {
+                url: location.origin + '/#/sale/attachmentManagement'
+              },
+              routerInfo: {
+                path: '/sale/attachmentManagement'
+              }
+            })
+          } else {
+            that.$toast(res.resultMessage)
+          }
+        })
+      } 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>