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

2025-12-10 03:26:45 +08:00 · 2022-07-28 16:36:24 +08:00
parent 370b82d0f2
commit 1dc136aa9a
6 changed files with 205 additions and 40 deletions
--- a/src/api/ebiz/allowance/allowance.js
+++ b/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({
--- a/src/api/ebiz/sale/sale.js
+++ b/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({
--- a/src/components/ebiz/account/SelectBankBranch.vue
+++ b/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') {
--- a/src/components/ebiz/account/SelectBankNameAllowance.vue
+++ b/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>
--- a/src/views/ebiz/allowance/application/AccountInfo.vue
+++ b/src/views/ebiz/allowance/application/AccountInfo.vue
@@ -61,8 +61,8 @@
    </van-popup>

    <!--开户银行选择-->
-    <SelectBankName :inputShow='inputShow' :listShow.sync='islistShow' :operateType="'bank_type'"
-                    @getBank='getBank'></SelectBankName>
+    <SelectBankNameAllowance ref="selectBankNameAllowance" :inputShow='inputShow' :listShow.sync='islistShow' :bankAreaCode="accountBankInfo.bankAreaCode"
+                    @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() {
-    // 调用初始化方法
-    this.init()
+    // 调用接口方法
+    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 cities = areaList.city_list
+      let provinces = this.areaList.province_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 = ''
      // 银行名称值变化，开户银行分行编码清空
--- a/src/views/ebiz/allowance/myInfo/AccountInfo.vue
+++ b/src/views/ebiz/allowance/myInfo/AccountInfo.vue
@@ -59,8 +59,8 @@
    </van-popup>

    <!--开户银行选择-->
-    <SelectBankName :inputShow='inputShow' :listShow.sync='islistShow' :operateType="'bank_type'"
-                    @getBank='getBank'></SelectBankName>
+    <SelectBankNameAllowance ref="selectBankNameAllowance" :inputShow='inputShow' :listShow.sync='islistShow' :bankAreaCode="accountBankInfo.bankAreaCode"
+                    @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() {
-    // 调用初始化方法
-    this.init()
+    // 调用接口方法
+    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 cities = areaList.city_list
+      let provinces = this.areaList.province_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 = ''
      // 银行名称值变化，开户银行分行编码清空