assess-app/page_task/identity_upload/add-identity.vue

<template>
  <view class="identity-box">
    <view class="identity-title">上传身份证图片 ,图片大小不能超过3M</view>
    <view class="identity-item">
      <view class="item-img" @click="showUploadingImg(true,1)">
        <image v-if="identity_one"  :src="identity_one" mode="aspectFill"></image>
        <image v-else  src="@/page_task/static/img/identity-front.png" mode="aspectFill"></image>
        <view class="img-text">身份证正面</view>
      </view>
      <view class="item-img" @click="showUploadingImg(true,2)">
        <image v-if="identity_two" :src="identity_two" mode="aspectFill"></image>
        <image v-else src="@/page_task/static/img/identity-verso.png" mode="aspectFill"></image>
        <view class="img-text">身份证反面</view>
      </view>
    </view>
    <uni-popup ref="popup" :safeArea="false" type="bottom" @change="closePopup">
      <view class="popup-block">
        <view class="popup-row" @click="uploadingImg(1)">拍照</view>
        <view class="popup-row" @click="uploadingImg(2)">从手机里面选择</view>
        <view class="popup-row" @click="showUploadingImg(false,0)">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {getBaiDuImgRecognition} from "@/api/common";
import txUploadFile from "@/service/txOssSts";
import tools from "@/service/tools";

export default {
  name: "add-identity",
  components: {},
  props: {
    'identityOne':{
      default:'',
    },
    'identityTwo':{
      default:'',
    },
    'userName':{
      default:'',
    },
    'userSex':{
      default:'',
    },
    'identityValidity':{
      default:'',
    },
    'userBirthday':{
      default:'',
    },
    'idNumber':{
      default:'',
    }
  },
  data() {
    return {
      identity_one:'',
      identity_two:'',
      name:'',
      id_number:'',
      sex:'',
      identity_validity:'',
      isUploading:false,
    }
  },
  watch: {
    'identityOne':function (){
      this.setIdentityOne()
    },
    'identityTwo':function (){
      this.setIdentityTwo()
    }
  },
  mounted() {
    this.setIdentityOne()
    this.setIdentityTwo()
  },
  methods: {
    setIdentityOne(){
      if(this.identityOne){
        if(this.identityOne!==this.identity_one){
          this.identity_one=this.identityOne
        }
      }
    },
    setIdentityTwo(){
      if(this.identityTwo){
        if(this.identityTwo!==this.identity_two){
          this.identity_two=this.identityTwo
        }
      }
    },
    uploadingImg(sourceType) {
      console.log('sourceType:'+sourceType)
      uni.chooseMedia({
        mediaType: 'image',
        count: 1, //默认9
        sizeType: "compressed",
        sourceType: [sourceType === 1 ? 'camera' : 'album'],
        fail:(e)=>{
          console.log(e)
        },
        success: (res) => {
          if (res.tempFiles.length > 0) {
            res.tempFiles.forEach((tempFile) => {
              txUploadFile(tempFile.tempFilePath).then((data) => {
                if (!data) {
                  tools.error('图片上传失败')
                  tools.hideLoading()
                } else {
                  if (this.uploadingType === 1) {
                    tools.showLoading()
                    //开启身份证照片识别
                    getBaiDuImgRecognition({
                      'imgUrl': data.Location,
                      'imgType': '1'
                    }).then((res) => {
                      tools.hideLoading()
                      if (res.code === 1) {
                        this.identity_one = data.Location;
                        this.name = res.data.name;
                        this.id_number = res.data.id_number;
                        this.sex = res.data.sex;
                        this.birthday = res.data.birthday;
                        this.$emit('update:userName',this.name)
                        this.$emit('update:userBirthday',this.birthday)
                        this.$emit('update:userSex',this.sex)
                        this.$emit('update:idNumber',this.id_number)
                        this.$emit('update:identityOne',this.identity_one)
                      } else {
                        tools.error('身份证照片识别失败')
                      }
                    })
                  } else  {
                    tools.showLoading()
                    //开启身份证照片背面识别
                    getBaiDuImgRecognition({
                      'imgUrl': data.Location,
                      'imgType': '4'
                    }).then((res) => {
                      tools.hideLoading()
                      if (res.code === 1) {
                        this.identity_two = data.Location;
                        this.identity_validity =  res.data.identity_validity;
                        this.$emit('update:identityTwo',this.identity_two)
                        this.$emit('update:identityValidity',this.identity_validity)

                      } else {
                        tools.error('身份证照片识别失败')
                      }
                    })
                  }
                }
              })
            })
            this.showUploadingImg(false, 0);
          } else {
            tools.error("请选择上传的图片")
          }
        },
      });
    },
    showUploadingImg(showImg, uploadingType) {
      if (showImg) {
        if(this.isUploading){
          return
        }
        this.isUploading=true
        this.uploadingType = uploadingType;
        this.$refs.popup.open("bottom");
      } else {
        this.$refs.popup.close();
        this.isUploading=false
      }
    },
    closePopup(e){
      if(e.show===false){
        this.isUploading=false
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/static/css/wh-common";
.identity-box{
  .identity-title{
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #999;
    font-weight: 400;
  }
  .identity-item{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    .item-img{
      width: calc(50% - 9rpx);
      image{
        width:100%;
        height: 190rpx;
        border-radius: 6rpx;
      }
      .img-text{
        margin-top: 19rpx;
        text-align: center;
        color: #232A35;
        font-size: 24rpx;
        font-weight: 400;

      }
    }
  }

}

</style>