yl-gzh/pages/createInfo/createInfo.vue

<template>
  <view class="content">
    <uni-card class="card">
      <uni-section title="基本信息" type="line">
        <view>
          <view class="lzcOCR">
            <view class="imgBox">
              <image :src="zjcaijianSrc" style="width: 40vw;" mode="widthFix" @click="paizhao('front')">
              </image>
              <view class="text">拍摄人像面</view>
            </view>
            <view class="imgBox">
              <image :src="zjcaijianSrcFan" style="width: 40vw;" mode="widthFix" @click="paizhao('back')">
              </image>
              <view class="text">拍摄国徽面</view>
            </view>
          </view>

          <view class="miaoshu">
            身份信息会跟进拍照的证件照片白动识别，不支持手动输入。如果识别错误，可尝试再次拍照.
          </view>
        </view>

        <uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" validateTrigger="blur" label-width="108px" style="margin-top: 3vh;">
          <uni-forms-item label="姓名" required name="lrXm">
            <uni-easyinput ref="xm" type="text" :disabled="disabled" v-model="baseFormData.lrXm" placeholder="请输入姓名"
              :inputBorder="true"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="手机号" required name="lrCydh">
            <uni-easyinput type="text" v-model="baseFormData.lrCydh" :disabled="disabled" placeholder="请输入手机号" :inputBorder="true"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="监护人姓名">
            <uni-easyinput ref="xm" type="text" :disabled="disabled" v-model="baseFormData.jhrxm" placeholder="请输入监护人姓名"
              :inputBorder="true"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="监护人联系电话" name="jhrlxdh">
            <uni-easyinput type="text" v-model="baseFormData.jhrlxdh" :disabled="disabled" placeholder="请输入监护人联系电话"
              :inputBorder="true"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="所属园区" name="mchnt" required>
            <uni-data-select v-model="baseFormData.mchnt" :localdata="mchntList" @change="mchntChange"></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="所属社区" required>
            <uni-data-picker ref="lrhjdz" v-model="baseFormData.lrHjdz" :localdata="lrhjdzList" popup-title="请选择社区" @change="lrhjdzChange"
              @nodeclick="lrhjdzNodeClick" :readonly="lrhjdzList.length === 0" :class="{'readonly':lrhjdzList.length === 0}"></uni-data-picker>
          </uni-forms-item>
          <uni-forms-item label="住址" required name="jzdz">
            <uni-easyinput type="text" v-model="baseFormData.jzdz" :disabled="disabled" placeholder="请输入住址" :inputBorder="true"></uni-easyinput>
          </uni-forms-item>

          <uni-forms-item label="是否特困">
            <uni-data-checkbox v-model="baseFormData.istk" :localdata="radioData"></uni-data-checkbox>
          </uni-forms-item>
          <uni-forms-item label="特困证明" v-if="baseFormData.istk == 1">
            <myfile :zczmList="tkzmList" @recordsChange="tkChange"></myfile>
          </uni-forms-item>
          <uni-forms-item label="是否低保">
            <uni-data-checkbox v-model="baseFormData.isdb" :localdata="radioData"></uni-data-checkbox>
          </uni-forms-item>
          <uni-forms-item label="低保证明" v-if="baseFormData.isdb == 1">
            <myfile :zczmList="dbzmList" @recordsChange="dbChange"></myfile>
          </uni-forms-item>
          <uni-forms-item label="是否重残">
            <uni-data-checkbox v-model="baseFormData.iszc" :localdata="radioData"></uni-data-checkbox>
          </uni-forms-item>
          <uni-forms-item label="重残证明" v-if="baseFormData.iszc == 1">
            <!-- <uni-file-picker v-model="zczm" @select="imgSelect3" @delete="imgDelete3"></uni-file-picker> -->
            <myfile :zczmList="zczmList" @recordsChange="zcChange"></myfile>
          </uni-forms-item>

          <view v-if="show" style="border: 1px solid red;">
            <uni-forms-item label="直接上传">
              <uni-data-checkbox v-model="radio" :localdata="radioData"></uni-data-checkbox>
            </uni-forms-item>
            <text style="color: red; font-weight: bolder;">注意：人证比对不成功可以直接注册人工审核！</text>
          </view>

          <view class="miaoshu" v-if="isCheck">
            该人员存在未审核信息，请先审核！
          </view>

          <view>
            <view v-if="isCheck">
              <button cursor-spacing="22px" :disabled="isCheck" class="buttonClass" @click="preSave()">认证</button>
            </view>
            <view v-else>
              <button v-if="faceBase64 && ((show && radio == '1') || (!show && radio == '0'))" cursor-spacing="22px" class="buttonClass"
                @click="save()">保存</button>
              <button v-else cursor-spacing="22px" class="buttonClass" @click="preSave()">认证</button>
            </view>
          </view>
        </uni-forms>
      </uni-section>
    </uni-card>
  </view>
</template>

<script>
  import myfile from '@/components/my-file/my-file.vue';
  // let jl = require('../../static/bufen.json')

  import { decryptRowData_ECB, decryptData_ECB } from '@/common/sm4.js'
  import { GetChildListByCode, getChildListByMchnt } from '@/api/dict.js'
  import { showConfirm, getDictInfo, toast, toBase64 } from '@/common/common.js'
  import { UploadOne, UploadSome, UploadSomeFile } from '@/api/upload.js'
  import { Register } from '@/api/login.js'
  import { getUser } from '@/common/auth.js'
  import CryptoJS from 'crypto-js';
  import config from '@/config.js';
  import idCardNoUtil from '@/common/idcard.js'
  import { translate, base64ToUrl, blobToDataURI, translateAll, base64toFilen, fileToBlob } from '@/common/image.js'
  import { setToken, setOpenid, getOpenid, setUser } from '@/common/auth.js'
  import { getAccessToken, idcard, match } from '@/common/baiduUtil.js'
  import { updateKhjbxx, infoKhjbxx, GetLrByZjhm, createInfoBySelf, YlhtUpdate, CheckReturn, GetUrl, getMchntList } from '@/api/kh.js'

  export default {
    components: {
      myfile,
    },
    data() {
      return {
        mchntList: [],
        lrhjdzList: [],
        level: 3,
        updateFlag: false,

        diqu: '',
        tkzmList: [],
        dbzmList: [],
        zczmList: [],
        isCheck: false,

        disabled: true,
        show: false,
        radio: "0",
        radioData: [{
          text: '否',
          value: "0"
				}, {
          text: '是',
          value: "1"
				}],
        // 字典
        dicts: {
          // 民族
          C0009: [],
          // 性别
          C0007: [],
        },
        // 百度云access_token
        token: '',
        // 人像地址
        src: "/static/images/head.png",
        // 身份拍摄地址
        zjSrc: "",
        // 身份证裁剪地址
        zjcaijianSrc: '/static/images/zhengmian.png',
        zjcaijianSrcFan: '/static/images/fanmian.png',
        cardType: 'front',
        frontBase64: '',
        backBase64: '',
        file1: "",
        file2: "",
        file3: "",
        file4: "",
        file5: "",
        file6: "",
        showSrc: "",
        // 人员信息
        userInfo: {},

        // 身份证号加密
        idcardMD5: '',
        // 人像base64
        faceBase64: '',
        // 身份证base64
        idcardFace: '',
        idcardFaceUrl: '',
        // 对比份数
        score: 0,
        // ocrXm
        ocrXm: '',
        isSearch: false,
        baseFormData: {
          lrXm: '',
          lrZjhm: '',
          lrHjbcxx: '',
          lrCydh: '',
          code: '',
          diqu: '',
          lrHjdz: '',
          istk: "0",
          isdb: "0",
          iszc: "0",
          lzzt: 0,
          lrZjz: ""
        },
        rules: {
          jzdz: {
            rules: [{
              required: true,
              errorMessage: '住址不能为空'
						}]
          },
          lrXm: {
            rules: [{
              required: true,
              errorMessage: '姓名不能为空'
						}]
          },
          mchnt: {
            rules: [{
              required: true,
              errorMessage: '所属园区不能为空'
						}]
          },
          diqu: {
            rules: [{
              required: true,
              errorMessage: '请选择地区'
						}]
          },
          photo: {
            rules: [{
              required: true,
              errorMessage: '请上传人像'
						}]
          },
          lrCydh: {
            rules: [{
                required: true,
                errorMessage: '手机号不能为空'
							},
              {
                format: 'number',
                errorMessage: '请输入正确的手机号',
							},
              {
                pattern: '^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\\d{8})$',
                errorMessage: '请输入正确的手机号',
							}
						]
          },
          jhrlxdh: {
            rules: [{
                required: false,
                errorMessage: '监护人联系电话不能为空'
							},
              {
                format: 'number',
                errorMessage: '请输入正确的手机号',
							},
              {
                pattern: '^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\\d{8})$',
                errorMessage: '请输入正确的手机号',
							}
						]
          }
        },
      }
    },
    onLoad(o) {
      // 获取所属园区数据
      getMchntList().then(res => {
        if (res.code !== 200) return
        const { rows } = res
        this.mchntList = []
        rows.forEach(item => {
          this.mchntList.push({ text: item.name, value: item.mchnt })
        })
      })

      getAccessToken(this.callbackToken)
      window.addEventListener("message", this.msgCallback, false)
    },
    destroyed() {
      window.removeEventListener("message", this.msgCallback, false)
    },
    watch: {
      'baseFormData.mchnt': {
        immediate: true,
        handler(newVal, oldVal) {
          if (newVal) {
            getChildListByMchnt({ mchnt: newVal }).then(res => {
              if (res.code !== 200) return
              const { data } = res
              this.lrhjdzList = []
              let str1 = JSON.stringify(data).replaceAll('code', 'value').replaceAll('label', 'text').replaceAll('null', '')
              this.lrhjdzList = JSON.parse(str1)
            })
          } else {
            this.lrhjdzList = []
            this.baseFormData.lrHjdz = ''
          }
        }
      }
    },
    methods: {
      msgCallback(e) {
        if (e.data.data && e.data.data.arg.base64) {
          setTimeout(() => {
            uni.showLoading({
              title: '正在识别中...',
              mask: true,
            })
            this.faceBase64 = ''
            this.cardType = uni.getStorageSync("cardType")
            // if (this.cardType == 'front') e.data.data.arg.base64 = jl.front
            // if (this.cardType == 'back') e.data.data.arg.base64 = jl.back
            // 压缩	
            translateAll(base64ToUrl(e.data.data.arg.base64), (base64, blobUrl) => {
              idcard(base64, this.token, this.cardType, this.callbackIdcard)
            })
            // uni.removeStorageSync('cardType')
          }, 1000);
        }

        if (e.data.data && e.data.data.arg.faceBase64) {
          setTimeout(() => {
            uni.showLoading({
              title: '正在识别中...',
              mask: true,
            })
            this.faceBase64 = e.data.data.arg.faceBase64
            // 压缩
            translateAll(base64ToUrl(this.faceBase64), (base64, blobUrl) => {
              this.src = this.faceBase64
              match(this.token, base64.split(",")[1], this.idcardFace, this.callbackFace)
            })
          }, 1000);
        }
      },
      mchntChange(mchnt) {
        // console.log(mchnt);
      },
      lrhjdzChange(e) {
        const { value } = e.detail
        if (value.length > 0) {
          this.baseFormData.lrHjdz = value[value.length - 1].value
        }
      },
      lrhjdzNodeClick(e) {
        // console.log(e);
      },

      tkChange(e) {
        this.tkzmList = e
      },
      dbChange(e) {
        this.dbzmList = e
      },
      zcChange(e) {
        this.zczmList = e
      },
      callbackFace(res) {
        uni.hideLoading()
        if (res.data.error_msg == 'SUCCESS') {
          this.score = res.data.result.score;

          this.baseFormData.lrTxdb = JSON.stringify({
            "lrJmzjhm": this.idcardMD5,
            "xsfs": this.score
          })
          if (this.score >= config.score) {
            this.show = false
            // this.baseFormData.lzzt = 3
            this.baseFormData.lzzt = 0
            // this.baseFormData.lrSpyj = '同意'
            this.baseFormData.lrSpyj = ''
          } else {
            // 低于80选项是否人工审核，是的话进记录表
            // 身份证头像保存后端
            // 人脸库注册人脸、身份证md5
            // 修改的时候去人脸库搜索，搜索不到不允许修改
            // 修改成功替换原始人脸库照片
            // 首次修改搜索身份证
            // 后端没入库，人脸库相应删除
            // ocr失败身份证原版入库，ocr成功人脸入库
            // showConfirm('人像与身份证不符，请重新上传')

            // this.baseFormData.lzzt = 1
            // this.baseFormData.lrSpyj = ''
            this.baseFormData.lzzt = 0
            this.baseFormData.lrSpyj = ''
            this.show = true
          }
          // this.baseFormData.prelrZjz = this.zjcaijianSrc
        } else {
          showConfirm(res.data.error_msg)
          this.faceBase64 = ''
        }
      },
      callbackToken(e) {
        this.token = e
      },
      callbackIdcard(words) {
        uni.hideLoading()
        if (!this.cardType) {
          this.cardType = uni.getStorageSync("cardType")
        }
        if (this.cardType == 'front') {
          if (!words) {
            showConfirm('请上传正确的身份证人像面')
            return
          }
          if (words.image_status == "other_type_card") {
            showConfirm('请上传正确的身份证人像面')
            return
          }

          let id = words.words_result['公民身份号码'].words
          let csrq = words.words_result['出生'].words
          let sex = words.words_result['性别'].words
          let zz = words.words_result['住址'].words
          let info = idCardNoUtil.getIdCardInfo(id)
          if (!idCardNoUtil.checkIdCardNo(id)) {
            showConfirm('身份证号识别有误，请重新上传')
            return
          }
          if (info.birthday != csrq) {
            showConfirm('身份证出生日期识别有误，请重新上传')
            return
          }
          if (info.gender != sex) {
            showConfirm('身份证性别识别有误，请重新上传')
            return
          }
          if (words.image_status == "reversed_side") {
            showConfirm('请上传身份证人像面')
            return
          }
          if (words.risk_type != "normal") {
            // normal-正常身份证；copy-复印件；temporary-临时身份证；screen-翻拍；unknown-其他未知情况
            showConfirm('请上传正确的身份证人像面')
            return
          }
          // todo 根据身份证号查询此人信息是否可修改。this.isCheck = true

          this.frontBase64 = words.card_image
          this.zjcaijianSrc = 'data:image/jpeg;base64,' + words.card_image
          this.disabled = false

          // this.baseFormData.lrXb = getDictInfo(this.dicts.C0007, words.words_result['性别'].words)[0].value
          // this.baseFormData.lrMz = getDictInfo(this.dicts.C0009, words.words_result['民族'].words)[0].value

          this.baseFormData.lrXb = sex
          this.baseFormData.lrMz = words.words_result['民族'].words


          this.idcardFace = words.photo
          this.idcardFaceUrl = base64ToUrl(words.photo);
          this.baseFormData.lrZjhm = id
          this.baseFormData.lrCsrq = csrq
          this.idcardMD5 = CryptoJS.MD5(this.baseFormData.lrZjhm).toString()
          this.baseFormData.lrXm = words.words_result['姓名'].words
          this.baseFormData.lrHjbcxx = zz
          this.ocrXm = words.words_result['姓名'].words


          if (this.userInfo.userType != '07') {
            GetLrByZjhm({
              lrJmzjhm: this.idcardMD5
            }).then(res => {
              if (res.data) this.baseFormData = decryptData_ECB(res.data, ["lrZjhm", "lrXm",
								"lrHjbcxx",
								"lrXjdzBcxx",
								"lrCydh", "lrPoxm", "lrPoZjmh", "jhrXm", "jhrSjhm", "zlrXm", "zlrDh",
								"cjzh",
								"yhzh", "khmc", "jhrxm", "jhrlxdh"
							], [2, 1, 4, 4, 3, 1, 2, 1, 2, 1, 3, 5, 5, 5]);


              if (this.baseFormData.lrTx) this.src = config.baseUrl + this.baseFormData.lrTx

              if (res.data && res.data.sfzzpb) this.zjcaijianSrcFan = res.data.sfzzpb
              if (res.data && res.data.tkzm) this.tkzmList = [res.data.tkzm]
              if (res.data && res.data.dbzm) this.dbzmList = [res.data.dbzm]
              if (res.data && res.data.zczm) this.zczmList = [res.data.zczm]
              if (res.data) this.updateFlag = true
            })
          }
        } else if (this.cardType == 'back') {
          if (!words) {
            showConfirm('请上传正确的身份证国徽面')
            return
          }
          if (words.image_status == "other_type_card") {
            showConfirm('请上传正确的身份证国徽面')
            return
          }
          if (words.risk_type != "normal") {
            // normal-正常身份证；copy-复印件；temporary-临时身份证；screen-翻拍；unknown-其他未知情况
            showConfirm('请上传正确的身份证国徽面')
            return
          }
          // words.words_result['失效日期'].words
          // words.words_result['签发日期'].words
          // words.words_result['签发机关'].words
          if (words && words.words_result) {
            this.baseFormData.sfzqfjg = words.words_result['签发机关'].words
            this.baseFormData.sfzyxqxs = words.words_result['签发日期'].words
            this.baseFormData.sfzyxqxz = words.words_result['失效日期'].words
            this.backBase64 = words.card_image
            this.zjcaijianSrcFan = 'data:image/jpeg;base64,' + words.card_image
          }
        }
      },

      paizhao(type) {
        this.type = type
        if (this.type == 'back' && !this.ocrXm) {
          showConfirm('请先拍摄身份证人像面')
          return
        }
        uni.setStorageSync("cardType", type)
        uni.navigateTo({
          url: '/pages/info/card'
        })
      },
      preSave() {
        if (this.baseFormData.lzzt != 0 && this.baseFormData.lzzt != 3 && this.baseFormData.lzzt != 6) {
          showConfirm('信息正在审核，请勿重复提交')
          return
        }
        if (!this.ocrXm) {
          showConfirm('请先拍摄身份证人像面')
          return
        }
        if (this.zjcaijianSrcFan == '/static/images/fanmian.png') {
          showConfirm('请先拍摄身份证国徽面')
          return
        }
        if (this.baseFormData.istk == 1 && this.tkzmList.length == 0) {
          showConfirm('请先上传特困证明')
          return
        }
        if (this.baseFormData.isdb == 1 && this.dbzmList.length == 0) {
          showConfirm('请先上传低保证明')
          return
        }
        if (this.baseFormData.iszc == 1 && this.zczmList.length == 0) {
          showConfirm('请先上传重残证明')
          return
        }


        this.$refs['baseForm'].validate().then(res => {
          if (this.ocrXm != this.baseFormData.lrXm) {
            showConfirm('姓名与真实姓名不符，请重新上传身份证')
            return
          }
          uni.navigateTo({
            url: '/pages/info/face'
          })
        })
      },
      save() {
        if ((this.score >= config.score) || (this.score < config.score && this.radio == '1')) {
          uni.showLoading({
            title: '正在保存中...',
            mask: true,
          })
          let paramFiles = []
          fileToBlob(base64toFilen('data:image/jpeg;base64,' + this.frontBase64), (e) => {
            this.file1 = e
            paramFiles.push({
              name: "file1",
              uri: this.file1
            })
          })
          if (this.backBase64) {
            fileToBlob(base64toFilen('data:image/jpeg;base64,' + this.backBase64), (e) => {
              this.file2 = e
              paramFiles.push({
                name: "file2",
                uri: this.file2
              })
            })
          }

          fileToBlob(base64toFilen(this.src), (e) => {
            this.file3 = e
            paramFiles.push({
              name: "file3",
              uri: this.file3
            })
          })

          if (this.baseFormData.istk == 1 && this.tkzmList.length == 1 && this.tkzmList[0].indexOf(
              'data:image') > -1) {
            fileToBlob(base64toFilen(this.tkzmList[0]), (e) => {
              this.file4 = e
              paramFiles.push({
                name: "file4",
                uri: this.file4
              })
            })

            if (this.baseFormData.lzzt != 2 || this.baseFormData.lzzt != 1) {
              // 特殊材料待审核
              // this.baseFormData.lzzt = 5
              this.baseFormData.lzzt = 0
              this.baseFormData.lrSpyj = '无'
            }
          }
          if (this.baseFormData.isdb == 1 && this.dbzmList.length == 1 && this.dbzmList[0].indexOf(
              'data:image') > -1) {
            fileToBlob(base64toFilen(this.dbzmList[0]), (e) => {
              this.file5 = e
              paramFiles.push({
                name: "file5",
                uri: this.file5
              })
            })
            if (this.baseFormData.lzzt != 2 || this.baseFormData.lzzt != 1) {
              // 特殊材料待审核
              // this.baseFormData.lzzt = 5
              this.baseFormData.lzzt = 0
              this.baseFormData.lrSpyj = '无'
            }
          }
          if (this.baseFormData.iszc == 1 && this.zczmList.length == 1 && this.zczmList[0].indexOf(
              'data:image') > -1) {
            fileToBlob(base64toFilen(this.zczmList[0]), (e) => {
              this.file6 = e
              paramFiles.push({
                name: "file6",
                uri: this.file6
              })
            })
            if (this.baseFormData.lzzt != 2 || this.baseFormData.lzzt != 1) {
              // 特殊材料待审核
              // this.baseFormData.lzzt = 5
              this.baseFormData.lzzt = 0
              this.baseFormData.lrSpyj = '无'
            }
          }

          let that = this
          setTimeout(function() {
            UploadSomeFile(paramFiles).then(res => {
              that.baseFormData.lrZjz = res.data.url1
              if (that.backBase64) {
                that.baseFormData.sfzzpb = res.data.url2
              }
              that.baseFormData.lrTx = res.data.url3
              if (that.baseFormData.istk == 1 && that.tkzmList.length == 1) {
                that.baseFormData.tkzm = res.data.url4
              }
              if (that.baseFormData.isdb == 1 && that.dbzmList.length == 1) {
                that.baseFormData.dbzm = res.data.url5
              }
              if (that.baseFormData.iszc == 1 && that.zczmList.length == 1) {
                that.baseFormData.zczm = res.data.url6
              }

              that.$refs['baseForm'].validate().then(res => {
                if (that.updateFlag) {
                  editInfoBySelf(that.baseFormData).then(r => {
                    uni.hideLoading()
                    if (r.code == 200) {
                      toast('修改已提交，等待审核中...')
                      setTimeout(() => {
                        uni.navigateBack()
                      }, 1000)
                    }
                  })
                } else {
                  createInfoBySelf(that.baseFormData).then(r => {
                    uni.hideLoading()
                    if (r.code == 200) {
                      toast('申请已提交，等待审核中...')
                      setTimeout(() => {
                        uni.navigateBack()
                      }, 1000)
                    }
                  })
                }
              }).catch(err => {
                uni.hideLoading()
              })

            })
          }, 500)
        } else {
          showConfirm('请重新上传人像')
          return
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card {
    margin: 0 !important;
    padding: 0 !important;
  }

  ::v-deep .uni-forms-item__label {
    justify-content: flex-end !important;
    padding-right: 8px;
  }

  ::v-deep .uni-data-checklist {
    margin-top: 5px !important;
  }

  .readonly {
    background-color: #f7f6f6;

    ::v-deep .placeholder {
      color: #d5d5d5;
    }
  }



  .content {
    padding: 1vh;
  }


  .lzcOCR {
    display: flex;
    justify-content: space-between;
    margin-top: 3vh;
  }

  .miaoshu {
    margin-top: 3vh;
    font-size: 14px;
  }

  .imgBox {
    width: 47%;
    text-align: center;

    image {
      width: 100%;
    }

    .text {
      width: 100%;
      /* background-color: red; */
    }
  }

  .buttonClass {
    width: 55vw;
    border-radius: 25px;
    background: #28d87d;
    color: white;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(40, 216, 125, 0.4);
  }

  .picker-view {
    width: 750rpx;
    height: 600rpx;
    margin-top: 20rpx;
  }

  .item {
    line-height: 100rpx;
    text-align: center;
  }
</style>