【津贴模块，津贴申请和我的资料增加开户银行支行字段】调用子组件方法--通过所在市编码获取银行信息(开户银行)

src/api/ebiz/allowance/allowance.js

@@ -46,6 +46,32 @@ export function getAllowanceDetail(data) {
   })
 }
 
+// 津贴申请和我的资料-获取地区编码信息(开户银行省市)
+export function getProvinceCode(data) {
+  return request({
+    url: getUrl('/agent/code/getProvinceCode', 1),
+    method: 'post',
+    data
+  })
+}
+// 津贴申请和我的资料-通过所在市编码获取银行信息(开户银行)
+export function getCodeValue(data) {
+  return request({
+    url: getUrl('/agent/code/getCodeValue', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 津贴申请和我的资料-获取开户银行支行的信息（开户银行支行）
+export function getBranchCodeValue(data) {
+  return request({
+    url: getUrl('/agent/code/getBranchCodeValue', 1),
+    method: 'post',
+    data
+  })
+}
+
 // 津贴申请-权限校验
 export function allowanceCheck(data) {
   return request({

src/api/ebiz/sale/sale.js

@@ -165,15 +165,6 @@ export function getBankList(data) {
   })
 }
 
-// 获取开户银行支行的信息
-export function getBranchCodeValue(data) {
-  return request({
-    url: getUrl('/app/code/getBranchCodeValue', 1),
-    method: 'post',
-    data
-  })
-}
-
 // 获取微信人脸token
 export function getToken(data) {
   return request({

src/components/ebiz/account/SelectBankBranch.vue

@@ -21,7 +21,7 @@ import { Popup, Field, List } from 'vant'
 Vue.use(Popup)
   .use(Field)
   .use(List)
-import { getBranchCodeValue } from '@/api/ebiz/sale/sale'
+import { getBranchCodeValue } from '@/api/ebiz/allowance/allowance'
 export default {
   data() {
     return {
@@ -74,9 +74,10 @@ export default {
   },
   methods: {
     // 获取银行卡列表
-    getBankList(bankCode) {
+    getBankList(bankCode,areaCode) {
       let data = {
-        code: bankCode
+        code: bankCode,
+        areaCode: areaCode
       }
       getBranchCodeValue(data).then(res => {
         if (res.result == '0') {

src/components/ebiz/account/SelectBankNameAllowance.vue

@@ -0,0 +1,105 @@
+<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 { getCodeValue } from '@/api/ebiz/allowance/allowance'
+export default {
+  data() {
+    return {
+      inputvalue: '',
+      // 银行列表
+      bankList: [],
+      bankList1: []
+    }
+  },
+  components: {},
+  name: 'SelectBankNameAllowance',
+  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(bankAreaCode) {
+      let data = {
+        bankAreaCode: bankAreaCode
+      }
+      getCodeValue(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) {
+      this.$emit('getBank', item)
+      this.show = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.vanlist {
+  height: 100%;
+  overflow: auto;
+}
+</style>

src/views/ebiz/allowance/application/AccountInfo.vue

@@ -61,8 +61,8 @@
     </van-popup>
 
     <!--开户银行选择-->
-    <SelectBankName :inputShow='inputShow' :listShow.sync='islistShow' :operateType="'bank_type'"
+    <SelectBankNameAllowance ref="selectBankNameAllowance" :inputShow='inputShow' :listShow.sync='islistShow' :bankAreaCode="accountBankInfo.bankAreaCode"
-                    @getBank='getBank'></SelectBankName>
+                    @getBank='getBank'></SelectBankNameAllowance>
 
     <!--开户银行支行选择-->
     <SelectBankBranch ref="selectBankBranch" :inputShowBranch='inputShowBranch' :islistShowBranch.sync='islistShowBranch' :bankCode="accountBankInfo.bankCode"
@@ -93,12 +93,12 @@ import {
 } from 'vant'
 import { checkCard } from '@/api/ebiz/sale/sale'
 import { checkPhone } from '@/api/ebiz/customer/customer'
-import { saveOrUpdateAllowanceUrl, getAllowanceDetail } from '@/api/ebiz/allowance/allowance'
+import { saveOrUpdateAllowanceUrl, getAllowanceDetail, getProvinceCode } from '@/api/ebiz/allowance/allowance'
 import BankCardScan from '@/components/ebiz/sale/BankCardScan'
 import IndexBar from '@/components/ebiz/allowance/application/IndexBar'
-import SelectBankName from '@/components/ebiz/account/SelectBankName'
+import SelectBankNameAllowance from '@/components/ebiz/account/SelectBankNameAllowance'
 import SelectBankBranch from '@/components/ebiz/account/SelectBankBranch'
-import areaList from '@/assets/js/utils/area'
+// import areaList from '@/assets/js/utils/area'
 import { getWhitelist } from '@/api/ebiz/whitelist'
 
 export default {
@@ -115,7 +115,7 @@ export default {
     [Toast.name]: Toast,
     [SwitchCell.name]: SwitchCell,
     BankCardScan,
-    SelectBankName,
+    SelectBankNameAllowance,
     SelectBankBranch,
     [Icon.name]: Icon,
     [IndexBar.name]: IndexBar,
@@ -141,7 +141,7 @@ export default {
         isSelf: 0 //  是否是享受人本人银行卡 1:是; 0:不是
       },
       allowanceUserInfo: {}, // 定义存储申请人信息，享受人信息，账户信息的数据对象
-      areaList,
+      areaList:{},
       isAreaListShow: false, // 控制显示或隐藏选择开户银行省市的弹窗的变量
       isScan: false, // 控制显示或隐藏银行卡扫描页面的变量
       isClear: false,  //是否清空
@@ -157,8 +157,16 @@ export default {
     }
   },
   created() {
+    // 调用接口方法
+    getProvinceCode({}).then((res) => {
+      if (res.result == 0) {
+        this.areaList = eval("("+res.content+")")
         // 调用初始化方法
         this.init()
+      } else {
+        this.$toast(res.resultMessage)
+      }
+    })
   },
   mounted() {
     document.body.style.backgroundColor = '#F5F5F5'
@@ -276,6 +284,8 @@ export default {
       this.accountBankInfo.bankProvinceCode = data.bankProvinceCode
       // 赋值银行所在地区编码
       this.accountBankInfo.bankAreaCode = data.bankAreaCode
+      //调用子组件方法--通过所在市编码获取银行信息(开户银行)
+      this.$refs.selectBankNameAllowance.getBankList(data.bankAreaCode)
       // 调用回显银行卡省市信息的方法
       this.showbackBankAddressStr(data.bankProvinceCode, data.bankAreaCode)
       // 赋值银行卡号
@@ -284,8 +294,8 @@ export default {
       this.accountBankInfo.bankName = data.bankName
       // 赋值银行编码
       this.accountBankInfo.bankCode = data.bankCode
-      // 调用子组件的方法，获取开户银行分行列表
+      //调用子组件方法--获取开户银行支行的信息（开户银行支行）
-      this.$refs.selectBankBranch.getBankList(data.bankCode)
+      this.$refs.selectBankBranch.getBankList(data.bankCode,data.bankAreaCode)
       // 赋值开户银行支行名称
       this.accountBankInfo.bankBranchName = data.bankBranchName
       // 赋值开户银行支行编码
@@ -312,8 +322,8 @@ export default {
      * @Date:2021-09-15
      */
     showbackBankAddressStr(provinceCode, cityCode) {
-      let provinces = areaList.province_list
+      let provinces = this.areaList.province_list
-      let cities = areaList.city_list
+      let cities = this.areaList.city_list
       // 给开户银行省市名称赋值
       this.accountBankInfo.bankProvinceAreaName = `${provinces[provinceCode]}-${cities[cityCode]}`
     },
@@ -389,10 +399,20 @@ export default {
       this.accountBankInfo.bankProvinceCode = province.code
       // 将银行所在地区编码赋值给变量
       this.accountBankInfo.bankAreaCode = city.code
+      //调用子组件方法--通过所在市编码获取银行信息(开户银行)
+      this.$refs.selectBankNameAllowance.getBankList(city.code)
       // 拼接开户银行省市名称，并赋值给变量
       this.accountBankInfo.bankProvinceAreaName = `${province.name}-${city.name}`
       // 关闭隐藏选择开户银行省市的弹窗
       this.isAreaListShow = false
+      // 银行省市名称值变化，清空银行名称
+      this.accountBankInfo.bankName = ''
+      // 银行省市名称值变化，清空银行编码
+      this.accountBankInfo.bankCode = ''
+      // 银行名称值变化，开户银行分行名称清空
+      this.accountBankInfo.bankBranchName = ''
+      // 银行名称值变化，开户银行分行编码清空
+      this.accountBankInfo.bankBranchCode = ''
     },
 
     /**
@@ -405,7 +425,8 @@ export default {
       this.accountBankInfo.bankName = bank.bankName
       // 获取银行编码，并赋值给变量
       this.accountBankInfo.bankCode = bank.code
-      this.$refs.selectBankBranch.getBankList(bank.code)
+      //调用子组件方法--获取开户银行支行的信息（开户银行支行）
+      this.$refs.selectBankBranch.getBankList(bank.code,this.accountBankInfo.bankAreaCode)
       // 银行名称值变化，开户银行分行名称清空
       this.accountBankInfo.bankBranchName = ''
       // 银行名称值变化，开户银行分行编码清空

src/views/ebiz/allowance/myInfo/AccountInfo.vue

@@ -59,8 +59,8 @@
     </van-popup>
 
     <!--开户银行选择-->
-    <SelectBankName :inputShow='inputShow' :listShow.sync='islistShow' :operateType="'bank_type'"
+    <SelectBankNameAllowance ref="selectBankNameAllowance" :inputShow='inputShow' :listShow.sync='islistShow' :bankAreaCode="accountBankInfo.bankAreaCode"
-                    @getBank='getBank'></SelectBankName>
+                    @getBank='getBank'></SelectBankNameAllowance>
     
     <!--开户银行支行选择-->
     <SelectBankBranch ref="selectBankBranch" :inputShowBranch='inputShowBranch' :islistShowBranch.sync='islistShowBranch' :bankCode="accountBankInfo.bankCode"
@@ -92,11 +92,12 @@ import {
 import { checkCard } from '@/api/ebiz/sale/sale'
 import { checkPhone } from '@/api/ebiz/customer/customer'
 import { getAllowanceBaseDetail, saveOrUpdateAllowanceBase } from '@/api/ebiz/allowance/myInfo'
+import { getProvinceCode } from '@/api/ebiz/allowance/allowance'
 import BankCardScan from '@/components/ebiz/sale/BankCardScan'
 import IndexBar from '@/components/ebiz/allowance/myInfo/IndexBar'
-import SelectBankName from '@/components/ebiz/account/SelectBankName'
+import SelectBankNameAllowance from '@/components/ebiz/account/SelectBankNameAllowance'
 import SelectBankBranch from '@/components/ebiz/account/SelectBankBranch'
-import areaList from '@/assets/js/utils/area'
+// import areaList from '@/assets/js/utils/area'
 import { getWhitelist } from '@/api/ebiz/whitelist'
 
 export default {
@@ -113,7 +114,7 @@ export default {
     [Toast.name]: Toast,
     [SwitchCell.name]: SwitchCell,
     BankCardScan,
-    SelectBankName,
+    SelectBankNameAllowance,
     SelectBankBranch,
     [Icon.name]: Icon,
     [IndexBar.name]: IndexBar,
@@ -139,7 +140,7 @@ export default {
         isSelf: 0 //  是否是享受人本人银行卡 1:是; 0:不是
       },
       allowanceUserInfo: {}, // 定义存储申请人信息与享受人信息的数据的对象
-      areaList,
+      areaList:{},
       isAreaListShow: false, // 控制显示或隐藏选择开户银行省市的弹窗的变量
       isScan: false, // 控制显示或隐藏银行卡扫描页面的变量
       isClear: false,  //是否清空
@@ -152,8 +153,16 @@ export default {
     }
   },
   created() {
+    // 调用接口方法
+    getProvinceCode({}).then((res) => {
+      if (res.result == 0) {
+        this.areaList = eval("("+res.content+")")
         // 调用初始化方法
         this.init()
+      } else {
+        this.$toast(res.resultMessage)
+      }
+    })
   },
   mounted() {
     document.body.style.backgroundColor = '#F5F5F5'
@@ -237,6 +246,8 @@ export default {
       this.accountBankInfo.bankProvinceCode = data.bankProvinceCode
       // 赋值银行所在地区编码
       this.accountBankInfo.bankAreaCode = data.bankAreaCode
+      //调用子组件方法--通过所在市编码获取银行信息(开户银行)
+      this.$refs.selectBankNameAllowance.getBankList(data.bankAreaCode)
       // 调用回显银行卡省市信息的方法
       this.showbackBankAddressStr(data.bankProvinceCode, data.bankAreaCode)
       // 赋值银行卡号
@@ -245,8 +256,8 @@ export default {
       this.accountBankInfo.bankName = data.bankName
       // 赋值银行编码
       this.accountBankInfo.bankCode = data.bankCode
-      // 调用子组件的方法，获取开户银行分行列表
+      //调用子组件方法--获取开户银行支行的信息（开户银行支行）
-      this.$refs.selectBankBranch.getBankList(data.bankCode)
+      this.$refs.selectBankBranch.getBankList(data.bankCode,data.bankAreaCode)
       // 赋值开户银行支行名称
       this.accountBankInfo.bankBranchName = data.bankBranchName
       // 赋值开户银行支行编码
@@ -265,8 +276,8 @@ export default {
      * @Date:2021-09-15
      */
     showbackBankAddressStr(provinceCode, cityCode) {
-      let provinces = areaList.province_list
+      let provinces = this.areaList.province_list
-      let cities = areaList.city_list
+      let cities = this.areaList.city_list
       // 给开户银行省市名称赋值
       this.accountBankInfo.bankProvinceAreaName = `${provinces[provinceCode]}-${cities[cityCode]}`
     },
@@ -342,10 +353,20 @@ export default {
       this.accountBankInfo.bankProvinceCode = province.code
       // 将银行所在地区编码赋值给变量
       this.accountBankInfo.bankAreaCode = city.code
+      //调用子组件方法--通过所在市编码获取银行信息(开户银行)
+      this.$refs.selectBankNameAllowance.getBankList(city.code)
       // 拼接开户银行省市名称，并赋值给变量
       this.accountBankInfo.bankProvinceAreaName = `${province.name}-${city.name}`
       // 关闭隐藏选择开户银行省市的弹窗
       this.isAreaListShow = false
+      // 银行省市名称值变化，清空银行名称
+      this.accountBankInfo.bankName = ''
+      // 银行省市名称值变化，清空银行编码
+      this.accountBankInfo.bankCode = ''
+      // 银行名称值变化，开户银行分行名称清空
+      this.accountBankInfo.bankBranchName = ''
+      // 银行名称值变化，开户银行分行编码清空
+      this.accountBankInfo.bankBranchCode = ''
     },
 
     /**
@@ -358,8 +379,8 @@ export default {
       this.accountBankInfo.bankName = bank.bankName
       // 获取银行编码，并赋值给变量
       this.accountBankInfo.bankCode = bank.code
-      // 调用子组件的方法，获取开户银行分行列表
+      //调用子组件方法--获取开户银行支行的信息（开户银行支行）
-      this.$refs.selectBankBranch.getBankList(bank.code)
+      this.$refs.selectBankBranch.getBankList(bank.code,this.accountBankInfo.bankAreaCode)
       // 银行名称值变化，开户银行分行名称清空
       this.accountBankInfo.bankBranchName = ''
       // 银行名称值变化，开户银行分行编码清空