<template>
<view>
<title-view title="课程详情"></title-view>
<view style="background-color: #ffffff">
<video autoplay @timeupdate="timeupdate" @ended="endStudy('end')" style="width: 100%" id="myVideo" :src="videoUrl"
controls></video>
<view>
<u-tabs @change="changeCurrentabs" lineColor="#222323" :list="trainListTabs"></u-tabs>
</view>
</view>
<view style="padding: 0 12px">
<view v-if="currentTab=='list'">
<view :style="{color:item.id==chooseVideoId?'#55aaff':(isSeeVideo(item)?'#c5c5c5':'#000000')}" @click="choseVideo(item)" v-for="(item,index) in videoList" style="margin-top: 10px;padding: 15px 15px;background-color: #ffffff;display: flex;align-items: center;justify-content: space-between">
<view style="font-size: 13px">
[{{index+1}}]<text>{{item.title}}</text>
</view>
<view style="font-size: 13px">
<text>{{item.totalDuration?new Date(item.totalDuration*1000).format('mm:ss:qq'):"00:00:00"}} </text>
<image mode="widthFix" style="width: 10px;height: 10px"></image>
</view>
</view>
</view>
<view v-if="currentTab=='introduct'" style="margin-top: 10px">
<view style="font-size: 12px">
<view v-if="trainingId" style="background-color: #ffffff;padding: 13px 10px;display: flex;justify-content: space-between;align-items: center;border-radius: 10px">
<view>
{{exerciseTitle}}
</view>
<view @click="handleConfirmInfo" style="background-color: #ffffff;border: 1px solid #d9ecff;color: #3e9ffd;padding: 5px 10px;border-radius: 5px">
开始测试
</view>
</view>
<view style="background-color: #ffffff;padding: 13px 10px;margin-top: 10px;">
<view style="font-size: 14px;font-weight: bold;margin-bottom: 10px">
屠场日常规范教程
</view>
<view style="color: #8a8a8a;line-height: 21px">
{{remarks}}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import TitleView from '@/components/titleView.vue'
import { getCourseDetail, getVideoHistroyList, putEndStudy } from '../../common/api/course/courseDetail'
import { replaceUrl, showToast } from '../../common/utils/methods'
export default {
components: {
TitleView
},
data() {
return {
trainListTabs:[{
name:'课程目录',
value:'list'
},{
name: '课程简介',
value:'introduct'
}],
currentTab:'list',
courseId:null,
videoList:[],
remarks:'',
exerciseTitle:'',
trainingId:null,
videoUrl:'',
initialTime:0,
histroyVideoList:[],
videomessage:null,
learningDuration:0,
chooseVideoId:null
}
},
onUnload () {
this.endStudy()
},
onLoad(option){
this.courseId=option.courseId
if(option.trainingId){
this.trainingId=option.trainingId
}
this.videoHistroyList()
this.courseDetailMessage()
},
methods: {
isSeeVideo(videoMessage){
let flag=false
this.histroyVideoList.forEach(item=>{
if(item.detailsId==videoMessage.id){
if(item.isFinish){
flag=true
}
}
})
return flag
},
choseVideo(videoMessage){
this.chooseVideoId=videoMessage.id
let initTime=null
this.videomessage=videoMessage
this.histroyVideoList.forEach(item=>{
if(item.detailsId==videoMessage.id){
initTime=parseInt(item.learningDuration)
}
})
this.videoUrl=replaceUrl(videoMessage.url)
// this.videoUrl="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
},
handleConfirmInfo(){
uni.navigateTo({
url:/pages/examination/confirmInfo?trainingId=${this.trainingId}
})
},
videoHistroyList(){
getVideoHistroyList({
trainingId:this.trainingId
}).then(res=>{
this.histroyVideoList=res.data
}).catch(error=>{
showToast(error.msg)
})
},
courseDetailMessage(){
getCourseDetail(this.courseId).then(res=>{
this.videoList=res.data.detailsList
const {remarks,exerciseTitle}=res.data
this.remarks=remarks
this.exerciseTitle=exerciseTitle
}).catch(error=>{
showToast(error.msg)
})
},
changeCurrentabs(e){
this.currentTab=e.value
},
timeupdate(e){
this.learningDuration=e.detail.currentTime
},
endStudy(type){
putEndStudy(
{
trainingId:this.trainingId,
detailsId:this.videomessage.id,
learningDuration:this.learningDuration,
isFinish:type=='end'?1:0,
remarks:''
}
).then(res=>{
this.courseDetailMessage()
this.chooseVideoId=null
this.videoHistroyList()
})
},
}
}
</script>
<style scoped lang="scss">
</style>
0 个回复