c-hongqw1/zhgh_hhu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
c-hongqw1
2026-09-20 15:46:34 +08:00
parent 72fb5eae10
commit e558339dcc
3340 changed files with 671310 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
target/classes/views/mobile/trainEducation/videoPage.html
+427
View File
@@ -0,0 +1,427 @@
<!--#
layout("/mobile/platform.html"){
#-->
<style>
.bottom-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
z-index: 1;
}
.bottom-wrap button {
border-radius: 10px;
}
</style>
<!--<script src="/assets/platform/plugins/vod/vod-js-sdk-v6.js"></script>-->
<!--<link href="/assets/platform/plugins/vod/tcplayer.min.css"/>-->
<!--<script src="/assets/platform/plugins/vod/hls.min.0.13.2m.js"></script>-->
<!--<script src="/assets/platform/plugins/vod/tcplayer.v4.3.0.min.js"></script>-->
<style>
#app {
background: #FFFFFF;
}
.video-container {
height: 300px;
position: relative;
}
#player-container-id {
width: 100%;
height: 300px;
}
.van-tabs__wrap {
border-bottom: 1px solid #ebedf0;
}
.van-tabs__content {
}
.album-description img {
background-size: contain;
width: 100%;
height: auto;
margin: 0 auto;
display: block;
}
.video-list .van-cell__value {
width: 50px;
flex: unset;
}
.video-list .van-cell__title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.descriptionCell .van-cell__title {
width: 100%;
}
.descriptionCell p {
word-wrap: break-word;
word-break: break-all;
}
.myWatchRecord {
font-size: 14px;
}
</style>
<div id="app" v-cloak>
<van-nav-bar
title=""
left-arrow
placeholder
fixed
@click-left="window.history.back()"
></van-nav-bar>
<div class="video-container">
<video id="player-container-id" preload="auto"
autoplay
playsinline
webkit-playsinline>
</video>
<!-- <div v-if="!isPlay" style=" height: 100%;-->
<!-- background: #000;-->
<!-- position: absolute;-->
<!-- top: 0;-->
<!-- left: 0;-->
<!-- right: 0;-->
<!-- bottom: 0;">-->
<!-- <van-image-->
<!-- style="width: 90%;-->
<!-- height: 100%;-->
<!-- z-index: 999;"-->
<!-- fit="contain"-->
<!-- :src="FILE_DOMAIN+'/fileStreamPreview?id='+albumInfo.cover"-->
<!-- ></van-image>-->
<!-- <div class="tcp-skin">-->
<!-- <div class="vjs-big-play-button">-->
<!-- <div class="vjs-button-icon">-->
<!-- <svg height="100%" width="100%" viewBox="0 0 484 348">-->
<!-- <path class="draw-fill" transform="translate(4 4)"-->
<!-- d="M383,124C350-42,122.3-40.5,90.6,123.5c-110.4,18.5-131,185,.6,216.5H381.6C519.7,310.7,494.1,137.8,383,124Z"></path>-->
<!-- <path transform="translate(4 4)"-->
<!-- d="M200.4,110.2c-9.4-5.8-19.6,2.7-19.4,11.7V256.2c0,8,10.4,16.7,19.4,10.8,2.2-1.4,111.8-65.9,114-67.3,7.4-4,10.1-15.8,0-22.2Z"-->
<!-- style="fill:#fff ;"></path>-->
<!-- </svg>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<van-tabs v-model="tabIndex" sticky>
<!-- <van-tab title="目录">-->
<!-- <div style="height: 5px;background-color: #f6f7f9"></div>-->
<!-- <van-cell-group class="video-list">-->
<!-- <van-cell v-for="(o,i) in videoList" :key="o.id" @click="playVideo(o)">-->
<!-- <template #title>-->
<!-- <van-tag plain type="primary" style="margin-right: 10px">视频</van-tag>-->
<!-- <span style="margin-right: 10px">-->
<!-- {{i+1}}.-->
<!-- </span>-->
<!-- <span>-->
<!-- {{o.title}}-->
<!-- </span>-->
<!-- </template>-->
<!-- <template #label>-->
<!-- &lt;!&ndash; {{getWatchStatus(o)}}&ndash;&gt;-->
<!-- </template>-->
<!-- <template>-->
<!-- </template>-->
<!-- </van-cell>-->
<!-- </van-cell-group>-->
<!-- </van-tab>-->
<van-tab title="介绍">
<div style="height: 5px;background-color: #f6f7f9"></div>
<div style="padding: 16px">
{{albumInfo.title}}
</div>
<div style="height: 5px;background-color: #f6f7f9"></div>
<van-cell class="descriptionCell">
<template #title>
<div style="font-size: 14px">课程介绍</div>
</template>
<template #label>
<div class="album-description" v-html="albumInfo.description"></div>
</template>
</van-cell>
</van-tab>
<van-tab title="学习记录">
<div style="height: 5px;background-color: #f6f7f9"></div>
<van-cell-group class="video-list">
<van-cell v-for="(o,i) in videoList" :key="o.id">
<template #title>
<van-tag plain type="primary" style="margin-right: 10px">视频</van-tag>
<span style="margin-right: 10px">
{{i+1}}.
</span>
<span>
{{o.title}}
</span>
</template>
<template #label>
<div v-if="o.everyDayMaxWatchNum && o.everyDayMaxWatchNum>0"
style="padding: 10px 0;color: #0a84ff;white-space: normal">
本视频在活动结束时每天最多只会统计
<span style="color: #0a84ff;font-weight: bold">{{o.everyDayMaxWatchNum}}</span>
次完整观看记录，您可以无限制的观看。
</div>
<div v-for="(v,index) in groupBy(watchRecordList,v=>v.watchTime)" :key="index"
class="myWatchRecord">
<div style="display: flex;justify-content: space-between">
<div>
{{moment(v.key).format('YYYY年MM月DD日')}}
</div>
<div style="color: #000000;">
观看次数
<span style="font-weight: bold">{{v.items && v.items.filter(v=>v.finish).length}}</span>
</div>
</div>
</div>
</template>
</van-cell>
</van-cell-group>
</van-tab>
</van-tabs>
<!-- <div class="bottom-wrap" v-show="isPlay">-->
<!-- <van-button type="info" block @click="endLearn">上传学习记录</van-button>-->
<!-- </div>-->
</div>
<script>
// let player = null
const vue = new Vue({
el: '#app',
mixins: [mobileMixins],
data() {
return {
typeName: null,
videoTypeList: [],
albumId: null,
albumInfo: {},
videoList: [],
tabIndex: 0,
currentVideo: {},
myComment: {},
watchRecordList: [],
lastTime: 0,
isPlay: false,
player: null,
vvv: []
}
},
computed: {},
methods: {
async getVideoInfo() {
const {data} = await $.get('/mobile/trainEducation/getVideoList', {albumId: this.albumId})
this.vvv = data
this.videoList = data
},
async getAlbumInfo() {
const {data} = await $.get('/mobile/trainEducation/getAlbumInfo', {id: this.albumId})
this.albumInfo = data
},
//播放视频
async playVideo(o) {
this.isPlay = true
//判断当前视频是否看完
if (this.player && this.player.currentTime() < this.currentVideo.fileDuration) {
this.$modal.msg('看完本视频后才能接着看下一个')
return
}
this.currentVideo = o
const playVideo_ = (time = 0) => {
this.$nextTick(async () => {
let controlBar = TCPlayer.getComponent('controlBar');
controlBar.prototype.options_ = {
children: ['playToggle', 'volumePanel', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'chaptersButton', 'descriptionsButton', 'fullscreenToggle']
}
if (!this.player) {
this.player = TCPlayer('player-container-id', {})
}
this.player.src(o.mediaUrl)
this.player.play()
setTimeout(() => {
this.player.currentTime(time)
}, 100)
this.playEnd()
})
}
const v = this.watchRecordList.find(v => v.videoId === o.id)
if (v && v.finish) {
playVideo_(0)
// this.$modal.confirm('本视频您已学习完成，是否重新观看，不会影响到完成的学习记录').then(() => {
// playVideo_(0)
// })
} else if (v && !v.finish) {
playVideo_(v.watchDuration)
} else {
playVideo_(0)
}
},
playEnd() {
this.player.on('ended', async () => {
// const v = this.watchRecordList.find(v => v.videoId === this.currentVideo.id)
// if (v.finish) {
// return
// }
const loading = this.$toast.loading({
duration: 0,
forbidClick: true,
message: '已完整学习本视频,自动上传中'
})
const resp = await this.addWatchRecord()
if (resp.code === 0) {
loading.message = '上传成功'
loading.type = 'success'
}
setTimeout(() => {
loading.clear()
}, 2000)
})
},
//播放记录
async addWatchRecord() {
const params = {
videoId: this.currentVideo.id,
currentTime: parseInt(this.player.currentTime()),
albumId: this.currentVideo.albumId
}
const resp = await $.post('/mobile/trainEducation/addWatchRecord', params)
if (resp.code === 0) {
this.getMyWatchRecord()
return resp
} else {
this.$modal.msgError(resp.msg)
}
},
//监听页面关闭 隐藏
// watchPage() {
// document.addEventListener('visibilitychange', () => {
// if (document.visibilityState === 'hidden') {
// if (this.player && this.currentVideo) {
// this.addWatchRecord()
// }
// }
// })
// },
async getMyWatchRecord() {
const {data} = await $.get('/mobile/trainEducation/getMyWatchRecord', {
albumId: this.albumId
})
this.watchRecordList = data
},
getWatchStatus(video) {
const v = this.watchRecordList.find(v => v.videoId === video.id)
if (!v) {
return '学习进度：还未开始学习'
}
if (v.finish) {
return '学习进度：已完成'
}
if (v.videoId === this.currentVideo.id) {
return '学习进度：正在学习中'
}
const percentage = (parseInt((v.watchDuration / (video.fileDuration - 1)).toFixed(2) * 100)) + "%"
if (percentage === 0) {
return '学习进度：还未开始学习'
}
return "学习进度：" + percentage
},
endLearn() {
const v = this.watchRecordList.find(v => v.videoId === this.currentVideo.id)
console.log(v)
// if (v && v.finish) {
// this.$modal.msg('本视频您已学习完成，无需重复上传')
// return
// }
this.$modal.confirm('您是否要结束本视频学习?').then(() => {
//暂停
this.player.pause()
//上传记录
this.$modal.loading('上传中')
this.addWatchRecord().then(resp => {
console.log(resp)
this.$modal.closeLoading()
if (resp.code === 0) {
this.$modal.msgSuccess('上传成功')
} else {
this.$modal.msgError('上传失败')
}
}).catch(err => {
console.log(err)
})
})
}
},
async created() {
// this.watchPage()
const id = GetQueryString("id")
if (id) {
this.albumId = id
await this.getAlbumInfo()
await this.getVideoInfo()
await this.getMyWatchRecord()
if (this.videoList && this.videoList.length > 0) {
this.playVideo(this.videoList[0])
} else {
this.$toast('暂无视频学习')
}
}
}
})
</script>
<!--#
}
#-->