mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-13 12:56:43 +08:00
278 lines
8.1 KiB
Vue
278 lines
8.1 KiB
Vue
<template>
|
||
<div class="study-index" v-loading="loading">
|
||
<Remark>
|
||
1.学员个人中心首页，当前简单，后续会美化<br/>
|
||
2.<br/>
|
||
3.<br/>
|
||
</Remark>
|
||
<!-- <div style="display: flex;justify-content:space-between; padding: 10px;">
|
||
<div style="display: flex;justify-content: flex-start;">
|
||
<div><el-input v-model="params.name" placeholder="查询名称"></el-input></div>
|
||
<div style="padding-left: 10px;">
|
||
<el-select v-model="params.type" clearable placeholder="请选择">
|
||
<el-option label="微课" value="1"></el-option>
|
||
<el-option label="在线课" value="2"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div style="padding-left: 10px;">
|
||
<el-button type="primary" icon="el-icon-search">查询</el-button>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-badge :value="2" class="uc-badge">
|
||
<el-button >未开始</el-button>
|
||
</el-badge>
|
||
<el-badge :value="3" class="uc-badge">
|
||
<el-button >学习中</el-button>
|
||
</el-badge>
|
||
<el-badge :value="1" class="uc-badge" type="primary">
|
||
<el-button >已完成</el-button>
|
||
</el-badge>
|
||
</div>
|
||
</div> -->
|
||
<!--课程列表内容-->
|
||
<div>
|
||
<!-- <div v-if="lastStudy.itemId && lastStudy.itemId!=''">
|
||
<p class="title"><i class="el-icon-caret-right"></i> 上次学习</p>
|
||
<div>
|
||
<div>
|
||
<span>【{{getCourseType(lastStudy.courseType)}}】 {{lastStudy.courseName}}, </span>
|
||
<span style="margin: 0px 10px;"> {{lastStudy.lastTime}} </span>
|
||
<span> {{lastStudy.contentName}} </span>
|
||
<span style="margin: 0px 10px;">
|
||
<el-link type="primary" :href="continueStudy(lastStudy)" target="_blank">继续学习</el-link>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<!-- <p class="title">
|
||
<router-link to="/uc/study/courses"><i class="el-icon-caret-right"></i> 正在学习</router-link>
|
||
<span v-if="couresList.length>5" class="more"><router-link to="/uc/study/courses">更多 ></router-link></span>
|
||
</p> -->
|
||
<div>
|
||
<!-- <div v-if="couresList.length>0" style="">
|
||
|
||
</div> -->
|
||
<!-- <div v-else style="text-align: center;padding: 20px;color: #ffaa00;">目前您没有正在学习的课程</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div>
|
||
<!-- <p class="title">
|
||
<router-link to="/uc/study/task"><i class="el-icon-caret-right"></i> 正在进行的任务</router-link>
|
||
<span v-if="taskList.length>5" class="more"><router-link to="/uc/study/task">更多 ></router-link></span>
|
||
</p> -->
|
||
<div>
|
||
<!-- <div v-if="taskList.length>0">
|
||
|
||
</div> -->
|
||
<!-- <div v-else style="text-align: center;padding: 20px;color: #ffaa00; ">目前您没有正在进行的任务</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import studyItem from '@/components/Course/studyItem.vue'
|
||
import apicourseStudy from '@/api/modules/courseStudy.js';
|
||
import apiBoeCourse from '@/api/boe/course.js';
|
||
import {resListMap, resOwnerListMap,courseType,getType} from '@/utils/tools.js';
|
||
import apiBoe from '@/api/boe/boeApiAjax.js';
|
||
import axios from 'axios'
|
||
import { mapGetters,mapActions} from 'vuex';
|
||
export default {
|
||
name: 'ucStudyIndex',
|
||
components:{studyItem},
|
||
data(){
|
||
return {
|
||
loading:false,
|
||
lastTabName:'course',
|
||
getCourseType:courseType,
|
||
lastStudy:{
|
||
aname: "",
|
||
contentId: "",
|
||
contentName: "",
|
||
contentType: 0,
|
||
courseId: "",
|
||
courseName: "",
|
||
courseType: "",
|
||
coverImg: "",
|
||
itemId: "",
|
||
lastStudyTime: 0,
|
||
lastTime: "",
|
||
progress: 100,
|
||
score: "",
|
||
studyDuration: "",
|
||
studyId: "",
|
||
},
|
||
params:{
|
||
pageIndex: 1,//第几页
|
||
pageSize: 5,
|
||
isFinish:false,
|
||
},
|
||
couresList:[],
|
||
couresCount:0,
|
||
taskList:[]
|
||
}
|
||
},
|
||
beforeCreate() {
|
||
this.loading = true;
|
||
let params={
|
||
// keyword:this.keyword,
|
||
page:1,
|
||
size:10,
|
||
// cmtask_status:this.cmtask_status,
|
||
// cmtask_name:this.cmtask_name,
|
||
}
|
||
|
||
apiBoeCourse.cmtaskList(params).then(res=>{
|
||
if(res.status==200){
|
||
this.total = res.result.count
|
||
this.couresList = res.result.list;
|
||
this.loading = false;
|
||
if(this.$route.fullPath != '/uc/study/task' && this.$route.fullPath != '/uc/study/courses' && this.$route.fullPath != '/study/index') {
|
||
return;
|
||
}
|
||
if(res.result.count > 0) {
|
||
this.$router.push('/uc/study/task')
|
||
} else {
|
||
if(this.$route.query.study == '1') {
|
||
this.$router.push('/uc/study/task')
|
||
} else {
|
||
this.$router.push('/uc/study/courses')
|
||
}
|
||
}
|
||
}else{
|
||
this.$router.push('/uc/study/courses')
|
||
}
|
||
}).catch(err=>{
|
||
if(this.$route.fullPath != '/uc/study/task' || this.$route.fullPath != '/uc/study/courses' || this.$route.fullPath != '/study/index') {
|
||
return;
|
||
}
|
||
this.$router.push('/uc/study/courses');
|
||
})
|
||
},
|
||
created() {
|
||
//this.$router.push('/uc/study/courses');
|
||
// this.searchData();
|
||
// this.getLastStudy();
|
||
// this.loadRemoteTask();
|
||
// this.loadResOwners();
|
||
// this.loadSysTypes();
|
||
|
||
},
|
||
methods:{
|
||
continueStudy(item){
|
||
// if(item.courseType==10){
|
||
// return '../course/micro?id='+item.courseId
|
||
// }else{
|
||
return '../course/studyindex?id='+item.courseId
|
||
// }
|
||
},
|
||
...mapActions({
|
||
getResOwnerTree:'resOwner/getResOwnerTree',
|
||
loadResOwners:'resOwner/loadResOwners',
|
||
getSysTypeTree:'sysType/getSysTypeTree',
|
||
loadSysTypes:'sysType/loadSysTypes'
|
||
}),
|
||
getLastStudy() {
|
||
apicourseStudy.lastStudy().then(res=>{
|
||
if(res.status === 200) {
|
||
this.lastStudy=res.result;
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
})
|
||
},
|
||
loadRemoteTask(){
|
||
//调用远程接口
|
||
// let url="http://u.boe.com/api/b1/system/cmtask/cmtask-list";
|
||
// let jsonData={
|
||
// cmtask_status:'',
|
||
// cmtask_name:'',
|
||
// page:1,
|
||
// size:10
|
||
// }
|
||
// axios.post(url,jsonData).then(rs=>{
|
||
// console.log(rs)
|
||
// })
|
||
// apiBoe.postJson(url,jsonData).then(rs=>{
|
||
// if(rs.status==200){
|
||
|
||
// }
|
||
// })
|
||
},
|
||
searchData() {
|
||
apicourseStudy.myStudyList(this.params).then(res=>{
|
||
if(res.status === 200) {
|
||
this.couresList =res.result.list;
|
||
this.couresCount = res.result.count;
|
||
} else {
|
||
this.$message.error(res.message);
|
||
}
|
||
})
|
||
},
|
||
lastTabChange(tab,event){
|
||
console.log(tab.name);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.study-index{
|
||
.title{
|
||
padding: 6px 10px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #707070;
|
||
border-bottom: 1px solid #dedede;
|
||
}
|
||
.more {
|
||
float: right;
|
||
margin-top: 7px;
|
||
color: #666666;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.uc-badge{
|
||
margin-top: 10px;
|
||
margin-right: 40px;
|
||
}
|
||
.uc-course{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
border: 1px solid #F0F0F0;
|
||
padding: 10px;
|
||
.uc-course-img{
|
||
width: 200px;
|
||
img{
|
||
width: 200px;
|
||
border: 1px solid #F4F4F5;
|
||
}
|
||
}
|
||
.uc-course-info{
|
||
flex: 1;
|
||
line-height: 28px;
|
||
padding: 0px 10px;
|
||
.uc-course-name{
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
.uc-course-text{
|
||
color: #747474;
|
||
}
|
||
}
|
||
.uc-course-btns{
|
||
width: 150px;
|
||
}
|
||
}
|
||
</style>
|