测试人脸识别及签名，编写职业类型组件

src/components/ebiz/occipation/OccupationForLoop.vue

@@ -0,0 +1,295 @@
+<template>
+  <div class="occupation pb70">
+    <van-search v-model="searchParams" @input="onSearch" placeholder="请输入搜索关键词" show-action shape="round" @clear="clearSearch" @search="onSearch">
+      <div slot="action" @click="onSearch">搜索</div>
+    </van-search>
+    <div class="choose-result fs12 pl25" v-if="third.code">
+      <p>职业代码：{{ third.code }}</p>
+      <p>职业：{{ chooseName }}</p>
+    </div>
+    <div>
+      <div :class="[isSearch ? 'hidden' : '']">
+        <p class="fs14 pl20 fwb pv5">常用职业</p>
+        <div class="common-occupation flex flex-wrap fs12 ph25">
+          <div v-for="(item, index) in commonList" @click="commonChoose(item, index)" :key="index" :class="[item.isActive ? 'active' : '', 'fwb']">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div :class="[isSearch ? 'hidden' : '']">
+        <p class="fs14 pl20 fwb pv5">全部职业</p>
+        <div class="main-area fs12 ph10 pb20">
+          <div class="item ph10">
+            <p class="p5" v-for="(item, index) in occupationList" :key="index" @click="handleFirst(item)" :class="{ active: first.code == item.code }">
+              {{ item.name }}
+            </p>
+          </div>
+          <div class="item ph10">
+            <p class="p5" v-for="(item, index) in sec" :key="index" @click="handleSec(item)" :class="{ active: second.code == item.code }">
+              {{ item.name }}
+            </p>
+          </div>
+          <div class="item ph10">
+            <p class="p5" v-for="(item, index) in thi" :key="index" @click="handleThi(item)" :class="{ active: third.code == item.code }">
+              {{ item.name }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div :class="[isSearch ? '' : 'hidden']">
+        <p class="fs14 pl20 fwb pv5">搜索结果</p>
+        <div class="item p10 search-result fs14 flex flex-direction-colunm">
+          <p class="p5 mv5" :class="[item.isActive ? 'active' : '']" v-for="(item, index) in searchList" @click="searchChoose(item, index)" :key="index">
+            <span v-html="item.showName.replace(new RegExp(searchParams, 'g'), `<span class=&quot;red&quot;>${searchParams}</span>`)"></span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="close-btn fixed">
+      <van-button type="danger" @click="ensureChoose">确认选择</van-button>
+      <!-- <van-button type="primary" @click="$emit('chooseOccupation', '')">取消</van-button> -->
+    </div>
+  </div>
+</template>
+<script>
+import occupationData from './data/occupation'
+import { getBankList } from '@/api/ebiz/sale/sale'
+import { Search, Sticky } from 'vant'
+export default {
+  name: 'Occupation',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    code: {
+      type: String,
+      default: ''
+    },
+    life: {
+      type: String,
+      default: ''
+    },
+    health: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      occupationList: [],
+      sec: [], //二级数据
+      thi: [], //三级数据
+      choose: [],
+      searchParams: '',
+      first: {},
+      second: {},
+      third: {},
+      chooseName: '',
+      lifeGrade: '',
+      healthGrade: '',
+      commonList: [],
+      isSearch: false, // 是否搜索中
+      searchList: []
+    }
+  },
+  components: {
+    [Search.name]: Search,
+    [Sticky.name]: Sticky
+  },
+  watch: { 
+    code(newValue) {      
+        this.occupationList.forEach(occupation => {
+        occupation.subs.forEach(sub => {
+          sub.subs.forEach(occupaitonItem => {
+            if (occupaitonItem.code == newValue) {
+              this.first = occupation
+              this.sec = occupation.subs
+              this.second = sub
+              this.thi = sub.subs
+              this.third = occupaitonItem
+              this.chooseName = this.third.name
+            }
+          })
+        })
+      })
+    }
+  },
+  created() {
+    // let occupationData = JSON.parse(window.localStorage.getItem('OccupationList'))
+    this.init(occupationData)
+  },
+  mounted() {},
+  methods: {
+    init(data) {
+      this.occupationList = data
+      this.chooseName = this.name
+      this.third.code = this.code
+      this.lifeGrade = this.life
+      this.healthGrade = this.health
+      this.third = {}
+
+      getBankList({
+        operateType: 'hot_occupation'
+      }).then(res => {
+        if (res.result == '0') {
+          this.commonList = res.content
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })          
+    },
+    handleFirst(item) {
+      this.sec = item.subs
+      this.first = item
+      this.second = {}
+      this.thi = []
+      this.third = {}
+      this.commonInit()
+    },
+    handleSec(item) {
+      this.thi = item.subs
+      this.second = item
+      this.third = {}
+      this.commonInit()
+    },
+    handleThi(item) {
+      this.third = item
+      this.chooseName = this.third.name
+      this.commonInit()
+    },
+    ensureChoose() {
+      if (this.third.code) {
+        this.$emit('chooseOccupation', this.third)
+      } else {
+        this.$toast('请选择职业')
+      }
+    },
+    onSearch() {
+      this.sec = []
+      this.thi = []
+      this.first = {}
+      this.second = {}
+      this.third = {}
+      this.commonInit()
+      if (this.searchParams) {
+        this.searchList = []
+        this.isSearch = true
+        this.occupationList.forEach(first => {
+          first.subs.forEach(second => {
+            second.subs.forEach(third => {
+              if (third.name.indexOf(this.searchParams) != -1) {
+                // this.searchList.push(Object.assign(third, { isActive: false }, { showName: first[index1].name + second[index2].name + third.name }))
+                this.searchList.push(Object.assign(third, { isActive: false }, { showName: first.name + ' - ' + second.name + ' - ' + third.name }))
+                console.log('first = ', first)
+              }
+            })
+          })
+        })
+        console.log('this.searchList ==', this.searchList)
+      } else {
+        this.isSearch = false
+      }
+    },
+    clearSearch() {
+      this.init(occupationData)
+    },
+    commonChoose(item, index) {
+      this.commonInit()
+      this.commonList[index].isActive = true
+      this.occupationList.forEach(occupation => {
+        occupation.subs.forEach(sub => {
+          sub.subs.forEach(occupaitonItem => {
+            if (occupaitonItem.code == item.code) {
+              this.first = occupation
+              this.sec = occupation.subs
+              this.second = sub
+              this.thi = sub.subs
+              this.third = occupaitonItem
+              this.chooseName = this.third.name
+            }
+          })
+        })
+      })
+    },
+    searchChoose(item, index) {
+      this.searchList.forEach(item => {
+        item.isActive = false
+      })
+      this.searchList[index].isActive = true
+      this.third = item
+      this.chooseName = this.third.name
+    },
+    commonInit() {
+      this.commonList.forEach(item => {
+        item.isActive = false
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.close-btn {
+  bottom: 0;
+  width: 100%;
+  .van-button {
+    width: 100% !important;
+  }
+}
+.occupation {
+  .main-area {
+    display: flex;
+    justify-content: space-between;
+    .item {
+      width: 0;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      height: 360px;
+      overflow-y: auto;
+    }
+  }
+  .choose-result {
+    width: 100%;
+    background: #ffffff;
+    line-height: 20px;
+    color: #e9332e;
+    box-sizing: border-box;
+    height: 40px;
+  }
+  .hidden {
+    visibility: hidden;
+  }
+  .common-occupation {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    // flex-wrap: wrap;
+    align-items: center;
+    div {
+      // width: 30%;
+      // height: 20px;
+      padding: 4px;
+      line-height: 20px;
+      text-align: center;
+      border: 1px solid #f2f2f2;
+      margin: 5px;
+      border-radius: 10px;
+      box-sizing: border-box;
+    }
+  }
+  .active {
+    color: #e9332e;
+    background-color: #f2f2f2;
+  }
+  .search-result {
+    height: 420px;
+    overflow-y: auto;
+    p {
+      // margin: 0 auto;
+      text-align: left;
+      min-width: 120px;
+    }
+  }
+}
+</style>

src/components/ebiz/occipation/OccupationPickerForLoop.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="date-picter" id="occupation-picker">
+    <van-field
+      readonly
+      clickable
+      :label="label"
+      :value="chooseName"
+      :placeholder="placeholder"
+      @click="openOccupation"
+      :required="required"
+      right-icon="arrow"
+    />
+    <van-popup v-model="parentShowPicker" position="bottom">
+      <occupation @chooseOccupation="chooseOccupation" :code="code" :name="name"></occupation>
+    </van-popup>
+  </div>
+</template>
+<script>
+import { Field, Popup, Icon } from 'vant'
+import Occupation from './Occupation'
+export default {
+  name: 'OccupationPicker',
+  props: {
+    label: {
+      type: String,
+      default: '11'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    chooseName: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+
+    required: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      default: () => {}
+    },
+    //选项对象中，文字对应的 key
+    valueKey: {
+      type: String,
+      default: 'text'
+    },
+    keyId: {},
+    lifeGrade: {
+      type: String,
+      default: ''
+    },
+    healthGrade: {
+      type: String,
+      default: ''
+    },
+    parentShowPicker: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      code: '',
+      life: '',
+      health: '',
+      showPicker: false
+    }
+  },
+  components: {
+    [Field.name]: Field,
+    [Popup.name]: Popup,
+    [Icon.name]: Icon,
+    [Occupation.name]: Occupation
+  },
+  created() {
+    this.init()
+  },
+  mounted() {},
+  methods: {
+    /**
+     * 初始化
+     */
+    init() {
+      this.code = this.value
+      this.name = this.chooseName
+      this.life = this.lifeGrade
+      this.health = this.healthGrade
+    },
+    chooseOccupation(data) {
+      let { code, name, healthGrade, lifeGrade } = data
+      this.$emit('update:value', code)
+      this.$emit('update:chooseName', name)
+      this.$emit('update:lifeGrade', lifeGrade)
+      this.$emit('update:healthGrade', healthGrade)
+      this.$emit('on-choose', data)
+      this.name = name
+      this.showPicker = false
+    },
+    openOccupation() {
+      if (this.disabled) {
+        return
+      }
+      this.$emit('on-click')
+      this.showPicker = true
+    },
+    cancel() {
+      this.showPicker = false
+      this.$emit('cancel', '')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.date-picter:not(:last-child)::after {
+  position: absolute;
+  z-index: 99;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  // bottom: 0;
+  // top: 0;
+  left: 4.26667vw;
+  border-bottom: 1px solid #dadada;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+#occupation-picker {
+  /deep/.van-cell:not(:last-child)::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    bottom: 0;
+    left: 4.26667vw;
+    border-bottom: 1px solid transparent;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+.van-popup--bottom {
+  height: 100%;
+}
+.close {
+  // display: flex;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  text-align: center;
+  align-items: center;
+  // right: 20px;
+  // left: 20px;
+  .close-wrap {
+    display: flex;
+    padding: 5px 10px;
+    background-color: #fff;
+    .van-icon {
+      font-size: 20px;
+    }
+    p {
+      font-size: 16px;
+      flex-grow: 1;
+    }
+  }
+}
+</style>

src/views/ebiz/insureAgain/InsureInformation.vue

@@ -74,9 +74,7 @@
             placeholder="请选择" v-validate="'required|contactAdderss'" @click="areaChoose('2','bnfDTOs',index)" />
           <van-field v-model="item.homeAddress" label="" name="详细地址" placeholder="具体到街道、门牌号、楼号、单元号、室号" v-validate="'required|homeAddressNum|homeAddressCh'"
             clearable maxlength="30" :readonly="false" style="font-size: 3.5vw;" />
-          <occupation-picker :value.sync="item.occupationCode" :chooseName.sync="item.occupationName" :lifeGrade.sync="item.lifeGrade"
-            :healthGrade.sync="item.healthGrade" clearable label="职业类别" name="职业类别" required v-validate="'required'"
-            placeholder="请选择" :parentShowPicker.sync="occupationShowPicker" @on-click="selectClick('2')" @on-choose="chooseOccupation" />
+          <van-field @click="openOccupation(index)" label="职业类别" name="职业类别" :value="item.occupationName" right-icon="arrow" />
           <InfoCell label="受益顺序"></InfoCell>
           <InfoCell label="受益比例">{{ item.bnfLot }}%</InfoCell>
         </div>
@@ -90,6 +88,8 @@
       <InfoCell label="开户银行">{{accountPersonInfo.bankName}}</InfoCell>
       <InfoCell label="银行账号">{{accountPersonInfo.cardBookCode}}</InfoCell>
     </DropdownBox>
+    <van-field @click="faceTo">人脸识别</van-field>
+    <van-field @click="signTo">签名</van-field>
     <van-button type="danger" class="bottom-btn" v-no-more-click="1000" @click="nextStep">下一步</van-button>
     <!-- 字段选择 -->
     <van-popup v-model="popupShow" position="bottom">
@@ -99,6 +99,10 @@
     <van-popup v-model="homeShow" position="bottom">
       <van-area :area-list="areaLists" value="450000" @confirm="sureArea($event, '2')" @cancel="homeShow = false" />
     </van-popup>
+    <!-- 职业类别弹窗 -->
+    <van-popup v-model="occupationShowPicker" position="bottom">
+      <occupation-for-loop @chooseOccupation="chooseOccupation" :name="occupationName" :code="occupationCode"></occupation-for-loop>
+    </van-popup>
   </div>
 </template>
 <script>
@@ -113,14 +117,14 @@ import SelectRadio from '@/components/ebiz/SelectRadio'
 import getAreaName from '@/assets/js/utils/getAreaNameForSale'
 import areaLists from '@/assets/js/utils/areaNewForSale'
 import { selectComp, getIdentityInfo } from './js/methods'
-import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
+import OccupationForLoop from '@/components/ebiz/occipation/OccupationForLoop'
 export default {
   name: 'InsureInformation',
   components: {
     ProgressBar,
     DropdownBox,
     InfoCell,
-    OccupationPicker,
+    OccupationForLoop,
     [SelectRadio.name]: SelectRadio,
     [Field.name]: Field,
     [Area.name]: Area
@@ -164,13 +168,15 @@ export default {
       bnfIndex: '', //受益人索引
       homeShow: false, //联系地址搜索栏显示
       areaLists: areaLists, //地址信息
-      occupationShowPicker: false //职业类别
+      occupationShowPicker: false, //职业类别     
+      occupationName: '', 
+      occupationCode: '', 
     }
   },
   created() {
     this.getOrderDetail()
   },
-  mounted() {
+  mounted() {    
     setTimeout(() => {
       window.EWebBridge.webCallAppInJs('webview_left_button', {
         intercept: '1'
@@ -179,6 +185,33 @@ export default {
     window.appCallBack = this.appCallBack
   },
   methods: {
+    /**
+     * @description: 人脸识别
+     * @param {*}
+     * @return {*}
+     */
+    async faceTo() {                    
+              const authRes = await EWebBridge.webCallAppInJs('face_auth', {
+                businessSource: '1', //业务来源:1-电投，2-入司，3-理赔，4-保全
+                number: '120222199012046418', //身份证号码
+                name: '庞兴月' //姓名
+              })              
+              if (JSON.parse(authRes).state == '1') {
+                // this.goUrl()
+              } else {
+                this.$toast('人脸识别失败！')
+              }
+    },
+    /**
+     * @description: 签名
+     * @param {*}
+     * @return {*}
+     */
+    signTo() {
+      const res = await EWebBridge.webCallAppInJs('ca_sign', signParam)
+      let signRes = JSON.parse(res)
+      console.log(signRes, '======================signRes=======================')
+    },
     appCallBack(data) {
       if (data.trigger == 'left_button_click') {
         this.$jump({
@@ -268,6 +301,31 @@ export default {
 						"sex": "1",
 						"village": "百苑小区101号",
 						"yearSalary": "32"
+					},
+          	{
+						"area": "450103",
+						"birthday": "1983-03-12",
+						"bnfLot": 50,
+						"bnfOrder": 1,
+						"bnfType": "0",
+						"certiexpiredate": "2035-03-31",
+						"city": "450100",
+						"effectiveDateType": "false",
+						"healthGrade": "1",
+						"idNo": "452624198303120727",
+						"idType": "1",
+						"lifeGrade": "1",
+						"marriage": "1",
+						"mobile": "13707711024",
+						"name": "艾琳马上来",
+						"nativeplace": "1",
+						"occupationCode": "4070103",
+						"occupationName": "经纪人(内勤)",
+						"province": "450000",
+						"relationToInsured": "4",
+						"sex": "1",
+						"village": "百苑小区101号",
+						"yearSalary": "32"
 					}
 				]`
           res.orderDTO.orderInfoDTO.bnfFlag = '1'
@@ -417,7 +475,6 @@ export default {
      * @param {*} bnfIndex 受益人索引
      * @return {*}
      */
-
     areaChoose(pickerType, userType, bnfIndex) {
       userType ? (this.userType = userType) : ''
       if (this.isAppnt) {
@@ -483,22 +540,6 @@ export default {
         //   break
       }
     },
-    /**
-     * @description: 职业类别
-     * @param {*}
-     * @return {*}
-     */
-    chooseOccupation() {
-      this.$jump({
-        flag: 'navigation',
-        extra: {
-          title: '职业类别',
-          hiddenRight: '1'
-        }
-      })
-      this.occupationShowPicker = false
-    },
-
     /**
      * @description: 
      * @param {*} index
@@ -533,8 +574,39 @@ export default {
       //   },
       //   routerInfo: { path: `/insureAgain` }
       // })
+    },
+    /**
+     * @description: 
+     * @param {*} data
+     * @return {*}
+     */
+    chooseOccupation(data) {      
+      let { code, name, healthGrade, lifeGrade } = data
+      // this.$jump({
+      //   flag: 'navigation',
+      //   extra: {
+      //     title: '职业类别',
+      //     hiddenRight: '1'
+      //   }
+      // })      
+      this.occupationShowPicker = false
+      this.bnfPersonInfo[this.bnfIndex]['occupationName'] = name;
+      this.bnfPersonInfo[this.bnfIndex]['occupationCode'] = code;    
+    },
+
+    /**
+     * @description: 
+     * @param {*}
+     * @return {*}
+     */
+    openOccupation(index) {
+      this.occupationShowPicker = !this.occupationShowPicker
+      this.bnfIndex = index
+      this.occupationName = this.bnfPersonInfo[this.bnfIndex]['occupationName'];      
+      this.occupationCode = this.bnfPersonInfo[this.bnfIndex]['occupationCode'];
+      console.log(this.occupationName, '=============this.occupationName============')            
     }
-    // 信息变更
+
   }
 }
 </script>