add

src/pages/myInfo/my-info.vue

@@ -637,7 +637,7 @@ export default {
           vm.flag = true
           if (vm.user_bp_class === 'NP') {
             vm.$router.push({
-              name: 'NaturePerson',
+              name: 'NPBaseInfo',
               params: {
                 bp_id: this.bp_id,
                 user_bp_name: this.user_bp_name,
@@ -656,7 +656,7 @@ export default {
           vm.flag = false
           if (vm.user_bp_class === 'NP') {
             vm.$router.push({
-              name: 'NaturePerson',
+              name: 'NPBaseInfo',
               params: {
                 bp_id: this.bp_id,
                 user_bp_name: this.user_bp_name,
@@ -704,6 +704,7 @@ export default {
           vm.bp_id = res.info.user_bp_id
           vm.bp_identity = res.info.bp_identity
           window.localStorage.setItem('bp_id', res.info.user_bp_id)
+          window.localStorage.setItem('user_bp_status', res.info.user_bp_status)
           window.localStorage.setItem('bp_name', res.info.user_bp_name)
           vm.user_bp_name = res.info.user_bp_name
           vm.user_bp_type = res.info.user_bp_type

src/pages/pay/pay-page.vue

@@ -63,6 +63,8 @@
       </div>
       <button v-if="showpay" @click="pay">立即支付</button>
       <button v-if="showSelect" @click="searchResult">查询支付结果</button>
+      <button v-if="isGo" @click="goMyInfo">返回个人中心</button>
+
     </h-content>
   </h-view>
 </template>
@@ -83,6 +85,7 @@ export default {
       showpay: true,
       isSuccess: false,
       isFaild: false,
+      isGo: false,
     }
   },
   beforeRouteEnter (to, from, next) {
@@ -91,6 +94,7 @@ export default {
       vm.showpay = true
       vm.isSuccess = false
       vm.isFaild = false
+      vm.isGo = false
       vm.name = from.name
       vm.url = vm.$route.params.url
     })
@@ -107,7 +111,12 @@ export default {
       setTimeout(() => {
         vm.showSelect = true
         vm.showpay = false
-      }, 1000)
+      }, 2000)
+    },
+    goMyInfo () {
+      this.$router.push({
+        name: 'MyInfo',
+      })
     },
     getDetail () {
       let vm = this
@@ -120,6 +129,8 @@ export default {
         vm.hlsPopup.hideLoading()
         if (res.result === 'S') {
           Object.assign(vm.info, res.info)
+          vm.isGo = true
+          vm.showSelect = false
         } else {
           hlsPopup.showLongCenter(res.message)
         }

src/pages/pay/payment/contract-record.vue

@@ -37,8 +37,8 @@
                   <span class="bp-name">{{ item.bp_name }}</span>
                 </div>
                 <div>
-                  <span>车牌号</span>
-                  <span>{{ detail.lease_item_car_num }}</span>
+                  <span>车辆型号</span>
+                  <span>{{ detail.vehicle_model }}</span>
                 </div>
               </div>
               <div class="list">
@@ -54,7 +54,7 @@
               <div class="list">
                 <div>
                   <span>发动机号</span>
-                  <span>{{ detail.lease_item_engine_num }}</span>
+                  <span>{{ detail.engine }}</span>
                 </div>
 
                 <div>
@@ -64,8 +64,8 @@
               </div>
               <div class="list">
                 <div>
-                  <span>厂商型号</span>
-                  <span>{{ detail.lease_item_factory_num }}</span>
+                  <span>合格证编号</span>
+                  <span>{{ detail.certificate_number }}</span>
                 </div>
 
                 <div>

src/pages/userBind/np/naturePerson.vue

@@ -311,7 +311,8 @@
         <div
           v-if="(cddItemList.length && baseInfo.bp_type === 'TENANT') || (cddItemList.length && baseInfo.bp_type === 'GUTA')"
           class="userInfo"
-        >附件信息</div>
+        >附件信息
+        </div>
         <div
           v-for="(list, index) in cddItemList"
           v-if="baseInfo.bp_type === 'TENANT' || baseInfo.bp_type === 'GUTA'"

src/pages/userBind/userBind.vue

@@ -53,7 +53,7 @@ export default {
       let name
       let bpClass
       if (this.flag === 0) {
-        name = 'NaturePerson'
+        name = 'NPBaseInfo'
         bpClass = 'NP'
       } else if (this.flag === 1) {
         name = 'Enterprise'

src/pages/userBindNew/np/accessory-info.vue

+<template>
+  <h-view id="accessory">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn" @click="$routeGo()">
+        <img src="@/assets/userBind/arrow.png" >
+        <span>附件信息</span>
+      </div>
+    </h-header>
+    <h-content>
+      <div
+        class="userInfo"
+      >附件信息
+      </div>
+      <div
+        v-for="(list, index) in cddItemList"
+        :key="index"
+        class="card"
+      >
+        <span>{{ list.description }}</span>
+        <div class="img-content">
+          <!--待上传图片列表-->
+          <div v-if="list.cdd_item==='ASSETS_CARD'">
+            <div
+              v-for="(item, index) in upload_list"
+              v-if="item.check_id==list.check_id"
+              :key="index"
+              class="card-upload"
+            >
+              <img :src="item.picture" @click="showBigPicture(item.picture)" >
+              <div class="close" @click="remove_pic(item.attachment_id,index)">
+                <img src="@/assets/userBind/deleteIcon.png" >
+              </div>
+            </div>
+            <!--从服务器上下载的图片-->
+            <div v-for="(pic, index) in dowload_list">
+              <div
+                v-if="pic.check_id==list.check_id"
+                :key="index"
+                class="card-upload"
+              >
+                <img :src="pic.url" @click="showBigPicture(pic.url)" >
+                <div class="close" @click="delete_pic(pic.attachment_id)">
+                  <img src="@/assets/userBind/deleteIcon.png" >
+                </div>
+              </div>
+            </div>
+            <div class="card-upload plus" @click="imgUploadShow(list.description,list.check_id)">
+              <img src="@/assets/userBind/camera.png" class="upload-btn" >
+            </div>
+          </div>
+          <div v-if="list.cdd_item==='CAR_CARD'">
+            <div v-if="!isUploadCar" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+              <img src="@/assets/userBind/camera.png" class="upload-btn" >
+            </div>
+            <div v-if="isUploadCar&&!isApproved" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+              <img :src="carImg" style="width:100%;height:100%">
+            </div>
+            <div v-if="isUploadCar&&isApproved" class="card-upload plus" @click="showBigPicture(carImg)">
+              <img :src="carImg" style="width:100%;height:100%">
+            </div>
+          </div>
+          <div v-if="list.cdd_item==='HOUSE_CARD'">
+            <div v-if="!isUploadHouse" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+              <img src="@/assets/userBind/camera.png" class="upload-btn" >
+            </div>
+            <div v-if="isUploadHouse&&!isApproved" class="card-upload plus" @click="ocrShow(list.cdd_item, '')">
+              <img :src="houseImg" style="width:100%;height:100%">
+            </div>
+            <div v-if="isUploadHouse&&isApproved" class="card-upload plus" @click="showBigPicture(houseImg)">
+              <img :src="houseImg" style="width:100%;height:100%">
+            </div>
+          </div>
+          <div v-if="list.cdd_item==='HOUSE_CARD'">
+            <list-item :item-height="44" class="card-Info">
+              <item>
+                <div slot="name">房屋所有权人</div>
+                <input
+                  slot="content"
+                  v-model="hauseInfo.house_owner"
+                  readonly
+                  placeholder="识别房产证自动填充"
+                >
+              </item>
+              <item>
+                <div slot="name">共有情况</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">房屋坐落</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">登记时间</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">房屋性质</div>
+                <input slot="content" v-model="hauseInfo.house_property" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">规划用途</div>
+                <input slot="content" v-model="hauseInfo.plan_purpose" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">总层数</div>
+                <input slot="content" v-model="hauseInfo.house_layers" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">建筑面积</div>
+                <input slot="content" v-model="hauseInfo.built_area" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">套内建筑面积</div>
+                <input slot="content" v-model="hauseInfo.built_in_area" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">其他</div>
+                <input slot="content" v-model="hauseInfo.others" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">地号</div>
+                <input slot="content" v-model="hauseInfo.land_number" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item :proportion="[1,1]">
+                <div slot="name">土地使用权取得方式</div>
+                <input slot="content" v-model="hauseInfo.land_get_method" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">土地使用年限</div>
+                <input slot="content" v-model="hauseInfo.land_use_limit" readonly placeholder="识别房产证自动填充" >
+              </item>
+            </list-item>
+          </div>
+          <div v-if="list.cdd_item==='CAR_CARD'">
+            <list-item :item-height="44" class="card-Info">
+              <item>
+                <div slot="name">车辆识别代号</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">住址</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">品牌型号</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">发证日期"</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">车辆类型</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">所有人</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">使用性质</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">发动机号码</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">号牌号码</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">注册日期</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+            </list-item>
+          </div>
+    </div></div></div></h-content>
+    <bottom-tab class="footer-button">
+      <tab-button class="save" @click.native="save">下一步</tab-button>
+    </bottom-tab>
+  </h-view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      bp_type: '',
+      list: {},
+      houseImg: '',
+      carImg: '',
+      isApproved: window.localStorage.isApproved,
+      isUploadHouse: false,
+      isUploadCar: false,
+      hauseInfo: {
+        house_owner: '',
+        public_situation: '',
+        house_located: '',
+        regist_date: '',
+        house_property: '',
+        plan_purpose: '',
+        house_layers: '',
+        built_area: '',
+        built_in_area: '',
+        others: '',
+        land_number: '',
+        land_get_method: '',
+        land_use_limit: '',
+      },
+      carInfo: {
+      },
+      upload_list: [],
+      cddItemList: [], // 资料清单列表
+      dowload_list: [],
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (from.name === 'NPInvoiceInfo' && window.localStorage.from) {
+        vm.bp_type = window.localStorage.bp_type
+        vm.loadItemList()
+      }
+    })
+  },
+  methods: {
+    save () {
+      this.$router.push({
+        name: 'NPBankInfo',
+      })
+    },
+    ocrShow (ocrType, type) {
+      let vm = this
+      hlsPopup.showActionSheet({
+        titleText: '请选择照片',
+        buttonArray: ['拍照', '从相册取'],
+        callback: index => {
+          if (index === 0) {
+            vm.openCamera(ocrType, type)
+          } else {
+            vm.takePicture(ocrType, type)
+          }
+        },
+      })
+    },
+    openCamera (ocrType, type) {
+      let vm = this
+      let cameraoptions = {
+        quality: 60,
+        width: 1843,
+        height: 1382,
+      }
+      let success = function (imgdata) {
+        if (!imgdata) {
+          hlsPopup.showLongCenter('请拍照')
+        } else {
+          if (ocrType === 'HOUSE_CARD') {
+            vm.isUploadHouse = true
+            vm.houseImg = imgdata
+          } else if (ocrType === 'CAR_CARD') {
+            vm.isUploadCar = true
+            vm.carImg = imgdata
+          }
+        }
+      }
+      let error = function () {
+        hlsPopup.showLongCenter('请拍照')
+      }
+      hlsUtil.openCamera(cameraoptions, success, error)
+    },
+    takePicture (ocrType, type) {
+      let vm = this
+      var cameraoptions = {
+        quality: 70,
+        width: 1843,
+        height: 1382,
+        maxCount: 1,
+      }
+      let success = function (imgUrl) {
+        if (imgUrl.length === 0) {
+          hlsPopup.showLongCenter('请选择一张图片')
+        } else {
+          if (ocrType === 'HOUSE_CARD') {
+            vm.houseImg = imgUrl[0]
+          } else if (ocrType === 'CAR_CARD') {
+            vm.carImg = imgUrl[0]
+          }
+        }
+      }
+      let error = function () {
+        hlsPopup.showLongCenter(error)
+      }
+      vm.hlsUtil.takePicture(cameraoptions, success, error)
+    },
+    imgUploadOpenCamera (description, check_id) {
+      let vm = this
+      let obj = {
+        pkvalue: check_id,
+        source_type: 'PRJ_CDD_ITEM_CHECK',
+        picture: '',
+        check_id: check_id,
+        filePath: '',
+        attachment_id: '',
+        user_id: 1,
+        fileName: description + '_' + new Date().getTime(),
+      }
+      let cameraoptions = {
+        quality: 100,
+      }
+      let success = function (imgdata) {
+        obj.picture = imgdata
+        obj.filePath = imgdata
+        let list = []
+        list.push(obj)
+        // vm.upload_list.push(obj)
+        // 拍完一张立马执行保存图片逻辑
+        vm.save_picture(list)
+      }
+      let error = function () {
+        hlsPopup.showLongCenter('请拍照')
+      }
+      hlsUtil.openCamera(cameraoptions, success, error)
+    },
+    imgUploadTakePicture (description, check_id) {
+      let vm = this
+      let cameraoptions = {
+        quality: 100,
+      }
+      let success = function (imgUrl) {
+        var list = []
+        for (let i = 0; i < imgUrl.length; i++) {
+          let obj = {
+            pkvalue: check_id,
+            source_type: 'PRJ_CDD_ITEM_CHECK',
+            picture: '',
+            check_id: check_id,
+            filePath: '',
+            attachment_id: '',
+            user_id: 1,
+            fileName: description + '_' + new Date().getTime(),
+          }
+          obj.picture = imgUrl[i]
+          obj.filePath = imgUrl[i]
+          list.push(obj)
+        }
+        // 拍完一张立马执行保存图片逻辑
+        vm.save_picture(list)
+      }
+      let error = function () {}
+      vm.hlsUtil.takePicture(cameraoptions, success, error)
+    },
+    // 图片保存
+    save_picture (list) {
+      let vm = this
+      if (list.length) {
+        // hlsPopup.showLoading('图片上传请稍候')
+        var alreadyUploadNum = 0
+        var attLength = 0
+        var recordUploadInterval = setInterval(function () {
+          if (alreadyUploadNum === attLength) {
+            clearInterval(recordUploadInterval)
+            /* hlsPopup.hideLoading()
+            hlsPopup.showLongCenter('图片上传成功') */
+          }
+        }, 500)
+        for (var i = 0; i < list.length; i++) {
+          let uploadSuccess = function (res) {
+            if (res.result === 'S') {
+              alreadyUploadNum++
+              for (var j = 0; j < list.length; j++) {
+                if (list[j].filePath === res.response.filePath) {
+                  list[j].attachment_id = res.response.attachment_id
+                  vm.upload_list.push(list[j])
+                  break
+                }
+              }
+            } else {
+              hlsPopup.hideLoading()
+            }
+          }
+          if (!list[i].attachment_id) {
+            attLength++
+            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
+          }
+        }
+      } else {
+        hlsPopup.hideLoading()
+      }
+    },
+    // 移除图片
+    remove_pic (attachment_id, index) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          hlsPopup.showLongCenter('删除成功!')
+          vm.remove_upload_list(attachment_id, index)
+        } else if (res.result === 'E') {
+          hlsPopup.showShortCenter(res.message)
+        }
+      })
+    },
+    // 图片上传入口
+    imgUploadShow (description, check_id) {
+      let vm = this
+      // vm.upload_list = []
+      hlsPopup.showActionSheet({
+        titleText: '请选择照片',
+        buttonArray: ['拍照', '从相册取'],
+        callback: index => {
+          if (index === 0) {
+            vm.imgUploadOpenCamera(description, check_id)
+          } else {
+            vm.imgUploadTakePicture(description, check_id)
+          }
+        },
+      })
+    },
+    // 查看大图
+    showBigPicture (pic) {
+      let vm = this
+      vm.hlsPopup.showBigPicture({
+        imgUrl: pic,
+        width: '100% !important',
+      })
+    },
+    delete_pic (attachment_id) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          hlsPopup.showLongCenter('删除成功!')
+          vm.remove_dowload_list(attachment_id)
+        } else if (res.result === 'E') {
+          hlsPopup.showShortCenter(res.message)
+        }
+      })
+    },
+    loadItemList () {
+      let vm = this
+      vm.dowload_list = []
+      let bpId = window.localStorage.getItem('bp_id')
+      let url = process.env.basePath + 'prj_cdd_check_list'
+      let param = {
+        master: {
+          document_id: bpId,
+          document_table: 'HLS_BP_MASTER',
+          tab_group: 'HLS_NP',
+        },
+      }
+      // vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        // vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.cddItemList = res.lists.filter(i => {
+            return i.description.indexOf('身份证') === -1
+          })
+          // 查询图片
+          vm.cddItemList.forEach((item, index) => {
+            vm.load_picture(item.check_id, index, item.cdd_item)
+          })
+        }
+      })
+    },
+    load_picture (check_id, index, cdd_item) {
+      let vm = this
+      let url =
+        process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询
+      let param = {
+        check_id: check_id,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          res.lists.forEach(item => {
+            item['url'] =
+              process.env.filePath +
+              'attachment_id=' +
+              item.attachment_id +
+              '&access_token=' +
+              window.localStorage.access_token
+            vm.dowload_list.push(item)
+          })
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+#accessory{
+      .userInfo {
+      height: 45px;
+      line-height: 45px;
+      color: @headerColor;
+      margin-top: -10px;
+      font-size: 15px;
+      margin-left: 16px;
+      position: relative;
+    }
+    .userInfo::before {
+      content: "";
+      display: block;
+      width: 4px;
+      height: 20px;
+      background-color: @headerColor;
+      position: absolute;
+      left: -15px;
+      top: 12px;
+    }
+      .card {
+      padding-bottom: 8px;
+      height: auto;
+      background-color: #fff;
+      margin-bottom: 10px;
+
+      display: flex;
+      flex-direction: column;
+      span {
+        color: #656464;
+        font-size: 13px;
+        line-height: 18px;
+        padding-top: 8px;
+        display: block;
+        margin-left: 16px;
+      }
+      .img-content {
+        /*display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+        align-items: center;*/
+      }
+      .plus {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .card-upload {
+        position: relative;
+        width: 80px;
+        height: 80px;
+        border: 1px dashed #dcdcdd;
+        /* display: flex;
+         justify-content: center;
+         align-items: center;*/
+        margin-top: 12px;
+        margin-left: 16px;
+        float: left;
+        .close {
+          /* position: relative;
+          color: #F96F68;
+          margin-top: -100%;
+          margin-left: -10%;*/
+          position: absolute;
+          color: #f96f68;
+          top: -6px;
+          right: -6px;
+          img {
+            width: 14px;
+            height: 14px;
+          }
+        }
+        img {
+          /*width: 88px;
+          height: 88px;*/
+          width: 100%;
+          height: 100%;
+        }
+        .upload-btn {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+     .save {
+    color: #fff;
+    border-radius: 4px;
+    background-color: @headerColor;
+  }
+}
+</style>

src/pages/userBindNew/np/bank-info.vue

+<template>
+  <h-view id="np-bank-card">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn" @click="$routeGo()">
+        <img src="@/assets/userBind/arrow.png" >
+        <span>银行信息</span>
+      </div>
+    </h-header>
+    <h-content>
+      <div id="bank-card">
+        <div class="info">
+          <div class="info-icon">
+            <img src="@/assets/userBind/info.png" >
+            <span>温馨提示</span>
+          </div>
+          <p>推荐使用农行卡，农行卡支付免收手续费!</p>
+        </div>
+        <div class="my-card">
+          <div class="top">
+            <div class="left">
+              <img src="@/assets/userBind/bankIcon.png" class="icon" >
+              <span class="top-word">
+                我的卡
+                <span class="sum">(共{{ getBankList.length }}张)</span>
+              </span>
+            </div>
+            <img src="@/assets/userBind/add.png" class="icon-right" @click="showModal" >
+          </div>
+          <div class="clear" />
+          <div class="card-content">
+            <ul>
+              <li v-for="(item,index) in getBankList" :key="index" >
+                <item-option class="slider">
+                  <div
+                    :style="'background-image: url('+ changeBgImg (item) +')'"
+                    class="my-bank-card"
+                    @click="showModalInfo(item)"
+                  >
+                    <div class="card-info">
+                      <span class="name">{{ item.bank_full_name }}</span>
+                      <span class="card-type">{{ selectType(item.bank_card_type) }}</span>
+                      <span class="number">卡号</span>
+                      <span class="card-number">**** **** **** {{ selectLast (item) }}</span>
+                    </div>
+                  </div>
+                  <div slot="buttons" class="button">
+                    <option-button text @click.native="deleteFun(item.bank_account_num)" />
+                  </div>
+                </item-option>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </h-content>
+    <bottom-tab class="footer-button">
+      <tab-button class="save" @click.native="putData">提交</tab-button>
+    </bottom-tab>
+    <h-modal ref="modal" v-model="showModalValue" position="bottom">
+      <h-view>
+        <div class="modal-content">
+          <div class="modal-content-add-top">
+            <span>添加银行卡</span>
+            <img src="@/assets/userBind/close.png" @click="hideModal" >
+          </div>
+          <img
+            v-if="!bankImg && !isApproved"
+            src="@/assets/userBind/addBack.png"
+            class="addBack"
+            @click="ocrShow('bankCard', '')"
+          >
+          <img
+            v-if="bankImg"
+            :src="bankImg"
+            class="addBack"
+            style="height: 38%;"
+            @click="ocrShow('bankCard', '')"
+          >
+          <img
+            v-if="isClear && isApproved && !bankImg"
+            src="@/assets/userBind/addBack.png"
+            class="addBack"
+            @click="ocrShow('bankCard', '')"
+          >
+          <img
+            v-if="!bankImg && isApproved && !isClear"
+            src="@/assets/userBind/addBack.png"
+            class="addBack"
+            @click="ocrShow('bankCard', '')"
+          >
+          <list-item :item-height="44" class="card-Info">
+            <item>
+              <div slot="name">银行卡卡号</div>
+              <input
+                slot="content"
+                v-model="bank.bank_account_num"
+                readonly
+                placeholder="识别银行卡自动填充"
+              >
+            </item>
+            <item>
+              <div slot="name">账户姓名</div>
+              <input slot="content" v-model="bank.bank_account_name" readonly placeholder="请输入账户名称" >
+            </item>
+            <item>
+              <div slot="name">银行名称</div>
+              <input slot="content" v-model="bank.bank_full_name" readonly placeholder="识别银行卡自动填充" >
+            </item>
+            <item>
+              <div slot="name">支行名称</div>
+              <input slot="content" v-model="bank.bank_branch_name" placeholder="请输入支行名称" >
+            </item>
+          </list-item>
+        </div>
+      </h-view>
+      <bottom-tab class="add-box">
+        <!-- v-if="!isApproved || (isClear && isApproved)"-->
+        <tab-button class="add-card" @click.native="addBankInfo">添加</tab-button>
+      </bottom-tab>
+    </h-modal>
+  </h-view>
+</template>
+<script>
+import backImg1 from '@/assets/userBind/nong.png'
+import backImg2 from '@/assets/userBind/unNong.png'
+export default {
+  data () {
+    return {
+      backImg: null,
+      showModalValue: false,
+      bankList: [],
+      isClear: false,
+      bank: {
+        bank_account_num: '',
+        bank_account_name: '',
+        bank_card_type: '',
+        bank_full_name: '',
+        bank_branch_name: '',
+      },
+      bankImg: '', // 银行卡图片
+      getBankList: [],
+    }
+  },
+  computed: {
+    isApproved () {
+      return window.localStorage.user_bp_status === 'APPROVED'
+    },
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.getBankInfo()
+    })
+  },
+  methods: {
+    successCall () {
+      this.hideModal()
+      this.getBankInfo()
+      this.bank.bank_account_num = ''
+      this.bank.bank_account_name = ''
+      this.bank.bank_full_name = ''
+      this.bank.bank_branch_name = ''
+    },
+    hideModal () {
+      this.showModalValue = false
+      this.isClear = true
+      this.bank.bank_account_num = ''
+      this.bank.bank_account_name = window.localStorage.bp_name
+      this.bank.bank_card_type = ''
+      this.bank.bank_full_name = ''
+      this.bank.bank_branch_name = ''
+    },
+    showModal () {
+      this.showModalValue = true
+    },
+    putData () {
+      let bp_id = window.localStorage.getItem('bp_id')
+      if (bp_id) {
+        this.hlsPopup.showConfirm({
+          title: '提示',
+          content: '您确认提交吗？',
+          onConfirm: data => {
+            if (data) {
+              let vm = this
+              let url = process.env.basePath + 'bp_bind_submit'
+              let param = {
+                master: {
+                  bp_id: bp_id,
+                  company_id: '2145',
+                },
+              }
+              vm.hlsPopup.showLoading('请稍候')
+              vm.hlsHttp.post(url, param).then(function (res) {
+                vm.hlsPopup.hideLoading()
+                if (res.result === 'S') {
+                  vm.hlsPopup.showSuccess('提交成功')
+                  vm.$router.push({
+                    name: 'HomePage',
+                  })
+                } else {
+                  vm.hlsPopup.showLongCenter(res.message)
+                }
+              })
+            }
+          },
+        })
+      } else {
+        this.hlsPopup.showLongCenter('请先保存')
+      }
+    },
+    addBankInfo () {
+      this.hlsPopup.showConfirm({
+        title: '提示',
+        content: '您确认添加吗？',
+        onConfirm: data => {
+          if (data === 1) {
+            let bpName = window.localStorage.getItem('bp_name')
+            if (
+              this.bank.bank_account_num === '' ||
+              this.bank.bank_account_name === '' ||
+              this.bank.bank_full_name === ''
+            ) {
+              this.hlsPopup.showLongCenter('请输入完整字段')
+            } else if (this.hlsUtil.isBankAccount(this.bank.bank_account_num)) {
+              this.hlsPopup.showLongCenter('银行卡号有误')
+            } else if (this.bank.bank_account_name !== bpName) {
+              this.hlsPopup.showLongCenter('请输入本人银行卡')
+            } else {
+              let list = JSON.parse(JSON.stringify(this.bank))
+              this.bankList.push(list)
+              let vm = this
+              let url = process.env.basePath + 'bp_bank_save'
+              let param = {
+                master: {
+                  bp_id: window.localStorage.getItem('bp_id'),
+                  bank_lists: this.bankList,
+                },
+              }
+              vm.hlsPopup.showLoading('请稍候')
+              vm.hlsHttp.post(url, param).then(function (res) {
+                vm.hlsPopup.hideLoading()
+                if (res.result === 'S') {
+                  vm.successCall()
+                  vm.hlsPopup.showLongCenter('保存成功')
+                  setTimeout(vm.successCall, 2000)
+                }
+              })
+            }
+          }
+        },
+      })
+    },
+    selectType (e) {
+      if (e === '0') {
+        return '未知类型'
+      } else if (e === '1') {
+        return '借记卡'
+      } else if (e === '2') {
+        return '信用卡'
+      }
+    },
+    showModalInfo (item) {
+      Object.assign(this.bank, item)
+      this.showModalValue = true
+    },
+    getBankInfo () {
+      let vm = this
+      let id = window.localStorage.getItem('bp_id')
+      let url = process.env.basePath + 'bp_bank_query'
+      let param = {
+        bp_id: id,
+      }
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp
+        .post(url, param)
+        .then(function (res) {
+          vm.hlsPopup.hideLoading()
+          if (res.result === 'S') {
+            vm.getBankList = res.lists
+          }
+        })
+        .catch(() => {
+          this.hlsPopup.showLongCenter('传入参数异常')
+        })
+    },
+    changeBgImg (item) {
+      if (item.bank_full_name.indexOf('农业银行') !== -1) {
+        return backImg1
+      } else {
+        return backImg2
+      }
+    },
+    selectLast (item) {
+      let num = item.bank_account_num
+      return num.substring(num.length - 4)
+    },
+    deleteFun (e) {
+      this.hlsPopup.showConfirm({
+        title: '提示',
+        content: '您确认删除吗？',
+        onConfirm: data => {
+          if (data === 1) {
+            let index = this.getBankList.findIndex(item => {
+              if (item.bank_account_num === e) {
+                return true
+              }
+            })
+            this.getBankList.splice(index, 1)
+            let vm = this
+            let url = process.env.basePath + 'bp_bank_delete'
+            let param = {
+              'master': {
+                'bp_id': window.localStorage.getItem('user_id'),
+                'bank_account_num': e,
+              },
+            }
+            vm.hlsPopup.showLoading('请稍候')
+            vm.hlsHttp.post(url, param).then(function (res) {
+              vm.hlsPopup.hideLoading()
+              if (res.result === 'S') {
+                vm.hlsPopup.showSuccess('删除成功')
+              } else {
+                vm.hlsPopup.showLongCenter(res.message)
+              }
+            })
+          }
+        },
+      })
+    },
+    ocrShow (ocrType, type) {
+      let vm = this
+      hlsPopup.showActionSheet({
+        titleText: '请选择照片',
+        buttonArray: ['拍照', '从相册取'],
+        callback: index => {
+          if (index === 0) {
+            vm.openCamera(ocrType, type)
+          } else {
+            vm.takePicture(ocrType, type)
+          }
+        },
+      })
+    },
+    openCamera (ocrType, type) {
+      let vm = this
+      let cameraoptions = {
+        quality: 60,
+        width: 1843,
+        height: 1382,
+      }
+      let success = function (imgdata) {
+        if (!imgdata) {
+          hlsPopup.showLongCenter('请拍照')
+        } else {
+          if (ocrType === 'idCard') {
+            type === 'front'
+              ? ((vm.idCardFront = imgdata),
+              vm.idCardIdentify(imgdata, 'idCard'),
+              (vm.idCardFrontEditFlag = true))
+              : ((vm.idCardBack = imgdata),
+              vm.idCardBackIdentify(imgdata, 'idCard'),
+              (vm.idCardBackEditFlag = true))
+          } else if (ocrType === 'idCardSp') {
+            // 配偶身份证识别
+            type === 'front'
+              ? ((vm.idCardFrontSp = imgdata),
+              vm.idCardIdentify(imgdata, 'idCardSp'),
+              (vm.idCardFrontSpEditFlag = true))
+              : ((vm.idCardBackSp = imgdata),
+              vm.idCardBackIdentify(imgdata, 'idCardSp'),
+              (vm.idCardBackSpEditFlag = true))
+          } else if (ocrType === 'bankCard') {
+            vm.bankImg = imgdata
+            vm.bankCardIdentify(imgdata)
+          }
+        }
+      }
+      let error = function () {
+        hlsPopup.showLongCenter('请拍照')
+      }
+      hlsUtil.openCamera(cameraoptions, success, error)
+    },
+    takePicture (ocrType, type) {
+      let vm = this
+      var cameraoptions = {
+        quality: 70,
+        width: 1843,
+        height: 1382,
+        maxCount: 1,
+      }
+      let success = function (imgUrl) {
+        if (imgUrl.length === 0) {
+          hlsPopup.showLongCenter('请选择一张图片')
+        } else {
+          if (ocrType === 'idCard') {
+            type === 'front'
+              ? ((vm.idCardFront = imgUrl[0]),
+              vm.idCardIdentify(imgUrl[0], 'idCard'),
+              (vm.idCardFrontEditFlag = true))
+              : ((vm.idCardBack = imgUrl[0]),
+              vm.idCardBackIdentify(imgUrl[0], 'idCard'),
+              (vm.idCardBackEditFlag = true))
+          } else if (ocrType === 'idCardSp') {
+            // 配偶身份证识别
+            type === 'front'
+              ? ((vm.idCardFrontSp = imgUrl[0]),
+              vm.idCardIdentify(imgUrl[0], 'idCardSp'),
+              (vm.idCardFrontSpEditFlag = true))
+              : ((vm.idCardBackSp = imgUrl[0]),
+              vm.idCardBackIdentify(imgUrl[0], 'idCardSp'),
+              (vm.idCardBackSpEditFlag = true))
+          } else if (ocrType === 'bankCard') {
+            vm.bankImg = imgUrl[0]
+            vm.bankCardIdentify(imgUrl[0])
+          }
+        }
+      }
+      let error = function () {
+        hlsPopup.showLongCenter(error)
+      }
+      vm.hlsUtil.takePicture(cameraoptions, success, error)
+    },
+    // 银行卡识别
+    bankCardIdentify (fileUrl) {
+      let vm = this
+      hlsPopup.showLoading('正在识别')
+      let url = process.env.ocrPath + '/baidu/ocr/bankCard'
+      hlsUtil.baiduOcr(fileUrl, url, function (res) {
+        hlsPopup.hideLoading()
+        let result = res.result.result
+        vm.bank.bank_account_num = result.bank_card_number.replace(/\s*/g, '')
+        vm.bank.bank_full_name = result.bank_name
+        vm.bank.bank_card_type = result.bank_card_type
+      })
+    },
+  },
+}
+</script>
+<style lang="less">
+  #np-bank-card {
+      .info {
+        height: 70px;
+        background-color: rgba(142, 195, 30, 0.1);
+        .info-icon {
+          height: 20px;
+          padding-top: 20px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 15.8px;
+            height: 15.8px;
+            margin-left: 17.1px;
+          }
+          span {
+            font-family: PingFangSC-Semibold;
+            font-size: 14px;
+            color: #8ec31e;
+            margin-left: 9px;
+            letter-spacing: 0.5px;
+            line-height: 20px;
+          }
+        }
+        p {
+          font-family: PingFangSC-Regular;
+          font-size: 13px;
+          color: #656464;
+          width: 310px;
+          margin-left: 42px;
+          letter-spacing: 0.4px;
+          line-height: 18px;
+          margin-top: 8px;
+        }
+      }
+      .my-card {
+        .top {
+          width: 320px;
+          margin: 0 auto;
+          margin-top: 13px;
+          .left {
+            height: 32px;
+            display: flex;
+            align-items: center;
+            float: left;
+            .icon {
+              width: 18px;
+              height: 20px;
+              margin-right: 4px;
+            }
+            .top-word {
+              font-family: PingFangSC-Semibold;
+              font-size: 15px;
+              color: @headerColor;
+              letter-spacing: 0.46px;
+              .sum {
+                font-family: PingFangSC-Semibold;
+                font-size: 15px;
+                color: #4d5d6c;
+                letter-spacing: 0.46px;
+              }
+            }
+          }
+          .icon-right {
+            width: 34px;
+            height: 34px;
+            float: right;
+          }
+        }
+        .clear {
+          clear: both;
+        }
+        .card-content {
+          width: 350px;
+          padding-left: 28px;
+          overflow: hidden;
+          margin-top: 16px;
+          li {
+            margin-bottom: 10px;
+            .slider {
+              height: 100%;
+              margin-left: -14px;
+            }
+          }
+          .my-bank-card {
+            width: 320px;
+            height: 190px;
+            box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25);
+            border-radius: 6px;
+            background-size: 370px 240px;
+            background-position: -20px;
+            .card-info {
+              font-family: PingFangSC-Medium;
+              color: #ffffff;
+              margin-left: 18px;
+              padding-top: 15px;
+              .name,
+              .card-type {
+                font-size: 16px;
+                letter-spacing: 5.5px;
+                line-height: 24px;
+              }
+              .card-type {
+                display: block;
+                margin-top: 9px;
+              }
+              .number {
+                font-size: 12px;
+                letter-spacing: 0;
+                line-height: 16px;
+                margin-top: 33px;
+                display: block;
+                margin-top: 33px;
+              }
+              .card-number {
+                display: block;
+                font-family: Avenir-Heavy;
+                font-size: 16px;
+                color: #ffffff;
+                letter-spacing: 6px;
+                line-height: 24px;
+              }
+            }
+          }
+        }
+      }
+      .swipeout-list .item .function {
+        left: 330px;
+        border-radius: 6px;
+        width: 54px;
+        height: 190px;
+        background: url("../../../assets/userBind/delete.png") 16px 84.9px #fde5e8
+        no-repeat;
+        background-size: 20px 20px;
+      }
+    .save {
+    color: #fdb62f;
+    border-radius: 4px;
+    border: 1px solid #fdb62f;
+    background-color: #fafafa;
+  }
+       .modal-content {
+    width: 100%;
+    height: 75%;
+    position: absolute;
+    top: 25%;
+    background-color: #fff;
+    overflow-y: scroll;
+    .modal-content-add-top {
+      width: 320px;
+      height: 34px;
+      line-height: 34px;
+      padding-top: 10px;
+      background-color: #fff;
+      padding-bottom: 40px;
+      position: fixed;
+      left: 28px;
+      span {
+        font-family: PingFangSC-Semibold;
+        font-size: 15px;
+        color: @headerColor;
+        letter-spacing: 0.47px;
+      }
+      img {
+        width: 34px;
+        height: 34px;
+        float: right;
+      }
+    }
+    .addBack {
+      display: block;
+      width: 320px;
+      margin: 0 auto;
+      margin-top: 50px;
+      border-radius: 6px;
+      margin-bottom: 17px;
+    }
+
+    .card-Info {
+      margin-bottom: 220px;
+    }
+
+  }
+     .add-card {
+    width: 358px;
+    height: 40px;
+    background: @headerColor;
+    border-radius: 4px;
+    color: #fff;
+  }
+    }
+    .modal {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+</style>

src/pages/userBindNew/np/base-info.vue

+<template>
+  <h-view id="np-base-info">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn" @click="$routeGo()">
+        <img src="@/assets/userBind/arrow.png" >
+        <span>基本信息</span>
+      </div>
+    </h-header>
+    <h-content>
+      <list-item :item-height="44">
+        <item v-if="(isApproved&&!isMultiRole)||!isApproved" :showArrow="true">
+          <div slot="name" class="required">客户类型</div>
+          <input
+            slot="content"
+            v-model="baseInfo.bp_type_n"
+            placeholder="请选择"
+            type="text"
+            readonly
+            onfocus="this.blur()"
+            @click="selectIdTypeOnly()"
+          >
+        </item>
+        <item v-if="isApproved&&isMultiRole" :showArrow="true" @click.native="selectIdType()">
+          <div slot="name" class="required">客户类型</div>
+          <div slot="content" class="typeBP">
+            <span>{{ baseInfo.bp_type_n }}</span>
+            <span>
+              {{ multiBpType.bp_type_n }}
+              <img v-if="multiBpType.bp_type_n" src="@/assets/userBind/deleteTag.png" @click.stop @click="deleteBP" >
+            </span>
+          </div>
+        </item>
+        <item v-if="(isPaople&&from)||(isPaople&&isSelected)">
+          <div slot="name" class="required">业务经办人</div>
+          <input slot="content" v-model="baseInfo.agent_username" placeholder="请输入业务经办员工代码" >
+        </item>
+        <item v-if="(isLesons&&from)||(isLesons&&isSelected)">
+          <div slot="name" class="required">营业执照</div>
+          <input slot="content" v-model="baseInfo.business_license_num" placeholder="请输入营业执照号" >
+        </item>
+        <item v-if="(isMatter&&from)||(isMatter&&isSelected)">
+          <div slot="name" class="required">办事处代码</div>
+          <input slot="content" v-model="baseInfo.business_license_num" placeholder="请输入办事处代码" >
+        </item>
+        <button v-if="isAddNewType" class="type-save" @click="addNewRole">新增角色</button>
+      </list-item>
+      <div class="userInfo">客户信息</div>
+      <div class="upload-id-card">
+        <span>身份证照片上传</span>
+        <div class="upload-box">
+          <div v-if="!idCardFront" @click="ocrShow('idCard', 'front')">
+            <img src="@/assets/userBind/front.png" >
+            <p>正面</p>
+          </div>
+          <div v-if="idCardFront && !isApproved" @click="ocrShow('idCard', 'front')">
+            <img :src="idCardFront" style="width: 100%;height: 100%;margin: 0" >
+          </div>
+          <div v-if="isApproved && idCardFront">
+            <img
+              v-if="idCardFront"
+              :src="idCardFront"
+              style="width: 100%;height: 100%;margin: 0"
+              @click="showBigPicture(idCardFront)"
+            >
+          </div>
+          <div v-if="!idCardBack" @click="ocrShow('idCard', 'back')">
+            <img src="@/assets/userBind/back.png" >
+            <p>反面</p>
+          </div>
+          <div v-if="idCardBack && !isApproved" @click="ocrShow('idCard', 'back')">
+            <img :src="idCardBack" style="width: 100%;height: 100%;margin: 0" >
+          </div>
+          <div v-if="isApproved && idCardBack">
+            <img
+              v-if="idCardBack"
+              :src="idCardBack"
+              style="width: 100%;height: 100%;margin: 0"
+              @click="showBigPicture(idCardBack)"
+            >
+          </div>
+        </div>
+      </div>
+      <list-item :item-height="44" class="second-part">
+        <item>
+          <div slot="name" class="required">姓名</div>
+          <input
+            slot="content"
+            v-model="baseInfo.bp_name"
+            readonly
+            placeholder="上传身份证自动填充"
+            class="auto"
+          >
+        </item>
+        <item>
+          <div slot="name" class="required">身份证号码</div>
+          <input
+            slot="content"
+            v-model="baseInfo.id_card_no"
+            readonly
+            placeholder="上传身份证自动填充"
+            class="auto"
+          >
+        </item>
+        <item>
+          <div slot="name" class="required">户籍地址</div>
+          <textarea
+            slot="content"
+            ref="myTestarea"
+            v-model="baseInfo.address_on_resident_booklit"
+            readonly
+            cols="22"
+            rows="1"
+            placeholder="上传身份证自动填充"
+            class="auto"
+            @input="addRows(baseInfo.address_on_resident_booklit)"
+          />
+        </item>
+        <item>
+          <div slot="name" class="required">身份证有效期从</div>
+          <input
+            slot="content"
+            v-model="baseInfo.id_card_date_from"
+            readonly
+            placeholder="上传身份证自动填充"
+            class="auto"
+          >
+        </item>
+        <item>
+          <div slot="name" class="required">身份证有效期到</div>
+          <input
+            slot="content"
+            v-model="baseInfo.id_card_date_to"
+            readonly
+            placeholder="上传身份证自动填充"
+            class="auto"
+          >
+        </item>
+        <item>
+          <div slot="name" class="required">手机号码</div>
+          <input slot="content" v-model="baseInfo.cell_phone" readonly placeholder="请输入手机号码" >
+        </item>
+        <item :showArrow="true">
+          <div slot="name" class="required">业务办理省</div>
+          <input
+            slot="content"
+            v-model="baseInfo.province_name"
+            placeholder="请选择"
+            type="text"
+            readonly
+            onfocus="this.blur()"
+            @click="selectProvince()"
+          >
+        </item>
+        <item :showArrow="true">
+          <div slot="name" class="required">业务办理市</div>
+          <input
+            slot="content"
+            v-model="baseInfo.city_name"
+            placeholder="请选择"
+            type="text"
+            readonly
+            onfocus="this.blur()"
+            @click="selectCity()"
+          >
+        </item>
+        <item :showArrow="true">
+          <div slot="name" class="required">业务办理区/县</div>
+          <input
+            slot="content"
+            v-model="baseInfo.district_name"
+            placeholder="请选择"
+            type="text"
+            readonly
+            onfocus="this.blur()"
+            @click="selectDistrict()"
+          >
+        </item>
+        <item>
+          <div slot="name" class="required">联系地址</div>
+          <textarea
+            slot="content"
+            ref="myTestareaLive"
+            v-model="baseInfo.living_address"
+            rows="1"
+            cols="22"
+            placeholder="请输入联系地址"
+            @input="addRowsLive(baseInfo.living_address)"
+          />
+        </item>
+        <item :showArrow="true">
+          <div slot="name" class="required">学历</div>
+          <input
+            slot="content"
+            v-model="baseInfo.academic_background_n"
+            placeholder="请选择学历"
+            readonly
+            onfocus="this.blur()"
+            @click="selectBackType"
+          >
+        </item>
+        <item
+          v-if="baseInfo.bp_type === 'TENANT' || baseInfo.bp_type === 'GUTA'"
+          :showArrow="true"
+        >
+          <div slot="name" class="required">婚姻状况</div>
+          <input
+            slot="content"
+            v-model="baseInfo.marital_status_n"
+            placeholder="请选择"
+            readonly
+            onfocus="this.blur()"
+            @click="selectMarital"
+          >
+        </item>
+      </list-item>
+      <div
+        v-if="(hasSP && baseInfo.bp_type === 'TENANT') || (hasSP && baseInfo.bp_type === 'GUTA')"
+      >
+        <!-- 主承租人活担保人为已婚显示-->
+        <div class="userInfo">配偶信息</div>
+        <div class="upload-id-card">
+          <span>身份证照片上传</span>
+          <div class="upload-box">
+            <div v-if="!idCardFrontSp" @click="ocrShow('idCardSp', 'front')">
+              <img src="@/assets/userBind/front.png" >
+              <p>正面</p>
+            </div>
+            <div v-if="idCardFrontSp && !isApproved" @click="ocrShow('idCardSp', 'front')">
+              <img :src="idCardFrontSp" style="width: 100%;height: 100%;margin: 0" >
+            </div>
+            <div v-if="isApproved && idCardFrontSp">
+              <img
+                v-if="idCardFrontSp"
+                :src="idCardFrontSp"
+                style="width: 100%;height: 100%;margin: 0"
+                @click="showBigPicture(idCardFrontSp)"
+              >
+            </div>
+            <div v-if="!idCardBackSp" @click="ocrShow('idCardSp', 'back')">
+              <img src="@/assets/userBind/back.png" >
+              <p>反面</p>
+            </div>
+            <div v-if="idCardBackSp && !isApproved" @click="ocrShow('idCardSp', 'back')">
+              <img :src="idCardBackSp" style="width: 100%;height: 100%;margin: 0" >
+            </div>
+            <div v-if="isApproved && idCardBackSp">
+              <img
+                v-if="idCardBackSp"
+                :src="idCardBackSp"
+                style="width: 100%;height: 100%;margin: 0"
+                @click="showBigPicture(idCardBackSp)"
+              >
+            </div>
+          </div>
+        </div>
+        <list-item :item-height="44">
+          <item>
+            <div slot="name" class="required">姓名</div>
+            <input slot="content" v-model="baseInfo.bp_name_sp" readonly placeholder="上传身份证自动填充" >
+          </item>
+          <item>
+            <div slot="name" class="required">配偶身份证号</div>
+            <input
+              slot="content"
+              v-model="baseInfo.id_card_no_sp"
+              readonly
+              placeholder="上传身份证自动填充"
+            >
+          </item>
+          <item>
+            <div slot="name" class="required">身份证有效期从</div>
+            <input
+              slot="content"
+              v-model="baseInfo.id_card_date_from_sp"
+              readonly
+              placeholder="上传身份证自动填充"
+            >
+          </item>
+          <item>
+            <div slot="name" class="required">身份证有效期到</div>
+            <input
+              slot="content"
+              v-model="baseInfo.id_card_date_to_sp"
+              readonly
+              placeholder="上传身份证自动填充"
+            >
+          </item>
+          <item>
+            <div slot="name" class="required">手机号码</div>
+            <input slot="content" v-model="baseInfo.spouse_phone" placeholder="请输入手机号码" >
+          </item>
+          <item>
+            <div slot="name" class="required">工作单位</div>
+            <input slot="content" v-model="baseInfo.working_place_sp" placeholder="请输入工作单位" >
+          </item>
+          <item>
+            <div slot="name" class="required">联系地址</div>
+            <input slot="content" v-model="baseInfo.address_sp" placeholder="请输入联系地址" >
+          </item>
+        </list-item>
+      </div>
+    </h-content>
+    <bottom-tab class="footer-button">
+      <tab-button class="save" @click.native="verified">下一步</tab-button>
+    </bottom-tab>
+  </h-view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      list: {},
+      isAddNewType: false,
+      hasSP: false,
+      isPaople: false,
+      isLesons: false,
+      isMatter: false,
+      isApproved: false,
+      isSave: false,
+      isAGENT: this.$route.params.isAGENT,
+      isMultiRole: this.$route.params.isMultiRole,
+      isSelected: false,
+      from: false,
+      multiBpType: {
+        bp_type_n: '',
+        bp_type: '',
+      },
+      cityList: [],
+      provinceList: [],
+      upload_list: [], // 上传图片列表
+      dowload_list: [], // 下载图片列表
+      typeList: [],
+      backList: [],
+      bankList: [],
+      maritalList: [],
+      districtList: [],
+      img_url: {},
+      baseInfo: {
+        bp_type_n: '',
+        academic_background_n: '',
+        marital_status_n: '',
+        bp_type: '',
+        bp_class: this.$route.params.bp_class,
+        bp_name: '',
+        province_name: '',
+        province_id: '',
+        city_name: '',
+        city_id: '',
+        id_card_no: null,
+        id_card_date_from: '', // 身份证有效期从
+        id_card_date_to: '', // 身份证有效期到
+        cell_phone: window.localStorage.getItem('user_phone'),
+        living_address: '',
+        address_on_resident_booklit: '',
+        marital_status: '',
+        academic_background: '',
+        bp_name_sp: '',
+        id_card_no_sp: '', // 配偶身份证号
+        id_card_date_from_sp: '', // 配偶身份证有效期从
+        id_card_date_to_sp: '', // 配偶身份证有效期到
+        district_id: '',
+        district_name: '',
+        spouse_phone: '',
+        working_place_sp: '',
+        address_sp: '',
+        user_phone: window.localStorage.user_phone,
+      },
+      idCardFront: '', // 身份证正面图片
+      idCardBack: '', // 身份证反面图片
+      idCardFrontSp: '', // 配偶身份证正面图片
+      idCardBackSp: '', // 配偶身份证反面图片
+      idCardFrontUrlFlag: false, // 身份证正面图片查看标识，为false则用查询出来的，为true则用拍照出来的
+      idCardBackUrlFlag: false, // 身份证反面图片，为false则用查询出来的，为true则用拍照出来的
+      idCardFrontSpUrlFlag: false, // 配偶身份证正面图片，为false则用查询出来的，为true则用拍照出来的
+      idCardBackSpUrlFlag: false, // 配偶身份证反面图片，为false则用查询出来的，为true则用拍照出来的
+      bankImg: '', // 银行卡图片
+      cddItemList: [], // 资料清单列表
+      idCardFrontCheck_id: '', // 身份证正面check_id
+      idCardBackCheck_id: '', // 身份证反面check_id
+      idCardFrontSpCheck_id: '', // 配偶身份证正面check_id
+      idCardBackSpCheck_id: '', // 配偶身份证反面check_id
+      idCardFrontAttachmentId: '', // 身份证正面AttachmentId
+      idCardBackAttachmentId: '', // 身份证反面AttachmentId
+      idCardFrontSpAttachmentId: '', // 配偶身份证正面AttachmentId
+      idCardBackSpAttachmentId: '', // 配偶身份证反面AttachmentId
+      // idCardImgList: [], // 存身份证图片列表
+      idCardFrontEditFlag: false, // 身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
+      idCardBackEditFlag: false, // 身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
+      idCardFrontSpEditFlag: false, // 配偶身份证正面修改标识，为true则标识已修改，后续需要重新上传此照片
+      idCardBackSpEditFlag: false, // 配偶身份证反面修改标识，为true则标识已修改，后续需要重新上传此照片
+      isClear: false,
+    }
+  },
+  watch: {
+    'baseInfo.bp_type_n' (newVal, oldVal) {
+      let vm = this
+      if (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA') {
+        vm.isPaople = true
+        vm.isMatter = false
+        vm.isLesons = false
+      } else if (
+        vm.baseInfo.bp_type === 'AGENT' ||
+        vm.baseInfo.bp_type === 'FACTORY'
+      ) {
+        vm.isPaople = false
+        vm.isMatter = false
+        vm.isLesons = true
+      } else if (vm.baseInfo.bp_type === 'OFFICE') {
+        vm.isMatter = true
+        vm.isPaople = false
+        vm.isLesons = false
+      }
+    },
+    'baseInfo.marital_status_n': function (newVal, oldVal) {
+      if (newVal === '已婚') {
+        this.hasSP = true
+      } else {
+        this.hasSP = false
+        this.baseInfo.bp_name_sp = ''
+        this.baseInfo.spouse_phone = ''
+        this.baseInfo.working_place_sp = ''
+        this.baseInfo.address_sp = ''
+      }
+    },
+  },
+  created () {
+    this.getBpType()
+    this.getEducationBackground()
+    this.getMarital()
+    this.getProvince()
+    if (this.$route.params.status === 'APPROVED') {
+      this.isApproved = true
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    // 绑定查询入口
+    next(vm => {
+      if (from.fullPath === '/tab/my-info') {
+        vm.from = true
+        vm.basicInfoQuery()
+        vm.loadItemList() // 附件查询
+      } else if (from.name === 'UserBind') {
+        window.location.reload()
+      }
+    })
+  },
+  methods: {
+    deleteBP () {
+      this.multiBpType.bp_type_n = ''
+      this.multiBpType.bp_type = ''
+      this.isAddNewType = false
+    },
+    addNewRole () {
+      let vm = this
+      let url = process.env.basePath + 'bp_type_save'
+      let param = {
+        master: {
+          bp_id: window.localStorage.getItem('bp_id'),
+          bp_type: vm.multiBpType.bp_type,
+        },
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          hlsPopup.showLongCenter('新增成功')
+          vm.isAddNewType = false
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    basicInfoQuery () {
+      let vm = this
+      let url = process.env.basePath + 'bp_np_info_query'
+      let param = {
+        bp_id: window.localStorage.getItem('bp_id'),
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          Object.assign(vm.baseInfo, res.info)
+          vm.from = true
+          vm.addRows(vm.baseInfo.address_on_resident_booklit)
+          vm.addRowsLive(vm.baseInfo.living_address)
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    load_picture (check_id, index, cdd_item) {
+      let vm = this
+      let url =
+        process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询
+      let param = {
+        check_id: check_id,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          res.lists.forEach(item => {
+            item['url'] =
+              process.env.filePath +
+              'attachment_id=' +
+              item.attachment_id +
+              '&access_token=' +
+              window.localStorage.access_token
+          })
+          switch (cdd_item) {
+            case 'NP_ID_CARD_F': // 承租人身份证正面
+              if (!vm.idCardFrontUrlFlag) {
+                vm.idCardFront = res.lists[0].url
+              }
+              vm.idCardFrontAttachmentId = res.lists[0].attachment_id
+              break
+            case 'NP_ID_CARD_B': // 承租人身份证背面
+              if (!vm.idCardBackUrlFlag) {
+                vm.idCardBack = res.lists[0].url
+              }
+              vm.idCardBackAttachmentId = res.lists[0].attachment_id
+              break
+            case 'MATE_ID_CARD_F': // 配偶身份证正面
+              if (!vm.idCardFrontSpUrlFlag) {
+                vm.idCardFrontSp = res.lists[0].url
+              }
+              vm.idCardFrontSpAttachmentId = res.lists[0].attachment_id
+              break
+            case 'MATE_ID_CARD_B': // 配偶身份证背面
+              if (!vm.idCardBackSpUrlFlag) {
+                vm.idCardBackSp = res.lists[0].url
+              }
+              vm.idCardBackSpAttachmentId = res.lists[0].attachment_id
+              break
+            default:
+              vm.dowload_list.push(res.lists)
+          }
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    async verified () {
+      // this.dowload_list = [] // 保存之前将图片下载列表清空，防止出现重复的图片
+      // this.upload_list = [] // 保存之前将待上传列表清空，防止出现重复的图片
+      // let res = await this.saveWord()
+      // if (res) {
+      //   // 查询资料清单
+      //   this.loadItemList()
+      // }
+      this.saveWord()
+    },
+    loadItemList () {
+      let vm = this
+      let bpId = window.localStorage.getItem('bp_id')
+      let url = process.env.basePath + 'prj_cdd_check_list'
+      let param = {
+        master: {
+          document_id: bpId,
+          document_table: 'HLS_BP_MASTER',
+          tab_group: 'HLS_NP',
+        },
+      }
+      // vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        // vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.cddItemList = []
+          var listTemp = [...res.lists]
+          listTemp.forEach(item => {
+            switch (item.cdd_item) {
+              case 'NP_ID_CARD_F': // 承租人身份证正面
+                vm.idCardFrontCheck_id = item.check_id
+                break
+              case 'NP_ID_CARD_B': // 承租人身份证背面
+                vm.idCardBackCheck_id = item.check_id
+                break
+              case 'MATE_ID_CARD_F': // 配偶身份证正面
+                vm.idCardFrontSpCheck_id = item.check_id
+                break
+              case 'MATE_ID_CARD_B': // 配偶身份证背面
+                vm.idCardBackSpCheck_id = item.check_id
+                break
+              case 'BANK_CARD':
+                break
+              default:
+                vm.cddItemList.push(item)
+            }
+          })
+          // 查询图片
+          listTemp.forEach((item, index) => {
+            vm.load_picture(item.check_id, index, item.cdd_item)
+          })
+          if (vm.idCardFrontEditFlag) {
+            vm.idCardFrontUrlFlag = true
+            vm.delete_pic_to_ocr(vm.idCardFrontAttachmentId)// 先删除之前识别的图片
+            // 身份证正面图片已修改，重新上传
+            var list = []
+            let obj = {
+              pkvalue: vm.idCardFrontCheck_id,
+              source_type: 'PRJ_CDD_ITEM_CHECK',
+              picture: '',
+              check_id: vm.idCardFrontCheck_id,
+              filePath: vm.idCardFront,
+              attachment_id: '',
+              user_id: 1,
+              fileName: '自然人身份证正面',
+            }
+            list.push(obj)
+            vm.save_picture(list)
+            vm.idCardFrontEditFlag = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
+          }
+          if (vm.idCardBackEditFlag) {
+            vm.idCardBackUrlFlag = true
+            vm.delete_pic_to_ocr(vm.idCardBackAttachmentId)// 先删除之前识别的图片
+            // 身份证反面图片已修改，重新上传
+            var list = []
+            let obj = {
+              pkvalue: vm.idCardBackCheck_id,
+              source_type: 'PRJ_CDD_ITEM_CHECK',
+              picture: '',
+              check_id: vm.idCardBackCheck_id,
+              filePath: vm.idCardBack,
+              attachment_id: '',
+              user_id: 1,
+              fileName: '自然人身份证背面',
+            }
+            list.push(obj)
+            vm.save_picture(list)
+            vm.idCardBackEditFlag = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
+          }
+          if (vm.idCardFrontSpEditFlag) {
+            vm.idCardFrontSpUrlFlag = true
+            vm.delete_pic_to_ocr(vm.idCardFrontSpAttachmentId)// 先删除之前识别的图片
+            // 配偶身份证正面图片已修改，重新上传
+            var list = []
+            let obj = {
+              pkvalue: vm.idCardFrontSpCheck_id,
+              source_type: 'PRJ_CDD_ITEM_CHECK',
+              picture: '',
+              check_id: vm.idCardFrontSpCheck_id,
+              filePath: vm.idCardFrontSp,
+              attachment_id: '',
+              user_id: 1,
+              fileName: '配偶身份证正面',
+            }
+            list.push(obj)
+            vm.save_picture(list)
+            vm.idCardFrontSpEditFlag = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
+          }
+          if (vm.idCardBackSpEditFlag) {
+            vm.idCardBackSpUrlFlag = true
+            vm.delete_pic_to_ocr(vm.idCardBackSpAttachmentId)// 先删除之前识别的图片
+            // 配偶身份证背面图片已修改，重新上传
+            var list = []
+            let obj = {
+              pkvalue: vm.idCardBackSpCheck_id,
+              source_type: 'PRJ_CDD_ITEM_CHECK',
+              picture: '',
+              check_id: vm.idCardBackSpCheck_id,
+              filePath: vm.idCardBackSp,
+              attachment_id: '',
+              user_id: 1,
+              fileName: '配偶身份证背面',
+            }
+            list.push(obj)
+            vm.save_picture(list)
+            vm.idCardBackSpEditFlag = false // 置为false,防止再次保存重复上传，只有重新识别才会重新上传
+          }
+        }
+      })
+    },
+    async saveProtocol () {
+      let vm = this
+      let url = process.env.basePath + 'bp_np_bind_save'
+      let param = {
+        master: this.baseInfo,
+      }
+      vm.hlsPopup.showLoading('保存中!')
+      let res = await vm.hlsHttp.post(url, param)
+      if (res.result === 'S') {
+        hlsPopup.hideLoading()
+        // vm.hlsPopup.showSuccess('保存成功,请去维护附件信息')
+        vm.isSave = true
+        window.localStorage.setItem('user_id', res.bp_id)
+        window.localStorage.setItem('bp_id', res.bp_id)
+        window.localStorage.setItem('bp_name', vm.baseInfo.bp_name)
+        window.localStorage.setItem('bp_type', vm.baseInfo.bp_type)
+        window.localStorage.setItem('from', vm.from)
+        vm.$router.push({
+          name: 'NPInvoiceInfo',
+        })
+        return res.bp_id
+      } else {
+        vm.hlsPopup.showLongCenter(res.message)
+      }
+    },
+    async saveWord () {
+      let vm = this
+      if (!vm.baseInfo.bp_type) {
+        vm.hlsPopup.showLongCenter('客户类型不能为空！')
+      } else if (vm.isSelected && vm.isPaople && !vm.baseInfo.agent_username) {
+        vm.hlsPopup.showLongCenter('业务经办员工代码不能为空！')
+      } else if (
+        vm.isSelected &&
+        !vm.isPaople &&
+        !vm.baseInfo.business_license_num
+      ) {
+        vm.hlsPopup.showLongCenter('营业执照号不能为空！')
+      } else if (!vm.baseInfo.bp_name) {
+        vm.hlsPopup.showLongCenter('客户姓名不能为空！')
+      } else if (!vm.baseInfo.id_card_no) {
+        vm.hlsPopup.showLongCenter('身份证号不能为空！')
+      } else if (!vm.baseInfo.id_card_date_from) {
+        vm.hlsPopup.showLongCenter('身份证有效期从不能为空！')
+      } else if (!vm.baseInfo.id_card_date_to) {
+        vm.hlsPopup.showLongCenter('身份证有效期到不能为空！')
+      } else if (!vm.baseInfo.cell_phone) {
+        vm.hlsPopup.showLongCenter('手机号不能为空！')
+      } else if (!vm.baseInfo.living_address) {
+        vm.hlsPopup.showLongCenter('联系地址不能为空！')
+      } else if (!vm.baseInfo.address_on_resident_booklit) {
+        vm.hlsPopup.showLongCenter('户籍地址不能为空！')
+      } else if (!vm.baseInfo.academic_background) {
+        vm.hlsPopup.showLongCenter('学历不能为空！')
+      } else if (!vm.baseInfo.marital_status && (vm.baseInfo.bp_type === 'TENANT' || vm.baseInfo.bp_type === 'GUTA')) {
+        vm.hlsPopup.showLongCenter('婚姻状况不能为空！')
+      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.bp_name_sp) {
+        vm.hlsPopup.showLongCenter('配偶姓名不能为空！')
+      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.id_card_no_sp) {
+        vm.hlsPopup.showLongCenter('配偶身份证号不能为空！')
+      } else if (
+        vm.marital_status_n === '已婚' &&
+        !vm.baseInfo.id_card_date_from_sp
+      ) {
+        vm.hlsPopup.showLongCenter('配偶身份证有效期从不能为空！')
+      } else if (
+        vm.marital_status_n === '已婚' &&
+        !vm.baseInfo.id_card_date_to_sp
+      ) {
+        vm.hlsPopup.showLongCenter('配偶身份证有效期到不能为空！')
+      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.spouse_phone) {
+        vm.hlsPopup.showLongCenter('配偶手机号不能为空！')
+      } else if (
+        vm.marital_status_n === '已婚' &&
+        !vm.baseInfo.working_place_sp
+      ) {
+        vm.hlsPopup.showLongCenter('配偶工作单位不能为空！')
+      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.address_sp) {
+        vm.hlsPopup.showLongCenter('配偶联系地址不能为空！')
+      } else if (!vm.hlsUtil.phoneNumber(vm.baseInfo.cell_phone)) {
+        vm.hlsPopup.showLongCenter('手机号码有误!')
+      } else {
+        let bpId = await vm.saveProtocol()
+        return true
+      }
+    },
+    // 图片上传入口
+    imgUploadShow (description, check_id) {
+      let vm = this
+      // vm.upload_list = []
+      hlsPopup.showActionSheet({
+        titleText: '请选择照片',
+        buttonArray: ['拍照', '从相册取'],
+        callback: index => {
+          if (index === 0) {
+            vm.imgUploadOpenCamera(description, check_id)
+          } else {
+            vm.imgUploadTakePicture(description, check_id)
+          }
+        },
+      })
+    },
+    imgUploadOpenCamera (description, check_id) {
+      let vm = this
+      let obj = {
+        pkvalue: check_id,
+        source_type: 'PRJ_CDD_ITEM_CHECK',
+        picture: '',
+        check_id: check_id,
+        filePath: '',
+        attachment_id: '',
+        user_id: 1,
+        fileName: description + '_' + new Date().getTime(),
+      }
+      let cameraoptions = {
+        quality: 100,
+      }
+      let success = function (imgdata) {
+        obj.picture = imgdata
+        obj.filePath = imgdata
+        let list = []
+        list.push(obj)
+        // vm.upload_list.push(obj)
+        // 拍完一张立马执行保存图片逻辑
+        vm.save_picture(list)
+      }
+      let error = function () {
+        hlsPopup.showLongCenter('请拍照')
+      }
+      hlsUtil.openCamera(cameraoptions, success, error)
+    },
+    imgUploadTakePicture (description, check_id) {
+      let vm = this
+      let cameraoptions = {
+        quality: 100,
+      }
+      let success = function (imgUrl) {
+        var list = []
+        for (let i = 0; i < imgUrl.length; i++) {
+          let obj = {
+            pkvalue: check_id,
+            source_type: 'PRJ_CDD_ITEM_CHECK',
+            picture: '',
+            check_id: check_id,
+            filePath: '',
+            attachment_id: '',
+            user_id: 1,
+            fileName: description + '_' + new Date().getTime(),
+          }
+          obj.picture = imgUrl[i]
+          obj.filePath = imgUrl[i]
+          list.push(obj)
+        }
+        // 拍完一张立马执行保存图片逻辑
+        vm.save_picture(list)
+      }
+      let error = function () {}
+      vm.hlsUtil.takePicture(cameraoptions, success, error)
+    },
+    // 图片保存
+    save_picture (list) {
+      let vm = this
+      if (list.length) {
+        // hlsPopup.showLoading('图片上传请稍候')
+        var alreadyUploadNum = 0
+        var attLength = 0
+        var recordUploadInterval = setInterval(function () {
+          if (alreadyUploadNum === attLength) {
+            clearInterval(recordUploadInterval)
+            /* hlsPopup.hideLoading()
+            hlsPopup.showLongCenter('图片上传成功') */
+          }
+        }, 500)
+        for (var i = 0; i < list.length; i++) {
+          let uploadSuccess = function (res) {
+            if (res.result === 'S') {
+              alreadyUploadNum++
+              for (var j = 0; j < list.length; j++) {
+                if (list[j].filePath === res.response.filePath) {
+                  list[j].attachment_id = res.response.attachment_id
+                  vm.upload_list.push(list[j])
+                  break
+                }
+              }
+            } else {
+              hlsPopup.hideLoading()
+            }
+          }
+          if (!list[i].attachment_id) {
+            attLength++
+            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
+          }
+        }
+      } else {
+        hlsPopup.hideLoading()
+      }
+    },
+    // 移除图片
+    remove_pic (attachment_id, index) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          hlsPopup.showLongCenter('删除成功!')
+          vm.remove_upload_list(attachment_id, index)
+        } else if (res.result === 'E') {
+          hlsPopup.showShortCenter(res.message)
+        }
+      })
+    },
+    remove_upload_list (attachment_id, index) {
+      let vm = this
+      vm.upload_list.remove(index)
+      vm.upload_list.sort()
+    },
+    // 删除图片
+    delete_pic (attachment_id) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          hlsPopup.showLongCenter('删除成功!')
+          vm.remove_dowload_list(attachment_id)
+        } else if (res.result === 'E') {
+          hlsPopup.showShortCenter(res.message)
+        }
+      })
+    },
+    // 身份证重新识别后，先删除之前的照片
+    delete_pic_to_ocr (attachment_id) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+
+        } else if (res.result === 'E') {
+
+        }
+      })
+    },
+    remove_dowload_list (attachment_id) {
+      let vm = this
+      for (let i = 0; i < vm.dowload_list.length; i++) {
+        let list = vm.dowload_list[i]
+        for (let j = 0; j < list.length; j++) {
+          let li = list[j]
+          if (parseFloat(li.attachment_id) === parseFloat(attachment_id)) {
+            list.remove(j)
+            break
+          }
+        }
+      }
+      vm.dowload_list.sort()
+    },
+    ocrShow (ocrType, type) {
+      let vm = this
+      hlsPopup.showActionSheet({
+        titleText: '请选择照片',
+        buttonArray: ['拍照', '从相册取'],
+        callback: index => {
+          if (index === 0) {
+            vm.openCamera(ocrType, type)
+          } else {
+            vm.takePicture(ocrType, type)
+          }
+        },
+      })
+    },
+    openCamera (ocrType, type) {
+      let vm = this
+      let cameraoptions = {
+        quality: 60,
+        width: 1843,
+        height: 1382,
+      }
+      let success = function (imgdata) {
+        if (!imgdata) {
+          hlsPopup.showLongCenter('请拍照')
+        } else {
+          if (ocrType === 'idCard') {
+            type === 'front'
+              ? ((vm.idCardFront = imgdata),
+              vm.idCardIdentify(imgdata, 'idCard'),
+              (vm.idCardFrontEditFlag = true))
+              : ((vm.idCardBack = imgdata),
+              vm.idCardBackIdentify(imgdata, 'idCard'),
+              (vm.idCardBackEditFlag = true))
+          } else if (ocrType === 'idCardSp') {
+            // 配偶身份证识别
+            type === 'front'
+              ? ((vm.idCardFrontSp = imgdata),
+              vm.idCardIdentify(imgdata, 'idCardSp'),
+              (vm.idCardFrontSpEditFlag = true))
+              : ((vm.idCardBackSp = imgdata),
+              vm.idCardBackIdentify(imgdata, 'idCardSp'),
+              (vm.idCardBackSpEditFlag = true))
+          } else if (ocrType === 'bankCard') {
+            vm.bankImg = imgdata
+            vm.bankCardIdentify(imgdata)
+          }
+        }
+      }
+      let error = function () {
+        hlsPopup.showLongCenter('请拍照')
+      }
+      hlsUtil.openCamera(cameraoptions, success, error)
+    },
+    takePicture (ocrType, type) {
+      let vm = this
+      var cameraoptions = {
+        quality: 70,
+        width: 1843,
+        height: 1382,
+        maxCount: 1,
+      }
+      let success = function (imgUrl) {
+        if (imgUrl.length === 0) {
+          hlsPopup.showLongCenter('请选择一张图片')
+        } else {
+          if (ocrType === 'idCard') {
+            type === 'front'
+              ? ((vm.idCardFront = imgUrl[0]),
+              vm.idCardIdentify(imgUrl[0], 'idCard'),
+              (vm.idCardFrontEditFlag = true))
+              : ((vm.idCardBack = imgUrl[0]),
+              vm.idCardBackIdentify(imgUrl[0], 'idCard'),
+              (vm.idCardBackEditFlag = true))
+          } else if (ocrType === 'idCardSp') {
+            // 配偶身份证识别
+            type === 'front'
+              ? ((vm.idCardFrontSp = imgUrl[0]),
+              vm.idCardIdentify(imgUrl[0], 'idCardSp'),
+              (vm.idCardFrontSpEditFlag = true))
+              : ((vm.idCardBackSp = imgUrl[0]),
+              vm.idCardBackIdentify(imgUrl[0], 'idCardSp'),
+              (vm.idCardBackSpEditFlag = true))
+          } else if (ocrType === 'bankCard') {
+            vm.bankImg = imgUrl[0]
+            vm.bankCardIdentify(imgUrl[0])
+          }
+        }
+      }
+      let error = function () {
+        hlsPopup.showLongCenter(error)
+      }
+      vm.hlsUtil.takePicture(cameraoptions, success, error)
+    },
+    // 身份证识别
+    idCardIdentify (fileUrl, cardType) {
+      let vm = this
+      hlsPopup.showLoading('正在识别')
+      let url = process.env.ocrPath + '/baidu/ocr/idCard'
+      hlsUtil.baiduOcr(fileUrl, url, function (res) {
+        hlsPopup.hideLoading()
+        let result = res.result.words_result
+        if (cardType === 'idCard') {
+          vm.baseInfo.bp_name = result.姓名.words
+          vm.baseInfo.id_card_no = result.公民身份号码.words
+          vm.baseInfo.address_on_resident_booklit = result.住址.words
+          vm.baseInfo.living_address = vm.baseInfo.address_on_resident_booklit // 联系地址默认为户籍地址，支持修改
+        } else {
+          vm.baseInfo.bp_name_sp = result.姓名.words
+          vm.baseInfo.id_card_no_sp = result.公民身份号码.words
+          vm.baseInfo.address_sp = result.住址.words // 联系地址默认为户籍地址，支持修改
+        }
+      })
+    },
+    // 身份证背面识别
+    idCardBackIdentify (fileUrl, cardType) {
+      let vm = this
+      hlsPopup.showLoading('正在识别')
+      let url = process.env.ocrPath + '/baidu/ocr/idCardBack'
+      hlsUtil.baiduOcr(fileUrl, url, function (res) {
+        hlsPopup.hideLoading()
+        let result = res.result.words_result
+        if (cardType === 'idCard') {
+          vm.baseInfo.id_card_date_from = result.签发日期.words
+          vm.baseInfo.id_card_date_to = result.失效日期.words
+        } else {
+          vm.baseInfo.id_card_date_from_sp = result.签发日期.words
+          vm.baseInfo.id_card_date_to_sp = result.失效日期.words
+        }
+      })
+    },
+    // 银行卡识别
+    bankCardIdentify (fileUrl) {
+      let vm = this
+      hlsPopup.showLoading('正在识别')
+      let url = process.env.ocrPath + '/baidu/ocr/bankCard'
+      hlsUtil.baiduOcr(fileUrl, url, function (res) {
+        hlsPopup.hideLoading()
+        let result = res.result.result
+        vm.bank.bank_account_num = result.bank_card_number.replace(/\s*/g, '')
+        vm.bank.bank_full_name = result.bank_name
+        vm.bank.bank_card_type = result.bank_card_type
+      })
+    },
+    addRows (e) {
+      let addNum = parseInt(e.length / 16)
+      if (addNum === 0) {
+        this.$refs.myTestarea.rows = 1
+      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
+        this.$refs.myTestarea.rows = addNum + 1
+      }
+    },
+    addRowsLive (e) {
+      let addNum = parseInt(e.length / 16)
+      if (addNum === 0) {
+        this.$refs.myTestareaLive.rows = 1
+      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
+        this.$refs.myTestareaLive.rows = addNum + 1
+      }
+    },
+    selectIdType (e) {
+      let vm = this
+      let List
+      if (vm.baseInfo.bp_type === 'TENANT') {
+        List = vm.typeList.filter(i => {
+          return i.code === 'GUTA'
+        })
+      } else if (vm.baseInfo.bp_type === 'GUTA') {
+        List = vm.typeList.filter(i => {
+          return i.code === 'TENANT'
+        })
+      }
+      vm.hlsPopup.selectList({
+        list: List,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.multiBpType.bp_type = obj.bp_type
+          vm.multiBpType.bp_type_n = obj.bp_type_n
+          vm.isAddNewType = true
+          vm.isSelected = true
+        },
+      })
+    },
+    selectIdTypeOnly (e) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.typeList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.baseInfo.bp_type = obj.bp_type
+          vm.baseInfo.bp_type_n = obj.bp_type_n
+        },
+      })
+      vm.isSelected = true
+    },
+    selectBackType (e) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.backList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.baseInfo.academic_background = obj.bp_type
+          vm.baseInfo.academic_background_n = obj.bp_type_n
+        },
+      })
+    },
+    selectMarital (e) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.maritalList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.baseInfo.marital_status = obj.bp_type
+          vm.baseInfo.marital_status_n = obj.bp_type_n
+        },
+      })
+    },
+    selectProvince (e) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.provinceList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.baseInfo.province_id = obj.bp_type
+          vm.baseInfo.province_name = obj.bp_type_n
+          vm.getCity()
+        },
+      })
+    },
+    selectCity (e) {
+      let vm = this
+      if (vm.baseInfo.province_id === '') {
+        hlsPopup.showLongCenter('请先选择省份')
+      }
+      vm.hlsPopup.selectList({
+        list: vm.cityList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.baseInfo.city_id = obj.bp_type
+          vm.baseInfo.city_name = obj.bp_type_n
+          vm.getDistrict()
+        },
+      })
+    },
+    selectDistrict (e) {
+      let vm = this
+      if (vm.baseInfo.city_id === '' || vm.baseInfo.province_id === '') {
+        hlsPopup.showLongCenter('请先选择城市')
+      }
+      vm.hlsPopup.selectList({
+        list: vm.districtList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.baseInfo.district_id = obj.bp_type
+          vm.baseInfo.district_name = obj.bp_type_n
+        },
+      })
+    },
+    getProvince () {
+      let vm = this
+      let url = process.env.basePath + 'fnd_province_query'
+      let param = {}
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.provinceList = res.lists.map(item => {
+            return {
+              code: item.province_id,
+              code_name: item.province_name,
+            }
+          })
+        }
+      })
+    },
+    getCity () {
+      let vm = this
+      let url = process.env.basePath + 'fnd_city_query'
+      let param = {
+        province_id: vm.baseInfo.province_id,
+      }
+      // vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        // vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.cityList = res.lists.map(item => {
+            return {
+              code: item.city_id,
+              code_name: item.city_name,
+            }
+          })
+        }
+      })
+    },
+    getDistrict () {
+      let vm = this
+      let url = process.env.basePath + 'fnd_district_query'
+      let param = {
+        city_id: vm.baseInfo.city_id,
+      }
+      // vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        // vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.districtList = res.lists.map(item => {
+            return {
+              code: item.district_id,
+              code_name: item.district_name,
+            }
+          })
+        }
+      })
+    },
+    getMarital () {
+      let vm = this
+      let url = process.env.basePath + 'bp_marital_status_query'
+      let param = {}
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.maritalList = res.lists.map(item => {
+            return {
+              code: item.marital_status,
+              code_name: item.marital_status_n,
+            }
+          })
+        }
+      })
+    },
+    getEducationBackground () {
+      let vm = this
+      let url = process.env.basePath + 'bp_academic_bg_query'
+      let param = {}
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.backList = res.lists.map(item => {
+            return {
+              code: item.academic_bg,
+              code_name: item.academic_bg_n,
+            }
+          })
+        }
+      })
+    },
+    fileSuccess (fileList, result) {
+      this.fileList = fileList
+      this.fileList.forEach((itemFile, index) => {
+        if (
+          result.response &&
+          itemFile.file &&
+          !itemFile.attachment_id &&
+          result.response.fileName === itemFile.file.name
+        ) {
+          itemFile.attachment_id = result.response.attachment_id
+        }
+      })
+    },
+
+    getBpType () {
+      let vm = this
+      let url = process.env.basePath + 'bp_type_select'
+      let param = {}
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.typeList = res.lists.map(item => {
+            return {
+              code: item.bp_type,
+              code_name: item.bp_type_n,
+            }
+          })
+        }
+      })
+    },
+    // 查看大图
+    showBigPicture (pic) {
+      let vm = this
+      vm.hlsPopup.showBigPicture({
+        imgUrl: pic,
+        width: '100% !important',
+      })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+#np-base-info{
+  font-family: PingFangSC-Regular;
+  input::placeholder {
+    color: #b4b4b5;
+  }
+  textarea::placeholder {
+    color: #b4b4b5;
+  }
+  textarea {
+    text-align: right;
+    color: #666;
+  }
+  .type-save{
+    color: #fff;
+    width:80px;
+    height: 25px;
+    font-size:10px;
+    border-radius: 5px;
+    margin:5px 15px 5px 0px;
+    float: right;
+    background-color: @headerColor;
+  }
+  .typeBP {
+    span {
+      display: inline-block;
+      padding: 1px 5px;
+      border-radius: 5px;
+      text-align: center;
+      line-height: 20px;
+      background-color: rgba(220, 220, 221, 0.26);
+      color: #666;
+      margin-right: 5px;
+      margin-top: 3px;
+    }
+    img {
+      width: 10px;
+      height: 10px;
+      margin-left: 1px;
+    }
+  }
+  .tax {
+    width: 351px;
+    height: 78px;
+    background: #fff;
+    margin: 0 auto;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    .left-img {
+      width: 24px;
+      height: 28px;
+      flex: 2.5;
+      padding-left: 24px;
+    }
+    div {
+      flex: 25;
+      padding-left: 24px;
+      span {
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #383f45;
+        letter-spacing: 0;
+        line-height: 22px;
+      }
+      p {
+        font-family: PingFangSC-Regular;
+        font-size: 12px;
+        color: rgba(56, 63, 69, 0.5);
+        letter-spacing: 0;
+        line-height: 22px;
+      }
+    }
+    .right-img {
+      width: 10px;
+      height: 16px;
+      flex: 1;
+      padding-right: 21px;
+    }
+  }
+  .content {
+    height: 76%;
+    .userInfo {
+      height: 45px;
+      line-height: 45px;
+      color: @headerColor;
+      margin-top: -10px;
+      font-size: 15px;
+      margin-left: 16px;
+      position: relative;
+    }
+    .userInfo::before {
+      content: "";
+      display: block;
+      width: 4px;
+      height: 20px;
+      background-color: @headerColor;
+      position: absolute;
+      left: -15px;
+      top: 12px;
+    }
+    .upload-id-card {
+      height: 176px;
+      background-color: #fff;
+      span {
+        display: block;
+        color: #656464;
+        margin-left: 16px;
+        padding-top: 16px;
+        font-size: 13px;
+      }
+      .upload-box {
+        display: flex;
+        justify-content: center;
+        margin-top: 15px;
+        div {
+          width: 172px;
+          height: 120px;
+          border: 1px dashed #dcdcdd;
+          text-align: center;
+          font-size: 14px;
+          color: #b4b4b5;
+          .front,
+          .back {
+            width: 172px;
+            height: 120px;
+          }
+        }
+        div:nth-of-type(2) {
+          margin-left: 7px;
+        }
+        img {
+          margin-top: 32px;
+          width: 58px;
+          height: 45px;
+        }
+        p {
+          margin-top: 12px;
+          font-size: 13px;
+        }
+      }
+    }
+    .second-part {
+      margin-top: 9px;
+      .auto {
+        color: #b4b4b5;
+      }
+    }
+    .card {
+      padding-bottom: 8px;
+      height: auto;
+      background-color: #fff;
+      margin-bottom: 10px;
+
+      display: flex;
+      flex-direction: column;
+      span {
+        color: #656464;
+        font-size: 13px;
+        line-height: 18px;
+        padding-top: 8px;
+        display: block;
+        margin-left: 16px;
+      }
+      .img-content {
+        /*display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+        align-items: center;*/
+      }
+      .plus {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .card-upload {
+        position: relative;
+        width: 80px;
+        height: 80px;
+        border: 1px dashed #dcdcdd;
+        /* display: flex;
+         justify-content: center;
+         align-items: center;*/
+        margin-top: 12px;
+        margin-left: 16px;
+        float: left;
+        .close {
+          /* position: relative;
+          color: #F96F68;
+          margin-top: -100%;
+          margin-left: -10%;*/
+          position: absolute;
+          color: #f96f68;
+          top: -6px;
+          right: -6px;
+          img {
+            width: 14px;
+            height: 14px;
+          }
+        }
+        img {
+          /*width: 88px;
+          height: 88px;*/
+          width: 100%;
+          height: 100%;
+        }
+        .upload-btn {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+  .put {
+    width: 175px;
+    height: 45px;
+    color: #fdb62f;
+    border-radius: 4px;
+    border: 1px solid #fdb62f;
+    background-color: #fafafa;
+  }
+  .put-approved {
+    width: 90%;
+    height: 45px;
+    color: #fff;
+    border-radius: 4px;
+    background-color: @headerColor;
+  }
+  .save {
+    color: #fff;
+    border-radius: 4px;
+    background-color: @headerColor;
+  }
+  .front,
+  .photo,
+  .backphoto,
+  .back {
+    display: none;
+  }
+  .modal-content {
+    width: 100%;
+    height: 75%;
+    position: absolute;
+    top: 25%;
+    background-color: #fff;
+    overflow-y: scroll;
+    .modal-content-add-top {
+      width: 320px;
+      height: 34px;
+      line-height: 34px;
+      padding-top: 10px;
+      background-color: #fff;
+      padding-bottom: 40px;
+      position: fixed;
+      left: 28px;
+      span {
+        font-family: PingFangSC-Semibold;
+        font-size: 15px;
+        color: @headerColor;
+        letter-spacing: 0.47px;
+      }
+      img {
+        width: 34px;
+        height: 34px;
+        float: right;
+      }
+    }
+    .addBack {
+      display: block;
+      width: 320px;
+      margin: 0 auto;
+      margin-top: 50px;
+      border-radius: 6px;
+      margin-bottom: 17px;
+    }
+
+    .card-Info {
+      margin-bottom: 220px;
+    }
+  }
+  .add-card {
+    width: 358px;
+    height: 40px;
+    background: @headerColor;
+    border-radius: 4px;
+    color: #fff;
+  }
+}
+.modal {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+.hls-notify-wrap {
+  height: 50px;
+  line-height: 34px !important;
+}
+</style>

src/pages/userBindNew/np/baseInfo.vue

-q12312

src/pages/userBindNew/np/invoice-info.vue

+<template>
+  <h-view id="np-invoice">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn" @click="$routeGo()">
+        <img src="@/assets/userBind/arrow.png" >
+        <span>开票信息</span>
+      </div>
+    </h-header>
+    <h-content>
+      <list-item :item-height="44">
+        <item :showArrow="true">
+          <div slot="name">纳税人类型</div>
+          <input
+            slot="content"
+            v-model="invoiceInfo.taxpayer_type_n"
+            type="text"
+            readonly
+            placeholder="请选择"
+            onfocus="this.blur()"
+            @click="selectTaxpayer"
+          >
+        </item>
+        <item :showArrow="true">
+          <div slot="name">发票类型</div>
+          <input
+            slot="content"
+            v-model="invoiceInfo.invoice_kind_n"
+            type="text"
+            readonly
+            placeholder="请选择"
+            onfocus="this.blur()"
+            @click="selectInvoiceType"
+          >
+        </item>
+        <item>
+          <div slot="name">发票抬头</div>
+          <input slot="content" v-model="invoiceInfo.invoice_title" type="text" placeholder="请输入发票抬头" >
+        </item>
+        <item>
+          <div slot="name">发票地址</div>
+          <textarea
+            slot="content"
+            ref="myTestarea"
+            v-model="invoiceInfo.invoice_adds"
+            cols="22" rows="1" type="text" placeholder="请输入发票地址"
+            @input="addRows(invoiceInfo.invoice_adds)" />
+        </item>
+        <item>
+          <div slot="name">开户电话</div>
+          <input slot="content" v-model="invoiceInfo.invoice_tel" type="text" placeholder="请输入开户电话" >
+        </item>
+        <item>
+          <div slot="name">发票开户行</div>
+          <textarea
+            slot="content"
+            ref="myTestareaLive"
+            v-model="invoiceInfo.open_bank"
+            cols="22"
+            rows="1"
+            type="text"
+            placeholder="请输入发票开户行及账号"
+            @input="addRowsLive(invoiceInfo.open_bank)"
+          />
+        </item>
+        <item>
+          <div slot="name">开户行账号</div>
+          <input
+            slot="content" v-model="invoiceInfo.open_account" type="number" pattern="\d*"
+            placeholder="请输入开户行账号" >
+        </item>
+      </list-item>
+    </h-content>
+    <bottom-tab class="footer-button">
+      <tab-button class="save" @click.native="save">下一步</tab-button>
+    </bottom-tab>
+  </h-view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      value: '',
+      invoicList: [],
+      taxpayerList: [],
+      invoiceInfo: {
+        bp_id: null,
+        bp_class: null,
+        taxpayer_type_n: '',
+        invoice_kind_n: '',
+        taxpayer_type: '',
+        invoice_kind: '',
+        invoice_title: '',
+        invoice_adds: '',
+        invoice_tel: '',
+        open_bank: '',
+        open_account: '',
+      },
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (from.name === 'NPBaseInfo' && window.localStorage.from) {
+        vm.getInvoice()
+      }
+    })
+  },
+  created () {
+    this.getInvoiceType()
+    this.getTaxpayer()
+    this.addRows(this.invoiceInfo.invoice_adds)
+    this.addRowsLive(this.invoiceInfo.open_bank)
+  },
+  methods: {
+    getInvoice () {
+      let vm = this
+      let url = process.env.basePath + 'bp_invoice_query'
+      let param = {
+        bp_id: window.localStorage.getItem('bp_id'),
+      }
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          Object.assign(vm.invoiceInfo, res.info)
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    save () {
+      let vm = this
+      let url = process.env.basePath + 'bp_invoice_save'
+      let name = window.localStorage.bp_type === 'TENANT' || window.localStorage.bp_type === 'GUTA' ? 'AccessoryInfo' : 'NPBankInfo'
+      vm.invoiceInfo.bp_id = window.localStorage.getItem('bp_id')
+      vm.invoiceInfo.bp_class = 'NP'
+      let param = {
+        master: vm.invoiceInfo,
+      }
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.$router.push({
+            name: name,
+          })
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    addRows (e) {
+      let addNum = parseInt(e.length / 16)
+      if (addNum === 0) {
+        this.$refs.myTestarea.rows = 1
+      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
+        this.$refs.myTestarea.rows = addNum + 1
+      }
+    },
+    addRowsLive (e) {
+      let addNum = parseInt(e.length / 16)
+      if (addNum === 0) {
+        this.$refs.myTestareaLive.rows = 1
+      } else if (addNum >= addNum - 1 && addNum < addNum + 1) {
+        this.$refs.myTestareaLive.rows = addNum + 1
+      }
+    },
+    getInvoiceType () {
+      let vm = this
+      let url = process.env.basePath + 'bp_invoice_kind_query'
+      let param = {}
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.invoicList = res.lists.map(item => {
+            return {
+              code: item.invoice_kind,
+              code_name: item.invoice_kind_n,
+            }
+          })
+        }
+      })
+    },
+    getTaxpayer () {
+      let vm = this
+      let url = process.env.basePath + 'bp_taxpayer_type_query'
+      let param = {}
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.taxpayerList = res.lists.map(item => {
+            return {
+              code: item.taxpayer_type,
+              code_name: item.taxpayer_type_n,
+            }
+          })
+        }
+      })
+    },
+    selectInvoiceType (e) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.invoicList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.invoiceInfo.invoice_kind = obj.bp_type
+          vm.invoiceInfo.invoice_kind_n = obj.bp_type_n
+        },
+      })
+    },
+    selectTaxpayer (e) {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.taxpayerList,
+        code: 'bp_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.invoiceInfo.taxpayer_type = obj.bp_type
+          vm.invoiceInfo.taxpayer_type_n = obj.bp_type_n
+        },
+      })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+input::placeholder{
+    color: #B4B4B5;
+}
+ textarea::placeholder {
+    color: #b4b4b5;
+  }
+  textarea {
+    text-align: right;
+    color:#666;
+  }
+  .save {
+    color: #fff;
+    border-radius: 4px;
+    background-color: @headerColor;
+  }
+</style>

src/pages/userBindNew/np/new.vue

+<template>
+  <h-view id="accessory">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn" @click="$routeGo()">
+        <img src="@/assets/userBind/arrow.png" >
+        <span>附件信息</span>
+      </div>
+    </h-header>
+    <h-content>
+      <div
+        class="userInfo"
+      >附件信息
+      </div>
+      <div
+        v-for="(list, index) in cddItemList"
+        :key="index"
+        class="card"
+      >
+        <span>{{ list.description }}</span>
+        <div class="img-content">
+          <div class="card-upload">
+            <img v-if="" :src="houseImg.picture" @click="showBigPicture(item.picture)" >
+            <img :src="carImg.picture" @click="showBigPicture(item.picture)" >
+          </div>
+          <div class="card-upload plus" @click="imgUploadShow(list.description,list.check_id,list.cdd_item)">
+            <img src="@/assets/userBind/camera.png" class="upload-btn" >
+          </div>
+          <div v-if="list.cdd_item==='HOUSE_CARD'">
+            <list-item :item-height="44" class="card-Info">
+              <item>
+                <div slot="name">房屋所有权人</div>
+                <input
+                  slot="content"
+                  v-model="hauseInfo.house_owner"
+                  readonly
+                  placeholder="识别房产证自动填充"
+                >
+              </item>
+              <item>
+                <div slot="name">共有情况</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">房屋坐落</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">登记时间</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">房屋性质</div>
+                <input slot="content" v-model="hauseInfo.house_property" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">规划用途</div>
+                <input slot="content" v-model="hauseInfo.plan_purpose" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">总层数</div>
+                <input slot="content" v-model="hauseInfo.house_layers" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">建筑面积</div>
+                <input slot="content" v-model="hauseInfo.built_area" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">套内建筑面积</div>
+                <input slot="content" v-model="hauseInfo.built_in_area" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">其他</div>
+                <input slot="content" v-model="hauseInfo.others" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">地号</div>
+                <input slot="content" v-model="hauseInfo.land_number" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item :proportion="[1,1]">
+                <div slot="name">土地使用权取得方式</div>
+                <input slot="content" v-model="hauseInfo.land_get_method" readonly placeholder="识别房产证自动填充" >
+              </item>
+              <item>
+                <div slot="name">土地使用年限</div>
+                <input slot="content" v-model="hauseInfo.land_use_limit" readonly placeholder="识别房产证自动填充" >
+              </item>
+            </list-item>
+          </div>
+          <div v-if="list.cdd_item==='CAR_CARD'">
+            <list-item :item-height="44" class="card-Info">
+              <item>
+                <div slot="name">车辆识别代号</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">住址</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">品牌型号</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">发证日期"</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">车辆类型</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">所有人</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">使用性质</div>
+                <input slot="content" v-model="hauseInfo.public_situation" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">发动机号码</div>
+                <input slot="content" v-model="hauseInfo.house_located" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">号牌号码</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+              <item>
+                <div slot="name">注册日期</div>
+                <input slot="content" v-model="hauseInfo.regist_date" readonly placeholder="识别行驶证自动填充" >
+              </item>
+            </list-item>
+          </div>
+    </div></div></h-content>
+    <bottom-tab class="footer-button">
+      <tab-button class="save" @click.native="save">下一步</tab-button>
+    </bottom-tab>
+  </h-view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      bp_type: '',
+      houseImg: {},
+      carImg: {},
+      list: {},
+      hauseInfo: {
+        house_owner: '',
+        public_situation: '',
+        house_located: '',
+        regist_date: '',
+        house_property: '',
+        plan_purpose: '',
+        house_layers: '',
+        built_area: '',
+        built_in_area: '',
+        others: '',
+        land_number: '',
+        land_get_method: '',
+        land_use_limit: '',
+      },
+      carInfo: {
+      },
+      upload_list: {},
+      cddItemList: [], // 资料清单列表
+      dowload_list: [],
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (from.name === 'NPInvoiceInfo' && window.localStorage.from) {
+        vm.bp_type = window.localStorage.bp_type
+        vm.loadItemList()
+      }
+    })
+  },
+  methods: {
+    save () {
+      this.$router.push({
+        name: 'NPBankInfo',
+      })
+    },
+    imgUploadOpenCamera (description, check_id, cdd_item) {
+      let vm = this
+      let obj = {
+        pkvalue: check_id,
+        source_type: 'PRJ_CDD_ITEM_CHECK',
+        picture: '',
+        check_id: check_id,
+        filePath: '',
+        attachment_id: '',
+        user_id: 1,
+        fileName: description + '_' + new Date().getTime(),
+      }
+      let cameraoptions = {
+        quality: 100,
+      }
+      let success = function (imgdata) {
+        obj.picture = imgdata
+        obj.filePath = imgdata
+        if (cdd_item === 'CAR_CARD') {
+          vm.carImg = obj
+        } else if (cdd_item === 'HOUSE_CARD') {
+          vm.houseImg = obj
+        }
+      }
+      let error = function () {
+        hlsPopup.showLongCenter('请拍照')
+      }
+      hlsUtil.openCamera(cameraoptions, success, error)
+    },
+    imgUploadTakePicture (description, check_id, cdd_item) {
+      let vm = this
+      let cameraoptions = {
+        quality: 100,
+      }
+      let success = function (imgUrl) {
+        let obj = {
+          pkvalue: check_id,
+          source_type: 'PRJ_CDD_ITEM_CHECK',
+          picture: '',
+          check_id: check_id,
+          filePath: '',
+          attachment_id: '',
+          user_id: 1,
+          fileName: description + '_' + new Date().getTime(),
+        }
+        obj.picture = imgUrl[0]
+        obj.filePath = imgUrl[0]
+        if (cdd_item === 'CAR_CARD') {
+          vm.carImg = obj
+        } else if (cdd_item === 'HOUSE_CARD') {
+          vm.houseImg = obj
+        }
+      }
+      let error = function () {}
+      vm.hlsUtil.takePicture(cameraoptions, success, error)
+    },
+    // 图片保存
+    save_picture () {
+      let vm = this
+      let uploadSuccess = function (res) {
+        if (res.result === 'S') {
+        } else {
+          hlsPopup.hideLoading()
+        }
+      }
+      if (vm.hauseInfo) {
+        hlsUtil.fileUploadSvc(vm.hauseInfo, uploadSuccess)
+      }
+      if (vm.carInfo) {
+        hlsUtil.fileUploadSvc(vm.hauseInfo, uploadSuccess)
+      }
+    },
+    // 移除图片
+    remove_pic (attachment_id, index) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          hlsPopup.showLongCenter('删除成功!')
+          vm.remove_upload_list(attachment_id, index)
+        } else if (res.result === 'E') {
+          hlsPopup.showShortCenter(res.message)
+        }
+      })
+    },
+    // 图片上传入口
+    imgUploadShow (description, check_id, cdd_item) {
+      let vm = this
+      // vm.upload_list = []
+      hlsPopup.showActionSheet({
+        titleText: '请选择照片',
+        buttonArray: ['拍照', '从相册取'],
+        callback: index => {
+          if (index === 0) {
+            vm.imgUploadOpenCamera(description, check_id, cdd_item)
+          } else {
+            vm.imgUploadTakePicture(description, check_id, cdd_item)
+          }
+        },
+      })
+    },
+    // 查看大图
+    showBigPicture (pic) {
+      let vm = this
+      vm.hlsPopup.showBigPicture({
+        imgUrl: pic,
+        width: '100% !important',
+      })
+    },
+    delete_pic (attachment_id) {
+      let vm = this
+      var delete_list = []
+      let obj = { attachment_id: attachment_id }
+      delete_list.push(obj)
+      let url = process.env.basePath + 'app_delete_attment' // 附件删除
+      let param = {
+        picturelist: delete_list,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          hlsPopup.showLongCenter('删除成功!')
+          vm.remove_dowload_list(attachment_id)
+        } else if (res.result === 'E') {
+          hlsPopup.showShortCenter(res.message)
+        }
+      })
+    },
+    loadItemList () {
+      let vm = this
+      vm.dowload_list = []
+      let bpId = window.localStorage.getItem('bp_id')
+      let url = process.env.basePath + 'prj_cdd_check_list'
+      let param = {
+        master: {
+          document_id: bpId,
+          document_table: 'HLS_BP_MASTER',
+          tab_group: 'HLS_NP',
+        },
+      }
+      // vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        // vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.cddItemList = res.lists.filter(i => {
+            return i.description.indexOf('身份证') === -1
+          })
+          // 查询图片
+          vm.cddItemList.forEach((item, index) => {
+            vm.load_picture(item.check_id, index, item.cdd_item)
+          })
+        }
+      })
+    },
+    load_picture (check_id, index, cdd_item) {
+      let vm = this
+      let url =
+        process.env.basePath + 'attachment_list_query' + '&index' + index // 附件查询
+      let param = {
+        check_id: check_id,
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          res.lists.forEach(item => {
+            item['url'] =
+              process.env.filePath +
+              'attachment_id=' +
+              item.attachment_id +
+              '&access_token=' +
+              window.localStorage.access_token
+            vm.dowload_list.push(item)
+          })
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+#accessory{
+      .userInfo {
+      height: 45px;
+      line-height: 45px;
+      color: @headerColor;
+      margin-top: -10px;
+      font-size: 15px;
+      margin-left: 16px;
+      position: relative;
+    }
+    .userInfo::before {
+      content: "";
+      display: block;
+      width: 4px;
+      height: 20px;
+      background-color: @headerColor;
+      position: absolute;
+      left: -15px;
+      top: 12px;
+    }
+      .card {
+      padding-bottom: 8px;
+      height: auto;
+      background-color: #fff;
+      margin-bottom: 10px;
+
+      display: flex;
+      flex-direction: column;
+      span {
+        color: #656464;
+        font-size: 13px;
+        line-height: 18px;
+        padding-top: 8px;
+        display: block;
+        margin-left: 16px;
+      }
+      .img-content {
+        /*display: flex;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+        align-items: center;*/
+      }
+      .plus {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .card-upload {
+        position: relative;
+        width: 80px;
+        height: 80px;
+        border: 1px dashed #dcdcdd;
+        /* display: flex;
+         justify-content: center;
+         align-items: center;*/
+        margin-top: 12px;
+        margin-left: 16px;
+        float: left;
+        .close {
+          /* position: relative;
+          color: #F96F68;
+          margin-top: -100%;
+          margin-left: -10%;*/
+          position: absolute;
+          color: #f96f68;
+          top: -6px;
+          right: -6px;
+          img {
+            width: 14px;
+            height: 14px;
+          }
+        }
+        img {
+          /*width: 88px;
+          height: 88px;*/
+          width: 100%;
+          height: 100%;
+        }
+        .upload-btn {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+     .save {
+    color: #fff;
+    border-radius: 4px;
+    background-color: @headerColor;
+  }
+}
+</style>

src/router/index.js

@@ -106,6 +106,11 @@ import DrawbackDetail from '@/pages/drawback/drawback-detail'
 
 // 视屏面签
 import VideoSign from '@/pages/videoSign/video-list'
+// 新版用户绑定
+import NPBaseInfo from '@/pages/userBindNew/np/base-info'
+import NPInvoiceInfo from '@/pages/userBindNew/np/invoice-info'
+import NPBankInfo from '@/pages/userBindNew/np/bank-info'
+import AccessoryInfo from '@/pages/userBindNew/np/accessory-info'
 
 Vue.use(Router)
 
@@ -261,6 +266,12 @@ export default new Router({
     {path: '/video-sign', component: VideoSign, name: 'VideoSign', meta: {keepAlive: true}},
     // 消息中心
     {path: '/reject-detail', component: RejectDetail, name: 'RejectDetail', meta: {keepAlive: true}},
+    // 新版用户绑定-自然人
+    {path: '/np-base-info', component: NPBaseInfo, name: 'NPBaseInfo', meta: {keepAlive: true}},
+    {path: '/np-invoice-info', component: NPInvoiceInfo, name: 'NPInvoiceInfo', meta: {keepAlive: true}},
+    {path: '/np-bank-info', component: NPBankInfo, name: 'NPBankInfo', meta: {keepAlive: true}},
+    {path: '/accessory-info', component: AccessoryInfo, name: 'AccessoryInfo', meta: {keepAlive: true}},
+
   ],
   scrollBehavior (to, from, savedPosition) {
     if (to.hash) {