assess-app/page_task/identity_upload/identity_upload.vue

<template>
	<view class="total-page page-env-160 page-box task-bg">
		<Nav :title="'身份证上传'" :genre="2" is_fixed>
			<view>
				<view class="sys-background-fff p-30 m-30 r-30">
					<text class="size-30 sys-weight-600">身份证上传认证照片</text>
					<view class="size-26 m-t10 text-color-999">仅用于公安网核实身份</view>
					<view class="row-justify-sb center size-28 p-b10 m-t40">
						<view class="picture-item"  @click="showUploadingImg(true,1)">
							<image :src="memberData.identity_one" v-if="memberData.identity_one" mode="aspectFill"></image>
							<image src="/static/img/information/identity-front.png" v-else mode="aspectFill"></image>
							<view class="picture-text  button-background text-color-fff">
								拍摄人像面
							</view>
						</view>
						<view class="picture-item"  @click="showUploadingImg(true,2)">
              <image :src="memberData.identity_two" v-if="memberData.identity_two" mode="aspectFill"></image>
              <image src="/static/img/information/identity-verso.png" v-else mode="aspectFill"></image>
							<view class="picture-text button-background text-color-fff">
								拍摄国徽面
							</view>
						</view>
					</view>
				</view>
				<view class="sys-background-fff p-30 m-lr30 m-t20 r-30">
					<text class="size-30 sys-weight-600">身份证上传认证照片</text>
					<view class="size-26 m-t10 text-color-999">仅用于公安网核实身份</view>
					<view class="row-justify-sb center size-26 m-t40">
						<view class="column-c" v-for="(item,index) in hintList" :key="index">
							<view class="picture-box">
								<image class="picture-hint" :src="`/static/img/information/${item.image}.png`"
									mode="aspectFill"></image>
								<image class="wh-30 picture-icon"
									:src="item.is_correct?'/static/img/information/hint-vector.png':'/static/img/information/hint-subtract.png'"
									mode="aspectFill"></image>
							</view>
							<view class="picture-text size-24 text-color-999 m-t20">
								{{item.name}}
							</view>

						</view>
					</view>
				</view>
				<EnButton :text="'完成'" @onSubmit="onSubmit">
				</EnButton>
			</view>
		</Nav>
    <uni-popup ref="popup" :safeArea="false" type="bottom" >
      <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>
<!-- correct -->
<script>
	import tools from "@/service/tools";
  import {getBaiDuImgRecognition} from "@/api/common";
  import txUploadFile from "@/service/txOssSts";

  export default {
		components: {},
		data() {
			return {
				hintList: [{
					name: '标准照片',
					image: 'hint-one',
					is_correct: true
				}, {
					name: '边框缺失',
					image: 'hint-two',
					is_correct: false
				}, {
					name: '照片模糊',
					image: 'hint-three',
					is_correct: false
				}, {
					name: '闪光强烈',
					image: 'hint-four',
					is_correct: false
				}, ],
       memberData:{
         identity_one:'',
         identity_two:'',
         name:'',
         id_number:'',
         sex:'',
         identity_validity:'',
       },
        isUploading:false,
			}
		},
		onLoad(data) {
      if(data.identity_one){
        this.memberData.identity_one=data.identity_one
      }
      if(data.identity_one){
        this.memberData.identity_two=data.identity_two
      }
    },
		methods: {
      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
        }
      },
      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.memberData.identity_one = data.Location;
                          this.memberData.name = res.data.name;
                          this.memberData.id_number = res.data.id_number;
                          this.memberData.sex = res.data.sex;
                          this.memberData.birthday = res.data.birthday;
                        } else {
                          tools.error('身份证照片识别失败')
                        }
                      })
                    } else  {
                      tools.showLoading()
                      //开启身份证照片背面识别
                      getBaiDuImgRecognition({
                        'imgUrl': data.Location,
                        'imgType': '4'
                      }).then((res) => {
                        tools.hideLoading()
                        if (res.code === 1) {
                          this.memberData.identity_two = data.Location;
                          this.memberData.identity_validity =  res.data.identity_validity;
                        } else {
                          tools.error('身份证照片识别失败')
                        }
                      })
                    }
                  }
                })
              })
              this.showUploadingImg(false, 0);
            } else {
              tools.error("请选择上传的图片")
            }
          },
        });
      },
			// 完成
			onSubmit() {
        if(this.memberData.name===''){
          tools.error('请上传人像面照片')
          return
        }
        if(this.memberData.identity_validity===''){
          tools.error('请上传国徽面照片')
          return
        }
        uni.$emit('discernMember',this.memberData)
        tools.success('认证成功')
				setTimeout(()=>{
          tools.leftClick()
        },100)
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/css/wh-common";
	.picture-box {
		position: relative;
	}

	.picture-item {
		width: 300rpx;
		height: 250rpx;

		image {
			width: 100%;
			height: 170rpx;
		}

		.picture-text {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 0 0 30rpx 30rpx;
		}

	}

	.picture-icon {
		position: absolute;
		bottom: -6rpx;
		left: 45rpx;
		z-index: 10;
	}

	.picture-hint {
		width: 120rpx;
		height: 80rpx;
		background: #F7F9FE;
		border-radius: 10rpx 10rpx 10rpx 10rpx;

	}
</style>