learning-system-portal/src/views/lecturer/Index.vue

<script>
import {mapGetters} from "vuex";
import courseImage from "@/components/Course/courseImage.vue";
import {getCertificationProcess, pageList} from "@/api/modules/lecturer"
export default {
  name: "index",
  components: {courseImage},
  data(){
    return{
      fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
      params: { teacherNo:'',courseName:'', pageIndex: 1, pageSize: 10,  },
      total:'',
      // reviewResult 0-通过，1-未通过，2-进行中 3-已报名
      couresList:[
        {
          coverImg:'',
          reviewResult:'3',
          name:'《2024.06认证》',
          courseIntroduction:'这是2024年关于XX的讲师认证活动的具体说明',
          createTime:'2024.03.20 18:00'
        },
        {
          coverImg:'',
          reviewResult:'2',
          name:'《关于自我能力提升》',
          courseIntroduction:'1、掌握用PPT高效制作工作报告的流程步骤；2、应用金字塔原理、美化设计原则来制作PPT工作报告；3、学会应用演示小技巧完成一个工作报告的演示汇报',
          createTime:'2024.03.20 18:00'
        },
        {
          coverImg:'',
          reviewResult:'0',
          name:'《BOEU-线上TTT系列学习之《如何讲好一门课》》',
          courseIntroduction:'1、掌握用PPT高效制作工作报告的流程步骤；2、应用金字塔原理、美化设计原则来制作PPT工作报告；3、学会应用演示小技巧完成一个工作报告的演示汇报',
          createTime:'2024.04.18 14:00'
        },
        {
          coverImg:'',
          reviewResult:'1',
          name:'《互动教学设计》',
          courseIntroduction:'1、掌握用PPT高效制作工作报告的流程步骤；2、应用金字塔原理、美化设计原则来制作PPT工作报告；3、学会应用演示小技巧完成一个工作报告的演示汇报',
          createTime:'2024.04.10 14:00'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getList();
  },
  methods:{

    jumpRouter(teacherId){
      this.$router.push({
        path:'/need/draft',
        query:{teacherId:teacherId}
      })
    },
    //列表
    getList(){
      this.params.teacherNo=this.userInfo.userNo
      pageList(this.params).then(res=>{
        this.couresList=res.data.page.records
        this.total=res.data.page.total
      })
    },
    //重置
    closePageFind(){
      this.params.courseName = '';
      this.params.pageIndex = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.params.pageIndex = val;
      this.getList();
    },
  }
}
</script>

<template>
  <div>
    <div v-if="this.couresList.length==0">
      <div>
        <div class="zan-wu">暂无数据</div>
      </div>
    </div>
    <div style="display: flex;justify-content:space-between;position: relative;" v-if="this.couresList.length!=0">
      <div style="display: flex;justify-content: flex-start;  padding: 12px 32px 10px 12px;">
        <div style="margin-left:10px"><el-input v-model="params.courseName" placeholder="请输入认证课程名称" clearable ></el-input></div>
        <div style="padding-left: 10px;"><el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button></div>
        <div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" @click="closePageFind">重置</el-button></div>
      </div>
    </div>
    <div v-if="this.couresList.length!=0">
      <div class="uc-course" v-for="(item, idx) in couresList" :key="idx" >
        <div class="uc-course-img" style="width: 212px;height:119px">
<!--          <course-image :course="item"></course-image>-->
           <img :src="fileBaseUrl + item.cover.match(/\upload(\S*)/)[1]">
        </div>
        <div class="uc-course-info">
          <div class="uc-course-name">
            <span class="ytg" v-if="item.reviewResult == 0">【已通过】</span>
            <span class="wtg" v-if="item.reviewResult == 1">【未通过】</span>
            <span class="jxz" v-if="item.reviewResult == 2">【认证中】</span>
            <span class="ybm" v-if="item.reviewResult == 3">【已报名】</span>
            <!-- <a :href="`${webBaseUrl}/course/detail?id=${item.id}`" target="_blank"> {{item.name}}</a> -->
            <span style="font-size:18px;color:#333">{{ item.draftStatus==1?item.examineName:item.courseName }}</span>
          </div>
          <div class="summary-item">
            <div>{{ item.draftStatus==1?item.description:item.courseIntroduction  }}</div>
          </div>
          <div class="uc-course-text">
            {{ item.reviewResult==3||item.reviewResult==1?'报名时间':'认证时间' }}：{{ item.reviewResult==3||item.reviewResult==1?item.createTime:item.reviewTime }}
            <span type="text" style="margin-left:10px;font-size:14px;cursor: pointer;color:#b6b6b6" v-if="item.reviewResult==1||item.reviewResult==0">查看认证记录</span>
            <span type="text" style="margin-left:10px;font-size:14px;cursor: pointer;color:#3da8f0" v-if="item.reviewResult==3" @click="jumpRouter(item.teacherId)">填写信息</span>
            <span type="text" style="margin-left:10px;font-size:14px;cursor: pointer;color:#3da8f0" v-if="item.reviewResult==2">查看</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="couresList.length > 0" style="text-align: center; margin-top:57px;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-wu{
  text-align: center;
  margin: 40px;
  color: #333;
}
.ybm {
  color: #2ab28b;
  font-size: 18px;
}
.wtg {
  color: #fd0000;
  font-size: 18px;
}
.jxz {
  font-size: 18px;
  color: #1378f6;
}

.ytg {
  font-size: 18px;
  color: #1378f6;
}

.Create-coures {
  position: absolute;
  right: 32px;
}
.uc-badge {
  margin-top: 10px;
  margin-right: 40px;
}
.uc-course {
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #e8e8e8;
  padding: 20px 0px 15px 0px;
  margin: 0 32px 0 22px;
  ::v-deep .uc-course-img {
    width: 212px;
    img {
      width: 212px;height:119px;
      border: 1px solid #f4f4f5;
    }
  }
  .uc-course-info {
    flex: 1;
    line-height: 28px;
    padding: 0px 10px;
    .summary-item {
      padding-top: 10px;
      height: 40px;
      line-height: 15px;
      color: #7d7d7d;
      font-size: 14px;
      overflow: hidden;
      width: 90%;
      word-break:break-all;
      display: -webkit-box;
      // overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .uc-course-name {
      font-size: 16px;
      display: -webkit-box;
      white-space:pre-wrap;
      // word-wrap: break-word;
      overflow: hidden;
      text-overflow:ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break:break-all;
      // font-weight: 700;
    }
    .uc-course-text {
      color: #666;
      margin-top: 28px;
    }
  }
  .uc-course-btns {

    text-align: right;
    .btn1 {
      height: 44px;
      padding: 10px 15px;
    }
    .btn2 {
      height: 44px;
      padding: 10px 15px;
    }
    .btn {
      height: 44px;
      padding: 10px 15px;
    }
  }
}
</style>