first commit

This commit is contained in:
2026-09-20 15:46:34 +08:00
parent 72fb5eae10
commit e558339dcc
3340 changed files with 671310 additions and 251 deletions
@@ -0,0 +1,161 @@
<!--#
layout("/mobile/platform.html"){
#-->
<style>
#app {
background: #FFFFFF;
}
.topTitle {
font-size: 16px;
padding: 10px 16px;
}
.list-card {
padding: 0 16px;
}
.list-item {
max-width: calc(100% - 100px);
}
.list-item > div {
height: 30px;
line-height: 30px;
}
.newest-video, .nav-button {
padding: 0 20px;
}
</style>
<div id="app" v-cloak>
<m-page-loading v-if="mLoading"></m-page-loading>
<van-nav-bar
title="视频资料"
left-arrow
placeholder
fixed
@click-left="window.history.back()"
></van-nav-bar>
<div class="newest-video">
<h4>{{typeName}}</h4>
</div>
<div class="nav-button">
<van-button type="info" :plain="pageForm.searchType !== 'new'" size="small" @click="searchTypeClick('new')">
最新视频
</van-button>
<van-button type="info" :plain="pageForm.searchType !== 'most'" size="small" @click="searchTypeClick('most')">
播放最多
</van-button>
<van-button type="info" :plain="pageForm.searchType !== null" size="small" @click="searchTypeClick(null)">全部
</van-button>
</div>
<van-divider></van-divider>
<div style="margin: 20px auto 0 auto;position: relative">
<van-list v-model="loading"
:finished="finished"
:finished-text="tableData.length>0?'没有更多了':''"
:immediate-check="false"
@load="pageData">
<div v-for="o in tableData" class="list-card" @click="goVideoPage(o)">
<div style="display: flex;padding-bottom: 10px" class="van-hairline--bottom">
<van-image
style="margin-right: 10px"
width="90"
height="90"
:src="FILE_DOMAIN+'/fileStreamPreview?id='+o.cover"
></van-image>
<div class="list-item">
<div style="font-size: 14px">{{o.title}}</div>
<div class="van-ellipsis" style="color: darkgray;font-size: 13px">
{{removeHTMLTag(o.description)}}
</div>
<div>
<van-tag plain type="primary">{{o.videoCount}}个视频</van-tag>
</div>
</div>
</div>
</div>
</van-list>
</div>
<van-empty v-if="mLoading==false&&tableData.length==0" class="custom-image" image="/none.svg"
description="暂无数据">
</van-empty>
</div>
<script>
<!--#include("/platform/trainEdu/include/include.js"){}#-->
const vue = new Vue({
el: '#app',
mixins: [mobileMixins],
data() {
return {
typeName: null,
videoTypeList: [],
pageForm: {
searchType: null
}
}
},
methods: {
async pageData() {
this.mLoading = true
const {data} = await $.get('/mobile/trainEducation/getAlbumList', this.pageForm)
setTimeout(() => {
this.tableData = this.tableData.concat(data.list)
if (this.tableData.length === data.totalCount) {
this.finished = true
} else {
this.pageForm.pageNumber++
}
this.mLoading = false
this.pageForm.totalCount = data.totalCount
}, 300)
},
searchTypeClick(val) {
this.pageForm.searchType = val
this.pageForm.pageNumber = 1
this.tableData = []
this.pageData()
},
doSearch() {
this.pageForm.pageNumber = 1
this.tableData = []
this.pageData()
},
goVideoPage(item) {
window.location.href = '/mobile/trainEducation/videoPage?id=' + item.id
}
},
async created() {
this.videoTypeList = await getVideoType()
const typeId = this.GetQueryString("id")
const type = this.videoTypeList.find(v => v.id === typeId)
this.typeName = type.typeName
if (typeId) {
this.$set(this.pageForm, 'typeId', typeId)
await this.pageData()
}
}
})
</script>
<!--#
}
#-->
@@ -0,0 +1,124 @@
<!--#
layout("/mobile/platform.html"){
#-->
<style>
#app {
background: #fff;
}
.newest-video {
padding: 0 20px;
}
.list-card {
padding: 0 16px;
}
.list-item {
max-width: calc(100% - 100px);
}
.list-item > div {
height: 30px;
line-height: 30px;
}
</style>
<div id="app" v-cloak>
<van-nav-bar
title="培训教育"
left-arrow
placeholder
fixed
@click-left="history.back()"
></van-nav-bar>
<van-swiper>
<van-swiper-item>
<van-image
fit="contain"
:src="topImg" alt="">
</van-image>
</van-swiper-item>
</van-swiper>
<van-grid :column-num="3" :border="false">
<van-grid-item v-for="item in videoTypeList"
:url="'/mobile/trainEducation/AlbumList?id=' + item.id"
:key="item.id"
:icon="FILE_DOMAIN+'/fileStreamPreview?id='+item.icon"
:text="item.typeName"></van-grid-item>
</van-grid>
<div style="height: 5px;background-color: #f6f7f9"></div>
<div class="newest-video">
<h4>最新视频</h4>
</div>
<div v-for="o in tableData" class="list-card" @click="goVideoPage(o)">
<div style="display: flex;padding-bottom: 10px" class="van-hairline--bottom">
<van-image
style="margin-right: 10px"
width="90"
height="90"
:src="FILE_DOMAIN+'/fileStreamPreview?id='+o.cover"
></van-image>
<div class="list-item">
<div style="font-size: 14px">{{o.title}}</div>
<div class="van-ellipsis" style="color: darkgray;font-size: 13px">
{{removeHTMLTag(o.description)}}
</div>
<div>
<van-tag plain type="primary">{{o.videoCount}}个视频</van-tag>
</div>
</div>
</div>
</div>
</div>
<script>
<!--#include("/platform/trainEdu/include/include.js"){}#-->
const vue = new Vue({
el: '#app',
mixins: [mobileMixins],
data() {
return {
videoTypeList: [],
topImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F55%2F78%2F725b1593ced0c43.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642838257&t=cce87815db1b5e740bce9dc9357c7eaa'
}
},
methods: {
goVideoPage(item) {
window.location.href = '/mobile/trainEducation/videoPage?id=' + item.id
},
async getNewVideo() {
this.tableData = []
const {data} = await $.get('/mobile/trainEducation/getNewestVideo')
this.tableData.push(data)
}
},
async created() {
const videoTypeList = await getVideoType()
if (videoTypeList.length > 0) {
videoTypeList.map(v => {
if (v.files) {
v.icon = JSON.parse(v.files)[0].id
}
})
}
this.videoTypeList = videoTypeList
await this.getNewVideo()
}
})
</script>
<!--#
}
#-->
@@ -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>
<!--#
}
#-->