LearnItem.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-09-20 14:29:26
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-01-03 15:10:43
 * @FilePath: /danger-manage-web/src/views/myLessons/components/LearnItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="item flex">
    <div class="title" style="text-align: center">{{ itemData.courseType||'-' }}</div>
    <div class="allone" style="position:relative">
      <!--<img v-if="itemData.dataKind==0" style="height: 18px" src="@/assets/img/ykao.png"/>-->
      <!--<img v-if="itemData.dataKind==1" style="height: 18px" src="@/assets/img/skao.png"/>-->
      <div class="content">{{itemData.dataKind==0?"培训课程":"随机考试"}}</div>
      <div class="border"></div>
      <div class="lesson zzz" style="width: 75%" :title="itemData.courseName">  {{ itemData.courseName }}</div>
    </div>
    <div class="time">发布时间：{{ itemData.createTime }}</div>
    <div class="bottom flex">
      <div v-if="itemData.state!=4 && !(itemData.state===3 && itemData.dataKind==='1')"  @click="click" class="btn" :class="{ again: yesOrNo }">
        {{ yesOrNo  }}
      </div>
    </div>
    <div
      class="img"
      :class="{
        no: itemData.state === 1,
        yes: itemData.state === 2,
        ygq:itemData.state === 3,
        wks:itemData.state === 4,
      }"
    >
      {{ state[itemData.state] }}
    </div>
    <AnswerLesson
      v-if="answerOpen"
      :courseId="itemData.courseId"
      :userCourseId="itemData.userCourseId"
      :courseName = "itemData.courseName"
      :visible.sync="answerOpen"
      @jj="jj"
    />
  </div>
</template>

<script>
  import AnswerLesson from "./AnswerLesson";
export default {
  name: "",
  components: {
    AnswerLesson,
  },
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {
          again: 2,
        };
      },
    },
    state: {
      type: Object,
    },
  },
  computed: {
    yesOrNo() {
      console.log(this.itemData)
      if(this.itemData.dataKind==="0"){
        if( this.itemData.state === 0){
          return '开始学习'
        }else if(this.itemData.state === 1){
          return '查看课程'
        }else if(this.itemData.state === 2){
          return '查看课程'
        }else if(this.itemData.state === 3){
          return '开始学习'
        }else if(this.itemData.state === 4){
          return '还未开始'
        }
      }else{
        if( this.itemData.state === 0){
          return '开始考试'
        }else if(this.itemData.state === 1){
          return '重新考试'
        }else if(this.itemData.state === 2){
          return '重新考试'
        }else if(this.itemData.state === 3){
          return '开始学习'
        }else if(this.itemData.state === 4){
          return '还未开始'
        }
      }

    },
  },
  data() {
    return {
      answerOpen:false
    };
  },
  methods: {
    jj(e) {
      if (e.answer >= e.qualifiedNum) {
        this.fenshu = Math.floor((e.answer / e.topicNum) * 100);
        this.state = 2;
      }
    },
    click() {
      if(this.itemData.dataKind==='1'){
        this.answerOpen = true;
        return;
      }
      const { courseId, userCourseId, state, examinationResult, topicNum } =
        this.itemData;
      // if (!this.yesOrNo) {
        // this.$router.push("myLessons/CheckLesson");

        let fenshu;
        if (examinationResult) {
          fenshu = Math.floor((examinationResult / topicNum) * 100);
        } else {
          fenshu = 0;
        }
        this.$router.push({
          path: "myLessons/CheckLesson",
          query: { courseId, userCourseId, state, fenshu },
        });

      // } else {
      //   this.$emit("examination", { courseId, userCourseId });
      // }
      // $router.push("myLessons/CheckLesson");
    },
  },
};
</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  height: 100%;
  // background: red;
  overflow: hidden;
  padding-top: 15px;
  padding-left: 18px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  flex-direction: column;
  position: relative;
  > div {
    font-size: 14px;
  }
  .title {
    color: #606266;
    margin-bottom: 8%;
  }
  .lesson {
    color: #1d84ff;
    text-align: center;
    margin-bottom: 3%;
  }
  .time {
    text-align: center;
    font-size: 12px;
    color: #7b808a;
    margin-bottom: 5%;
  }
  .bottom {
    flex: 1;
    justify-content: center;
    .btn {
      width: 110px;
      height: 40px;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      line-height: 40px;
      color: #1d84ff;
      border: 1px solid #a3d3ff;
      background: #e8f4ff;
      font-size: 14;
      cursor: pointer;
      &.again {
        color: #ffffff;
        border: 1px solid #a3d3ff;
        background: #1d84ff 100%;
      }
      &:hover {
        background: rgba(29, 132, 255, 0.5);
        color: #ffffff;
      }
    }
  }
  .allone{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
  }
  .img {
    position: absolute;
    width: 100px;
    height: 20px;
    background: #1d84ff;
    // opacity: .2;
    top: 3%;
    right: -7%;
    text-align: center;
    line-height: 20px;
    font-size: 10px;
    color: #ffffff;
    transform: rotateZ(40deg);
    &.no {
      background: #e2852a;
    }
    &.yes {
      background: #3cc426 !important;
    }
    &.ygq {
      background: red !important;
    }
    &.wks {
      background: yellow !important;
    }
  }
}
.border {
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent transparent #1d84ff;
}
.border:after {
  content: '';
  border-style: solid;
  border-width: 10px;
  border-color: transparent transparent transparent  #fff;
  position: absolute;
  top: 0px;
  left: 49px;
}
  .content{
    border: 1.5px solid #1d84ff;
    height: 20px;
    font-size: 10px;
    color: #1d84ff;
    line-height: 18px;
  }

</style>