jje_uniapp/myPages/serviceObjectFaceAuth/index.vue

<template>
  <view class="container" :style="{'height':'100vh'}">
    <!-- 提示内容 -->

<!--    <view class="h-title">-->
<!--      <text>*请选择1张服务对象头像</text>-->
<!--    </view>-->

    <view class="h-upload-wrap">
      <view class="h-item-row">
        <view @click="choose" class="h-item">
          <view v-if="!facePhotoUrl" class="h-content">
            <image src="/static/me/u01.png" mode="aspectFill"></image>
            <view class="h-text">
<!--              <text>添加头像</text>-->
            </view>
          </view>
          <view v-else class="h-upload-img">
            <image mode="aspectFit" class="imgBox" :src="facePhotoUrl"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 保存备案信息 -->
    <view class="uploadBox" @click="verifyFace()">
      <text>下一步</text>
    </view>

    <view class="btnTitle flex-row">
      <u-icon v-if="selectIcon" name="checkmark-circle-fill" color="#FFE52C" size="18" @click="selectChange"></u-icon>
      <u-icon v-else name="/static/order/ud9.png" color="#FFE52C" size="18" @click="selectChange"></u-icon>
      <text :style="{'margin-left':'10rpx'}">请阅读并同意</text>
      <text :style="{'color':'red'}" @click="goTermsOfService">《服务对象协议》</text>
    </view>
    <cropper selWidth="660rpx" selHeight="660rpx" ref="cropper" quality="0.5" @uploadImg="uploadCropImg"  @upload="facePhotoUrl" />
  </view>
</template>

<script>
import cropper  from '@/components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue';
  export default {
    components: {
      cropper
    },
    data() {
      return {
        requestStatus:false,
        selectIcon:false,
        ossId:'',
        facePhotoUrl:'',
        height:'',
        reqParm: {
          auth: true,
          facePath: '',
          businessId: ''
        },
        userInfo: {},

      }
    },
    onReady() {
    },
    onLoad(option) {
    },
    methods: {
      //上传返回图片
      myUpload(rsp) {
        const self = this;
        self.imgurl = rsp.path; //更新头像方式一
        // rsp.avatar.imgSrc = rsp.path; //更新头像方式二
      },
      choose() {
        // 调用实例的chooseImg方法，拉起图片选择界面，待图片选择完毕后直接进入图片截取界面
        this.$refs.cropper.fSelect();
      },
      goTermsOfService(){
        uni.navigateTo({
          url:'/myPages/TermsOfService/index?name='+'服务对象协议'+'&type=' + 6
        })
      },

      selectChange(){
        this.selectIcon = !this.selectIcon
      },

      // 连接已上传的图片地址
      verifyImgUpload(){
        if(!this.ossId){
          uni.showToast({
            title: "请上传人脸照片"
          })
          return false;
        }
        return true;
      },

      // 验证人象
      verifyFace(){
        let that  = this;

        if(!this.selectIcon){
          uni.$u.toast('请阅读并同意《服务对象协议》')
         return;
        }

        // 验证图片是否全上传
        if(!that.verifyImgUpload()){
          return;
        }

        uni.showLoading({
          title: '人脸识别中'
        })

        if(this.requestStatus){
          return;
        }
        this.requestStatus=true


        this.$api.verifyFace(that.reqParm).then((res)=>{
          this.requestStatus=false
          uni.hideLoading();
          if(res.data.data.code == '500'){ //人脸不存在
            let serviceObject = {}
            serviceObject.facePhoto= this.ossId
            serviceObject.facePhotoUrl=this.facePhotoUrl
            console.log(JSON.stringify(serviceObject))
            uni.redirectTo({
              url: '/myPages/serviceObjectAllInfo/index?data='+ JSON.stringify(serviceObject),
            })
          } else { // 人脸存在
            let serviceObject =  res.data.data
            serviceObject.opType = "1";
            serviceObject.facePhotoUrl =  that.facePhotoUrl;
            serviceObject.facePhoto = that.reqParm.facePath;
            uni.redirectTo({
              url: '/myPages/serviceObjectInfo/index?data=' + JSON.stringify(serviceObject),
            })
          }
        }).catch((err) =>{
          this.requestStatus=false
          uni.$u.toast(err.data.msg||'识别失败，请重新上传照片')
        });

      },
      //头像上传
      uploadImg() {
        let that = this;
        uni.chooseImage({
          count: 1,
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({
              url: that.$baseUrl + '/resource/oss/upload',
              filePath: tempFilePaths[0],
              name: 'file',
              header: {
                'Authorization': 'Bearer ' + uni.getStorageInfo('accessToken'),
              },
              success: (uploadFileRes) => {
                console.log("uploadFileRes:"+uploadFileRes)
                let res = JSON.parse(uploadFileRes.data)
                that.ossId = res.data.ossId;
                that.facePhotoUrl =  res.data.url.replace("http", "https");
                that.reqParm.facePath = res.data.ossId;
              }
            });
          }
        });
      },
      uploadCropImg(e){
        uni.compressImage({
          src: e,
          success: res => {
            uni.uploadFile({
              url: this.$baseUrl + '/resource/oss/upload',
              filePath:res.tempFilePath,
              name: 'file',
              header: {
                'Authorization': 'Bearer ' + uni.getStorageInfo('accessToken'),
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log(res,'成功回调')
                if(res.code !== 200){
                  uni.showToast({
                    icon: 'none',
                    duration: 3000,
                    title: res.msg || '系统繁忙，请重试！'
                  });
                }
                this.ossId = res.data.ossId;
                this.facePhotoUrl =  res.data.url.replace("http", "https");
                this.reqParm.facePath = res.data.ossId;
              }
            });
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">

  .container{
    padding: 12px;
    background: #F6F6F6;
  }
  .h-title{
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }

  // 弹窗
  .h-popo-content{
    height: 170px;
    padding: 12px;
    width: 300px;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    .h-img{
      display: flex;
      justify-content: center;
    }
    .h-text{
      margin-top: 12px;
      font-weight: 400;
      color: #666666;
    }
    .text{
      margin-top: 6px;
      font-weight: 400;
      color: #666666;
    }
    .h-btn-wrap{
      display: flex;
      justify-content: space-between;
      color: #333333;
      text-align: center;
      margin-top: 20px;
      .h-left-btn{
        height: 32px;
        line-height: 30px;
        background: #EEEEEE;
        width: 100px;
        text-align: center;
        border-radius: 16px;
        margin: 0 auto;
      }
      .h-right-btn{
        height: 32px;
        line-height: 30px;
        background: #FFE05C;
        width: 100px;
        border-radius: 16px;
        margin: 0 auto;

      }
    }
  }

  .h-upload-wrap{

    .h-item-row{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      .h-item{
        background: #fff;
        width: 48%;
        text-align: center;
        height: 164px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        .h-content{
          image{
            height: 48px;
            width: 48px;
          }
          .h-text{
            margin-top: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 20px;
          }
        }
        .h-upload-img{
          width: 100%;
          height: 164px;
          padding: 4px;
          .imgBox{
            width: 164px;
            height: 164px;
          }
        }

      }

    }
  }

  .uploadBox {
    width: 100%;
    margin-top: 30px;
      height: 42px;
      background: #FFE05C;
      border-radius: 27px;
      color: #333333;
      line-height: 42px;
      text-align: center;
  }

  .btnTitle{
    font-size: 24rpx;
    font-weight: 400;
    color: #333333;
    line-height: 50px;
    padding-left: 32rpx;
  }

  @import '/common/css/common.css';
</style>