hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-08 18:36:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

提交修改

Browse Source
This commit is contained in:
daihh
2022-11-13 18:16:03 +08:00
parent df9605a584
commit e8db5b31a2
2 changed files with 252 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
pages/study/courseStudy.vue
View File

@@ -24,21 +24,28 @@
</view>
<view class="desrow">
<view>
<text class="desrow-name">目标人群：</text><text>所有群体</text>
<text class="desrow-name">目标人群：</text>
<text class="desrow-value">{{courseInfo.forUsers}}</text>
</view>
<view style="color: #999999;;">200+人学习</view>
<view style="color: #999999;min-width: 160upx;text-align: right;">{{formatUserNumber(courseInfo.studys)}}人学习</view>
</view>
<view class="desrow">
<view class="desrow" style="justify-content: flex-start;">
<view><text class="desrow-name">讲师：</text></view>
<view style="flex: 1;">
<view v-for="tea in teachers" :key="tea.id" style="display: flex;justify-content: space-between;">
<view>
<text class="desrow-name">讲师：</text><text>李玉冰</text><text>(显示事业)</text>
<text class="desrow-value">{{tea.teacherName}}</text>
<text class="desrow-value">({{tea.orgInfo}})</text>
</view>
<view style="color: #387DF7;;">+关注</view>
</view>
</view>
</view>
<view class="desrow">
<view style="display: flex;">
<text class="desrow-name">课程评分：</text>
<u-rate :count="5" color="#FB7303" :size="16" v-model="scoreInfo.score"></u-rate>
<text class="score">4.9</text>
<u-rate v-if="scoreInfo.score>0" :count="5" color="#FB7303" :size="16" v-model="scoreInfo.score"></u-rate>
<text class="score">{{toScore(scoreInfo.score)}}</text>
</view>
</view>
<view v-if="totalContent>1" class="desrow">
@@ -68,7 +75,7 @@
</view>
<view v-else >
<view v-if="scrollItemWidth>0" class="main-cata-active">
<scroll-view scroll-x :scroll-y="false" style="height:115px;white-space: nowrap;overflow: hidden;" :scroll-left="scrollInfo.scrollLeft" @scrolltoupper="scrollLeft" @scrolltolower="scrollRight" @scroll="scrollHandler">
<scroll-view scroll-x :scroll-y="false" style="height:115px;white-space: nowrap;overflow: hidden;" :scroll-left="scrollInfo.scrollLeft" @scroll="scrollHandler">
<!-- <view class="mycrollcontent" style="display: flex;justify-content:flex-start;"> -->
<view v-for="(con,conIdx) in scrollList" :key="conIdx" style="display: inline-block;" :id="con.id" @click="playContent(con.cataName,con,conIdx,0)">
<!---->
@@ -135,7 +142,7 @@
</view>
<view class="catalogbox">
<view v-if="courseInfo.type>10" class="catalog">
<view v-for="(cata,catIdx) in catalogTree" :key="catIdx" style="border-bottom: 1px solid #ebebeb;margin-bottom: 50rpx;padding-bottom: 30upx;">
<view v-for="(cata,catIdx) in catalogTree" :key="catIdx" style="border-bottom: 1px solid #ebebeb;padding-bottom: 30upx;">
<view class="catalog-sec" style="margin-bottom: 20rpx;">
<view class="catalog-sec-name" >
<!-- <text>{{catIdx+1}}, </text> -->
@@ -179,13 +186,13 @@
</view>
</view>
</view>
<view style="height: 50px;"></view>
</view>
</view>
</view>
<!--推荐课程-->
<view v-if="tabIndex==1" style="padding: 30upx;background-color: #fff;">
<view v-if="tabIndex==1 && !catalogShow" style="padding: 30upx;background-color: #fff;">
<view style="color: #333333; font-size: 32upx;font-weight: 600;padding-bottom: 20upx;">课程推荐</view>
<course-list :items="recommendCourses"></course-list>
</view>
@@ -230,7 +237,7 @@
import apiFavorites from '@/api/modules/favorites.js'
import {getContentType} from "@/utils/tools.js";
import studyUtil from '@/utils/study.js';
import {toScore} from '@/utils/tools.js';
import {toScore,cutOrgNamePath,formatUserNumber} from '@/utils/tools.js';
import {mapGetters} from 'vuex'
export default {
data(){
@@ -252,18 +259,18 @@
isFavorite:false,//是否已收藏
isFollow:false,//是否已关注
toScore:toScore,
formatUserNumber:formatUserNumber,
getConType:getContentType,
isPlaying:false,
onplay:false,
touchNum : 0,
playerBoxShow:false,
toScore:toScore,
summarylogShow: false,
scrollItemWidth:this.$width,
treePopupWidth:'400px',
fileBaseUrl:this.$config.fileUrl,
getConType:getContentType,
curSection:{},//当前所在的章
curContent:{
studyItemId:'',
@@ -380,11 +387,11 @@
return;
}
$this.courseInfo=rs.result.course;
$this.scoreInfo.score=rs.result.course.score;
//处理老师数据
$this.teachers=rs.result.teachers;
if(rs.result.teachers && rs.result.teachers.length > 0) {
let userIds = [];
let ctoUsers = [];
//let ctoUsers = [];
rs.result.teachers.forEach(item => {
// item.aid='';
item.name= '';
@@ -393,11 +400,13 @@
item.code= '';
item.sex=null;
userIds.push(item.teacherId);
ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
//ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
});
this.toUsers = ctoUsers;//关注老师，关注多个考试
this.loadAuthorInfo(rs.result.teachers, userIds);
//this.toUsers = ctoUsers;
$this.loadAuthorInfo(rs.result.teachers, userIds);
$this.teachers=rs.result.teachers;
}
let showConId=this.initContentId;
if(rs.result.course.type >10){
rs.result.sections.forEach(sec=>{
@@ -442,6 +451,27 @@
this.contentList=rs.result.contents;//内容列表
this.totalContent=rs.result.contents.length;//一共有向个可以播放的内容
this.sectionList=rs.result.sections;
//处理学习内容
this.studyId = rs.result.studyId;
this.contentList.forEach(con=>{
rs.result.contentStudys.forEach((scon,sconIdx)=>{
//第一条就是最近学习的
if(sconIdx==0 && $this.initContentId==''){
//$this.curContent=con;
//查询对应的章节
}
if(scon.contentId==con.id){
con.lastStudyTime = scon.lastStudyTime;
//以下判断是为了兼容之前的问题，学习状态
if(scon.status){
con.status = scon.status;
}else{
con.status = 9;
}
con.studyItemId=scon.id;//这个就是学习内容（条目）的id
}
})
});
//设置正在学习的章节
if(showConId==''){
this.curContent=this.contentList[0];
@@ -459,64 +489,85 @@
uni.hideLoading();
});
apiCoursePortal.detail(this.courseId).then(rs=>{
setTimeout(function(){uni.hideLoading()},1000);
if(rs.status==200){
// uni.setNavigationBarTitle({ title:rs.result.course.name })
this.courseInfo=rs.result.course;
//老师信息
this.teachers=rs.result.teachers;
if(rs.result.teachers && rs.result.teachers.length > 0) {
let userIds = [];
rs.result.teachers.forEach(item => {
item.name= '';
item.orgInfo= '';
item.avatar= '';
item.code= '';
item.sex=null;
userIds.push(item.teacherId);
});
this.loadAuthorInfo(rs.result.teachers, userIds);
},
playContent(cata,con,conIndex,catIndex){
if(conIndex!=undefined && catIndex!=undefined) {
if(this.courseInfo.orderStudy) {
let hasIndex=-1;
this.scrollList.some((one,idx)=>{
if(one.id==con.id){
hasIndex=idx;
return true;
}
return false;
})
if(hasIndex>0){
let pre=this.scrollList[hasIndex-1];
if(pre.status!=9){
this.$refs.messager.show({message:'请按顺序学习',type:'error'});
return;
}
}
}
}
this.loadUserInfo(this.courseInfo.sysCreateAid);
//设置必须的字段
let showConId=this.initContentId;
rs.result.sections.forEach(sec=>{
sec.status=1;//加入状态表未开始
rs.result.contents.forEach(c=>{
c.status=1;//初始化状态 ，未开始
c.studyItemId='';//初始化字段，学习条目id
c.lastStudyTime=0;
if(showConId!='' && c.id==showConId){
$this.curContent=c;
$this.curSection=sec;
// console.log(con,'con');
if(this.videoPlayer){
//console.log('切换视频');
this.videoPlayer.stop();
}
this.playerBoxShow=false;
if(con.contentType==40){
//如果是文档，需要再次加载pdf
if(con.content!='' && con.content.indexOf('.pdf')==-1){
// 先置空，否则会有延迟
con.content = '';
apiCourseFile.detail(con.contentRefId).then(cfrs=>{
if(cfrs.status==200){
con.content=cfrs.result.previewFilePath;
//console.log(r.content);
}else{
$this.$refs.messager.show({message:'加载pdf课件文件失败',type:'error'});
}
});
})
this.contentList=rs.result.contents;
this.totalContent=rs.result.contents.length;
this.sectionList=rs.result.sections;
//设置正在学习的章节
if(showConId==''){
this.curContent=this.contentList[0];
this.curSection=this.sectionList[0];
//要不要在这里处理？
if(this.curContent.contentType==10 || this.curContent.contentType==20){
if(this.contentList[0].content.startsWith('\{')){
this.curriculumData=JSON.parse(this.contentList[0].content);
}else{
this.curriculumData.url=this.contentList[0].content;
}
}else if(con.contentType==52){
if(con.content.startsWith('\{')){
this.conLink=JSON.parse(con.content);
}else{
this.conLink.url=con.content;
this.conLink.openType=1;
}
} else if(con.contentType==10 || con.contentType==20) {
if(con.content.startsWith('\{')){
this.curriculumData=JSON.parse(con.content);
}else{
this.curriculumData.url=con.content;
}
}
//this.curSection=cata;
this.curContent=con;
this.catalogShow=false;
this.scoreInfo.itemId=con.id;
if(this.curContent.status<2){
this.curContent.status=2; //设置状态 进行中
}
//横向滚动条定位
let len=0;
this.scrollList.some((sitem,idx)=>{
if(sitem.id==con.id){
len=idx;
return true;
}
return false;
})
this.scrollInfo.scrollLeft=len*this.scrollItemWidth+len*6;
if(con.contentType>20){
let $this=this;
//非视频，音频的5秒后学习完成
this.handleTimeout = setTimeout(function(){$this.saveStudyInfo();},5000);
}
}
}else{
this.$refs.messager.show({message:rs.message,type:'error'});
}
})
},
loadReCourses(){
let dto={
@@ -540,10 +591,8 @@
list.forEach((item, index) => {
res.result.some(author => {
if (author.aid == item.teacherId) {
// item.authorInfo = author;
// item.aid=author;
item.name= author.name;
item.orgInfo= author.orgInfo;
item.orgInfo=cutOrgNamePath(author.orgInfo);
item.avatar= author.avatar;
item.code= author.code;
item.sex=author.sex;
@@ -760,6 +809,10 @@
})
}
},
scrollHandler(e) {
//console.log(e);
this.scrollInfo = e.detail;
},
}
}
</script>
@@ -821,6 +874,10 @@
justify-content: space-between;
padding: 26upx 0upx;
.desrow-name{
color: #333333;
font-size: 28upx;
}
.desrow-value{
color: #666666;
font-size: 28upx;
}
@@ -871,6 +928,96 @@
}
}
.scroll-item{
// height: 125px;
margin: 3px;
.scroll-item-sec{
height: 20px;
// padding: 10upx;
margin-bottom: 30upx;
margin-right: 20upx;
// word-wrap: break-word;
// word-break:break-all;
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
.scroll-item-con{
width: 220rpx;
display:inline-flex;
border-radius: 8upx;
padding: 20upx;
// height: 60rpx;
// line-height: 60rpx;
background-color: #f4f5f7;
.scroll-item-name{
width: 100%;
height: 76rpx;
// white-space: pre-wrap;
word-break:break-all;
line-height: 40rpx;
overflow: hidden;
white-space: pre-wrap;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
font-size: 28upx;
// margin-bottom: 20upx;
}
.scroll-item-type{
font-size: 26upx;
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 1;
.square-border{
margin-right: 20upx;
display: flex;
justify-content: center;
align-items: center;
border:1px solid;
padding: 3px 5px;
.finish{
padding: 5upx;
}
.nostart{
padding: 5upx;
}
}
>.studying{
background-color: #FDF1D7;
color:#FFB30F;
}
>.finish{
background-color: #BED2F8;
color: #3C7EFF;
}
>.nostart{
background-color: #FFC8C8;
color:#EE474A;
}
.status-tag{
width: 88upx;
height: 38upx;
line-height: 38upx;
}
}
}
.color-studying{
// background: #FDF1D7;
color: #FFB30F;
}
.color-finish{
// background: #f3f9ff;
color: #666666;
}
.color-nostart{
// background: #ffe8e7;
color: #666666;
}
}
.catalog{
background: #FFFFFF;
padding:20upx;

28
utils/tools.js
View File

@@ -32,7 +32,7 @@ export function getCourseType(type) {
21: '直播课',
20: '录播课',
30: '面授课',
40: '混合式',
40: '学习项目',
};
return maps[type];
}
@@ -238,3 +238,29 @@ export function getHMS(time) {
const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
return hour + ':' + min + ':' + sec
}
/**格式化人数的文档 ，学习人数，关注人数等*/
export function formatUserNumber(num) {
let rsNum =0;
if(num<5){return 0;}
if(num>=5 && num<= 10){return 10 +"+";}
if(num<=94){
rsNum=Math.round((num)/10)*10;
return rsNum+'+';
}
if(num>94 && num <= 1000){
rsNum=Math.round((num)/100)*100;
return rsNum+'+';
}
if(num>1000 && num <= 10000){
rsNum=Math.round((num)/1000)*1000;
return rsNum+'+';
}
if(num>10000){
// rsNum=Math.round((num)/10000)*10000;
// return rsNum+'+';
rsNum=Math.round((num)/10000);
return rsNum+'W+';
}
return num;
}