safetyEducationExamination/src/views/safetyEducationExaminationNew/workbench/ResourceCard.vue

<!-- 实验室安全素养资源卡 -->
<template>
  <div class="resource-card">
    <div class="resource-card-page">
      <div class="card-title">实验室安全素养资源</div>
      <div class="table-max-big-box">
        <p class="table-for-p" :class="topCheckIndex == index ? 'check-table-p':''"
           @click="topTableButton(index)"
           v-for="(item,index) in tableList" :key="index">{{item.disciplineName}}</p>
        <p class="table-null-p"></p>
      </div>
      <div class="resource-body-top">
        <div class="left-resource-box">
          <div class="resource-title-box">
            <p class="el-icon-folder-opened"></p>
            <p>学习资料</p>
            <p @click="goPage(1)">查看更多</p>
          </div>
          <div class="for-max-big-box" @click="tableButton(item)"
               v-for="(item,index) in topLeftList" :key="index">
            <div class="left-box">
              <p v-if="item.materialType == 1" class="el-icon-video-play"></p>
              <p v-if="item.materialType == 3" class="el-icon-document"></p>
              <p v-if="item.materialType == 4" class="el-icon-reading"></p>
            </div>
            <div class="center-box">
              <p>{{ item.coursewareName }}</p>
              <p>{{ item.materialType == 4?'文章':item.attachmentType.substring(1) }}</p>
            </div>
            <div class="right-box">
              <p class="el-icon-time"></p>
              <p>{{secondsToMinutes(item.minLearningDuration)}}分钟</p>
            </div>
          </div>
        </div>
        <div class="right-resource-box">
          <div class="resource-title-box">
            <p class="el-icon-edit-outline"></p>
            <p>学习资料</p>
            <p @click="goPage(2)">查看更多</p>
          </div>
          <div class="for-max-big-box" v-for="(item,index) in topRightList" :key="index" @click="goPage(4,item)">
            <p class="el-icon-notebook-2"></p>
            <p>{{item.knowledgePointName}}</p>
            <p>{{item.questionCount}} 题</p>
          </div>
        </div>
      </div>
    </div>
    <div class="resource-card-page">
      <div class="card-title">视频学习资源</div>
      <p class="skip-button" @click="goPage(3)">查看更多</p>
      <div class="table-max-big-box">
        <p class="table-for-p"  :class="bottomCheckIndex == index ? 'check-table-p':''"
           @click="bottomTableButton(index)"
           v-for="(item,index) in tableList" :key="index">{{item.disciplineName}}</p>
        <p class="table-null-p"></p>
      </div>
      <div class="resource-body-bottom">
        <div class="for-max-big-box"  @click="tableButton(item)"
             v-for="(item,index) in bottomList" :key="index">
          <img v-if="item.exampleImg" :src="item.exampleImg">
          <img v-else src="@/assets/ZDimages/basicsModules/image_420782143223404.png">
          <div>
            <p>{{item.coursewareName}}</p>
            <p>{{secondsToMinutes(item.minLearningDuration)}}分钟 丨 {{item.creditHours}}学时 丨 {{item.points}}积分</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    examElDisciplineTypeList,examUserCoursewareLearningRestart,
    examUserCoursewareLearningList,examElQuestionBankGroupByKnowledgePoint,
  } from "@/api/safetyEducationExaminationNew/index";
export default {
  name: 'ResourceCard',
  data() {
    return {
      topCheckIndex:0,
      bottomCheckIndex:0,
      tableList:[],
      tableListBottom:[],
      topLeftList:[],
      topRightList:[],
      bottomList:[],
    }
  },
  mounted(){
    this.examElDisciplineTypeList();
  },
  methods:{
    //顶部选项切换
    topTableButton(index){
      if(this.topCheckIndex != index){
        this.$set(this,'topCheckIndex',index);
        this.leftExamUserCoursewareLearningList();
        this.examElQuestionBankGroupByKnowledgePoint();
      }
    },
    bottomTableButton(index){
      if(this.bottomCheckIndex != index){
        this.$set(this,'bottomCheckIndex',index);
        this.rightExamUserCoursewareLearningList();
      }
    },
    tableButton(item){
      let self = this;
      if(item.learnStatus == 2){
        this.$confirm('该课件已学完,是否重置进度重新学习?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          examUserCoursewareLearningRestart({coursewareId:item.coursewareId}).then(response => {
            self.$router.push({
              path: '/learningMaterials',
              query: {
                coursewareId: item.coursewareId,
              }
            })
          });
        }).catch(() => {});
      }else{
        this.$router.push({
          path: '/learningMaterials',
          query: {
            coursewareId: item.coursewareId,
          }
        })
      }
    },
    goPage(type,item){
      //1.文章文档 2.刷题 3.视频 4.知识点指向刷题
      if(type == 1){
        this.$router.push({
          path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
          query: {
            skip: true,
          }
        })
      }else if(type == 2){
        this.$router.push({
          path: '/safetyEducationExaminationNew/safetyTest/practiceQuestions',
          query: {}
        })
      }else if(type == 3){
        this.$router.push({
          path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
          query: {}
        })
      }else if(type == 4){
        this.$router.push({
          path: '/safetyEducationExaminationNew/safetyTest/practiceQuestions',
          query: {
            knowledgePointId:item.knowledgePointId,
          }
        })
      }
    },
    //文章
    leftExamUserCoursewareLearningList(){
      let obj = {
        page:1,
        pageSize:5,
        materialType:2,
        disciplineTypeId:this.tableList[this.topCheckIndex].id,
      }
      examUserCoursewareLearningList(obj).then(response => {
        this.$set(this, 'topLeftList', response.data.records)
      })
    },
    //视频
    rightExamUserCoursewareLearningList(){
      let obj = {
        page:1,
        pageSize:6,
        materialType:1,
        disciplineTypeId:this.tableList[this.bottomCheckIndex].id,
      }
      examUserCoursewareLearningList(obj).then(response => {
        this.$set(this, 'bottomList', response.data.records)
      })
    },
    //知识点题库
    examElQuestionBankGroupByKnowledgePoint(){
      let obj = {
        page:1,
        pageSize:6,
        disciplineTypeId:this.tableList[this.topCheckIndex].id,
      }
      examElQuestionBankGroupByKnowledgePoint(obj).then(response => {
        this.$set(this, 'topRightList', response.data.records)
      })
    },
    //类型选项卡数据
    examElDisciplineTypeList(){
      examElDisciplineTypeList({}).then(response => {
        this.$set(this, 'tableList', response.data)
        this.leftExamUserCoursewareLearningList();
        this.rightExamUserCoursewareLearningList();
        this.examElQuestionBankGroupByKnowledgePoint();
      })
    },
    //换算分钟
    secondsToMinutes(totalSeconds) {
      if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
        return 1;
      }
      return Math.ceil(totalSeconds / 60);
    },
  },
}
</script>

<style scoped lang="scss">
.resource-card {
  .resource-card-page{
    background: #fff;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e8edf5;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(37, 50, 74, 0.06);
    padding:20px;
    position: relative;
    .skip-button{
      position: absolute;
      top:50px;
      right:25px;
      color:#409EFF;
      cursor: pointer;
      font-size: 14px;
      line-height:50px;
    }
    .card-title {
      font-size: 16px;
      font-weight: 700;
      line-height:20px;
      color: #333;
      margin-bottom:20px;
    }
    .table-max-big-box{
      display: flex;
      p{
        height:40px;
        padding:0 20px;
        line-height:40px;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        text-align: center;
      }
      .table-for-p:nth-child(1){
        border-left:1px solid #E4E7ED;
        border-top-left-radius:4px;
      }
      :nth-last-child(2){
        border-top-right-radius:4px;
      }
      .table-for-p{
        border-top:1px solid #E4E7ED;
        border-right:1px solid #E4E7ED;
        border-bottom:1px solid #E4E7ED;
        cursor: pointer;
      }
      .table-null-p{
        flex:1;
        border-bottom:1px solid #E4E7ED;
      }
      .check-table-p{
        color:#0183fa!important;
        border-bottom:none!important;
      }
    }
    .resource-body-top{
      height:500px;
      border-left:1px solid #E4E7ED;
      border-right:1px solid #E4E7ED;
      border-bottom:1px solid #E4E7ED;
      display: flex;
      .left-resource-box{
        flex:1;
        padding:10px 15px 20px 20px;
        overflow: hidden;
        .for-max-big-box{
          margin-top:15px;
          border: 1px solid #e8edf3;
          border-radius: 10px;
          padding: 14px;
          display: flex;
          align-items: flex-start;
          gap: 12px;
          cursor: pointer;
          transition: all 0.2s;
          background: #fafbfd;
          .left-box{
            width:40px;
            height:40px;
            border-radius: 8px;
            background: #eef3ff;
            text-align: center;
            p{
              font-size: 20px;
              color: #5b95f7;
              line-height:40px;
              text-align: center;
            }
          }
          .center-box{
            flex: 1;
            p:nth-child(1){
              font-size: 14px;
              color: #25324a;
              font-weight: 500;
              display: block;
              margin-bottom: 5px;
              /*单行省略号*/
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            p:nth-child(2){
              font-size: 12px;
              color: #93a0b5;
            }
          }
          .right-box{
            display: flex;
            margin-top:20px;
            p{
              font-size: 12px;
              line-height:20px;
              color: #60708a;
            }
            p:nth-child(1){
              margin-right:4px;
            }
          }
        }
        .for-max-big-box:hover{
          border-color:#5b95f7;
          background-color: #f0f6ff;
          box-shadow: 0 2px 8px rgba(91,149,247,0.1);
        }
      }
      .right-resource-box{
        flex:1;
        padding:10px 20px 20px 15px;
        overflow: hidden;
        .for-max-big-box:nth-child(even){
          margin:15px 15px 0 0!important;
        }
        .for-max-big-box{
          margin-top:15px;
          border: 1px solid #e8edf3;
          border-radius: 10px;
          padding: 16px 14px;
          display: inline-block;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          transition: all 0.2s;
          background: #fafbfd;
          text-align: center;
          width:348px;
          height:127px;
          p:nth-child(1){
            width:36px;
            height:36px;
            font-size:18px;
            border-radius: 50%;
            background-color: #eef3ff;
            color:#5b95f7;
            text-align: center;
            line-height:36px;
            margin-top:5px;
          }
          p:nth-child(2){
            font-size: 13px;
            color: #25324a;
            font-weight: 500;
            margin-top:10px;
          }
          p:nth-child(3){
            font-size: 12px;
            color: #93a0b5;
            margin-top:5px;
          }
        }
        .for-max-big-box:hover{
          border-color:#5b95f7;
          background-color: #f0f6ff;
          box-shadow: 0 2px 8px rgba(91,149,247,0.1);
        }
      }
      .resource-title-box{
        display: flex;
        border-bottom:1px solid #E4E7ED;
        p{
          font-size: 14px;
          line-height:50px;
        }
        p:nth-child(1){
          color: #5b95f7;
          margin-right:10px;
        }
        p:nth-child(2){
          flex:1;
          color: #25324a;
          font-weight: 600;
        }
        p:nth-child(3){
          color:#409EFF;
          cursor: pointer;
        }
      }
    }
    .resource-body-bottom{
      height:500px;
      border-left:1px solid #E4E7ED;
      border-right:1px solid #E4E7ED;
      border-bottom:1px solid #E4E7ED;
      .for-max-big-box{
        display: inline-block;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(37, 50, 74, 0.08);
        transition: transform 0.2s;
        margin:15px 0 0 15px;
        img{
          display: block;
          height: 164px;
          width: 356px;
        }
        div{
          padding: 12px;
          p:nth-child(1){
            font-size: 13px;
            color: #25324a;
            font-weight: 500;
            margin-bottom: 4px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          p:nth-child(2){
            font-size: 11px;
            color: #93a0b5;
          }
        }
      }
      .for-max-big-box:hover{
        transform:translateY(-2px),
      }
    }
  }
}
</style>