crowd-test-service-frontend/src/pages/UserCenter/Authentication.vue

<template>
  <div>
    <div class="right-modifyPsw">
      <div class="right-modifyPsw-title">
        <span style="font-size: 18px;font-weight: bold">身份认证</span>
      </div>
      <el-row :gutter="20" v-loading="loading">
        <el-col :span="12">
          <div class="authentication-card" :class="selectedCardImg"  @click="gotoPersonalAuth" v-if="authType<2">
            <div class="authentication-card-title">个人认证</div>
            <el-row :gutter="10">
              <el-col :span="5">
                <div class="authentication-card-img">
                  <img src="../../assets/img/idcard1.png" >
                </div>
              </el-col>
<!--              未认证-->
              <el-col :span="19" v-if="authType===0">
                <div class="authentication-card-title">手持证件照上传</div>
                <div class="authentication-card-info">需要进行人工审核，审核周期1-3个工作日</div>
              </el-col>
<!--              已认证,个人或者企业-->
              <el-col :span="19" v-if="authType!==0">
                <div class="authentication-card-title">
                  <el-tag :type="authStatus.style">{{authStatus.text}}</el-tag></div>
                <div class="authentication-card-info" v-if="authStatus.style=='warning'">需要进行人工审核，审核周期1-3个工作日</div>
                <div class="authentication-card-info" v-if="authStatus.style=='success'">认证成功，点击查看认证信息</div>
                <div class="authentication-card-info" v-if="authStatus.style=='info'">认证失败，查看失败原因</div>
              </el-col>
            </el-row>
          </div >
        </el-col>
        <el-col :span="12">
          <div class="authentication-card" :class="selectedCardImg"  @click="gotoEnterpriseAuth" v-if="authType===2 || authType ===0">
            <div class="authentication-card-title">企业认证</div>
            <el-row :gutter="10">
              <el-col :span="5">
                <div class="authentication-card-img">
                  <img src="../../assets/img/idcard2.png" >
                </div>
              </el-col>
              <!--              未认证-->
              <el-col :span="19" v-if="authType===0">
                <div class="authentication-card-title">手持证件照上传</div>
                <div class="authentication-card-info">需要进行人工审核，审核周期1-3个工作日</div>
              </el-col>
              <!--              已认证,企业-->
              <el-col :span="19" v-if="authType!==0">
                <div class="authentication-card-title">
                  <el-tag :type="authStatus.style">{{authStatus.text}}</el-tag></div>
                <div class="authentication-card-info" v-if="authStatus.style=='warning'">需要进行人工审核，审核周期1-3个工作日</div>
                <div class="authentication-card-info" v-if="authStatus.style=='success'">认证成功，点击查看认证信息</div>
                <div class="authentication-card-info" v-if="authStatus.style=='info'">认证失败，查看失败原因</div>
              </el-col>

            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import Http from '@/js/http.js'
  import {storageGet} from '@/js/index'
  import {notify} from '@/constants/index'
  export default {
    name: "Authentication",
    data() {
      return {
        loading: false,
        selectedCardImg:'',
        authType:-1,
        authDetail:{},
        authInfo:{},
        authStatus:''
      }
    },
    methods: {
      showLoading() {
        this.loading = true
      },
      hideLoading() {
        this.loading = false
      },
      gotoPersonalAuth(){
        this.$router.push({path:'/personal/authentication/individual'})
      },
      gotoEnterpriseAuth(){
        this.$router.push({path:'/personal/authentication/enterprise'})
      },
      //获取当前资质状态
      getAuthStatus(){
        this.showLoading();
        let userId = storageGet('user')&&storageGet('user').userVO.id;
        Http.get(`/api/user/${userId}`).then(res=>{
          this.authInfo = res;
          if(res.personalAuthVO){
            this.authType = 1  //个人
            this.authDetail = res.personalAuthVO
            this.authStatus = res.personalAuthVO.authStatus
            this.selectedCardImg = 'authentication-card-select'
          }else if(res.agencyVO){
            this.authType = 2  //企业
            this.authDetail = res.agencyVO
            this.authStatus = res.agencyVO.authStatus
            this.selectedCardImg = 'authentication-card-select'
          }else if((!res.enterpriseAuthVO) || (!res.agencyVO)){
            this.authType = 0  //无
          }
          this.hideLoading();
        })
      }
    },
    mounted() {
      this.getAuthStatus();

    }
  }
</script>

<style scoped lang="less">
  .right-modifyPsw {
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);

    .right-modifyPsw-title {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    .authentication-card{
      background:rgba(249,249,249,1);
      padding: 20px 20px 30px 20px;
      .authentication-card-title {
        font-size:20px;
        font-family:Source Han Sans CN;
        font-weight:500;
        margin-bottom: 20px;
      }
      .authentication-card-info{
        font-size:16px;
        font-family:Source Han Sans CN;
        font-weight:400;
        color:rgba(153,153,153,1);
      }
      .authentication-card-img {
        background:rgba(0,118,203,1);
        border-radius:50%;
        width: 65px;
        height: 65px;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
      }
    }
    .authentication-card-select {
      background-image: url("../../assets/img/selectAuthentication.png");
      background-size: 100% 100%;
    }
  }
</style>