<template>
|
<view style="display: flex;flex-direction: column;height: 100%;">
|
<!-- 自定义导航栏 -->
|
<view class="navBarBox">
|
<!-- 状态栏占位 -->
|
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
|
<!-- 真正的导航栏内容 -->
|
<view style="display: flex; flex-direction: column;">
|
<view class="navBar">
|
<u-icon name="arrow-left" color="black" size="17" style="margin-left: 8px;" @click="goBack" />
|
<view class="barText">信息详情</view>
|
<!-- <view >
|
<u-button type="text" @click="loginOut" style="color: blue;margin-right: 5px;">退出</u-button>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
<!-- <video-player ref="playerRef" @update-time="handleUpdateTime"></video-player>-->
|
<view class="videoWrap" v-if="courseList && courseList.length>0">
|
<video ref="videoRef" :key="moduleKey" id="myVideo" :poster="videoUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'" style="width: 100%" :src="videoUrl" @timeupdate="handleTimeChange" :initial-time="initTime" :play-strategy="2" @play="handlePlay" @pause="handleUpdate" @ended="handleUpdate" controls></video>
|
<!-- <view class="videoBox">-->
|
<!-- <template v-if="!videoPause">-->
|
<!-- <view class="masterPic">-->
|
<!-- <image class="img" :src="videoCover" mode="scaleToFill"></image>-->
|
<!-- </view>-->
|
<!-- <image class="startIcon" src="/static/image/bofang.png" mode="scaleToFill" @click="startFirstVideo"></image>-->
|
<!-- </template>-->
|
<!-- <template v-else>-->
|
<!-- <view class="video-js" ref="video" style="width: 100%;height: 100%;"></view>-->
|
<!-- </template>-->
|
<!-- </view>-->
|
<view class="viden-info" v-if="showDetail">
|
<view class="viden-info-t">{{detail.name}}</view>
|
<view class="viden-info-i">创建时间：{{detail.createTime}}</view>
|
</view>
|
</view>
|
<view class="m-p-15" v-if="courseList && courseList.length>0">
|
<view class="chapterList">
|
<view class="chapterItem" v-for="(item,index) in courseList" :key="index">
|
<view class="chapterName">{{item.chapterName }}</view>
|
<view class="courseList">
|
<view class="courseItem" :class="{ selected: i.periodId === selectedPeriodId }" v-for="(i,idx) in item.studentStudyPeriodVOList" :key="idx" @click="getLesson(item.chapterId,item.courseId,i.periodId,i.resourceId)">
|
<view class="c-i-l">
|
<u-icon name="play-circle" :color="i.periodId == selectedPeriodId?'#fff':'#007aff'" size="24" style="margin-left: 0"></u-icon>
|
<view>{{i.periodName}}</view>
|
</view>
|
<view class="c-i-r">
|
<u-line-progress style="width: 45px" height="10" :percentage="i.progress" activeColor="#19be6b"></u-line-progress>
|
<span>{{secondsToHms(i.period)}}</span>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view v-else>
|
<u-empty
|
mode="list"
|
icon="http://cdn.uviewui.com/uview/empty/list.png"
|
>
|
</u-empty>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import cover from '../../../static/defaultCover.jpg'
|
import {getClassList} from "../../../api";
|
import {getCourseDetail, getLessonDetail, postNewStudy, postUpdateStudy} from "../../../api/current";
|
import videoPlayer from "./video";
|
export default {
|
components: {
|
videoPlayer,
|
},
|
data() {
|
return {
|
videoContext: null,
|
videoCover: cover,
|
showDetail: false,
|
phaseId: null,
|
currentTime: null,
|
selectedChapterId: null,
|
selectedCourseId: null,
|
selectedPeriodId: null,
|
selectedResourceId: null,
|
initTime: 0,
|
courseList: [],
|
course: {},
|
detail: {},
|
videoBaseUrl: 'http://192.168.2.16:9000/trainexam/',
|
videoUrl: '',
|
status: false,
|
beforeAudio: true,
|
duration: 0,
|
progress: 0,
|
xpjAudio: null,
|
videoPause: false,
|
removeArea:{
|
x: 0,
|
y: 0,
|
},
|
statusBarHeight: 0,
|
moduleKey: 0
|
};
|
},
|
onReady(){
|
this.videoContext = uni.createVideoContext('myVideo',this)
|
|
},
|
onLoad(e) {
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
this.phaseId = e.phase_id && JSON.parse(decodeURIComponent(e.phase_id));
|
|
},
|
onShow(){
|
|
},
|
mounted() {
|
this.getData();
|
},
|
computed: {
|
|
},
|
beforeUnmount() {
|
|
},
|
|
beforeDestroy() {
|
|
},
|
|
methods: {
|
videoErrorCallback: function(e) {
|
uni.showModal({
|
content: e.target.errMsg,
|
showCancel: false
|
})
|
},
|
handleTimeChange(e){
|
this.currentTime = e.target.currentTime
|
},
|
handlePlay(){
|
const data = {
|
chapterId: this.selectedChapterId,
|
courseId: this.selectedCourseId,
|
periodId: this.selectedPeriodId,
|
phaseId: this.phaseId,
|
studentId: uni.getStorageSync('uid')
|
}
|
postNewStudy(data).then(re=>{
|
if(re.code == 200){
|
this.studyId = re.data
|
console.log('新建记录成功',this.studyId)
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
},
|
handleUpdate(){
|
const data = {
|
id: this.studyId,
|
periodId: this.selectedPeriodId,
|
phaseId: this.phaseId,
|
resourceId: this.selectedResourceId,
|
chapterId: this.selectedChapterId,
|
courseId: this.selectedCourseId,
|
studentId: uni.getStorageSync('uid'),
|
currentDuration: this.currentTime
|
}
|
postUpdateStudy(data).then(res=>{
|
if(res.code == 200){
|
console.log('上报成功')
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
},
|
getData(){
|
getCourseDetail({phaseStudentId: this.phaseId}).then(res => {
|
if(res.code == 200) {
|
if(res.data && res.data.length > 0){
|
this.courseList = res.data
|
let chapterId = this.courseList[0].chapterId
|
let courseId = this.courseList[0].courseId
|
let id = this.courseList[0].studentStudyPeriodVOList[0].periodId
|
let resourceId = this.courseList[0].studentStudyPeriodVOList[0].resourceId
|
if(id){
|
this.getLesson(chapterId,courseId,id,resourceId)
|
}
|
}else {
|
this.courseList = []
|
uni.showToast({
|
title: '本课程暂无可学习内容',
|
duration: 1000
|
});
|
}
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
},
|
|
getLesson(chapterId,courseId,id,resourceId){
|
// if(this.videoContext.src){
|
// this.videoContext.stop()
|
// this.videoContext.src = ''
|
// }
|
console.log(this.videoContext,666)
|
this.selectedChapterId = chapterId
|
this.selectedCourseId = courseId
|
this.selectedPeriodId = id;
|
this.selectedResourceId = resourceId
|
getLessonDetail({periodId: id}).then(res => {
|
if(res.code == 200) {
|
if(res.data){
|
this.detail = res.data
|
this.showDetail = true
|
this.$nextTick(() => {
|
this.videoUrl = this.videoBaseUrl + this.detail.resourcePath
|
this.moduleKey++
|
});
|
}
|
}else{
|
uni.$u.toast(res.message)
|
}
|
})
|
|
},
|
|
goBack(){
|
// uni.navigateBack({
|
// delta: 1
|
// });
|
uni.reLaunch({
|
url: uni.getStorageSync("prevPage") || '/pages/tabBar/firstPage/firstPage'
|
});
|
},
|
|
handleUpdateTime(time) {
|
console.log("当前播放时间:", time);
|
|
// 你可以在这里处理传递过来的播放时间
|
},
|
|
secondsToHms(seconds) {
|
seconds = Number(seconds);
|
const h = Math.floor(seconds / 3600);
|
const m = Math.floor(seconds % 3600 / 60);
|
const s = Math.floor(seconds % 3600 % 60);
|
|
const hDisplay = h > 0 ? String(h).padStart(2, '0') : '00';
|
const mDisplay = m > 0 ? String(m).padStart(2, '0') : '00';
|
const sDisplay = s > 0 ? String(s).padStart(2, '0') : '00';
|
return `${hDisplay}:${mDisplay}:${sDisplay}`;
|
},
|
|
changeSwiper() {
|
this.isVideoPlay = false;
|
},
|
formatTime(num) {
|
num = Math.floor(num)
|
let second = num % 60;
|
if (second < 10) second = '0' + second;
|
let min = Math.floor(num / 60);
|
if (min < 10) min = '0' + min;
|
return min + ":" + second;
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.navBarBox .navBar {
|
background-color:#fff;
|
height: 50px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
align-items: center;
|
box-shadow: 0 3px 12px rgba(0,0,0,0.05);
|
}
|
.barText{
|
margin-left: -20px;
|
flex: 1;
|
/* margin-left: 20px; */
|
text-align: center;
|
width: 85%;
|
font-size: 16px;
|
/* text-align: center; */
|
font-weight: 600;
|
}
|
.navBarBox .navBar .logo {
|
width: 82rpx;
|
height: 82rpx;
|
margin-right: 10rpx;
|
}
|
.videoWrap {
|
background: #fff;
|
|
.videoBox {
|
width: 100%;
|
height: 260px;
|
position: relative;
|
}
|
|
.viden-info{
|
padding: 15px;
|
box-sizing: border-box;
|
|
.viden-info-t{
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #007aff;
|
margin-bottom: 10px;
|
}
|
|
.viden-info-i{
|
color: #999;
|
}
|
}
|
}
|
.m-p-15{
|
width: 100%;
|
padding: 0 15px;
|
box-sizing: border-box;
|
}
|
.chapterList{
|
width: 100%;
|
background: #fff;
|
border-radius: 16px;
|
margin: 20px 0;
|
padding: 15px;
|
box-sizing: border-box;
|
box-shadow: 0 5px 10px rgba(150,150,150,.05);
|
|
.chapterItem{
|
padding-bottom: 15px;
|
margin-bottom: 15px;
|
border-bottom: 1px solid #f0f0f0;
|
box-sizing: border-box;
|
|
&:last-of-type{
|
margin-bottom: 0;
|
padding-bottom: 0;
|
border-bottom: none;
|
}
|
|
.chapterName{
|
font-size: 32rpx;
|
font-weight: bolder;
|
margin-bottom: 30rpx;
|
}
|
|
.courseList{
|
|
.courseItem{
|
height: 44rpx;
|
padding: 10px;
|
background: #f5f5f5;
|
border-radius: 4px;
|
margin-bottom: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
transition: .6s;
|
|
.c-i-l{
|
display: flex;
|
align-items: center;
|
view{
|
font-size: 28rpx;
|
line-height: 44rpx;
|
margin-left: 10px;
|
}
|
}
|
.c-i-r{
|
height: 100%;
|
display: flex;
|
justify-content: right;
|
align-items: center;
|
span{
|
font-size: 13px;
|
margin-left: 10px;
|
}
|
}
|
}
|
.selected{
|
background: #007aff;
|
color: #fff;
|
border-radius: 99rpx !important;
|
box-shadow: 3px 3px 12px rgba(51,133,217,.3), -2px -2px 6px #fff,inset 3px 3px 9px rgba(0,0,0,.1);
|
border: 1px solid #fff;
|
}
|
}
|
}
|
}
|
</style>
|
