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

<script>
import {addTeacher, getCertificationProcess, getProgress, getTeacherInfo} from "@/api/modules/lecturer";

export default {
  name: "OnlineLearning",
  data(){
    return{
      teacherId:'',
      form:{
        teacherName:'',
        teacherNo:'',
        orgName:''
      },
      progressData:{},
      fileBaseUrl:process.env.VUE_APP_BOE_MOBILE_URL,
      disabled:false,
      statusInfo:''
    }
  },
  mounted() {
    //读取路由参数
    this.teacherId=this.$route.query.teacherId
    //获取教师基本信息
    this.baseInfo()
  },
  methods:{
    baseInfo(){
      getTeacherInfo({teacherId:this.teacherId}).then(res=>{
        /*
        * teacherName:教师姓名 teacherNo:教师工号 orgName:组织 positionName:岗位 bandCode:职级 courseName:认证课程名称 courseContent课程内容分类
        * courseIntroduction:课程简介
        * */
        this.form.teacherName=res.data[0].teacherName
        this.form.teacherNo=res.data[0].teacherNo
        this.form.orgName=res.data[0].orgName
        this.form.positionName=res.data[0].positionName
        this.form.bandCode=res.data[0].bandCode
        this.form.courseName=res.data[0].courseName
        this.form.courseContent=res.data[0].courseContent
        this.form.courseIntroduction=res.data[0].courseIntroduction
        this.form.coursewareName=res.data[0].examineCourseware.coursewareName
        //获取学习进度
        this.addTeacher()
      })
    },
    addTeacher(){
      addTeacher({pageNo:1,pageSize:10,keyword:this.form.teacherNo}).then(res=>{
        this.getProgress(res.data[0].id)
      })
    },
    getProgress(id){
      getProgress({teacherId:id}).then(res=>{
        this.progressData=res.data
        res.data.forEach((item,index)=>{
          if (item.progress!=100){
            this.disabled=true
            return
          }
        })
      })
    },
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`;
    },
    getJump(){
      this.$router.push({
        path:'/need/coaching',
        query:{teacherId:this.teacherId}
      })
    },
    toCaseData(courseId){
      this.$router.push("/course/studyindex?id=" + courseId);
    }
  }
}
</script>

<template>
  <div>
    <div class="title">基本信息</div>
    <el-container>
      <div class="form-table">
        <el-form label-width="140px">
          <div>
            <el-col :span="10">
              <el-form-item label="姓名：">
                {{form.teacherName}}
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-form-item label="工号：">
                {{form.teacherNo}}
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="组织：">
            {{form.orgName}}
          </el-form-item>
          <div>
            <el-col :span="10">
              <el-form-item label="岗位：">
                {{form.positionName}}
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="4">
              <el-form-item label="职级：">
                {{form.bandCode}}
              </el-form-item>
            </el-col>
          </div>
          <el-form-item label="认证课程名称："  prop="courseName">
            {{form.courseName}}
          </el-form-item>
          <el-form-item label="课程内容分类：" prop="courseContent">
            {{form.courseContent}}
          </el-form-item>
          <el-form-item label="课程简介：" prop="courseIntroduction">
            {{form.courseIntroduction}}
          </el-form-item>
          <el-form-item label="初稿课件：" prop="courseIntroduction">
            {{form.coursewareName}} <span style="color: #1378f6;display: inline-block;margin-left: 16px">查看</span>
          </el-form-item>
        </el-form>
      </div>
    </el-container>
    <div class="title" style="margin-top: 20px">线上课程</div>
    <div class="progress">
      <div v-for="(item,index) in progressData" :key="item">
        <div class="progress-item" @click="toCaseData(item.courseId)">
          <div class="uc-course-img" style="width: 212px;height:119px">
            <img style="width: 100%;" v-if="item.courseImage!=''" :src="item.courseImage">
            <img style="width: 100%;" v-else :src="fileBaseUrl+'/pc/images/bgimg/course.png'">
          </div>
          <div class="courseName">{{item.courseName}}</div>
          <div class="smallTitle">当前进度</div>
          <el-progress :percentage="item.progress" :format="format"></el-progress>
        </div>
      </div>
    </div>
    <div class="tip">
      {{ disabled==false?'提示：您的线上课程已经学习完毕，快去进行下一步吧':'提示：您的课程还未学习完毕，不能进行下一步！'}}
    </div>
    <el-button type="primary" :disabled="disabled" style="margin-top: 20px;margin-left: 80px" @click="getJump()">下一步</el-button>
  </div>
</template>

<style scoped lang="scss">
.title{
  font-size: 16px;
  font-weight: 800;
  width: 850px;
  border-bottom: 1px solid rgba(215, 215, 215, 0.66);
  padding: 2px 2px 20px 2px;
}
.form-table{
  width: 850px;
  margin-top: 20px;
}
.progress{
  display: flex;
  align-items: center;
  .progress-item{
    margin-top: 10px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.progress>div{
  max-width: 250px;
  margin-right: 20px;
}
.courseName{
  font-weight: 650;
  color: #333333;
  font-size: 14px;
  margin-top: 12px;
}
.smallTitle{
  color:#134054;
  font-size:12px;
  margin-top: 7px;
}
::v-deep .el-form-item__content{
  font-weight: 500;
}
::v-deep .el-form-item{
  margin-bottom: 0px;
}
.tip{
  color: #7d7c7c;
  font-size: 14px;
  margin-top: 20px;
}
</style>