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

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

export default {
  props: {
    teacherId:String,
    pid:String
  },
  data(){
    return{
      status:{
        secondResult:1,
        draftStatus:1,
        onlineLearning:1,
        offlineTutoring:1,
        endStatus:1,
        reviewResult:3,
        offlineTutoring1:1,
        endStatus1:1,
        reviewResult1:3,
      }
    }
  },
  created() {
    if (this.pid==null || this.pid==''){
      this.getCertificationProcess()
    }else {
      this.getCertificationProcess()
      this.getCertificationProcess1()
    }
  },
  watch: {
    teacherId: {
      handler(newVal) {
        if (newVal) {
          console.log(newVal)
          this.getCertificationProcess()
        }
      }
    },

  },
  methods:{
    getCertificationProcess(){
      getCertificationProcess({teacherId:this.teacherId}).then(res=>{
        let data=res.data
        if(data.draftStatus==0){
          this.status.draftStatus=0
          if (data.onlineLearning==0){
            this.status.onlineLearning=0
            if (data.offlineTutoring==0){
              this.status.offlineTutoring=0
              if (data.endStatus==0){
                this.status.endStatus=0
                this.status.reviewResult=data.reviewResult
              }else if (data.endStatus==2){
                this.status.endStatus=2
                this.status.reviewResult=data.reviewResult
              }
            }
          }else if(data.onlineLearning==2 && data.offlineTutoring==1){
            this.status.onlineLearning=2
          }else if (data.onlineLearning==2 && data.offlineTutoring==0){
            this.status.onlineLearning=0
            if (data.offlineTutoring==0){
              this.status.offlineTutoring=0
              if (data.endStatus==0){
                this.status.endStatus=0
                this.status.reviewResult=data.reviewResult
              }else if (data.endStatus==2){
                this.status.endStatus=2
                this.status.reviewResult=data.reviewResult
              }
            }
          }
        }else if (data.draftStatus==2){
          this.status.draftStatus=2
          if (data.onlineLearning==0){
            this.status.onlineLearning=0
            if (data.offlineTutoring==0){
              this.status.offlineTutoring=0
              if (data.endStatus==0){
                this.status.endStatus=0
                this.status.reviewResult=data.reviewResult
              }else if (data.endStatus==2){
                this.status.endStatus=2
                this.status.reviewResult=data.reviewResult
              }
            }
          }else if(data.onlineLearning==2 && data.offlineTutoring==1){
            this.status.onlineLearning=2
          }else if (data.onlineLearning==2 && data.offlineTutoring==0){
            this.status.onlineLearning=0
            if (data.offlineTutoring==0){
              this.status.offlineTutoring=0
              if (data.endStatus==0){
                this.status.endStatus=0
                this.status.reviewResult=data.reviewResult
              }else if (data.endStatus==2){
                this.status.endStatus=2
                this.status.reviewResult=data.reviewResult
              }
            }
          }
        }

      })
    },
    getCertificationProcess1(){
      getCertificationProcess({teacherId:this.pid}).then(res=>{
        console.log(res)
        let data=res.data
        if(data.secondResult==0){
          this.status.secondResult=0
          if (data.offlineTutoring==0){
            this.status.offlineTutoring1=0
            if (data.endStatus==0){
              this.status.endStatus1=0
              this.status.reviewResult1=data.reviewResult
            }else if (data.endStatus==2){
              this.status.endStatus1=2
              this.status.reviewResult1=data.reviewResult
            }
          }
        }
      })
    }
  }
};
</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_draft2.png" alt="" v-if="status.draftStatus==2">
      <img src="../assets/images/first_draft1.png" alt="" v-if="status.draftStatus==0">
      <div :class="status.draftStatus==1?'tim1':status.draftStatus==2?'tim2':'tim'">{{status.draftStatus==1?'初稿未上传':status.draftStatus==2?'初稿已退回':'初稿已上传'}}</div>
    </div>
    <div :class="status.draftStatus==1?'line1':status.draftStatus==2?'line':'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">
      <img src="../assets/images/E-learning2.png" alt="" v-if="status.onlineLearning==2">
      <div :class="status.onlineLearning==1?'tim1':status.onlineLearning==2?'tim3':'tim'">{{status.onlineLearning==1?'线上学习未完成':status.onlineLearning==2?'线上学习进行中':'线上学习已完成'}}</div>
    </div>
    <div :class="status.onlineLearning==1?'line1':status.onlineLearning==2?'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">
      <img src="../assets/images/final_draft2.png" alt="" v-if="status.endStatus==2">
      <div :class="status.endStatus==1?'tim1':status.endStatus==2?'tim2':'tim'">{{status.endStatus==1?'终稿未上传':status.endStatus==2?'终稿已退回':'终稿已上传'}}</div>
    </div>
    <div :class="status.endStatus==1?'line1':status.endStatus==2?'line1':'line'"></div>
    <div class="process">
      <img src="../assets/images/certification.png" alt="" v-if="status.reviewResult==3">
      <img src="../assets/images/certification.png" alt="" v-if="status.reviewResult==2">
      <img src="../assets/images/certification3.png" alt="" v-if="status.reviewResult==1">
      <img src="../assets/images/certification4.png" alt="" v-if="status.reviewResult==0">
      <div :class="status.reviewResult==3?'tim1':status.reviewResult==2?'tim1':status.reviewResult==1?'tim2':'tim4'">
        {{status.reviewResult==3?'认证':status.reviewResult==2?'认证':status.reviewResult==1?'认证未通过':'认证已通过'}}</div>
    </div>
    <div :class="status.reviewResult==3?'line1':status.reviewResult==2?'line1':status.reviewResult==1?'line':'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_draft2.png" alt="" v-if="status.endStatus1==2">
      <img src="../assets/images/final_draft.png" alt="" v-if="status.endStatus1==1">
      <div :class="status.endStatus1==1?'tim1':status.endStatus1==2?'tim2':'tim'">{{status.endStatus1==1?'终稿未上传':status.endStatus1==2?'终稿已退回':'终稿已上传'}}</div>
    </div>
    <div :class="status.endStatus1==1?'line1':status.endStatus1==2?'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/certification.png" alt="" v-if="status.reviewResult1==2">
      <img src="../assets/images/certification3.png" alt="" v-if="status.reviewResult1==1">
      <img src="../assets/images/certification4.png" alt="" v-if="status.reviewResult1==0">
      <div :class="status.reviewResult1==3?'tim1':status.reviewResult1==2?'tim1':status.reviewResult1==1?'tim2':'tim4'">
        {{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;
  }
  .tim4 {
    font-weight: 400;
    font-size: 14px;
    color: #31AF0D ;
    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>