mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-12 04:16:45 +08:00
388 lines
13 KiB
Vue
388 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<div style="display: flex;justify-content:space-between; padding: 12px 32px 10px 18px;">
|
||
<div style="display: flex;justify-content: flex-start;">
|
||
<span class="title-myqalist">我报名的</span>
|
||
<div style="margin-left:5px">
|
||
<el-select v-model="courseType" class="uc-select" clearable placeholder="类型">
|
||
<el-option label="全部类型" value='1'></el-option>
|
||
<!-- <el-option label="微课" :value="10"></el-option> -->
|
||
<el-option label="录播课" :value="20"></el-option>
|
||
<!-- <el-option label="在线课" value="online-course"></el-option> -->
|
||
<!-- <el-option label="面授课" value="face-course"></el-option>
|
||
<el-option label="学习项目" value="project"></el-option> -->
|
||
<el-option label="线下课" :value="30"></el-option>
|
||
<el-option label="学习项目" :value="40"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<el-select style="margin-left:12px" class="uc-select" v-model="status" clearable placeholder="学习进度">
|
||
<el-option label="所有进度" value='0'></el-option>
|
||
<el-option label="未开始" :value="1"></el-option>
|
||
<el-option label="进行中" :value="2"></el-option>
|
||
<el-option label="已完成" :value="9"></el-option>
|
||
<!-- <el-option label="已停用" :value="3"></el-option> -->
|
||
</el-select>
|
||
<div style="padding-left: 12px;"><el-input class="uc-input" v-model="params.courseName" clearable placeholder="搜索名称"></el-input></div>
|
||
<div style="padding-left: 12px;"><el-button type="primary" class="search-btn" icon="el-icon-search" @click="findStudys(true)">搜索</el-button></div>
|
||
<div style="padding-left: 12px"><el-button type="primary" class="search-btn" icon="el-icon-refresh-right" @click="reset()">重置</el-button></div>
|
||
</div>
|
||
</div>
|
||
<div class="uc-list" v-loading="loading">
|
||
<div class="uc-course" v-for="(item,idx) in couresList" :key="idx">
|
||
<div class="uc-course-img" style="width: 260px;height:144px" @click="jumpRouter(item)">
|
||
<course-image :course="item"></course-image>
|
||
<div class="uc-type">
|
||
<span v-if="item.courseType==10">录播</span>
|
||
<span v-if="item.courseType==20">录播</span>
|
||
<span v-if="item.courseType==30">线下课</span>
|
||
<span v-if="item.courseType==40">学习项目</span>
|
||
</div>
|
||
</div>
|
||
<div class="uc-course-info" @click="jumpRouter(item)">
|
||
<div class="uc-course-name" style="cursor: pointer;">
|
||
|
||
<div style="flex:1;">
|
||
<a v-html="$keywordActiveShow(item.courseName,params.courseName)" class="uc-title two-line-ellipsis"></a>
|
||
</div>
|
||
</div>
|
||
<div style="padding-top:6px" class="uc-course-text"><i class="el-icon-time" style="margin-right:4px"></i>报名时间：{{ formatsec(Number(item.startTime) * 1000 )}}</div>
|
||
<div style="width: 80%;margin-top: 20px;display: flex;">
|
||
<div style="color: #333333;font-size: 14px;">当前进度：</div>
|
||
<div style="width:170px;padding-top: 5px;">
|
||
<el-progress :percentage="item.progress" color="#FFA050"></el-progress>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="uc-course-btns">
|
||
<div style="text-align: right;">
|
||
<!-- <el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button> -->
|
||
<el-dropdown trigger="click" style="display: none;">
|
||
<span class="el-dropdown-link">
|
||
<svg-icon style="margin-right: 0;font-size:26px;" icon-class="spot"></svg-icon>
|
||
</span>
|
||
<el-dropdown-menu slot="dropdown" class="dropdown-box">
|
||
<el-dropdown-item command="a">
|
||
<el-button class="del" @click.stop="delItem(item,idx)" type="text" icon="el-icon-delete" size="mini" title="删除"></el-button>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
<span @click.stop="jumpRouter(item)">
|
||
<!-- <el-button style="margin-top:30px" v-if="item.progress==0" type="primary" size="small">开始学习</el-button> -->
|
||
<el-button style="margin-top:30px" v-if="item.progress<100" type="primary" size="small">继续学习</el-button>
|
||
<el-button style="margin-top:30px" v-if="item.progress==100" type="primary" size="small">回顾</el-button>
|
||
</span>
|
||
</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="page.pageIndex"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="page.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="page.count">
|
||
</el-pagination>
|
||
</div>
|
||
<div class="list-wu">
|
||
<div v-if="loading"> <span>加载中...</span> </div>
|
||
<div v-else class="home-no-list">
|
||
<div v-if="page.count==0 && !loading">
|
||
<div v-if="isSearch">
|
||
<p class="text" style="color: #333333;margin-top:50px;font-size: 14px">未找到您要搜索的内容</p>
|
||
</div>
|
||
<div v-else >
|
||
<img class="img" style="width:360px;height:226px" :src="`${webBaseUrl}/images/homeWu/no-madel.png`" alt="" srcset="">
|
||
<p class="text" style="color: #333333;margin-top:50px;font-size: 14px">您还没有报名课程哦～</p>
|
||
</div>
|
||
</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 apiManage from '@/api/manage/manage.js';
|
||
import studyImage from '@/components/Course/studyImage.vue';
|
||
import courseImage from "@/components/Course/courseImage.vue";
|
||
import {formatsec} from '@/utils/datetime.js'
|
||
export default {
|
||
name: 'ucStudyCourses',
|
||
components: { studyItem,studyImage,courseImage },
|
||
data() {
|
||
return {
|
||
courseType: '',
|
||
status: '',
|
||
formatsec:formatsec,
|
||
isSearch:false,
|
||
loading: true,
|
||
fileUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||
page: {
|
||
pageIndex: 1,//第几页
|
||
pageSize: 10, // 每页多少条
|
||
count: 0
|
||
},
|
||
dataList: [],//总数据
|
||
isNextPage: false,
|
||
isListOne: true,
|
||
params: { courseName: '', courseType: '',status:''},
|
||
couresList: [],//显示的数据
|
||
};
|
||
},
|
||
mounted() {
|
||
this.findStudys(true);
|
||
},
|
||
methods: {
|
||
delItem(item,itemIdx){
|
||
this.$confirm('您确定要删除所选课程吗？', '删除提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() =>{
|
||
if(item.source==1){ //老系统删除
|
||
//this.$message({ type: 'error', message: '此类型的报名删除还无对接接口'});
|
||
apiBoeCourse.newDelLearning(item.courseId).then(res=>{
|
||
if(res.status==200){
|
||
this.$message({ type: 'success',center: true, message: '课程删除成功!' });
|
||
this.couresList.splice(itemIdx,1);
|
||
} else {
|
||
this.$message({ type: 'error', message: res.message });
|
||
}
|
||
});
|
||
}else if(item.source==2){ //本地删除
|
||
apiCourseStudy.deleteSignUp(item.id,item.courseId).then(res =>{
|
||
if(res.status==200){
|
||
this.$message({ type: 'success', message: '删除成功!' });
|
||
this.couresList.splice(itemIdx,1);
|
||
} else {
|
||
this.$message({ type: 'error', message: res.message });
|
||
}
|
||
})
|
||
}else if(item.source==3){ //管理端删除
|
||
var reqData={ pid:item.courseId, student:item.accountId }
|
||
apiManage.userDeleteStudy(reqData).then(res=>{
|
||
if(res.code==200){
|
||
this.$message({ type: 'success', message: '删除成功!' });
|
||
this.couresList.splice(itemIdx,1);
|
||
}else{
|
||
this.$message({ type: 'error', message: '删除失败!' });
|
||
}
|
||
})
|
||
}else{
|
||
this.$message({ type: 'error', message: '此报名未关联源，请与管理员联系'});
|
||
}
|
||
|
||
})
|
||
},
|
||
findStudys(flag){ //新的
|
||
if(flag){
|
||
this.page.pageIndex=1;
|
||
}
|
||
this.isSearch=false;
|
||
let reqData={
|
||
courseName:this.params.courseName,
|
||
courseType:this.courseType,
|
||
status:this.status,
|
||
progress:'',
|
||
pageIndex:this.page.pageIndex,
|
||
pageSize:this.page.pageSize
|
||
}
|
||
if(reqData.courseName || reqData.courseType || reqData.status){
|
||
this.isSearch=true;
|
||
}
|
||
this.loading=true;
|
||
apiCourseStudy.myStudysFromES(reqData).then(res=>{
|
||
if(res.status==200){
|
||
this.couresList=res.result.list;
|
||
this.page.count=res.result.count;
|
||
}else{
|
||
this.$message({ type: 'error', message: res.message });
|
||
}
|
||
this.loading=false;
|
||
})
|
||
},
|
||
|
||
jumpRouter(item) {
|
||
if(item.source==1){
|
||
location.href=`${this.webBaseUrl}/course/boeframe?id=${item.courseId}&type=${item.courseType}`
|
||
}else if(item.source==2){
|
||
this.$router.push({path:'/course/studyindex',query:{id:item.courseId}})
|
||
}else if(item.source==3){
|
||
//管理端跳转,只有30，没有40了
|
||
//let params=encodeURIComponent('routerId='+courseId);
|
||
//this.$router.push('/forward?to=/fe-student/pathdetails¶ms='+params);
|
||
let manageApi=process.env.VUE_APP_MANAGER_API_PATH;
|
||
let uparams=encodeURIComponent('courseId='+item.courseId);
|
||
this.$router.push('/forward?to='+manageApi+'/stu/project/redirectDetail¶ms='+uparams);
|
||
} else {
|
||
console.log('未识别的来源 '+item.source);
|
||
}
|
||
},
|
||
reset(){
|
||
this.params.courseName = '',
|
||
this.params.courseType = '',
|
||
this.params.status = '';
|
||
this.page.pageIndex = 1;
|
||
this.couresList = this.dataList;
|
||
this.courseType = '';
|
||
this.status = '';
|
||
this.findStudys();
|
||
},
|
||
handleSizeChange(val) {
|
||
this.page.pageSize = val;
|
||
this.page.pageIndex = 1;
|
||
this.findStudys();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.page.pageIndex = val;
|
||
this.findStudys();
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.title-myqalist{
|
||
font-size: 18px;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
line-height: 35px;
|
||
margin-right: 30px;
|
||
}
|
||
.uc-title{
|
||
word-break:break-all;
|
||
float: left;
|
||
}
|
||
.two-line-ellipsis{
|
||
// display: -webkit-box;
|
||
// white-space:pre-wrap;
|
||
overflow: hidden;
|
||
line-height: 30px;
|
||
text-overflow:ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
box-sizing: border-box;
|
||
}
|
||
.del{
|
||
color: #8590A6;
|
||
// margin-left: 70%;
|
||
font-size: 14px;
|
||
}
|
||
.uc-list{
|
||
padding-left: 22px;
|
||
margin-top: 30px;
|
||
}
|
||
.uc-course-type1{
|
||
width: 58px;
|
||
height: 26px;
|
||
font-size: 14px;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
}
|
||
.uc-course-type2{
|
||
width: 58px;
|
||
height: 26px;
|
||
font-size: 14px;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
}
|
||
.uc-course-type3 {
|
||
padding: 3px 15px;
|
||
background: #08a890;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
border-radius: 2px
|
||
}
|
||
.uc-course-type4 {
|
||
width: 58px;
|
||
height: 26px;
|
||
padding: 3px 15px;
|
||
background: #75aefe;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
border-radius: 2px
|
||
}
|
||
.list-wu{
|
||
text-align: center;
|
||
font-size: 20px;
|
||
margin-top: 70px;
|
||
color: #ccc;
|
||
}
|
||
.is-more{
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
height: 50px;
|
||
span{
|
||
padding: 10px 20px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 20px
|
||
}
|
||
}
|
||
.uc-badge {
|
||
margin-top: 10px;
|
||
margin-right: 40px;
|
||
}
|
||
.uc-course {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
// border-bottom: 1px solid #E8E8E8;
|
||
margin-right: 32px;
|
||
padding: 20px 0px 25px 0px ;
|
||
cursor: pointer;
|
||
.uc-course-img {
|
||
position: relative;
|
||
width: 260px;
|
||
::v-deep img {
|
||
// width: 200px;
|
||
// border: 1px solid #f4f4f5;
|
||
border-radius: 8px;
|
||
}
|
||
.uc-type{
|
||
position: absolute;
|
||
top: 0;
|
||
right:0;
|
||
width: 60px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
text-align: center;
|
||
background: #F99000;
|
||
border-radius: 2px 4px 2px 16px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.uc-course-info {
|
||
flex: 1;
|
||
margin-top: -3px;
|
||
line-height: 28px;
|
||
padding: 0px 25px;
|
||
.uc-course-name {
|
||
display: flex;
|
||
span{
|
||
width: 58px;
|
||
height: 26px;
|
||
margin-right: 8px;
|
||
}
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
.uc-course-text {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin-top: 19px;
|
||
}
|
||
}
|
||
.uc-course-btns {
|
||
// width: 150px;
|
||
|
||
}
|
||
}
|
||
</style>
|