jje_uniapp/myPages/serviceObjectFaceAuth/index.vue

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

    <view class="h-title">
      <text>*请输入1张服务对象人脸影像</text>
    </view>

    <view class="h-upload-wrap">
      <view class="h-item-row">
        <view @click="uploadImg1(1)" class="h-item">
          <view v-if="!imgUrl1" class="h-content">
            <image src="../../static/me/u01.png" mode=""></image>
            <view class="h-text">
              <text>添加人脸影像</text>
            </view>
          </view>
          <view v-else class="h-upload-img">
            <image mode="aspectFit" class="imgBox" :src="imgUrl1"></image>
          </view>
        </view>
      </view>
    </view>

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

    <u-popup :show="errShow" :round="10"  mode="center">
      <view class="h-popo-content">
        <view class="h-img">
          <u-icon name="close" color="red" size="40"></u-icon>
        </view>
        <view class="h-text">
          <text>你未实名认证</text>
        </view>
        <view class="h-btn-wrap">
          <view @click="errShow = false" class="h-left-btn">
            <text>取消</text>
          </view>
          <view @click="getoRealNameAuth()" class="h-right-btn">
            <text>去实名认证</text>
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 填写姓名 -->
    <u-popup :show="okShow" :round="10"  mode="center">
      <view class="h-popo-content">

        <view class="h-text">
          <u--form
                  labelPosition="left"
                  :model="parms"
                  ref="form1"
          >
            <u-form-item
                    label="宝贝昵称"
                    prop="userInfo"
                    labelWidth="auto"
                    labelAlign="right"
            >
              <u--input
                      v-model="parms.userName"
                      placeholder="请输入宝贝昵称"
                      border="bottom"
                      type="text"
                      maxlength="12"
              ></u--input>
            </u-form-item>

          </u--form>
        </view>
        <view class="h-btn-wrap">
          <view @click="okShow = false" class="h-left-btn">
            <text>取消</text>
          </view>
          <view @click="gotoAutoLetter()" class="h-right-btn">
            <text>确定</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    components: {
    },
    data() {
      return {
        height:'',
        errShow: false,
        okShow: false,
        imgUrl1: '',
        imgUrl2: '',
        imgUrl3: '',
        imgUrl4: '',
        imgUrl5: '',
        show: false,
        reqParm: {
          auth: true,
          facePath: '',
          businessId: ''
        },
        userInfo: {

        },
        parms: {
          userName: '',
          facePhoto: '',
          facePhotos: '',
          facePhotoUrl: ''
        },
        imgPaths: "",
        ossImg: {
          ossId1: "",
          ossId2: "",
          ossId3: "",
          ossId4: "",
          ossId5: ""
        },
      }
    },
    onReady() {
    },
    onLoad(option) {
      // 用户信息
      // let user = this.$store.state.loginUserInfo;
      // this.userInfo = user;

      let sysInfo= uni.getSystemInfoSync()
      this.height = sysInfo.screenHeight + 'px'

    },
    methods: {
      // 去签订协议
      gotoAutoLetter(){
        if(!this.$isDataEmpty(this.parms.userName)){
          this.okShow = false;
          uni.$u.route({
            url: '/pages/me/service-object-all-info',
            params: {
              data: JSON.stringify(this.userInfo)
            }
          })
          // uni.$u.route({
          // 	url: '/pages/me/service-object-auth-letter',
          // 	params: {
          // 		data: JSON.stringify(this.parms)
          // 	}
          // })
        } else{
          uni.$u.toast('请认真填写宝贝昵称')
        }
      },
      // 实名认证
      getoRealNameAuth(){
        this.errShow = false;
        // 已认证
        uni.$u.route({
          url: '/pages/me/real-name-auth',
          params: {
          }
        })
      },
      // 连接已上传的图片地址
      verifyImgUpload(){
        let img1 = this.ossImg.ossId1;
        let img2 = this.ossImg.ossId2;
        let img3 = this.ossImg.ossId3;
        let img4 = this.ossImg.ossId4;
        let img5 = this.ossImg.ossId5;
        if(!img1){
          uni.showToast({
            title: "请上传第1张图片"
          })
          return false;
        }
        /* if(this.$isDataEmpty(img2)){
            uni.showToast({
                title: "请上传第2张图片"
            })
            return false;
        }
        if(this.$isDataEmpty(img3)){
            uni.showToast({
                title: "请上传第3张图片"
            })
            return false;
        }
        if(this.$isDataEmpty(img4)){
            uni.showToast({
                title: "请上传第4张图片"
            })
            return false;
        }
        if(this.$isDataEmpty(img5)){
            uni.showToast({
                title: "请上传第5张图片"
            })
            return false;
        } */
        // this.parms.facePhotos = img1+","+img2+","+img3+","+img4+","+img5;
        this.parms.facePhotos = img1;
        return true;
      },

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

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

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

        this.$api.verifyFace(that.reqParm).then((res)=>{
          uni.hideLoading();
          if(res.data.code == '500'){ //
            res.facePhotoUrl = that.imgUrl1;
            res.facePhoto = that.ossImg.ossId1;
            res.facePhotos = that.parms.facePhotos;
            uni.navigateTo({
              url: '/myPages/serviceObjectAllInfo/index?data'+ JSON.stringify(res),

            })
          } else { // 人脸存在
            res.opType = "1";
            res.facePhotoUrl = res.facePhoto;
            res.facePhotos = that.parms.facePhotos;
            uni.navigateTo({
              url: '/myPages/serviceObjectInfo/index?data=' + JSON.stringify(res),
            })
          }
        }).catch(() =>{
          uni.showToast({
            title: "操作失败"
          })
        });

      },
      //头像上传
      uploadImg1(imgIndex) {
        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)
                let ossId = res.data.ossId;
                let url = res.data.url;
                let imgUrl =  url.startsWith("https")? res.data.url : url.replace("http", "https");
                console.log("imgUrl:"+imgUrl)
                if(imgIndex == 1){
                  that.ossImg.ossId1 = ossId;
                  that.parms.facePhotoUrl = imgUrl;
                  that.imgUrl1 = imgUrl;
                }
                if(imgIndex == 2){
                  that.ossImg.ossId2 = ossId;
                  that.imgUrl2 = imgUrl;
                }
                if(imgIndex == 3){
                  that.ossImg.ossId3 = ossId;
                  that.imgUrl3 = imgUrl;
                }
                if(imgIndex == 4){
                  that.ossImg.ossId4 = ossId;
                  that.imgUrl4 = imgUrl;
                }
                if(imgIndex == 5){
                  that.ossImg.ossId5 = ossId;
                  that.imgUrl5 = imgUrl;
                }
                this.reqParm.facePath = ossId;
                this.parms.facePhoto = 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;
  }
</style>