nsgk_mobile/src/views/sunVillage_info/identity_check.vue

<template>
    <div class="home_wrapper">
      <div class="header">
        <div class="return_btn" @click="onClickLeft"></div>
        <p>身份核验</p>
      </div>

      <!--      未认证-->
      <div class="list_main"v-if="responseData.isFacial ==='N'" >
        <p class="userName">{{responseData.memberName}}<span class="noCheck">待认证</span></p>
        <p class="id_card" >{{responseData.idcard}}</p>
        <van-uploader v-model="fileList" :max-size="20 * 1024 * 1024" @oversize="onOversize" :max-count="1" multiple :after-read="afterRead" @delete="deleteFile1" />
        <p class="text_block">上传或拍摄人像图进行认证</p>
        <p class="btn_block" @click="facialVerify">验证</p>
      </div>

      <!--      已认证-->
      <div class="list_main" v-if="responseData.isFacial ==='Y'">
        <p class="userName" >{{responseData.memberName}}
          <span class="yesCheck">已认证<span class="yesTime" >{{responseData.facialAt}}</span></span>
        </p>
        <p class="id_card" >{{responseData.idcard}}</p>
        <img class="img_block" :src="'/api'+responseData.headSculpture" alt="" @error="setDefaultImage">

<!--        <img class="img_block" src="../../assets/images/sunVillage_info/check_icon_02.png" alt="">-->

        <p class="text_block">您已认证，<span>{{ remainingSeconds }}</span>秒后进入页面...</p>
      </div>
    </div>
</template>

<script>
  import Cookies from "js-cookie";
  import {faceVerification} from "@/api/sunVillage_info/fixedAssets";
  // import {attachmentUpload} from "@/api/sunVillage_info/fixedAssets";

  export default {
    name: "identityCheck",
    data() {
      return {
        fileList:[],
        responseData: null,
        remainingSeconds: 3, // 剩余秒数，初始值为3秒
        formData:null,
      };
    },
    created() {
      this.responseData = this.$route.query.responseData;
      // 判断是否已认证
      if (this.responseData.isFacial === 'Y') {
        const countdownInterval = setInterval(() => {
          if (this.remainingSeconds === 0) {
            clearInterval(countdownInterval); // 清除计时器
            this.$router.push({ path: '/sunVillage_info/index_code_rights' });
          } else {
            this.remainingSeconds--;
          }
        }, 1000); // 1000 毫秒等于1秒
      } else {
        this.formData = new FormData();
        this.formData.append("name", this.responseData.memberName);
        this.formData.append("idCard",this.responseData.idcard);
        this.formData.append("deptId",this.responseData.deptId);
      }
    },
    methods: {
      onOversize(file) {
        console.log(file);
        this.$toast.fail('图片大小不能超过 20MB');
      },
      setDefaultImage(event) {
        event.target.src = require("../../../static/images/zwtpxw.jpg");
      },
      deleteFile1(detail){
        this.formData.delete("file");
      },
      facialVerify(){
        const file = this.formData.get("file");
        if (!file) {
          this.$toast({
            icon: 'warning', // 找到自己需要的图标
            message: '请上传头像',
            duration: "1000"
          });
          return ;
        }
        this.$toast.loading({
          message: "人脸识别中",
          forbidClick: true,
          duration: 0,
        });
        faceVerification(this.formData).then((response) => {
          if(response.code === 200) {
            this.$toast.clear();
            this.$toast({
              icon: 'success',
              message: '人脸验证成功',
              duration: "1000"
            });
            this.$router.push({path: '/sunVillage_info/index_code_rights'})
          }
        })
      },
      afterRead(file) {
        this.$toast.loading({
          message: "上传中...",
          forbidClick: true,
          duration: 0,
        });
        this.formData.append("file", file.file);
        this.$toast.clear();
      },
    },
  };
</script>

<style scoped lang="scss">

  /deep/ .van-uploader{
    margin: 6vh 0 2vh 50%;
    transform: translateX(-50%);
  }
  /deep/ .van-uploader__upload{
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
  }
  /deep/ .van-uploader__preview-image{
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
  }
.home_wrapper{
  width: 100vw;
  min-height: 100vh;
  background-image:linear-gradient(#29c379, #f1f2f2, #f1f2f2, #f1f2f2);
  .header{
    text-align: center;
    position: relative;
    height: 110px;
    line-height: 110px;
    color: #ffffff;
    font-size: 16PX;
  }
  .return_btn {
    width: 24px;
    height: 43.2px;
    background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
    background-size: 20px 36px;
    position: absolute;
    left: 38px;
    top: 36px;
  }

  .list_main{
    padding:3vh 2vh 10vh;
    background: #ffffff;
    width: 94%;
    margin: 25px auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    .userName{
      font-size: 16PX;
      line-height: 1;
      .noCheck{
        font-size: 14PX;
        color: #ffffff;
        padding: 2PX 10PX 2PX 20PX;
        border-radius: 5PX;
        background: #bdbdbd url("../../assets/images/sunVillage_info/check_icon_01.png") no-repeat left center;
        background-position-x: 5PX;
        background-size: 12PX;
      }
      .yesCheck{
        font-size: 14PX;
        color: #ffffff;
        padding: 2PX 1PX 2PX 20PX;
        border-radius: 5PX;
        background: #2fc57a url("../../assets/images/sunVillage_info/check_icon_03.png") no-repeat left center;
        background-position-x: 5PX;
        background-size: 12PX;
        .yesTime{
          padding: 1PX 10PX;
          background: #ccf8d6;
          color: #2fc57a;
          margin-left: 10PX;
          margin-top: 1PX;
          border-radius: 5PX;
        }
      }
    }
    .id_card{
      font-size: 16PX;
      margin-top: 15PX;
    }
    .img_block{
      width: 30vw;
      margin: 4vh auto 1vh;
      display: block;
    }
    .text_block{
      font-size: 14PX;
      color: #a7a6a6;
      text-align: center;
      span{
        font-size: 18PX;
        color: #30c67a;
        font-weight: bold;
      }
    }
    .btn_block{
      display: inline-block;
      font-size: 14PX;
      color: #ffffff;
      border-radius: 5vh;
      padding: 1vh 5vh;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
      background-image:linear-gradient(to right,#30c67a, #51e872);
      margin: 4vh 0 0 50%;
      transform: translateX(-50%);
    }
  }
}

</style>