naturePerson.vue

<!--
 * @Description: In User Settings Edit
 * @Author: liuxin
 * @Date: 2019-09-19 09:18:14
 * @LastEditTime: 2019-10-09 13:11:10
 * @LastEditors: Please set LastEditors
 -->
<template>
  <h-view id="base-info1" class="public-style" title="基本信息">
    <h-header :proportion="[5,1,1]" class="header">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png" >
        <span>用户绑定</span>
      </div>
    </h-header>
    <Tab :tabNum="tabNum" @getTabNum="getTabNum" />
    <h-content class="content">
      <div v-show="tabNum==0">
        <list-item :item-height="44">
          <item :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="selectIdType()"
            >
          </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>
        </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="30"
              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.cell_phone" 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="30"
              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 :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">
          <div class="userInfo">配偶信息</div>
          <list-item :item-height="44">
            <item>
              <div slot="name" class="required">姓名</div>
              <input slot="content" v-model="baseInfo.bp_name_sp" 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>
        <div v-if="cddItemList.length" class="userInfo">资产信息</div>
        <div v-for="(list, index) in cddItemList" :key="index" class="card">
          <span>{{ list.description }}</span>
          <div class="img-content">
            <!--待上传图片列表-->
            <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="item in dowload_list">
              <div
                v-for="(pic, index) in item"
                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" @click="imgUploadShow(list.check_id)">
              <img src="@/assets/userBind/camera.png" class="upload-btn" >
            </div>
          </div>
        </div>
        <!-- <div v-if="from&&isApproved&&isAGENT" class="tax" @click="changeUndertake">
          <img src="@/assets/userBind/tax.png" class="left-img">
          <div>
            <span>缴纳保证金</span>
            <p>已缴纳：500000</p>
          </div>
          <img src="@/assets/userBind/arrow-right.png" class="right-img">
        </div>-->
      </div>

      <BankInfo
        v-show="tabNum==1"
        :getBankList="getBankList"
        @getInfo="getInfo"
        @getList="getList"
      />
      <InvoiceInfo
        v-show="tabNum==2"
        :baseInfo="baseInfo"
        :tabNum="tabNum"
        @getinvoiceList="getinvoiceList"
      />
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="put" @click.native="putData">提交</tab-button>
      <tab-button class="save" @click.native="verified">保存</tab-button>
    </bottom-tab>
    <h-modal ref="modal" v-model="showModalValue" position="bottom" cus-class="sign-modal">
      <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" >
          <list-item :item-height="44" class="card-Info">
            <item>
              <div slot="name">银行卡卡号</div>
              <input
                slot="content"
                v-model="bank.bank_account_num"

                placeholder="识别银行卡自动填充"
              >
            </item>
            <item>
              <div slot="name">账户姓名</div>
              <input slot="content" v-model="bank.bank_account_name" placeholder="请输入账户名称" >
            </item>
            <item>
              <div slot="name">银行名称</div>
              <input slot="content" v-model="bank.bank_full_name"  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 v-if="!isApproved || (isClear && isApproved)" class="add-box">
        <tab-button class="add-card" @click.native="addBankInfo">添加</tab-button>
      </bottom-tab>
    </h-modal>
  </h-view>
</template>
<script>
import Tab from '@/components/tab'
import InvoiceInfo from '@/pages/userBind/np/invoiceInfo'
import BankInfo from '@/pages/userBind/np/bankInfo'
export default {
  components: {
    Tab,
    InvoiceInfo,
    BankInfo,
  },
  data () {
    return {
      list: {},
      hasSP: false,
      isPaople: false,
      isLesons: false,
      isMatter: false,
      showModalValue: false,
      isApproved: false,
      isSave: false,
      isAGENT: this.$route.params.isAGENT,
      isSelected: false,
      tabNum: 0,
      from: false,
      cityList: [],
      provinceList: [],
      upload_list: [], // 上传图片列表
      dowload_list: [], // 下载图片列表
      typeList: [],
      backList: [],
      bankList: [],
      maritalList: [],
      getBankList: [],
      districtList: [],
      bank: {
        bank_account_num: '',
        bank_account_name: '',
        bank_card_type: '',
        bank_full_name: '',
        bank_branch_name: '',
      },
      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,
        cell_phone: null,
        living_address: '',
        address_on_resident_booklit: '',
        marital_status: '',
        academic_background: '',
        bp_name_sp: '',
        district_id: '',
        district_name: '',
        spouse_phone: '',
        working_place_sp: '',
        address_sp: '',
        invoice_bp_bank_account: '',
        taxpayer_type: '',
        invoice_title: '',
        invoice_bp_address_phone_num: '',
        invoice_kind: '',
        user_phone: window.localStorage.user_phone,
      },
      idCardFront: '', // 身份证正面图片
      idCardBack: '', // 身份证反面图片
      bankImg: '', // 银行卡图片
      cddItemList: [], // 资料清单列表
      idCardCheck_id: '', // 身份证check_id
      idCardImgList: [], // 存身份证图片列表
      idCardEditFlag: 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
      }
    },
    tabNum: function (newVal, oldVal) {
      if (newVal === 1 && !this.isSave && !this.from) {
        this.hlsPopup.showError('请先保存基本信息')
        this.tabNum = oldVal
      }
    },
    '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.getBankInfo()
    this.getProvince()
    if (this.$route.params.status === 'APPROVED') {
      this.isApproved = true
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.fullPath === '/tab/my-info' || from.fullPath === '/margin-first-pay') { // 绑定查询入口
      next(vm => {
        vm.from = true
        vm.basicInfoQuery()
        vm.loadItemList()// 附件查询
        vm.getBankInfo()
      })
    }
    next()
  },
  updated () {
    this.getinvoiceList()
  },
  methods: {
    basicInfoQuery () {
      let vm = this
      let url = process.env.basePath + 'bp_np_info_query'
      let param = {
        bp_id: vm.$route.params.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
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    changeUndertake () {
      this.$router.push({
        name: 'MarginFirstPay',
        params: {
          bp_id: this.$route.params.bp_id,
          status: this.$route.params.status,
          isAGENT: this.isAGENT,
        },
      })
    },
    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':
              res.lists.forEach(item => {
                if (item.file_name === 'front.jpg') {
                  vm.idCardFront = item.url
                } else {
                  vm.idCardBack = item.url
                }
              })
              break
            default:
              vm.dowload_list.push(res.lists)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    async verified () {
      this.dowload_list = [] // 保存之前将图片下载列表清空，防止出现重复的图片
      this.upload_list = [] // 保存之前将待上传列表清空，防止出现重复的图片
      let bpId = await this.saveWord()
      this.getBankInfo()
      // 查询资料清单
      this.loadItemList()
    },
    loadItemList () {
      let vm = this
      let bpId = vm.from ? vm.$route.params.bp_id : window.localStorage.getItem('user_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':
                vm.idCardCheck_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.idCardEditFlag) { // 身份证图片已修改，重新上传
            var list = []
            for (let i = 0; i < vm.idCardImgList.length; i++) {
              let obj = {
                'pkvalue': vm.idCardCheck_id,
                'source_type': 'PRJ_CDD_ITEM_CHECK',
                'picture': '',
                'check_id': vm.idCardCheck_id,
                'filePath': vm.idCardImgList[i].url,
                'attachment_id': '',
                'user_id': 1,
                'fileName': vm.idCardImgList[i].fileName,
              }
              list.push(obj)
            }
            vm.save_picture(list)
          }
        }
      })
    },
    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') {
        vm.hlsPopup.showSuccess('保存成功')
        vm.isSave = true
        window.localStorage.setItem('user_id', res.bp_id)
        window.sessionStorage.setItem('user_id', res.bp_id)
        window.sessionStorage.setItem('bp_name', vm.baseInfo.bp_name)
        window.localStorage.setItem('bp_name', vm.baseInfo.bp_name)
        return res.bp_id
      }
    },
    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.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.hlsPopup.showLongCenter('婚姻状况不能为空！')
      } else if (vm.marital_status_n === '已婚' && !vm.baseInfo.bp_name_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 bpId
      }
    },
    // 图片上传入口
    imgUploadShow (check_id) {
      let vm = this
      // vm.upload_list = []
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.imgUploadOpenCamera(check_id)
          } else {
            vm.imgUploadTakePicture(check_id)
          }
        },
      })
    },
    imgUploadOpenCamera (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': '',
      }
      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 () {
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    imgUploadTakePicture (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': '',
          }
          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)
        }
      })
    },
    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') {
            vm.idCardEditFlag = true // 身份证图片状态已修改
            type === 'front' ? (vm.idCardFront = imgdata, vm.idCardIdentify(imgdata), vm.idCardImgList.push({'url': imgdata, 'fileName': 'front'})) : (vm.idCardBack = imgdata, vm.idCardImgList.push({'url': imgdata, 'fileName': 'back'}))
          } else if (ocrType === 'bankCard') {
            vm.bankImg = imgdata
            vm.bankCardIdentify(imgdata)
          }
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      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') {
            vm.idCardEditFlag = true // 身份证图片状态已修改
            type === 'front' ? (vm.idCardFront = imgUrl[0], vm.idCardIdentify(imgUrl[0]), vm.idCardImgList.push({'url': imgUrl[0], 'fileName': 'front'})) : (vm.idCardBack = imgUrl[0], vm.idCardImgList.push({'url': imgUrl[0], 'fileName': 'back'}))
          } 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) {
      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
        vm.baseInfo.bp_name = result.姓名.words
        vm.baseInfo.id_card_no = result.公民身份号码.words
        vm.baseInfo.address_on_resident_booklit = 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
      }
    },
    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 = ''
    },
    addBankInfo () {
      this.hlsPopup.showConfirm({
        title: '提示',
        content: '您确认添加吗？',
        onConfirm: data => {
          console.log(data)
          if (data === 1) {
            let bpName = this.from ? this.$route.params.user_bp_name : window.localStorage.getItem('bp_name')
            if (
              this.bank.bank_account_num === '' ||
              this.bank.bank_account_name === '' ||
              this.bank.bank_full_name === '' ||
              this.bank.bank_branch_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: this.from ? this.$route.params.bp_id : window.localStorage.getItem('user_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)
                }
              })
            }
          }
        },
      })
    },
    putData () {
      if (
        window.localStorage.getItem('user_id') &&
        window.localStorage.getItem('user_id') !== 'undefined'
      ) {
        this.hlsPopup.showConfirm({
          title: '提示',
          content: '您确认提交吗？',
          onConfirm: data => {
            console.log(data)
            if (data) {
              let vm = this
              let url = process.env.basePath + 'bp_bind_submit'
              let param = {
                master: {
                  bp_id: window.localStorage.getItem('user_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('基本信息还未保存')
      }
    },
    hideModal () {
      this.showModalValue = false
    },
    getInfo (i, isClear) {
      this.isClear = isClear
      if (isClear) {
        // this.bank = {}
        this.bank.bank_account_num = ''
        this.bank.bank_account_name = ''
        this.bank.bank_card_type = ''
        this.bank.bank_full_name = ''
        this.bank.bank_branch_name = ''
      }
      this.showModalValue = i
    },
    getList (a) {
      Object.assign(this.bank, a)
    },
    showModal () {
      this.showModalValue = true
    },
    selectIdType (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
        },
      })
    },
    getBankInfo () {
      let vm = this
      // let bpId = window.localStorage.getItem('user_id')
      let id = vm.from ? vm.$route.params.bp_id : window.localStorage.getItem('user_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('传入参数异常')
        })
    },
    getinvoiceList (i) {
      Object.assign(this.baseInfo, i)
    },
    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,
            }
          })
        }
      })
    },
    getTabNum (i) {
      this.tabNum = i
    },
    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">
#base-info1 {
  font-family: PingFangSC-Regular;
  input::placeholder {
    color: #b4b4b5;
  }
  textarea::placeholder {
    color: #b4b4b5;
  }
  textarea {
    text-align: right;
  }
  // .compute{
  //   display:block;
  //   font-size: 14px;
  // }
  .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;
    }
  }
  .header {
    background-color: #00469c;
    color: #fff;
    .h-header-btn {
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
      span {
        color: #fff;
        font-family: PingFangSC-Semibold;
        margin-left: 16px;
        font-size: 17px;
        letter-spacing: 0.6px;
        line-height: 24px;
      }
    }
  }
  .content {
    height: 76%;
    .userInfo {
      height: 45px;
      line-height: 45px;
      color: #00469c;
      margin-top: -10px;
      font-size: 15px;
      margin-left: 16px;
      position: relative;
    }
    .userInfo::before {
      content: "";
      display: block;
      width: 4px;
      height: 20px;
      background-color: #00469c;
      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: 15px;
      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;
      }
      .card-upload {
        width: 88px;
        height: 88px;
        border: 1px dashed #dcdcdd;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 12px;
        margin-left: 12px;
        float: left;
        .close {
          position: relative;
          color: #f96f68;
          margin-top: -100%;
          margin-left: -10%;
          img {
            width: 14px;
            height: 14px;
          }
        }
        img {
          width: 88px;
          height: 88px;
        }
        .upload-btn {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
  .put {
    width: 175px;
    height: 45px;
    color: #00469c;
    border-radius: 4px;
    border: 1px solid #00469c;
    background-color: #fafafa;
  }
  .put-approved {
    width: 90%;
    height: 45px;
    color: #fff;
    border-radius: 4px;
    background-color: #00469c;
  }
  .save {
    width: 175px;
    height: 45px;
    color: #fff;
    border-radius: 4px;
    background-color: #00469c;
  }
  .footer-button {
    padding-top: 15px;
    margin-bottom: 15px;
  }
  .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: #00469c;
        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: #00469c;
    border-radius: 4px;
    color: #fff;
  }
}
.modal {
  background-color: rgba(0, 0, 0, 0) !important;
}
.hls-notify-wrap {
  height: 50px;
  line-height: 34px !important;
}
</style>