提交新添加的课程学习页面

api/modules/courseStudy.js

@@ -58,6 +58,10 @@ const importSignup = function(data) {
     return ajax.post('/xboe/school/study/signup/import',data);
 }
 
+/**进入学习首页的后的调用*/
+const studyIndex = function(courseId) {
+    return ajax.get('/xboe/school/study/course/studyIndex?cid='+courseId+'&addView=true');
+}
 
 /**
  * 课程学习，根据课程id来获取,
@@ -328,6 +332,7 @@ export default {
     findSignup,
     deleteSignup,
     importSignup,
+	studyIndex,
     studyInfo,
     studyVideoTime,
     lastStudy,

pages.json

@@ -73,7 +73,8 @@
 		{"path" : "pages/login/nickName","style" : {"navigationBarTitleText": "修改昵称"}},
 		{"path" : "pages/login/newBirt","style" : {"navigationBarTitleText": "修改生日"}},
 		{"path" : "pages/login/indLabels","style" : {"navigationBarTitleText": "修改个人标签"}},
-		{"path" : "pages/study/audioTest","style" : {"navigationBarTitleText": "音频测试"}}
+		{"path" : "pages/study/audioTest","style" : {"navigationBarTitleText": "音频测试"}},
+		{"path" : "pages/study/courseStudy","style" : {"navigationBarTitleText": "课程学习"}}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/study/courseStudy.vue

@@ -0,0 +1,496 @@
+<template>
+	<!--新的课程学习页面，没有中间的详细页面了，课程点过来就是这个，用户未报名就直接报名-->
+	<view>
+		<watermark></watermark>
+		<u-toast ref="messager"></u-toast>
+		<page-title :showBack="true">{{courseInfo.name}}</page-title>
+		<view class="playbox"><!--内容播放区域-->
+			 <view style="min-height: 400upx;">
+				 内容插入区域
+			 </view>
+		</view>
+		<view class="contentbox">
+			<view class="tabrow">
+				<view class="tabrow-item"><text class="tabrow-active">简介</text></view>
+				<view class="tabrow-item"><text>评论</text></view>
+			</view>
+			<!--简介内容-->
+			<view class="cinfo">
+				<view class="cinfo-title">
+					{{courseInfo.name}}
+					<text class="cinfo-tag1">通用力</text>
+					<text class="cinfo-tag2">职场技能</text>
+				</view>
+				<view class="desrow">
+					<view>
+						<text class="desrow-name">目标人群：</text><text>所有群体</text>
+					</view>
+					<view style="color: #999999;;">200+人学习</view>
+				</view>
+				<view class="desrow">
+					<view>
+						<text class="desrow-name">讲师：</text><text>李玉冰</text><text>(显示事件)</text>
+					</view>
+					<view style="color: #387DF7;;">+关注</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>
+					</view>
+				</view>
+				<view class="desrow">
+					<view style="font-size: 32upx;color: #333333;">目录</view>
+					<view style="font-size: 28upx;color: #666666;">全部&gt;</view>
+				</view>
+				<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">
+						<!-- <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)">
+									<!---->
+									<view :style="{width:scrollItemWidth+'px'}" class="scroll-item" :class="{'studying':curContent.id==con.id}">
+										<view class="scroll-item-sec">{{con.cataName}}
+										<!-- <text v-if="con.cataStatus && con.cataStatus==1" class="status-tag" :class="statusClass(con.cataStatus)">未开始</text>
+										<text v-if="con.cataStatus && con.cataStatus==2" class="status-tag" :class="statusClass(con.cataStatus)">进行中</text> 
+										<text v-if="con.cataStatus && con.cataStatus==9" class="status-tag" :class="statusClass(con.cataStatus)">已完成</text> -->
+										</view>
+										<view class="scroll-item-con">
+											<view class="scroll-item-name">
+												{{con.contentName}}
+											</view>
+										<!-- 	<view class="scroll-item-type">
+												<view class="square-border">
+													<view :class="statusClass(con.status)">
+														{{getConType(con.contentType)}}
+													</view>
+												</view>
+												<text v-if="con.status==1" class="status-tag" :class="statusClass(con.status)">未开始</text>
+												<text v-if="con.status==2" class="status-tag" :class="statusClass(con.status)">进行中</text> 
+												<text v-if="con.status==9" class="status-tag" :class="statusClass(con.status)">已完成</text>
+											</view> -->
+										</view>
+									</view>
+								</view>
+						<!-- </view> -->
+					</scroll-view>
+				</view>
+				<!--推荐课程-->
+				<view>
+					<course-list :items="recommendCourse"></course-list>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import apiCoursePortal from '@/api/modules/coursePortal.js'
+	import apiCourseStudy from '@/api/modules/courseStudy.js'
+	import apiVideoStudy from "@/api/modules/videoStudy.js";
+	import apiCourseGrade from "@/api/modules/courseGrade.js";
+	import apiCourseFile from "@/api/modules/courseFile.js";
+	import apiUser from '@/api/system/user.js'
+	import apiResOwner from '@/api/modules/resowner.js'
+	import apiPraises from "@/api/modules/praises.js";
+	import apiTrample from "@/api/modules/trample.js";
+	import {getContentType} from "@/utils/tools.js";
+	import studyUtil from '@/utils/study.js';
+	import {toScore} from '@/utils/tools.js';
+	import {mapGetters} from 'vuex'
+	export default {
+		data(){
+			return{
+				courseId:'',//当前课程的id
+				studyId: '',//当前学习的id
+				initContentId:'',//初始化的内容id
+				courseInfo:{id:'',name:''},//课程信息
+				teachers:[],//课程老师列表
+				recommendCourse:[],//推荐课程列表
+				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:'',
+					status:1
+				},//当前的内容
+				conLink:{openType:1,url:''},//外连接内容
+				curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
+				
+				totalContent:0,//课程内容数量
+				authorInfo:{aid:'',name:'',code:'',orgInfo:''},
+				
+				sectionList:[],
+				contentList:[],
+				videoScore:3,
+				videoPlayer:null,
+				videoPlayingTime:0,
+				speedListShow:false,
+				speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
+				videoSpeed: 1.0, // 当前倍速:
+				tabIndex:0,
+				catalogShow:false,//是否显示目录
+				scoreInfo:{
+				  dlgShow:false,
+				  score:5,
+				  has:false,
+				},
+				isPraise:false,
+				isTrample:false,
+				interactRuning:false,
+				scrollInfo:{
+					scrollLeft: 0,
+					scrollWidth: 0
+				},
+				handleTimeout:null,
+				isAppendTime:true,
+				appendStartTime: null, //记录追加的开始时间
+				appendHandle:null,
+				appentId:'',//当前追加的学习时长的id
+				appentInterval:30000,//追加学习时间的间隔 30秒加一次
+				preTime:-1
+			}
+		},
+		computed: {
+			...mapGetters(['userInfo']),
+			catalogTree(){
+				let treeList=[];
+				let $this=this;
+				$this.sectionList.forEach(sec=>{
+				  let treeNode={section:sec,children:[]}
+				  sec.status = 1;
+				  let finishCount = 0;
+				  $this.contentList.forEach(c=>{
+					if (c.csectionId == sec.id) {
+					  if (c.status > 1) {
+						sec.status = 2;
+						if(c.status == 9){
+						  finishCount++;
+						}
+					  }
+					  treeNode.children.push(c);
+					}
+				  });
+				  if (finishCount == treeNode.children.length) {
+					sec.status = 9;
+				  }
+				  treeList.push(treeNode);
+				})
+				return treeList;
+			},
+			scrollList(){
+				  let list=[];
+				  this.catalogTree.forEach((cata)=>{
+					  cata.children.forEach((child,childIdx)=>{
+						  if(childIdx==0){
+							child.cataName=cata.section.name;
+							child.cataStatus=cata.section.status;
+						  }else{
+							child.cataName='';
+						  }
+						  list.push(child)
+					  })
+				  });
+				  return list;
+			},
+		},
+		onLoad(options) {
+			//this.$watermark.set(this.userInfo.name+ this.userInfo.loginName);
+			this.scrollItemWidth=(this.$width-100)/2;//横向滚动的内容块宽度
+			this.treePopupWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
+			if(options.contentId){
+				this.initContentId=options.contentId;
+			}
+			this.courseId=options.id;
+			this.courseInfo.id=options.id;
+			this.loadDetail();
+		},
+		onShow(){
+			uni.setNavigationBarTitle({ title:'\u200E' })
+			//实时渲染当前的播放状态
+		},
+		onReady() {
+			this.videoPlayer=uni.createVideoContext("myVideo", this);
+		},
+		methods:{
+			loadDetail(){
+				let $this=this;
+				uni.showLoading({title:'加载中...'})
+				apiCourseStudy.studyIndex(this.courseId).then(rs=>{
+					if(rs.status != 200) {
+						uni.hideLoading();
+						$this.$refs.messager.show({message:rs.message,type:'error'});
+						return;
+					}
+					if(rs.result.contents.length==0){
+						$this.$refs.messager.show({message:'课程内容已删除或课程已不再使用',type:'error'});
+						return;
+					}
+					if(!rs.result.course.enabled){
+						$this.$refs.messager.show({message:'十分抱歉，此课程已停用，如需使用，请联系管理员。',type:'error'});
+						return;
+					}
+					$this.courseInfo=rs.result.course;
+					//处理老师数据
+					$this.teachers=rs.result.teachers;
+					if(rs.result.teachers && rs.result.teachers.length > 0) {
+						let userIds = [];
+						let ctoUsers = [];
+						rs.result.teachers.forEach(item => {
+							// item.aid='';
+							item.name= '';
+							item.orgInfo= '';
+							item.avatar= '';
+							item.code= '';
+							item.sex=null;
+							userIds.push(item.teacherId);
+							ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
+						});
+						//this.toUsers = ctoUsers;
+						this.loadAuthorInfo(rs.result.teachers, userIds);
+					}
+					let showConId=this.initContentId;
+					if(rs.result.course.type >10){
+						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;
+							}
+						  });
+						})
+					}else if(rs.result.course.type==10){
+						let indexNum=0;
+						let delIndexs=[];
+						rs.result.contents.forEach((c,cidx) => {
+						  c.status = 0; //
+						  c.studyItemId = '';
+						  c.lastStudyTime = 0;
+						  if(c.sortIndex==1){
+						    c.contentName=rs.result.course.name;
+						    indexNum++;
+						    if(indexNum>1){
+						      delIndexs.push(cidx);
+						    }
+						  }else if(c.sortIndex==2){
+						    c.contentName='作业';
+						  }else if(c.sortIndex==3){
+						    c.contentName='考试';
+						  }else if(c.sortIndex==4){
+						    c.contentName='评估';
+						  }
+						});
+						if(delIndexs.length>0){
+						  delIndexs.forEach(delIdx=>{
+						    rs.result.contents.splice(delIdx,1);
+						  })
+						}
+					}
+					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;
+							}
+						}
+						
+					}
+					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 = [];
+						let ctoUsers = [];
+						rs.result.teachers.forEach(item => {
+							// item.aid='';
+							item.name= '';
+							item.orgInfo= '';
+							item.avatar= '';
+							item.code= '';
+							item.sex=null;
+							userIds.push(item.teacherId);
+							ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
+						});
+											// this.toUsers = ctoUsers;
+						this.loadAuthorInfo(rs.result.teachers, userIds);
+					 }
+					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;
+						}
+				      });
+				    })
+					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{
+					this.$refs.messager.show({message:rs.message,type:'error'});
+				  }
+				  
+				})
+			},
+			loadReCourses(){
+				//apiCoursePortal.
+			},
+			loadAuthorInfo(list, ids) {
+			    //加载作者信息，头像，机构信息
+				if (ids.length == 0) {
+					return;
+				}
+				apiUser.getByIds(ids).then(res => {
+					if (res.status == 200) {
+					  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.avatar= author.avatar;
+								item.code= author.code;
+								item.sex=author.sex;
+								if(author.avatar != '') {
+									item.avatar=this.$config.fileUrl + author.avatar;
+								}
+								return true;
+							}else{
+								return false;
+							}
+						});
+					  });
+					} else {
+					  //console.log('加载课程信息失败:'+res.error);
+					  //this.$message.error(res.message);
+					}
+				});
+			},
+			loadUserInfo(uid){
+				apiUser.getByIds([uid]).then(res=>{
+				  if(res.status==200){
+					this.authorInfo=res.result[0];
+				  }
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	body{
+		background-color: #fff;
+	}
+	.playbox{
+		padding: 34upx;
+		background-color: #000000;
+	}
+	.contentbox{
+		padding: 34upx;
+		background-color: #fff;
+	}
+	.tabrow{
+		display: flex;
+		border-bottom:1px solid #999999;
+		font-size: 28upx;
+		.tabrow-active{
+			font-size: 32upx;
+			color: #387DF7;
+			border-bottom: 4upx solid #007DFF;
+		}
+		.tabrow-item{
+			margin-right: 20upx;
+			line-height: 60upx;
+			text{
+				padding-bottom: 10upx;
+			}
+		}
+	}
+	.cinfo{
+		.cinfo-title{
+			color:#333333;
+			font-size: 32upx;
+			padding: 28upx 0upx;
+		}
+		.cinfo-tag1{
+			font-size: 22upx;
+			color: #6E7B84;
+			background: rgba($color: #387DF7, $alpha: 0.1);
+			border-radius: 16upx;
+			margin-left: 12upx;
+			margin-right: 12upx;
+			padding: 2upx 12upx;
+		}
+		.cinfo-tag2{
+			font-size: 22upx;
+			color: #D98135;
+			background: rgba($color: #FF7900, $alpha: 0.1);
+			border-radius: 16upx;
+			margin-right: 12upx;
+			padding: 4upx 12upx;
+		}
+		.desrow{
+			display: flex;
+			justify-content: space-between;
+			padding: 26upx 0upx;
+			.desrow-name{
+				color: #666666;
+				font-size: 28upx;
+			}
+			.score{
+				color:#FB7303;
+				margin-left: 10upx;
+				font-weight: 700; font-size: 32upx;
+			}
+		}
+	}
+</style>