learning-system-portal/src/components/processStatus.vue

<script setup>
import {getCertificationProcess} from "@/api/modules/lecturer";

export default {
  props: ['teacherId'],
  data(){
    return{
      status:{
        secondResult:1,
        draftStatus:1,
        onlineLearning:1,
        offlineTutoring:1,
        endStatus:1,
        reviewResult:2,
        offlineTutoring1:1,
        endStatus1:1,
        reviewResult1:2,
      }
    }
  },
  mounted() {
    this.getCertificationProcess()
  },
  methods:{
    getCertificationProcess(){
      getCertificationProcess({teacherId:this.teacherId}).then(res=>{
        let data=res.data
        if (data.secondResult==0 && data.reviewResult==0){
          this.status={
            secondResult:0,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:1,
            offlineTutoring1:0,
            endStatus1:0,
            reviewResult1:0,
          }
        }else if (data.secondResult==0 && data.reviewResult==1){
          this.status={
            secondResult:0,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:1,
            offlineTutoring1:0,
            endStatus1:0,
            reviewResult1:1,
          }
        }else if (data.secondResult==0 && data.endStatus==0){
          this.status={
            secondResult:0,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:1,
            offlineTutoring1:0,
            endStatus1:0,
            reviewResult1:2,
          }
        }else if (data.secondResult==0 && data.offlineTutoring==0){
          this.status={
            secondResult:0,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:1,
            offlineTutoring1:0,
            endStatus1:1,
            reviewResult1:2,
          }
        }else if (data.secondResult==0 && data.reviewResult==2){
          this.status={
            secondResult:0,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:1,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:2,
          }
        } else if (data.secondResult==1 && data.reviewResult==0){
          this.status={
            secondResult:1,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:0,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:2,
          }
        }else if (data.secondResult==1 && data.reviewResult==1){
          this.status={
            secondResult:1,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:1,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:2,
          }
        }else if (data.secondResult==1 && data.endStatus==0){
          this.status={
            secondResult:1,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:0,
            reviewResult:2,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:2,
          }
        }else if (data.secondResult==1 && data.offlineTutoring==0){
          this.status={
            secondResult:1,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:0,
            endStatus:1,
            reviewResult:2,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:2,
          }
        }else if (data.secondResult==1 && data.onlineLearning==0){
          this.status={
            secondResult:1,
            draftStatus:0,
            onlineLearning:0,
            offlineTutoring:1,
            endStatus:1,
            reviewResult:2,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:2,
          }
        }else if (data.secondResult==1 && data.draftStatus==0){
          this.status={
            secondResult:1,
            draftStatus:0,
            onlineLearning:1,
            offlineTutoring:1,
            endStatus:1,
            reviewResult:2,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:2,
          }
        }else{
          this.status={
            secondResult:1,
            draftStatus:1,
            onlineLearning:1,
            offlineTutoring:1,
            endStatus:1,
            reviewResult:2,
            offlineTutoring1:1,
            endStatus1:1,
            reviewResult1:3,
          }
        }

      })
    }
  }
};
</script>

<template>
  <div class="main">
    <div class="process">
      <img src="../assets/images/first_draft.png" alt="" v-if="status.draftStatus==1">
      <img src="../assets/images/first_draft1.png" alt="" v-if="status.draftStatus==0">
      <div :class="status.draftStatus==1?'tim1':'tim'">{{status.draftStatus==1?'初稿未上传':'初稿已上传'}}</div>
    </div>
    <div :class="status.draftStatus==1?'line1':'line'"></div>
    <div class="process">
      <img src="../assets/images/E-learning1.png" alt="" v-if="status.onlineLearning==0">
      <img src="../assets/images/E-learning.png" alt="" v-if="status.onlineLearning==1">
      <div :class="status.onlineLearning==1?'tim1':'tim'">{{status.onlineLearning==1?'线上学习未完成':'线上学习已完成'}}</div>
    </div>
    <div :class="status.onlineLearning==1?'line1':'line'"></div>
    <div class="process">
      <img src="../assets/images/tutoring1.png" alt="" v-if="status.offlineTutoring==0">
      <img src="../assets/images/tutoring.png" alt="" v-if="status.offlineTutoring==1">
      <div :class="status.offlineTutoring==1?'tim1':'tim'">{{status.offlineTutoring==1?'线下辅导未完成':'线下辅导已完成'}}</div>
    </div>
    <div :class="status.offlineTutoring==1?'line1':'line'"></div>
    <div class="process">
      <img src="../assets/images/final_draft1.png" alt="" v-if="status.endStatus==0">
      <img src="../assets/images/final_draft.png" alt="" v-if="status.endStatus==1">
      <div :class="status.endStatus==1?'tim1':'tim'">{{status.endStatus==1?'终稿未上传':'终稿已上传'}}</div>
    </div>
    <div :class="status.endStatus==1?'line1':'line'"></div>
    <div class="process">
      <img src="../assets/images/certification.png" alt="" v-if="status.reviewResult==3">
      <img src="../assets/images/certification2.png" alt="" v-if="status.reviewResult==2">
      <img src="../assets/images/certification3.png" alt="" v-if="status.reviewResult==1">
      <img src="../assets/images/certification1.png" alt="" v-if="status.reviewResult==0">
      <div :class="status.reviewResult==3?'tim1':status.reviewResult==2?'tim3':status.reviewResult==1?'tim2':'tim'">
        {{status.reviewResult==3?'未认证':status.reviewResult==2?'认证中':status.reviewResult==1?'认证未通过':'认证通过'}}</div>
    </div>
    <div :class="status.reviewResult==3?'line1':status.reviewResult==2?'line3':status.reviewResult==1?'line2':'line'" v-if="status.secondResult==0"></div>
    <div class="process" v-if="status.secondResult==0">
      <img src="../assets/images/tutoring1.png" alt="" v-if="status.offlineTutoring1==0">
      <img src="../assets/images/tutoring.png" alt="" v-if="status.offlineTutoring1==1">
      <div :class="status.offlineTutoring1==1?'tim1':'tim'">{{status.offlineTutoring1==1?'线下辅导未完成':'线下辅导已完成'}}</div>
    </div>
    <div :class="status.offlineTutoring1==1?'line1':'line'"v-if="status.secondResult==0"></div>
    <div class="process" v-if="status.secondResult==0">
      <img src="../assets/images/final_draft1.png" alt="" v-if="status.endStatus1==0">
      <img src="../assets/images/final_draft.png" alt="" v-if="status.endStatus1==1">
      <div :class="status.endStatus1==1?'tim1':'tim'">{{status.endStatus1==1?'终稿未上传':'终稿已上传'}}</div>
    </div>
    <div :class="status.endStatus1==1?'line1':'line'" v-if="status.secondResult==0"></div>
    <div class="process" v-if="status.secondResult==0">
      <img src="../assets/images/certification.png" alt="" v-if="status.reviewResult1==3">
      <img src="../assets/images/certification2.png" alt="" v-if="status.reviewResult1==2">
      <img src="../assets/images/certification3.png" alt="" v-if="status.reviewResult1==1">
      <img src="../assets/images/certification1.png" alt="" v-if="status.reviewResult1==0">
      <div :class="status.reviewResult1==3?'tim1':status.reviewResult1==2?'tim3':status.reviewResult1==1?'tim2':'tim'">
        {{status.reviewResult1==3?'未认证':status.reviewResult1==2?'认证中':status.reviewResult1==1?'认证未通过':'认证通过'}}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.process {
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    width: 46px;
    height: 46px;
  }

  .tim {
    font-weight: 400;
    font-size: 14px;
    color: #409EFF;
    line-height: 20px;
    margin-top: 12px;
  }
  .tim1 {
    font-weight: 400;
    font-size: 14px;
    color: #979797;
    line-height: 20px;
    margin-top: 12px;
  }
  .tim2 {
    font-weight: 400;
    font-size: 14px;
    color: #FF4040;
    line-height: 20px;
    margin-top: 12px;
  }
  .tim3 {
    font-weight: 400;
    font-size: 14px;
    color: #ffa050;
    line-height: 20px;
    margin-top: 12px;
  }
}

.line {
  width: 81px;
  height: 1px;
  border: 1px solid #409EFF;
  margin: 0 8px 30px 8px;
}
.line1 {
  width: 81px;
  height: 1px;
  border: 1px solid #DEDEDE;
  margin: 0 8px 30px 8px;
}
.line2 {
  width: 81px;
  height: 1px;
  border: 1px solid #FF4040;
  margin: 0 8px 30px 8px;
}
.line3 {
  width: 81px;
  height: 1px;
  border: 1px solid #ffa050;
  margin: 0 8px 30px 8px;
}
</style>