no message

page_task/identity_upload/add-identity.vue

@@ -0,0 +1,220 @@
+<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="/pages-task/static/img/gk2xruydmj.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="/pages-task/static/img/gk2xsr9ud6.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 txUploadFile from "@/common/js/txOssSts";
+import tools from "@/common/js/tools";
+import {getBaiDuImgRecognition} from "@/api/common";
+
+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/common/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>