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-count="1" multiple :after-read="afterRead" @delete="deleteFile1" />
        <p class="text_block">上传或拍摄人像图进行认证</p>
        <p class="btn_block">验证</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="">

<!--        <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 {attachmentUpload} from "@/api/sunVillage_info/fixedAssets";
  export default {
    name: "identityCheck",
    data() {
      return {
        fileList:[],
        openPic:[],
        openPic2:[],
        responseData: null,
        remainingSeconds: 3, // 剩余秒数，初始值为3秒
      };
    },
    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秒
      }
    },
    methods: {
      deleteFile1(detail){
        this.openPic2.splice(detail.index,1)
        // this.form.openPic.splice(index,1);
      },
      afterRead(file) {
        this.$toast.loading({
          message: "上传中...",
          forbidClick: true,
          duration: 0,
        });
        console.log(file instanceof Array)
        if (file instanceof Array){//判断是否为数组，单张图片为array，多张为数组，数组返回true否则为false
          file.map(res=>{
            this.openPic.push(res.file);
            let params1 = new FormData();
            params1.append("file", res.file);
            attachmentUpload(params1).then((r1) => {
              this.openPic2.push(r1.fileName);
            })
          })
        }else{
          this.openPic.push(file);
          let params1 = new FormData();
          params1.append("file", file.file);
          //提交方法
          attachmentUpload(params1).then((r1) => {
            this.openPic2.push(r1.fileName);
          })

        }
      },
    },
  };
</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>