GFRS-2618【前端】新增津贴申请的基本信息页面的部分代码。提交人--张齐

src/api/ebiz/allowance/myInfo.js

@@ -0,0 +1,22 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+// 我的资料-基本信息，账户信息，影响资料等查询详细数据信息的接口
+export function getAllowanceBaseDetail(data) {
+  return request({
+    url: getUrl('/agent/allowanceBase/getAllowanceBaseDetail', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 我的资料-基本信息，账户信息，影响资料等点击下一步操作时调用的保存接口
+export function saveOrUpdateAllowanceBase(data) {
+  return request({
+    url: getUrl('/agent/allowanceBase/saveOrUpdateAllowanceBase', 1),
+    method: 'post',
+    data
+  })
+}
+
+

src/api/ebiz/parentList/parentList.js

@@ -0,0 +1,20 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+// 代理人客户列表
+export function getAllowanceBaseList(data) {
+  return request({
+    url: getUrl('/agent/allowanceBase/getAllowanceBaseList', 1),
+    method: 'post',
+    data
+  })
+}
+
+//查询代理人客户信息
+export function getAgentCustomerInfo(data) {
+  return request({
+    url: getUrl('/customer/agent/getAgentCustomerInfo', 1),
+    method: 'post',
+    data
+  })
+}

src/components/ebiz/allowance/application/IndexBar.vue

@@ -45,6 +45,11 @@ export default {
     valueKey: {
       type: String,
       default: 'text'
+    },
+    // 津贴申请的流水单号
+    allowanceNo: {
+      type: String,
+      default: ''
     }
   },
   components: {
@@ -89,7 +94,7 @@ export default {
           imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/qmqr_n.png'
         }
       ],
-      //localStorage.allowancePageFlag:控制导航是否可以直接跳转页面  1-投保人信息 2-被保人信息 3-选择产品 4-受益人信息 5-告知信息 6-账户信息 7-附件上传 8-签名确认
+      //localStorage.allowancePageFlag:控制导航是否可以直接跳转页面  1-基本信息 2-账户信息 3-影像资料 4-签名确认
       allowancePageFlag: Number(localStorage.allowancePageFlag)
     }
   },
@@ -107,16 +112,16 @@ export default {
       if (Number(localStorage.allowancePageFlag) < Number(pageIndex)) return
       switch (pageIndex) {
         case 1: //跳到基本信息页面
-          url = `/allowance/application/BaseInfo?edit=1&allowancePageFlag=${pageIndex}`
+          url = `/allowance/application/BaseInfo?edit=1&allowancePageFlag=${pageIndex}&allowanceNo=${this.allowanceNo}`
           break
         case 2: //跳到账户信息页面
-          url = `/allowance/application/AccountInfo?edit=1&allowancePageFlag=${pageIndex}`
+          url = `/allowance/application/AccountInfo?edit=1&allowancePageFlag=${pageIndex}&allowanceNo=${this.allowanceNo}`
           break
         case 3: //跳到影像资料页面
-          url = `/allowance/application/AttachmentManagement?edit=1&allowancePageFlag=${pageIndex}`
+          url = `/allowance/application/AttachmentManagement?edit=1&allowancePageFlag=${pageIndex}&allowanceNo=${this.allowanceNo}`
           break
         case 4: //跳到签名确认页面
-          url = `/allowance/application/SignatureConfirmation?edit=1&allowancePageFlag=${pageIndex}`
+          url = `/allowance/application/SignatureConfirmation?edit=1&allowancePageFlag=${pageIndex}&allowanceNo=${this.allowanceNo}`
           break
         default:
           break

src/components/ebiz/allowance/myInfo/IndexBar.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class='own_content'>
+    <ul class='index-bar'>
+      <li @click='changePage(Number(index) + 1)' v-for='(item, index) in pageTitle' :key='index' :class='item.tabClass'
+          :id='item.tabClass'>
+        <!-- 选中 -->
+        <div v-if='item.tabClass' class='flex justify-content-fs align-items-c'>
+          <div class='flex flex-direction-colunm align-items-c'>
+            <van-image :src='item.imgCheckedUrl' class='image_head' />
+            <span class='fs12 mt12'>{{ item.pageItem }}</span>
+          </div>
+          <van-image :src='doneUrl' v-if='index !== 2' class='image_done' />
+        </div>
+        <div v-if='!item.tabClass' class='flex justify-content-fs align-items-c'>
+          <div class='flex flex-direction-colunm align-items-c'>
+            <van-image :src='item.imgNoCheckedUrl' class='image_head' />
+            <span class='fs12 mt12' style='color: #999999'>{{ item.pageItem }}</span>
+          </div>
+          <van-image :src='doneNurl' v-if='index !== 2' class='image_done' />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { Icon, Image as VanImage } from 'vant'
+
+export default {
+  name: 'IndexBar',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: () => {
+      }
+    },
+    //选项对象中，文字对应的 key
+    valueKey: {
+      type: String,
+      default: 'text'
+    },
+    // 津贴申请的流水单号
+    enjoyId: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    [Icon.name]: Icon,
+    [VanImage.name]: VanImage
+  },
+  data() {
+    return {
+      doneUrl: this.$assetsUrl + 'images/allowance/done.png',
+      doneNurl: this.$assetsUrl + 'images/allowance/done_n.png',
+      pageTitle: [
+        {
+          pageNo: 1,
+          pageItem: '基本信息',
+          urlStr: '/allowance/myInfo/BaseInfo',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/allowance/jbxx.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/jbxx_n.png'
+        },
+        {
+          pageNo: 2,
+          pageItem: '账户信息',
+          urlStr: '/allowance/myInfo/AccountInfo',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/allowance/zhxx.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/zhxx_n.png'
+        },
+        {
+          pageNo: 3,
+          pageItem: '影响资料',
+          urlStr: '/allowance/myInfo/AttachmentManagement',
+          tabClass: '',
+          imgCheckedUrl: this.$assetsUrl + 'images/allowance/yxzz.png',
+          imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/yxzz_n.png'
+        }
+      ],
+      //localStorage.allowanceMyInfoPageFlag:控制导航是否可以直接跳转页面  1-基本信息 2-账户信息 3-影像资料
+      allowanceMyInfoPageFlag: Number(localStorage.allowanceMyInfoPageFlag)
+    }
+  },
+  mounted() {
+    this.selectTab()
+  },
+  methods: {
+    changePage(pageIndex) {
+      let url = ''
+      if (!localStorage.allowanceMyInfoPageFlag) return
+      if (Number(localStorage.allowanceMyInfoPageFlag) < Number(pageIndex)) return
+      switch (pageIndex) {
+        case 1: //跳到基本信息页面
+          url = `/allowance/myInfo/BaseInfo?edit=1&allowanceMyInfoPageFlag=${pageIndex}&enjoyId=${this.enjoyId}`
+          break
+        case 2: //跳到账户信息页面
+          url = `/allowance/myInfo/AccountInfo?edit=1&allowanceMyInfoPageFlag=${pageIndex}&enjoyId=${this.enjoyId}`
+          break
+        case 3: //跳到影像资料页面
+          url = `/allowance/myInfo/AttachmentManagement?edit=1&allowanceMyInfoPageFlag=${pageIndex}&enjoyId=${this.enjoyId}`
+          break
+        default:
+          break
+      }
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          forbidSwipeBack: '1',
+          url: location.origin + `/#${url}`
+        },
+        routerInfo: { path: url }
+      })
+      // let str = location.hash
+      // let i = str.search(/AttachmentManagement/i)
+      // if (i !== -1 && pageIndex != 2 && pageIndex != 3) {
+      //   this.$dialog
+      //     .confirm({
+      //       className: 'dialog-blue',
+      //       title: '提示',
+      //       message: '离开此页可能会丢失部分数据，是否确认离开？'
+      //       // cancelButtonColor: '#E9332E',
+      //       // confirmButtonColor: '#FFFFFF'
+      //     })
+      //     .then(() => {
+      //       this.$jump({
+      //         flag: 'h5',
+      //         extra: {
+      //           forbidSwipeBack: '1',
+      //           url: location.origin + `/#${url}`
+      //         },
+      //         routerInfo: { path: url }
+      //       })
+      //     })
+      //     .catch(() => {
+      //       return
+      //     })
+      // } else {
+      //   this.$jump({
+      //     flag: 'h5',
+      //     extra: {
+      //       forbidSwipeBack: '1',
+      //       url: location.origin + `/#${url}`
+      //     },
+      //     routerInfo: { path: url }
+      //   })
+      // }
+    },
+    selectTab() {
+      let endIndex = location.hash.indexOf('?', 1)
+      let str = endIndex == -1 ? location.hash.slice(1) : location.hash.slice(1, endIndex)
+      this.pageTitle.forEach(v => {
+        if (v.urlStr.toLowerCase() == str.toLowerCase()) {
+          v.tabClass = 'active'
+        }
+      })
+      this.$nextTick(() => {
+        this.$el.querySelector('#active').scrollIntoView(true)
+      })
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.index-bar {
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.index-bar li {
+  display: flex;
+  align-items: center;
+}
+
+.index-bar::-webkit-scrollbar {
+  display: none;
+}
+
+li {
+  display: flex;
+}
+
+.index-bar span,
+.index-bar van-icon {
+  align-items: center;
+}
+
+.active {
+  color: #2E4591;
+}
+
+.activeline {
+  background: #2E4591;
+}
+
+.image_head {
+  width: 16px;
+  height: 16px;
+}
+
+.image_done {
+  width: 14px;
+  height: 14px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.own_content {
+  padding-top: 19px;
+  padding-bottom: 15px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+</style>

src/components/ebiz/allowance/parentList/Parent.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="parent">
-    <van-index-bar>
-      <div v-if="data.length > 0">
-        <div class=" bg-white mt10  " v-for="parentInfo in data" :key="parentInfo.letter">
-          <van-index-anchor :index="parentInfo.letter" />
-          <div v-for="parent in parentInfo.data" :key="parent.name" class="flex ml15 mt10 pb10 content border-b align-items-c" @click="choose(parent)">
-            <img class="w40  mr15 " src="../../../../assets/images/bnf_avatar.png"/>
-
-            <div class="c-gray-darker fs14">
-              <div>{{ parent.customerName }}</div>
-              <div class="mt5">{{ parent.customerPhone }}</div>
-            </div>
-            <div class="text-right" style="flex:1">
-<!--              <van-tag :color="parent.customerType == 0 ? '#7ED321' : parent.customerType == 1 ? '#5CA7DE' : '#333'" class="mr40" plain>{{-->
-<!--                  parent.typeName-->
-<!--              }}</van-tag>-->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-else class="text-center">
-        <img class="mt40 w200"  src="../../../../assets/images/pic_page-non.png"/>
-        <p class="mt15">暂无数据</p>
-      </div>
-    </van-index-bar>
-  </div>
-</template>
-<script>
-import { getCustomersList, getAgentCustomerInfo } from '@/api/ebiz/customer/customer'
-import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典找到用户等级
-import utils from '@/assets/js/business-common'
-import { IndexBar, IndexAnchor, Tag, Icon } from 'vant'
-export default {
-  name: 'Parent',
-  data() {
-    return {
-      data: [],
-      isSuccess: false,
-      type: ['success', 'primary', 'danger', '']
-    }
-  },
-  created() {
-    this.getList()
-  },
-  components: {
-    [IndexBar.name]: IndexBar,
-    [IndexAnchor.name]: IndexAnchor,
-    [Tag.name]: Tag,
-    [Icon.name]: Icon
-  },
-  mounted() {},
-  methods: {
-    choose(data) {
-      let params = {
-        customerNumber: data.customerNumber
-      }
-      getAgentCustomerInfo(params).then(res => {
-        console.log(res, '详情')
-        if (res.result == '0') {
-          this.isSuccess = true
-          let content = res.content
-          if (content.birthday) {
-            content.age = utils.jsGetAge(content.birthday)
-          }
-          this.$emit('on-choose', content)
-        }
-      })
-    },
-    getList() {
-      getCustomersList({}).then(res => {
-        debugger
-        console.log(res)
-        if (res.result == '0') {
-          let customerList = []
-          //根据数据字典中的客户等级 展示
-          for (var key in res.agentCustomerList) {
-            // res.agentCustomerList[key].forEach(current => {
-            //   dataDictionary.customerType.forEach(type => {
-            //     if (current.customerType == type.id) {
-            //       current.typeName = type.text
-            //     }
-            //   })
-            // })
-            let current = {
-              data: res.agentCustomerList[key],
-              letter: key
-            }
-
-            customerList.push(current)
-          }
-          this.data = customerList
-        }
-      })
-    }
-  }
-}
-</script>
-<style lang="scss">
-.parent {
-  .van-index-anchor {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    border-bottom: 1px solid #d6d6d6;
-  }
-  .border-b {
-    border-bottom: 1px solid #d6d6d6;
-  }
-  .content:last-child {
-    border: none;
-  }
-}
-</style>

src/components/ebiz/parentList/Parent.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class='parent'>
+    <van-index-bar>
+      <div v-if='data.length > 0'>
+<!--        <div class=' bg-white mt10  ' v-for='parentInfo in data' :key='parentInfo.letter'>-->
+<!--          <van-index-anchor :index='parentInfo.letter' />-->
+          <div v-for='parent in data' :key='parent.name'
+               class='flex ml15 mt10 pb10 content border-b align-items-c' @click='choose(parent)'>
+            <img class='w40  mr15 ' src='../../../assets/images/bnf_avatar.png' />
+
+            <div class='c-gray-darker fs14'>
+              <div>{{ parent.name }}</div>
+              <div class='mt5'>{{ parent.customerPhone }}</div>
+            </div>
+            <div class='text-right' style='flex:1'>
+              <!--              <van-tag :color="parent.customerType == 0 ? '#7ED321' : parent.customerType == 1 ? '#5CA7DE' : '#333'" class="mr40" plain>{{-->
+              <!--                  parent.typeName-->
+              <!--              }}</van-tag>-->
+            </div>
+<!--          </div>-->
+        </div>
+      </div>
+      <div v-else class='text-center'>
+        <img class='mt40 w200' src='../../../assets/images/pic_page-non.png' />
+        <p class='mt15'>暂无数据</p>
+      </div>
+    </van-index-bar>
+  </div>
+</template>
+<script>
+import { getAllowanceBaseList, getAgentCustomerInfo } from '@/api/ebiz/parentList/parentList'
+import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典找到用户等级
+import utils from '@/assets/js/business-common'
+import { IndexBar, IndexAnchor, Tag, Icon } from 'vant'
+
+export default {
+  name: 'Parent',
+  data() {
+    return {
+      data: [],
+      isSuccess: false,
+      type: ['success', 'primary', 'danger', '']
+    }
+  },
+  created() {
+    this.getList()
+  },
+  components: {
+    [IndexBar.name]: IndexBar,
+    [IndexAnchor.name]: IndexAnchor,
+    [Tag.name]: Tag,
+    [Icon.name]: Icon
+  },
+  mounted() {
+  },
+  methods: {
+    choose(data) {
+      let params = {
+        customerNumber: data.customerNumber
+      }
+      getAgentCustomerInfo(params).then(res => {
+        console.log(res, '详情')
+        if (res.result == '0') {
+          this.isSuccess = true
+          let content = res.content
+          if (content.birthday) {
+            content.age = utils.jsGetAge(content.birthday)
+          }
+          this.$emit('on-choose', content)
+        }
+      })
+    },
+    getList() {
+      getAllowanceBaseList({}).then(res => {
+        console.log(res)
+        if (res.result == '0') {
+          this.data = res.content
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang='scss'>
+.parent {
+  .van-index-anchor {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border-bottom: 1px solid #d6d6d6;
+  }
+
+  .border-b {
+    border-bottom: 1px solid #d6d6d6;
+  }
+
+  .content:last-child {
+    border: none;
+  }
+}
+</style>

src/components/ebiz/parentList/ParentPicker.vue

@@ -89,7 +89,8 @@ export default {
     [Popup.name]: Popup,
     [Icon.name]: Icon,
     [Sticky.name]: Sticky,
-    Parent
+    [Parent.name]: Parent
+
   },
   mounted() {
     this.showPicker = this.parentShowPicker

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

@@ -1,6 +1,6 @@
 <template>
   <div class='accountInfo-container buleRadioCheckbox'>
-    <index-bar></index-bar>
+    <index-bar :allowance-no='$route.query.allowanceNo'></index-bar>
     <div v-if='!isScan'>
       <van-radio-group v-model='radio' class='flex pl30 pr30 pt15 pb15 justify-content-s bg-white mt10'>
         <van-radio name='0' class='fs14 global-checked-color-blue'>
@@ -81,8 +81,8 @@ import {
   Checkbox,
   CheckboxGroup
 } from 'vant'
-import { getOrderDetail, checkCard, getAuthCode, autchCodeCheck } from '@/api/ebiz/sale/sale'
+import { checkCard } from '@/api/ebiz/sale/sale'
-import { saveOrUpdateAllowanceUrl } from '@/api/ebiz/allowance/allowance'
+import { saveOrUpdateAllowanceUrl, getAllowanceDetail } 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'
@@ -114,6 +114,7 @@ export default {
     return {
       radio: '0', // 定义享受人位置处的单选项是否选中的变量
       accountBankInfo: {
+        id: '', // id唯一标识，用于当做参数传给顶部导航组件，也用于在点击下一步时，传给后台，后台去判断是新增操作还是编辑操作
         accountName: '', // 持卡人姓名（享受人）
         bankProvinceAreaName: '', // 开户银行省市名称
         bankProvinceCode: '', // 银行所在省编码
@@ -121,10 +122,10 @@ export default {
         bankCardNo: '', // 银行卡号
         bankName: '', // 银行名称
         bankCode: '', // 银行编码
-        mobile: '', // 手机号
+        mobile: '', // 手机号码
         isSelf: 0 //  是否是享受人本人银行卡 1:是; 0:不是
       },
-      allowanceUserInfo: {}, // 定义存储'allowanceUserInfo'这个缓存中申请人信息与享受人信息的数据的对象
+      allowanceUserInfo: {}, // 定义存储申请人信息与享受人信息的数据的对象
       areaList,
       isAreaListShow: false, // 控制显示或隐藏选择开户银行省市的弹窗的变量
       isScan: false, // 控制显示或隐藏银行卡扫描页面的变量
@@ -135,34 +136,9 @@ export default {
       allowancePageFlag: '2' // 定义顶部导航记录当前展示的是第几个页面或流程的标识
     }
   },
-  async created() {
+  created() {
-    // let res = await getOrderDetail({ orderNo: localStorage.orderNo })
+    // 调用初始化方法
-    this.$toast.loading({
+    this.init()
-      duration: 0, // 持续展示 toast
-      forbidClick: true, // 禁用背景点击
-      loadingType: 'spinner',
-      message: '加载中……'
-    })
-    // if (res.result == 0) {
-    //   //如果是从编辑进来的
-    //   if (this.$route.query.edit) {
-    //
-    //   }
-    //   //如果存在填过的账户信息
-    // } else {
-    //   this.$toast.clear()
-    //   this.$toast(res.resultMessage)
-    // }
-
-    // 判断是否有津贴申请的申请人与享受人的信息
-    if (this.$CacheUtils.getLocItem('allowanceUserInfo')) {
-      // 从缓存中获取津贴申请的申请人与享受人的信息
-      this.allowanceUserInfo = JSON.parse(this.$CacheUtils.getLocItem('allowanceUserInfo'))
-      // 获取缓存中津贴申请的申请人与享受人的信息中的享受人姓名
-      this.accountBankInfo.accountName = this.allowanceUserInfo.enjoyUserInfo.name
-    }
-
-    this.$toast.clear()
   },
   mounted() {
     document.body.style.backgroundColor = '#F5F5F5'
@@ -177,6 +153,87 @@ export default {
     window.appCallBack = this.appCallBack
   },
   methods: {
+    /**
+     * @Description: 初始化方法，同时判断是新增操作还是编辑操作的类型，根据不同操作类型执行不同程序
+     * @author:zhangqi
+     * @Date:2021-09-14
+     */
+    init() {
+      // 开启toast加载提示
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+      // 从路由参数中获取'allowanceNo'津贴流水号，定义参数格式
+      let params = {
+        allowanceNo: this.$route.query.allowanceNo
+      }
+      // 调用接口方法
+      getAllowanceDetail(params).then((res) => {
+        if (res.result == 0) {
+          // 给存储申请人信息与享受人信息的数据的对象进行赋值
+          this.allowanceUserInfo = {
+            // 将申请人的数据对象赋值给对象中的属性
+            applicantInfo: res.content.allowanceDTO.allowanceApplyDTO,
+            // 将享受人的数据对象赋值给对象中的属性
+            enjoyUserInfo: res.content.allowanceDTO.allowanceEnjoyDTO
+          }
+          // 判断是新增操作还是编辑操作的类型，根据不同操作类型执行不同的程序
+          if (this.$route.query.edit) {
+            // 把账户信息数据对象赋值给一个新的变量
+            let data = res.content.allowanceDTO.allowanceBankDTO
+            // 赋值持卡人姓名（享受人）
+            this.accountBankInfo.accountName = data.accountName
+            // 赋值银行所在省编码
+            this.accountBankInfo.bankProvinceCode = data.bankProvinceCode
+            // 赋值银行所在地区编码
+            this.accountBankInfo.bankAreaCode = data.bankAreaCode
+            // 调用回显银行卡省市信息的方法
+            this.showbackBankAddressStr(data.bankProvinceCode, data.bankAreaCode)
+            // 赋值银行卡号
+            this.accountBankInfo.bankCardNo = data.bankCardNo
+            // 赋值银行名称
+            this.accountBankInfo.bankName = data.bankName
+            // 赋值银行编码
+            this.accountBankInfo.bankCode = data.bankCode
+            // 赋值手机号码
+            this.accountBankInfo.mobile = data.mobile
+            // 赋值是否是享受人本人银行卡的单选项
+            this.accountBankInfo.isSelf = data.isSelf
+            // 赋值id标识
+            this.accountBankInfo.id = data.id
+            //如果从津贴申请列表点击编辑按钮进入
+            if (this.$route.query.edit && !this.$route.query.allowancePageFlag) {
+              this.allowancePageFlag = '2'
+              localStorage.setItem('allowancePageFlag', this.allowancePageFlag)
+            }
+          } else {
+            // 获取享受人数据中的享受人姓名，并赋值给变量
+            this.accountBankInfo.accountName = this.allowanceUserInfo.enjoyUserInfo.name
+            localStorage.setItem('allowancePageFlag', this.allowancePageFlag)
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+      // 关闭清除toast加载提示
+      this.$toast.clear()
+    },
+
+    /**
+     * @Description: 根据银行卡省市编码，查询对应的省市名称的方法
+     * @author:zhangqi
+     * @Date:2021-09-15
+     */
+    showbackBankAddressStr(provinceCode, cityCode) {
+      let provinces = areaList.province_list
+      let cities = areaList.city_list
+      // 给开户银行省市名称赋值
+      this.accountBankInfo.bankProvinceAreaName = `${provinces[provinceCode]}-${cities[cityCode]}`
+    },
+
     /**
      * @Description: 页面左上角关闭事件的回调方法
      * @author:zhangqi
@@ -404,7 +461,6 @@ export default {
      * @Date:2021-09-08
      */
     save() {
-      let that = this
       // 根据是否勾选了‘享受人无银行卡/手机号码’的选项，给变量重新赋值
       if (this.accountBankInfo.isSelf) {
         this.accountBankInfo.isSelf = 1
@@ -414,7 +470,7 @@ export default {
       let str = ''
       // 定义参数格式
       let params = {
-        allowanceNo: JSON.parse(this.$CacheUtils.getLocItem('allowanceUserInfo')).allowanceNo,
+        allowanceNo: this.$route.query.allowanceNo,
         allowanceType: 'BANK_ALLOWANCE',
         allowanceDTO: {
           allowanceBankDTO: this.accountBankInfo
@@ -424,15 +480,12 @@ export default {
       saveOrUpdateAllowanceUrl(params).then(res => {
         if (res.result == '0') {
           if (this.$route.query.allowancePageFlag) {
-            str = 'edit=1&allowancePageFlag=3'
+            str = `edit=1&allowancePageFlag=3&allowanceNo=${this.$route.query.allowanceNo}`
           } else {
+            str = `allowanceNo=${this.$route.query.allowanceNo}`
             //如果从津贴申请列表编辑按钮或者新增津贴申请进入
             localStorage.allowancePageFlag = '3'
           }
-          // 给‘allowanceUserInfo’缓存中新增加一个判断是否勾选了享受人无银行卡/手机号选项的数据
-          let allowanceLocal = JSON.parse(that.$CacheUtils.getLocItem('allowanceUserInfo'))
-          allowanceLocal.isSelf = this.accountBankInfo.isSelf
-          that.$CacheUtils.setLocItem('allowanceUserInfo', JSON.stringify(allowanceLocal))
           // 跳转到账户信息页面
           this.$jump({
             flag: 'h5',

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

@@ -1,6 +1,6 @@
 <template>
   <div class='redRadioCheckbox'>
-    <index-bar></index-bar>
+    <index-bar :allowance-no='$route.query.allowanceNo'></index-bar>
     <div>
       <div class='bg-white'>
         <div>

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

@@ -1,7 +1,7 @@
 <template>
   <div class='base-info-container pb60 redRadioCheckbox'>
     <!-- 基本信息 -->
-    <index-bar></index-bar>
+    <index-bar :allowance-no='applicantInfo.allowanceNo'></index-bar>
     <van-cell-group class='mt10'>
       <van-field
         v-model='applicantInfo.agentCode'
@@ -149,7 +149,7 @@ import utilsAge from '@/assets/js/utils/age'
 import { selectComp, getApplicantIdentityInfo, getEnjoyUserIdentityInfo } from '../js/methods'
 import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
 import { idToData } from '../js/verification'
-import ParentPicker from '@/components/ebiz/allowance/parentList/ParentPicker'
+import ParentPicker from '@/components/ebiz/parentList/ParentPicker'
 import SelectRadio from '@/components/ebiz/SelectRadio'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
 import idNoCheck from '@/assets/js/utils/idNoCheck'
@@ -157,13 +157,6 @@ import { getAgentInfo } from '@/api/ebiz/my/my.js'
 import { getAllowanceDetail, saveOrUpdateAllowanceUrl } from '@/api/ebiz/allowance/allowance'
 // import beforeDate from '@/assets/js/utils/getBeforeDate.js'
 
-
-// import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
-// import { saveOrUpdateOrderInfo, getAuthCode, getOrderDetail, getCompany } from '@/api/ebiz/sale/sale'
-// import getAreaName from '@/assets/js/utils/getAreaNameForSale'
-//
-// import SearchField from '@/components/common/SearchField'
-
 export default {
   name: 'baseInfo',
   components: {
@@ -173,17 +166,7 @@ export default {
     [IdentityCardScan.name]: IdentityCardScan,
     [SelectRadio.name]: SelectRadio,
     [FieldDatePicter.name]: FieldDatePicter,
-    ParentPicker
+    [ParentPicker.name]: ParentPicker
-    // [OccupationPicker.name]: OccupationPicker,
-    // [CellGroup.name]: CellGroup,
-    // [Checkbox.name]: Checkbox,
-    // [Picker.name]: Picker,
-    // [Area.name]: Area,
-    // [RadioGroup.name]: RadioGroup,
-    // [Radio.name]: Radio,
-
-    // [Dialog.name]: Dialog,
-    // SearchField
   },
   data() {
     return {
@@ -193,10 +176,11 @@ export default {
         name: '', // 申请人姓名
         idType: '1', // 证件类型 (枚举值)
         idNo: '', // 证件号码
-        allowanceNo: '' // 津贴申请流水号，也用于在点击下一步时，传给后台，后台去判断是新增操作还是编辑操作
+        allowanceNo: '' // 津贴申请流水号，用于当做一个参数，用于传入顶部导航组件，也用于在点击下一步时，传给后台，后台去判断是新增操作还是编辑操作
       },
       // 定义存储享受人信息的对象
       enjoyUserInfo: {
+        id: '', // id唯一标识，也用于在点击下一步时，传给后台，后台去判断是新增操作还是编辑操作
         name: '', // 享受人姓名
         relationship: '', // 享受人角色（与申请人的关系）
         // 享受人角色（与申请人的关系）的选择项
@@ -212,8 +196,7 @@ export default {
         ],
         idType: '1', // 证件类型 (枚举值)
         idNo: '', // 证件号码
-        birthday: '', // 出生日期
+        birthday: '' // 出生日期
-        id: '' // id标识，也用于在点击下一步时，传给后台，后台去判断是新增操作还是编辑操作
         // 定义出生日子可选的最大日期
         // （60表示60岁，代表只能选择比60岁大的出生日期，因为父母津贴功能贵司规定父母年龄需大于60岁才能领取津贴）
         // maxDate: beforeDate.getBeforeYear(60)
@@ -247,51 +230,55 @@ export default {
   },
   methods: {
     /**
-     * @Description: 初始化判断是新增操作还是编辑操作的类型，根据不同操作类型调用不同接口查询数据
+     * @Description: 初始化方法，同时判断是新增操作还是编辑操作的类型，根据不同操作类型调用不同接口查询数据
      * @author:zhangqi
      * @Date:2021-09-14
      */
     init() {
       // 判断是新增操作还是编辑操作的类型，根据不同操作类型调用不同接口查询数据
       if (this.$route.query.edit) {
-        // 从存储申请人和享受人信息的缓存中获取'allowanceNo'津贴流水号，然后定义参数格式
+        // 从路由参数中获取'allowanceNo'津贴流水号，定义参数格式
         let params = {
-          allowanceNo: JSON.parse(this.$CacheUtils.getLocItem('allowanceUserInfo')).allowanceNo
+          allowanceNo: this.$route.query.allowanceNo
         }
         // 调用查询津贴申请详情数据的接口
         getAllowanceDetail(params).then((res) => {
           if (res.result == 0) {
-            // 把数据赋值给一个新的变量
+            // 将申请人数据赋值给一个新的变量，以便于在下方给变量赋值
-            let data = res.content.allowanceDTO
+            let applyData = res.content.allowanceDTO.allowanceApplyDTO
+            // 将享受人数据赋值给一个新的变量，以便于在下方给变量赋值
+            let enjoyData = res.content.allowanceBaseDTO.allowanceEnjoyDTO
             // 赋值申请人工号
-            this.applicantInfo.agentCode = data.allowanceApplyDTO.agentCode
+            this.applicantInfo.agentCode = applyData.agentCode
             // 赋值申请人姓名
-            this.applicantInfo.name = data.allowanceApplyDTO.name
+            this.applicantInfo.name = applyData.name
             // 赋值申请人证件类型
-            this.applicantInfo.idType = data.allowanceApplyDTO.idType
+            this.applicantInfo.idType = applyData.idType
             // 赋值申请人证件号码
-            this.applicantInfo.idNo = data.allowanceApplyDTO.idNo
+            this.applicantInfo.idNo = applyData.idNo
             // 赋值津贴申请流水号
-            this.applicantInfo.allowanceNo = data.allowanceApplyDTO.allowanceNo
+            this.applicantInfo.allowanceNo = applyData.allowanceNo
+            // 赋值id唯一标识
+            this.enjoyUserInfo.id = enjoyData.id
             // 赋值享受人姓名
-            this.enjoyUserInfo.name = data.allowanceEnjoyDTO.name
+            this.enjoyUserInfo.name = enjoyData.name
             // 赋值享受人角色
-            this.enjoyUserInfo.relationship = data.allowanceEnjoyDTO.relationship
+            this.enjoyUserInfo.relationship = enjoyData.relationship
             // 赋值享受人证件类型
-            this.enjoyUserInfo.idType = data.allowanceEnjoyDTO.idType
+            this.enjoyUserInfo.idType = enjoyData.idType
             // 赋值享受人证件号码
-            this.enjoyUserInfo.idNo = data.allowanceEnjoyDTO.idNo
+            this.enjoyUserInfo.idNo = enjoyData.idNo
             // 赋值享受人性别
-            this.enjoyUserInfo.sex = data.allowanceEnjoyDTO.sex
+            this.enjoyUserInfo.sex = enjoyData.sex
             // 赋值享受人出生日期
-            this.enjoyUserInfo.birthday = data.allowanceEnjoyDTO.birthday
+            this.enjoyUserInfo.birthday = enjoyData.birthday
-            // 赋值id标识
-            this.enjoyUserInfo.id = data.allowanceEnjoyDTO.id
             //如果从津贴申请列表点击编辑按钮进入
             if (this.$route.query.edit && !this.$route.query.allowancePageFlag) {
               this.allowancePageFlag = '1'
               localStorage.setItem('allowancePageFlag', this.allowancePageFlag)
             }
+          } else {
+            this.$toast(res.resultMessage)
           }
         })
       } else {
@@ -307,7 +294,6 @@ export default {
           console.log(err)
         })
         localStorage.setItem('allowancePageFlag', this.allowancePageFlag)
-        this.$CacheUtils.setLocItem('allowanceUserInfo', '')
       }
     },
 
@@ -583,21 +569,16 @@ export default {
       saveOrUpdateAllowanceUrl(params).then(res => {
         if (res.result == '0') {
           if (this.$route.query.allowancePageFlag) {
-            str = 'edit=1&allowancePageFlag=2'
+            // 拼接路由参数，res.content.allowanceNo：接口返回的津贴申请流水号
+            str = `edit=1&allowancePageFlag=2&allowanceNo=${res.content.allowanceNo}`
           } else {
-            //如果从津贴申请列表编辑按钮或者新增津贴申请进入
+            //如果从津贴申请列表新增津贴申请进入
+            // 拼接路由参数，res.content.allowanceNo：接口返回的津贴申请流水号
+            str = `allowanceNo=${res.content.allowanceNo}`
             localStorage.allowancePageFlag = '2'
           }
-          // 定义存放申请人信息与享受人信息的对象
+          // 获取津贴申请流水号，并赋值给变量，当做一个参数，用于传入顶部导航组件
-          let allowanceUserInfo = {
+          this.applicantInfo.allowanceNo = res.content.allowanceNo
-            applicantInfo: this.applicantInfo, // 申请人信息
-            enjoyUserInfo: this.enjoyUserInfo, // 享受人信息
-            allowanceNo: res.content.allowanceNo // 保存基本信息接口调用成功后，返回的津贴申请编号
-          }
-          // 先清除存储申请人和享受人信息的缓存，防止存储缓存时数据有错误
-          this.$CacheUtils.removeLocItem('allowanceUserInfo')
-          // 添加申请人和享受人信息的缓存
-          this.$CacheUtils.setLocItem('allowanceUserInfo', JSON.stringify(allowanceUserInfo))
           // 跳转到账户信息页面
           this.$jump({
             flag: 'h5',

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

@@ -0,0 +1,563 @@
+<template>
+  <div class='accountInfo-container buleRadioCheckbox'>
+    <index-bar :enjoy-id='$route.query.enjoyId'></index-bar>
+    <div v-if='!isScan'>
+      <van-radio-group v-model='radio' class='flex pl30 pr30 pt15 pb15 justify-content-s bg-white mt10'>
+        <van-radio name='0' class='fs14 global-checked-color-blue'>
+          {{ `享受人：${accountBankInfo.accountName}` }}
+        </van-radio>
+      </van-radio-group>
+
+      <van-cell-group class='pl20 fs14'>
+        <van-field v-model='accountBankInfo.bankProvinceAreaName' label='开户银行省市' placeholder='请选择开户银行省市' required
+                   @click='areaSelect' readonly
+                   v-validate="'required'" data-vv-name='开户银行省市' />
+      </van-cell-group>
+
+      <van-cell-group class='pl20 fs14'>
+        <van-field v-model='accountBankInfo.bankName' 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 v-model='accountBankInfo.bankCardNo' label='银行卡号' maxlength='19' placeholder='手工录入或点击右侧银行卡扫描'
+                   clearable
+                   required v-validate="'required|bankCard'" data-vv-name='银行卡号' />
+        <van-button class='san_button mr10' style='border: none;padding: 0px;' @click="cardScanning('0')"
+                    v-no-more-click='1000'>
+          <img src='@/assets/images/saomiao_allowance.png' alt='' class='san_button mb10' />
+        </van-button>
+      </van-cell-group>
+
+      <van-cell-group class='pl20 fs14'>
+        <van-field required v-model='accountBankInfo.mobile' clearable label='手机号码' name='手机号码'
+                   placeholder='请输入银行卡预留手机号码'
+                   v-validate="'required|mobileLength11|mobileStartWith1|mobile'" maxlength='11' />
+      </van-cell-group>
+
+      <div class='fs12 mt10 ml20 h15'>
+        <van-checkbox class='fs14 global-checked-color-blue' v-model='accountBankInfo.isSelf'>
+          如享受人无银行卡/手机号码，可勾选此项，上述信息填写申请人本人信息
+        </van-checkbox>
+      </div>
+
+      <van-button type='default' class='bottom-btn' size='large' @click='next' v-no-more-click='1000'>下一步
+      </van-button>
+
+    </div>
+
+    <!--开户银行省市选择-->
+    <van-popup position='bottom' v-model='isAreaListShow' :lazy-render='false'>
+      <van-area ref='areaSelect' title='请选择省市' :visible-item-count='4' :columns-num='2' :area-list='areaList'
+                @confirm='setBankArea'
+                @cancel='isAreaListShow = false' />
+    </van-popup>
+
+    <!--开户银行选择-->
+    <SelectBankName :inputShow='inputShow' :listShow.sync='islistShow' :operateType="'bank_type'"
+                    @getBank='getBank'></SelectBankName>
+
+    <!-- 银行卡扫描 -->
+    <BankCardScan :scanShow='isScan' :clear='isClear' @getScanInfo='getBankCardInfo'></BankCardScan>
+
+  </div>
+</template>
+
+<script>
+import {
+  Cell,
+  CellGroup,
+  Field,
+  RadioGroup,
+  Radio,
+  Popup,
+  List,
+  Switch,
+  Toast,
+  SwitchCell,
+  Icon,
+  Area,
+  Checkbox,
+  CheckboxGroup
+} from 'vant'
+import { checkCard } from '@/api/ebiz/sale/sale'
+import { getAllowanceBaseDetail, saveOrUpdateAllowanceBase } from '@/api/ebiz/allowance/myInfo'
+import BankCardScan from '@/components/ebiz/sale/BankCardScan'
+import IndexBar from '@/components/ebiz/allowance/myInfo/IndexBar'
+import SelectBankName from '@/components/ebiz/account/SelectBankName'
+import areaList from '@/assets/js/utils/area'
+import { getWhitelist } from '@/api/ebiz/whitelist'
+
+export default {
+  name: 'accountInfo',
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Field.name]: Field,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio,
+    [Popup.name]: Popup,
+    [List.name]: List,
+    [Switch.name]: Switch,
+    [Toast.name]: Toast,
+    [SwitchCell.name]: SwitchCell,
+    BankCardScan,
+    SelectBankName,
+    [Icon.name]: Icon,
+    [IndexBar.name]: IndexBar,
+    [Area.name]: Area,
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup
+  },
+  data() {
+    return {
+      radio: '0', // 定义享受人位置处的单选项是否选中的变量
+      accountBankInfo: {
+        id: '', // id唯一标识，用于当做参数传给顶部导航组件，也用于在点击下一步时，传给后台，后台去判断是新增操作还是编辑操作
+        accountName: '', // 持卡人姓名（享受人）
+        bankProvinceAreaName: '', // 开户银行省市名称
+        bankProvinceCode: '', // 银行所在省编码
+        bankAreaCode: '', // 银行所在地区编码
+        bankCardNo: '', // 银行卡号
+        bankName: '', // 银行名称
+        bankCode: '', // 银行编码
+        mobile: '', // 手机号码
+        isSelf: 0 //  是否是享受人本人银行卡 1:是; 0:不是
+      },
+      allowanceUserInfo: {}, // 定义存储申请人信息与享受人信息的数据的对象
+      areaList,
+      isAreaListShow: false, // 控制显示或隐藏选择开户银行省市的弹窗的变量
+      isScan: false, // 控制显示或隐藏银行卡扫描页面的变量
+      isClear: false,  //是否清空
+      inputShow: true, //模糊查询功能
+      islistShow: false, //控制显示或隐藏选择银行的弹窗的变量
+      isPassedCardCheck: false,
+      allowanceMyInfoPageFlag: '2' // 定义顶部导航记录当前展示的是第几个页面或流程的标识
+    }
+  },
+  created() {
+    // 调用初始化方法
+    this.init()
+  },
+  mounted() {
+    document.body.style.backgroundColor = '#F5F5F5'
+    setTimeout(() => {
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('webview_left_button', {
+        img: this.$assetsUrl + 'images/del-close-btn@3x.png',
+        intercept: '1' //是否拦截原生返回事件 1是 其他否
+      })
+    }, 100)
+    // 筛选按钮的点击事件
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    /**
+     * @Description: 初始化方法，同时判断是新增操作还是编辑操作的类型，根据不同操作类型执行不同程序
+     * @author:zhangqi
+     * @Date:2021-09-14
+     */
+    init() {
+      // 开启toast加载提示
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+      // 从路由参数中获取'allowanceNo'津贴流水号，定义参数格式
+      let params = {
+        enjoyId: this.$route.query.enjoyId
+      }
+      // 调用接口方法
+      getAllowanceBaseDetail(params).then((res) => {
+        if (res.result == 0) {
+          // 给存储申请人信息与享受人信息的数据的对象进行赋值
+          this.allowanceUserInfo = {
+            // 将申请人的数据对象赋值给对象中的属性
+            applicantInfo: res.content.allowanceBaseDTO.allowanceBaseApplyDTO,
+            // 将享受人的数据对象赋值给对象中的属性
+            enjoyUserInfo: res.content.allowanceBaseDTO.allowanceBaseEnjoyDTO
+          }
+          // 判断是新增操作还是编辑操作的类型，根据不同操作类型执行不同的程序
+          if (this.$route.query.edit) {
+            // 把账户信息数据对象赋值给一个新的变量
+            let data = res.content.allowanceBaseDTO.allowanceBaseBankDTO
+            // 赋值持卡人姓名（享受人）
+            this.accountBankInfo.accountName = data.name
+            // 赋值银行所在省编码
+            this.accountBankInfo.bankProvinceCode = data.bankProvinceCode
+            // 赋值银行所在地区编码
+            this.accountBankInfo.bankAreaCode = data.bankAreaCode
+            // 调用回显银行卡省市信息的方法
+            this.showbackBankAddressStr(data.bankProvinceCode, data.bankAreaCode)
+            // 赋值银行卡号
+            this.accountBankInfo.bankCardNo = data.bankCardNo
+            // 赋值银行名称
+            this.accountBankInfo.bankName = data.bankName
+            // 赋值银行编码
+            this.accountBankInfo.bankCode = data.bankCode
+            // 赋值手机号码
+            this.accountBankInfo.mobile = data.mobile
+            // 赋值是否是享受人本人银行卡的单选项
+            this.accountBankInfo.isSelf = data.isSelf
+            // 赋值id标识
+            this.accountBankInfo.id = data.id
+            //如果从津贴申请列表点击编辑按钮进入
+            if (this.$route.query.edit && !this.$route.query.allowanceMyInfoPageFlag) {
+              this.allowanceMyInfoPageFlag = '2'
+              localStorage.setItem('allowanceMyInfoPageFlag', this.allowanceMyInfoPageFlag)
+            }
+          } else {
+            // 获取享受人数据中的享受人姓名，并赋值给变量
+            this.accountBankInfo.accountName = this.allowanceUserInfo.enjoyUserInfo.name
+            localStorage.setItem('allowanceMyInfoPageFlag', this.allowanceMyInfoPageFlag)
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+      // 关闭清除toast加载提示
+      this.$toast.clear()
+    },
+
+    /**
+     * @Description: 根据银行卡省市编码，查询对应的省市名称的方法
+     * @author:zhangqi
+     * @Date:2021-09-15
+     */
+    showbackBankAddressStr(provinceCode, cityCode) {
+      let provinces = areaList.province_list
+      let cities = areaList.city_list
+      // 给开户银行省市名称赋值
+      this.accountBankInfo.bankProvinceAreaName = `${provinces[provinceCode]}-${cities[cityCode]}`
+    },
+
+    /**
+     * @Description: 页面左上角关闭事件的回调方法
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        return this.$dialog
+          .confirm({
+            className: 'dialog-blue',
+            title: '提示',
+            message: '退出流程可能会丢失部分数据，是否确认退出？'
+            // cancelButtonColor: '#E9332E',
+            // confirmButtonColor: '#FFFFFF'
+          })
+          .then(() => {
+            this.$jump({
+              flag: 'h5',
+              extra: {
+                title: '津贴申请列表',
+                forbidSwipeBack: 1, //当前页面禁止右滑返回
+                url: location.origin + `/#/allowance/application/List`
+              },
+              routerInfo: {
+                path: `/allowance/application/List`,
+                type: '1'
+              }
+            })
+          })
+          .catch(() => {
+            return
+          })
+      } else {
+        this.isclear = true
+        // 筛选按钮的点击事件
+        this.isclear = true
+        this.$jump({
+          flag: 'navigation',
+          extra: {
+            title: '账户管理',
+            hiddenRight: '1'
+          }
+        })
+        this.isScan = false
+      }
+    },
+
+    /**
+     * @Description: 点击选择开户银行省市时触发的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    areaSelect() {
+      // 设置显示选择开户银行省市的弹窗
+      this.isAreaListShow = true
+      // 根据省编码，设置默认展示的省市数据。默认展示广西壮族自治区，南宁市
+      this.$refs['areaSelect'].reset('450000')
+    },
+
+    /**
+     * @Description: 确认选择开户银行省市的数据时触发的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    setBankArea(areaInfo) {
+      let province = areaInfo[0]
+      let city = areaInfo[1]
+      // 将银行所在省编码赋值给变量
+      this.accountBankInfo.bankProvinceCode = province.code
+      // 将银行所在地区编码赋值给变量
+      this.accountBankInfo.bankAreaCode = city.code
+      // 拼接开户银行省市名称，并赋值给变量
+      this.accountBankInfo.bankProvinceAreaName = `${province.name}-${city.name}`
+      // 关闭隐藏选择开户银行省市的弹窗
+      this.isAreaListShow = false
+    },
+
+    /**
+     * @Description: 确认选择开户银行的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    getBank(bank) {
+      // 获取银行名称，并赋值给变量
+      this.accountBankInfo.bankName = bank.bankName
+      // 获取银行编码，并赋值给变量
+      this.accountBankInfo.bankCode = bank.code
+    },
+
+    /**
+     * @Description: 点击输入银行卡号最右侧‘扫描’按钮时，触发扫描银行卡的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    cardScanning(cardScanningType) {
+      window.localStorage.setItem('cardScanningType', cardScanningType)
+      document.body.style.backgroundColor = '#F5F5F5'
+      let title = ''
+      this.isclear = false
+      ;[this.isScan, title] = [true, '银行卡扫描']
+      setTimeout(() => {
+        this.$jump({
+          flag: 'navigation',
+          extra: {
+            title,
+            hiddenLeft: '1'
+          }
+        })
+        this.closeBtn()
+      }, 400)
+    },
+
+    /**
+     * @Description: 扫描银行卡的页面右上角‘关闭’按钮的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    closeBtn() {
+      // 筛选按钮的显示
+      this.$jump({
+        flag: 'webview_right_button',
+        extra: {
+          btns: [
+            {
+              img: this.$assetsUrl + 'images/del-close.png',
+              route: { flag: '', extra: {} }
+            }
+          ]
+        }
+      })
+    },
+
+    /**
+     * @Description: 在扫描银行卡页面，点击'完成'按钮时，获取银行卡扫描出的数据信息的方法
+     * @author:zhangqi
+     * @Date:2021-09-10
+     */
+    getBankCardInfo(data) {
+      // 将扫描到的银行卡卡号数据，赋值给变量
+      this.accountBankInfo.bankCardNo = data.name
+      // 给页面赋值一个页面最顶部的标题，将页面标题重新设置为‘账户信息’
+      this.$jump({
+        flag: 'navigation',
+        extra: {
+          title: '账户信息',
+          hiddenRight: '1'
+        }
+      })
+      // 关闭隐藏银行卡扫描页面
+      this.isScan = false
+    },
+
+    /**
+     * @Description: 点击下一步按钮时，触发的方法
+     * @author:zhangqi
+     * @Date:2021-09-13
+     */
+    async next() {
+      let valid = await this.$validator.validate()
+      if (valid) {
+        let cardData = {}
+        // 如果勾选了‘享受人无银行卡/手机号码’的选项，则在调用银行卡鉴权的接口时，要传申请人的数据信息
+        // 如果没有勾选，则传享受人的数据信息
+        if (this.accountBankInfo.isSelf) {
+          cardData = {
+            account: this.accountBankInfo.bankCardNo, // 银行卡号
+            idNo: this.allowanceUserInfo.applicantInfo.idNo, // 申请人证件号码
+            idType: this.allowanceUserInfo.applicantInfo.idType, // 申请人证件类型
+            mobile: this.accountBankInfo.mobile, // 手机号码
+            name: this.allowanceUserInfo.applicantInfo.name // 申请人名称
+          }
+        } else {
+          cardData = {
+            account: this.accountBankInfo.bankCardNo, // 银行卡号
+            idNo: this.allowanceUserInfo.enjoyUserInfo.idNo,  // 享受人证件号码
+            idType: this.allowanceUserInfo.enjoyUserInfo.idType, // 享受人证件类型
+            mobile: this.accountBankInfo.mobile, // 手机号码
+            name: this.allowanceUserInfo.enjoyUserInfo.name // 享受人名称
+          }
+        }
+
+        // 银行卡鉴权[白名单用户自动跳过]
+        const whiteRes = await getWhitelist({
+          idNo: cardData.idNo,
+          name: cardData.name,
+          bankNo: this.bankId,
+          whiteType: 'allowance_bank_check'
+        })
+        console.log('白名单查询结果: ', whiteRes)
+        if (whiteRes.result === '0') {
+          // 用户在白名单内
+          if (whiteRes.content && whiteRes.content.length) {
+            // 用户在白名单内不做操作
+          }
+          // 用户不再白名单内做银行卡鉴权
+          else {
+            this.$toast.loading({
+              duration: 0, // 持续展示 toast
+              forbidClick: true, // 禁用背景点击
+              loadingType: 'spinner',
+              message: '加载中……'
+            })
+            let res = await checkCard(cardData)
+            this.$toast.clear()
+            if (res.result !== '0') {
+              if (!res.resultMessage) {
+                return this.$toast('当前系统繁忙，请重新输入银行卡号！')
+              }
+              return this.$toast(res.resultMessage)
+            }
+          }
+        } else {
+          this.$toast(whiteRes.resultMessage)
+        }
+        // 调用保存当前录入的账户信息数据的方法
+        this.save()
+      } else {
+        this.$toast(this.errors.all()[0])
+      }
+    },
+
+    /**
+     * @Description: 保存当前录入的账户信息数据的方法
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    save() {
+      // 根据是否勾选了‘享受人无银行卡/手机号码’的选项，给变量重新赋值
+      if (this.accountBankInfo.isSelf) {
+        this.accountBankInfo.isSelf = 1
+      } else {
+        this.accountBankInfo.isSelf = 0
+      }
+      let str = ''
+      // 定义参数格式
+      let params = {
+        enjoyId: this.$route.query.enjoyId,
+        allowanceType: 'BANK_ALLOWANCE_BASE',
+        allowanceBaseDTO: {
+          allowanceBaseBankDTO: this.accountBankInfo
+        }
+      }
+      // 调用接口
+      saveOrUpdateAllowanceBase(params).then(res => {
+        if (res.result == '0') {
+          if (this.$route.query.allowanceMyInfoPageFlag) {
+            str = `edit=1&allowanceMyInfoPageFlag=3&enjoyId=${this.$route.query.enjoyId}`
+          } else {
+            str = `enjoyId=${this.$route.query.enjoyId}`
+            //如果从津贴申请列表编辑按钮或者新增津贴申请进入
+            localStorage.allowanceMyInfoPageFlag = '3'
+          }
+          // 跳转到账户信息页面
+          this.$jump({
+            flag: 'h5',
+            extra: {
+              url: location.origin + `/#/allowance/myInfo/AttachmentManagement?${str}`
+            },
+            routerInfo: {
+              path: `/allowance/myInfo/AttachmentManagement?${str}`
+            }
+          })
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    }
+
+  },
+  computed: {},
+  watch: {},
+  filters: {},
+  beforeDestroy() {
+
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+@import '@/assets/sass/variables.scss';
+
+#app .van-cell:not(:last-child)::after {
+  border-bottom: none;
+}
+
+.accountInfo-container {
+  height: 100%;
+}
+
+/deep/ .bankCard {
+  width: 120px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 10px;
+}
+
+/deep/ .van-list {
+  height: 400px;
+}
+
+.san_button {
+  width: 22px;
+  height: 22px;
+}
+
+.vanIcon {
+  position: absolute;
+  left: 140px;
+}
+
+/deep/ .van-field__left-icon .van-icon {
+  color: $blue;
+  font-weight: bold;
+}
+
+/deep/ .van-picker__cancel, /deep/ .van-picker__confirm {
+  color: #2E4591 !important;
+}
+
+.bottom-btn {
+  background: #2E4591;
+  border: 1px solid #2E4591;
+  color: #FFFFFF
+}
+</style>

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

@@ -0,0 +1,635 @@
+<template>
+  <div class='base-info-container pb60 redRadioCheckbox'>
+    <!-- 基本信息 -->
+    <index-bar :enjoy-id='enjoyUserInfo.id'></index-bar>
+    <van-cell-group class='mt10'>
+      <van-field
+        v-model='applicantInfo.agentCode'
+        v-validate="'required'"
+        readonly
+        required
+        label='申请人工号'
+        name='申请人工号'
+        placeholder='请填写申请人工号'
+      />
+      <van-field
+        v-model='applicantInfo.name'
+        v-validate="'required'"
+        readonly
+        required
+        label='申请人姓名'
+        name='申请人姓名'
+        placeholder='请填写申请人姓名'
+      />
+      <van-field
+        :value="applicantInfo.idType | idToText('allowanceIdType')"
+        v-validate="'required'"
+        readonly
+        required
+        label='申请人证件类型'
+        name='申请人证件类型'
+        right-icon='arrow'
+        placeholder='请选择'
+        @click='toSelect("1")'
+      />
+      <van-field
+        v-model='applicantInfo.idNo'
+        maxlength='18'
+        required
+        label='申请人证件号码'
+        name='申请人证件号码'
+        v-validate="'required'"
+        placeholder='手工录入或点击右侧证件扫描'
+        clearable
+      >
+        <van-button v-if='applicantInfo.idType == 1' slot='button' class='san_button'
+                    style='border: none;padding: 0px;'
+                    @click="selectClick('3')" v-no-more-click='1000'>
+          <img src='@/assets/images/saomiao_allowance.png' alt='' class='san_button mb10' />
+        </van-button>
+      </van-field>
+      <parent-picker
+        v-model='enjoyUserInfo.name'
+        @on-choose='chooseParent'
+        v-validate="'required|salename'"
+        name='享受人姓名'
+        label='享受人姓名'
+        required
+        :parentShowPicker.sync='parentShowPicker'
+        @nameChange='nameChange'
+        @on-click="selectClick('1')"
+        placeholder='请输入享受人姓名'
+      ></parent-picker>
+      <select-radio
+        :value.sync='enjoyUserInfo.relationship'
+        required
+        :radios='enjoyUserInfo.relationshipRadio'
+        label='享受人角色'
+        name='享受人角色'
+        :color='colorButton'
+        :type='typeButton'
+        v-validate="'required'"
+      ></select-radio>
+      <van-field
+        :value="enjoyUserInfo.idType | idToText('allowanceIdType')"
+        v-validate="'required'"
+        readonly
+        required
+        label='享受人证件类型'
+        name='享受人证件类型'
+        right-icon='arrow'
+        placeholder='请选择'
+        @click='toSelect("2")'
+      />
+      <van-field
+        v-model='enjoyUserInfo.idNo'
+        v-validate="'required'"
+        maxlength='18'
+        required
+        label='享受人证件号码'
+        name='享受人证件号码'
+        placeholder='手工录入或点击右侧证件扫描'
+        clearable
+        @blur='getRelatedData(enjoyUserInfo.idNo)'
+      >
+        <van-button v-if='enjoyUserInfo.idType == 1' slot='button' class='san_button'
+                    style='border: none;padding: 0px;'
+                    @click="selectClick('4')" v-no-more-click='1000'>
+          <img src='@/assets/images/saomiao_allowance.png' alt='' class='san_button mb10' />
+        </van-button>
+      </van-field>
+      <select-radio
+        :value.sync='enjoyUserInfo.sex'
+        required
+        :radios='enjoyUserInfo.sexRadio'
+        label='性别'
+        name='性别'
+        :color='colorButton'
+        :type='typeButton'
+        v-validate="'required'"
+      ></select-radio>
+      <FieldDatePicter
+        :value.sync='enjoyUserInfo.birthday'
+        v-validate="'required'"
+        label='出生日期'
+        name='出生日期'
+        required
+        type='date'
+        :flag='true'
+        @confirm='onDateConfirm($event)'
+        ref='birthday'
+      ></FieldDatePicter>
+
+    </van-cell-group>
+
+    <van-button type='default' class='bottom-btn' @click='nextStep' v-no-more-click='1000'>下一步</van-button>
+
+    <!-- 字段选择 -->
+    <van-popup v-model='popupShow' position='bottom'>
+      <van-picker show-toolbar :columns='columns' @confirm='onConfirm' @cancel='popupShow = false' />
+    </van-popup>
+
+    <!-- 申请人身份证扫描 -->
+    <van-popup v-model='isScanApplicant' position='bottom'>
+      <IdentityCardScan @getScanInfo='getApplicantIdentityInfo'></IdentityCardScan>
+    </van-popup>
+
+    <!-- 享受人身份证扫描 -->
+    <van-popup v-model='isScanEnjoyUser' position='bottom'>
+      <IdentityCardScan @getScanInfo='getEnjoyUserIdentityInfo'></IdentityCardScan>
+    </van-popup>
+
+  </div>
+</template>
+<script>
+import IndexBar from '@/components/ebiz/allowance/myInfo/IndexBar'
+import { Field, CellGroup, Popup, Picker, RadioGroup, Radio, Dialog } from 'vant'
+import DataDictionary from '@/assets/js/utils/data-dictionary'
+import utilsAge from '@/assets/js/utils/age'
+import { selectComp, getApplicantIdentityInfo, getEnjoyUserIdentityInfo } from '../js/methods'
+import IdentityCardScan from '@/components/ebiz/sale/IdentityCardScan'
+import { idToData } from '../js/verification'
+import ParentPicker from '@/components/ebiz/parentList/ParentPicker'
+import SelectRadio from '@/components/ebiz/SelectRadio'
+import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
+import idNoCheck from '@/assets/js/utils/idNoCheck'
+import { getAgentInfo } from '@/api/ebiz/my/my.js'
+import { getAllowanceBaseDetail, saveOrUpdateAllowanceBase } from '@/api/ebiz/allowance/myInfo'
+// import beforeDate from '@/assets/js/utils/getBeforeDate.js'
+
+export default {
+  name: 'baseInfo',
+  components: {
+    [IndexBar.name]: IndexBar,
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [IdentityCardScan.name]: IdentityCardScan,
+    [SelectRadio.name]: SelectRadio,
+    [FieldDatePicter.name]: FieldDatePicter,
+    [ParentPicker.name]: ParentPicker
+  },
+  data() {
+    return {
+      // 定义存储申请人信息的对象
+      applicantInfo: {
+        agentCode: '', // 申请人工号
+        name: '', // 申请人姓名
+        idType: '1', // 证件类型 (枚举值)
+        idNo: '' // 证件号码
+      },
+      // 定义存储享受人信息的对象
+      enjoyUserInfo: {
+        id: '', // 新增或修改我的资料的唯一标识，用于当做参数传给顶部导航组件，也用于在点击下一步时，传给后台，后台去判断是新增操作还是编辑操作
+        name: '', // 享受人姓名
+        relationship: '', // 享受人角色（与申请人的关系）
+        // 享受人角色（与申请人的关系）的选择项
+        relationshipRadio: [
+          { value: '0', label: '父亲' },
+          { value: '1', label: '母亲' }
+        ],
+        sex: '', // 享受人的性别
+        // 享受人性别的选择项
+        sexRadio: [
+          { value: '0', label: '男' },
+          { value: '1', label: '女' }
+        ],
+        idType: '1', // 证件类型 (枚举值)
+        idNo: '', // 证件号码
+        birthday: '' // 出生日期
+        // 定义出生日子可选的最大日期
+        // （60表示60岁，代表只能选择比60岁大的出生日期，因为父母津贴功能贵司规定父母年龄需大于60岁才能领取津贴）
+        // maxDate: beforeDate.getBeforeYear(60)
+      },
+      pickerType: '', // 定义当选择证件类型时，为了区分填写的是申请人信息还是享受人信息的类型。1-申请人；2-享受人
+      popupShow: false, // 定义控制显示或隐藏popup弹出层的变量
+      columns: [], // 定义popup弹出层中的数据集合
+      currentPopupIndex: '',
+      parentShowPicker: false,
+      isScanApplicant: false, // 申请人模块是否显示证件扫描组件
+      isScanEnjoyUser: false, // 享受人人模块是否显示证件扫描组件
+      allowanceMyInfoPageFlag: '1', // 定义顶部导航记录当前展示的是第几个页面或流程的标识
+      colorButton: '#2E4591', // 定义享受人角色和性别选项的选项按钮的颜色
+      typeButton: 'default' // 定义享受人角色和性别选项的选项按钮的类型
+    }
+  },
+  created() {
+    // 调用初始化方法
+    this.init()
+  },
+  mounted() {
+    setTimeout(() => {
+      // eslint-disable-next-line no-undef
+      EWebBridge.webCallAppInJs('webview_left_button', {
+        img: this.$assetsUrl + 'images/del-close-btn@3x.png',
+        intercept: '1' //是否拦截原生返回事件 1是 其他否
+      })
+    }, 100)
+    // 筛选按钮的点击事件
+    window.appCallBack = this.appCallBack
+  },
+  methods: {
+    /**
+     * @Description: 初始化方法，同时判断是新增操作还是编辑操作的类型，根据不同操作类型调用不同接口查询数据
+     * @author:zhangqi
+     * @Date:2021-09-14
+     */
+    init() {
+      // 判断是新增操作还是编辑操作的类型，根据不同操作类型调用不同接口查询数据
+      if (this.$route.query.edit) {
+        // 从路由参数中获取'enjoyId'我的资料唯一标识，定义参数格式
+        let params = {
+          enjoyId: this.$route.query.enjoyId
+        }
+        // 调用查询津贴申请详情数据的接口
+        getAllowanceBaseDetail(params).then((res) => {
+          if (res.result == 0) {
+            // 将申请人数据赋值给一个新的变量，以便于在下方给变量赋值
+            let applyData = res.content.allowanceBaseDTO.allowanceBaseApplyDTO
+            // 将享受人数据赋值给一个新的变量，以便于在下方给变量赋值
+            let enjoyData = res.content.allowanceBaseDTO.allowanceBaseEnjoyDTO
+            // 赋值申请人工号
+            this.applicantInfo.agentCode = applyData.agentCode
+            // 赋值申请人姓名
+            this.applicantInfo.name = applyData.name
+            // 赋值申请人证件类型
+            this.applicantInfo.idType = applyData.idType
+            // 赋值申请人证件号码
+            this.applicantInfo.idNo = applyData.idNo
+            // 赋值id标识
+            this.enjoyUserInfo.id = enjoyData.id
+            // 赋值享受人姓名
+            this.enjoyUserInfo.name = enjoyData.name
+            // 赋值享受人角色
+            this.enjoyUserInfo.relationship = enjoyData.relationship
+            // 赋值享受人证件类型
+            this.enjoyUserInfo.idType = enjoyData.idType
+            // 赋值享受人证件号码
+            this.enjoyUserInfo.idNo = enjoyData.idNo
+            // 赋值享受人性别
+            this.enjoyUserInfo.sex = enjoyData.sex
+            // 赋值享受人出生日期
+            this.enjoyUserInfo.birthday = enjoyData.birthday
+            //如果从津贴申请列表点击编辑按钮进入
+            if (this.$route.query.edit && !this.$route.query.allowanceMyInfoPageFlag) {
+              this.allowanceMyInfoPageFlag = '1'
+              localStorage.setItem('allowanceMyInfoPageFlag', this.allowanceMyInfoPageFlag)
+            }
+          }
+        })
+      } else {
+        // 调用查询用户信息的接口
+        getAgentInfo({}).then(res => {
+          if (res.result == 0) {
+            // 赋值申请人工号
+            this.applicantInfo.agentCode = res.jobNo
+            // 赋值申请人姓名
+            this.applicantInfo.name = res.name
+          }
+        }).catch(err => {
+          console.log(err)
+        })
+        localStorage.setItem('allowanceMyInfoPageFlag', this.allowanceMyInfoPageFlag)
+      }
+    },
+
+    /**
+     * @Description: 页面左上角关闭事件的回调方法
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    appCallBack(data) {
+      if (data.trigger == 'left_button_click') {
+        return this.$dialog
+          .confirm({
+            className: 'dialog-blue',
+            title: '提示',
+            message: '退出流程可能会丢失部分数据，是否确认退出？'
+            // cancelButtonColor: '#E9332E',
+            // confirmButtonColor: '#FFFFFF'
+          })
+          .then(() => {
+            this.$jump({
+              flag: 'h5',
+              extra: {
+                title: '津贴申请列表',
+                forbidSwipeBack: 1, //当前页面禁止右滑返回
+                url: location.origin + `/#/allowance/application/List`
+              },
+              routerInfo: {
+                path: `/allowance/application/List`,
+                type: '1'
+              }
+            })
+          })
+          .catch(() => {
+            return
+          })
+      } else {
+        // 筛选按钮的点击事件
+        this.$jump({
+          flag: 'navigation',
+          extra: {
+            title: '津贴申请信息',
+            hiddenRight: '1'
+          }
+        })
+        if (this.currentPopupIndex == 1) {
+          this.parentShowPicker = false
+        } else if (this.currentPopupIndex == 3) {
+          this.isScanApplicant = false
+        } else if (this.currentPopupIndex == 4) {
+          this.isScanEnjoyUser = false
+        }
+      }
+    },
+
+    /**
+     * @Description: 在popup弹出层中显示对应的数据
+     * @paramse: pickerType--区分填写的是申请人信息还是享受人信息的类型。1-申请人；2-享受人
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    toSelect(pickerType) {
+      // 显示弹出层
+      this.popupShow = true
+      // 将区分填写的是申请人信息还是享受人信息的类型的值，赋值给变量
+      // pickerType: 1-申请人；2-享受人
+      this.pickerType = pickerType
+      // 将数据字典中的'津贴申请-证件类型'数据集合赋值给变量
+      this.columns = DataDictionary.allowanceIdType
+    },
+
+    /**
+     * @Description: 点击popup弹出层中确认按钮触发的方法
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    onConfirm(value) {
+      this.popupShow = false
+      if (this.pickerType == '1') {
+        // 身份证号码不存在时赋默认值
+        if (!this.applicantInfo.idNo) {
+          this.applicantInfo.idNo = ''
+        }
+        this.applicantInfo.idType = value.id
+      } else if (this.pickerType == '2') {
+        // 身份证号码不存在时赋默认值
+        if (!this.enjoyUserInfo.idNo) {
+          this.enjoyUserInfo.idNo = ''
+        }
+        this.enjoyUserInfo.idType = value.id
+      }
+    },
+
+    /**
+     * @Description: 在享受人姓名位置，点击最右侧图标，选择享受人并获取对应享受人信息的方法
+     * @params: data--享受人的用户数据信息
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    chooseParent(data) {
+      console.log('data :>> ', data)
+      this.parentShowPicker = false
+      this.$jump({
+        flag: 'navigation',
+        extra: {
+          title: '津贴申请信息',
+          hiddenRight: '1'
+        }
+      })
+      // 将选择的享受人的数据，赋值给对应的变量
+      this.enjoyUserInfo.name = data.customerName // 享受人姓名
+      this.enjoyUserInfo.relationship = String(data.customerSex) // 享受人角色（与申请人的关系）
+      this.enjoyUserInfo.idType = data.customerIdType //  享受人证件类型
+      this.enjoyUserInfo.idNo = data.customerIdNumber // 享受人证件号码
+      this.enjoyUserInfo.sex = String(data.customerSex) // 享受人性别
+      this.enjoyUserInfo.birthday = data.birthday // 享受人出生日期
+      this.getRelatedData(this.enjoyUserInfo.idNo) // 调用校验证件号码是否合规的方法
+    },
+
+    /**
+     * @Description: 添加享受人证件号码后，失去焦点后触发的事件。此方法校验证件号码是否合规，
+     * @Description: 如果合规会自动填充享受人角色，性别，出生日期等信息
+     * @params: val--填写的证件号码
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    getRelatedData(val) {
+      if (this.enjoyUserInfo.idType != '1') {
+        return
+      }
+      //如果证件校验不通过,恢复默认值
+      if (idToData(val).text) {
+        this.enjoyUserInfo.idNo = ''
+        //;[this.enjoyUserInfo.idNo, this.enjoyUserInfo.relationship, this.enjoyUserInfo.sex, this.enjoyUserInfo.birthday] = ['', '', '', '']
+        return this.$toast(idToData(val).text)
+      } else {
+        // 如果合规会自动填充享受人角色，性别，出生日期等信息
+        this.enjoyUserInfo.relationship = idToData(val).sex // 性别男，表示的角色为父亲
+        this.enjoyUserInfo.sex = idToData(val).sex
+        this.enjoyUserInfo.birthday = idToData(val).birthday
+      }
+    },
+
+    /**
+     * @Description: 监听切换享受人姓名的方法
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    nameChange(name) {
+      this.enjoyUserInfo.name = name
+    },
+
+    /**
+     * @Description: 根据不同的参数类型，弹出不同的操作的页面
+     * @params: index-- 1: 选择用户列表的页面；2:选择职业类别的页面；3:扫描获取身份证信息的页面
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    selectClick(index) {
+      selectComp(this, index, '1')
+    },
+
+    /**
+     * @Description: 获取申请人身份证扫描信息的方法
+     * @params: data--扫描获取到的申请人用户信息
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    getApplicantIdentityInfo(data) {
+      getApplicantIdentityInfo(this, data)
+    },
+
+    /**
+     * @Description: 获取享受人身份证扫描信息的方法
+     * @params: data--扫描获取到的享受人用户信息
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    getEnjoyUserIdentityInfo(data) {
+      getEnjoyUserIdentityInfo(this, data)
+    },
+
+    /**
+     * @Description: 选择享受人出生日期时，点击确认按钮后，执行的方法，校验选择的日期不能晚于当前日期
+     * @params: val--选择的日期（年-月-日）
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    onDateConfirm(val) {
+      //判断录入日期是否晚于当前日期，因为录入日期不能晚于当前日期
+      if (Date.parse(val) > Date.parse(new Date())) {
+        this.enjoyUserInfo.birthday = ''
+        this.$refs.birthday.date = ''
+        return this.$toast('出生日期不能晚于当日')
+      }
+    },
+
+    /**
+     * @Description: 点击下一步时触发的方法
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    async nextStep() {
+      //表单校验, 成功跳转
+      let valid = await this.$validator.validate()
+      // .then(valid => {
+      if (true === valid) {
+        // 申请人的证件为身份证
+        if (this.applicantInfo.idType == '1') {
+          // 证件号码规则校验
+          if (!idNoCheck.isIdno(this.applicantInfo.idNo)) {
+            return this.$toast('您填写的申请人证件号码有误！')
+          }
+        }
+        // 享受人的证件为身份证
+        if (this.enjoyUserInfo.idType == '1') {
+          // 证件号码规则校验
+          if (idNoCheck.isIdno(this.enjoyUserInfo.idNo)) {
+            // 根据身份证号校验选择的享受人性别，18位身份证第17位是性别位, 奇男偶女
+            let sexSign = this.enjoyUserInfo.idNo.substr(16, 1)
+            if ((parseInt(sexSign) % 2 == 0 && this.enjoyUserInfo.sex != 1) || (parseInt(sexSign) % 2 != 0 && this.enjoyUserInfo.sex != 0)) {
+              return this.$toast('享受人性别与证件类型不一致，请修改。')
+            }
+            // 根据身份证号校验选择的享受人出生日期，18位身份证第7-14位是生日位, 年月日
+            let birthSign = this.enjoyUserInfo.idNo.substr(6, 8)
+            if (
+              this.enjoyUserInfo.birthday.substr(0, 4) != birthSign.substr(0, 4) ||
+              this.enjoyUserInfo.birthday.substr(5, 2) != birthSign.substr(4, 2) ||
+              this.enjoyUserInfo.birthday.substr(8, 2) != birthSign.substr(6, 2)
+            ) {
+              return this.$toast('享受人出生日期与证件类型不一致，请修改。')
+            }
+          } else {
+            return this.$toast('您填写的享受人证件号码有误！')
+          }
+        }
+        // 判断当享受人角色为父亲，性别为女时，要进行提示
+        if (this.enjoyUserInfo.relationship == 0 && this.enjoyUserInfo.sex == 1) {
+          return this.$toast('享受人为父亲，性别不可为女，请修改。')
+        }
+        // 判断当享受人角色为母亲，性别为男时，要进行提示
+        if (this.enjoyUserInfo.relationship == 1 && this.enjoyUserInfo.sex == 0) {
+          return this.$toast('享受人为母亲，性别不可为男，请修改。')
+        }
+        // 计算享受人年龄
+        let age = utilsAge.getAge(this.enjoyUserInfo.birthday, new Date())
+        // 享受人年龄需要满60周岁，才能申请津贴
+        if (age < 60) {
+          return this.$toast('享受人需年满60周岁！')
+        }
+        // 调用保存当前录入的基本信息数据的方法
+        this.save()
+      } else {
+        return this.$toast(this.$validator.errors.all()[0])
+      }
+    },
+
+    /**
+     * @Description: 保存当前录入的基本信息数据的方法
+     * @author:zhangqi
+     * @Date:2021-09-08
+     */
+    save() {
+      let str = ''
+      // 定义参数格式
+      let params = {
+        allowanceType: 'APPLY_ALLOWANCE_BASE',
+        allowanceBaseDTO: {
+          allowanceBaseApplyDTO: this.applicantInfo,
+          allowanceBaseEnjoyDTO: this.enjoyUserInfo
+        }
+      }
+      // 调用接口
+      saveOrUpdateAllowanceBase(params).then(res => {
+        if (res.result == '0') {
+          if (this.$route.query.allowanceMyInfoPageFlag) {
+            // 拼接路由参数，res.content.id：接口返回的新增或修改我的资料的唯一标识
+            str = `edit=1&allowanceMyInfoPageFlag=2&enjoyId=${res.content.id}`
+          } else {
+            //如果从津贴申请列表新增津贴申请进入
+            // 拼接路由参数，res.content.id：接口返回的津贴申请流水号
+            str = `enjoyId=${res.content.id}`
+            localStorage.allowanceMyInfoPageFlag = '2'
+          }
+          // 获取新增或修改我的资料的唯一标识，并赋值给变量
+          this.enjoyUserInfo.id = res.content.id
+          // 跳转到账户信息页面
+          this.$jump({
+            flag: 'h5',
+            extra: {
+              url: location.origin + `/#/allowance/myInfo/AccountInfo?${str}`
+            },
+            routerInfo: {
+              path: `/allowance/myInfo/AccountInfo?${str}`
+            }
+          })
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    }
+
+  },
+  computed: {},
+  watch: {}
+}
+</script>
+
+<style lang='scss' scoped>
+.base-info-container {
+  /deep/ .van-checkbox {
+    margin-left: auto;
+  }
+
+  /deep/ .van-radio {
+    margin-left: auto;
+  }
+
+  /deep/ .van-field__label {
+    width: 30vw;
+  }
+
+  /deep/ .van-picker__cancel, /deep/ .van-picker__confirm {
+    color: #2E4591 !important;
+  }
+
+  /deep/ .van-field__button {
+    height: 22px;
+
+    .san_button {
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+
+  .bottom-btn {
+    background: #2E4591;
+    border: 1px solid #2E4591;
+    color: #FFFFFF
+  }
+}
+</style>