|
|
@@ -1,463 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="kecheng-study-page">
|
|
|
-
|
|
|
- <customNavbarVue title="课程" :show-back-btn="true" @back="goUpPage"></customNavbarVue>
|
|
|
- <!-- 播放器 -->
|
|
|
- <!-- <videoPlayVue v-if="showVideo" ref="videoRef" class="phone-video-box" @play-end="onPlayEnd" @play-play="onPlay"
|
|
|
- @play-pause="onPause" @play-timeupdate="onTimeupdate"></videoPlayVue> -->
|
|
|
- <view class="video-wrapper">
|
|
|
- <video v-if="showVideo" :src="videoUrl" :poster="videoPoster" controls class="phone-video-box"
|
|
|
- @play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnd" @error="onVideoError" id="myVideo"
|
|
|
- object-fit="contain" custom-cache @fullscreenchange="onVideoFullscreenChange"></video>
|
|
|
- <view v-else class="phone-video-box master-image" :style="{ backgroundImage: 'url(' + imgsArr.videoBj + ')' }">
|
|
|
- <!-- <view class="video-player-icon" @click="handlePlayFirst"></view> -->
|
|
|
- </view>
|
|
|
- <zmm-watermark :watermark="watermark" class="watermark-component" ></zmm-watermark>
|
|
|
- <view class="static-watermark">保密内容 · 请勿外传</view>
|
|
|
- <!-- 视频背景图 -->
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- 播放引导 -->
|
|
|
- <view class="yindao-shadow-image" v-if="!shaDowImgFlag"
|
|
|
- :style="{ backgroundImage: 'url(' + imgsArr.pointIcon + ')' }"> </view>
|
|
|
- <!-- 中间区域 -->
|
|
|
- <view class="kc-name-box">
|
|
|
- <view>{{name}}</view>
|
|
|
- </view>
|
|
|
- <view class="kc-info-box">
|
|
|
- <view>时长：{{period}}</view>
|
|
|
- <view>{{userCount}}人学习</view>
|
|
|
- </view>
|
|
|
- <!-- 大纲 -->
|
|
|
- <view class="phone-tab-box">
|
|
|
- <uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
|
|
|
- @clickItem="onClickItem" />
|
|
|
- </view>
|
|
|
- <view class="kecheng-content-box">
|
|
|
- <!-- 目录 -->
|
|
|
- <kechengMuluVue v-if="current === 0" :chapterArr="list" @play="handlePlay" :isHasProgress="true"
|
|
|
- :activeKjId="curPlayData&&curPlayData.kjId"></kechengMuluVue>
|
|
|
- <!-- 介绍 -->
|
|
|
- <rich-text :nodes="intro || '暂无内容'" v-if="current === 1 && intro" class="kecheng-jieshao-box"></rich-text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import cacheManager from '@/utils/cacheManager.js';
|
|
|
- import * as kechengApi from "@/api/kecheng.js";
|
|
|
- import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
|
|
|
- import videoPlayVue from "@/components/videoPlay/videoPlay.vue";
|
|
|
- import kechengMuluVue from "@/components/kecheng-mulu/kecheng-mulu.vue";
|
|
|
- import {
|
|
|
- useUserCache
|
|
|
- } from "@/utils/userCache.js"
|
|
|
- import {
|
|
|
- formatSecondsToCnhms
|
|
|
- } from "@/utils/common.js"
|
|
|
- import {
|
|
|
- useKechengTools
|
|
|
- } from "./useKechengCache.js"
|
|
|
-
|
|
|
- const {
|
|
|
- getCurKjIndex,
|
|
|
- saveKechengData,
|
|
|
- getKechengDataFromHistory,
|
|
|
- saveKechengSectionPage,
|
|
|
- getKechengSectionPageFromHistory,
|
|
|
- mergeProgress,
|
|
|
- initCourseProgressAll,
|
|
|
- saveCourseProgress,
|
|
|
- updateSectionProgress,
|
|
|
- } = useKechengTools();
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- videoPlayVue,
|
|
|
- kechengMuluVue,
|
|
|
- customNavbarVue
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showVideo: false,
|
|
|
- shaDowImgFlag: false,
|
|
|
- items: ['目录', '介绍'],
|
|
|
- colors: ['#007aff', '#4cd964', '#dd524d'],
|
|
|
- activeColor: '#3fd2a1',
|
|
|
- current: 0, // 激活的选项卡
|
|
|
- operId: '', // 课程
|
|
|
- name: '',
|
|
|
- period: 0, // 时长
|
|
|
- userCount: 0, // 学习人数
|
|
|
- list: [],
|
|
|
- intro: '',
|
|
|
- curPlayData: null,
|
|
|
- timer1: null,
|
|
|
- kcId: null,
|
|
|
- from: '',
|
|
|
- jzId: null,
|
|
|
- watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p style="color:#f00">我是p标签</p><br>/>',
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- videoUrl: '', // 视频地址
|
|
|
- videoPoster: '', // 视频封面
|
|
|
- videoInfo: {}, // 视频信息
|
|
|
- loading: false, // 加载状态
|
|
|
- error: false, // 错误状态
|
|
|
- errorMessage: '', // 错误信息
|
|
|
- videoContext: null, // 视频上下文
|
|
|
- imgsArr: {}
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- this.kcId = options.kcId;
|
|
|
- this.from = options.from;
|
|
|
- this.jzId = options.jzId;
|
|
|
- this.imgsArr.videoBj = cacheManager.get('projectImg').video_bj;
|
|
|
- this.imgsArr.pointIcon = cacheManager.get('projectImg').course_point_icon;
|
|
|
- this.init();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onVideoFullscreenChange(e) {
|
|
|
- console.log('全屏状态变化:', e.detail.fullScreen);
|
|
|
- // 改用uniapp专属选择器，获取视频容器（避免document兼容问题）
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select('.video-wrapper')
|
|
|
- .fields({ node: true, dataset: true })
|
|
|
- .exec((res) => {
|
|
|
- if (res[0] && res[0].node) {
|
|
|
- const videoWrapper = res[0].node;
|
|
|
- if (e.detail.fullScreen) {
|
|
|
- // 全屏：添加wx-video-fullscreen类（匹配样式）
|
|
|
- videoWrapper.classList.add('wx-video-fullscreen');
|
|
|
- } else {
|
|
|
- // 退出全屏：移除类，恢复默认样式
|
|
|
- videoWrapper.classList.remove('wx-video-fullscreen');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 播放视频
|
|
|
- playVideo() {
|
|
|
- if (this.videoUrl) {
|
|
|
- this.videoContext.play()
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '暂无视频可播放',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 暂停视频
|
|
|
- pauseVideo() {
|
|
|
- this.videoContext.pause()
|
|
|
- },
|
|
|
-
|
|
|
- // 重新播放
|
|
|
- replayVideo() {
|
|
|
- this.videoContext.seek(0)
|
|
|
- this.videoContext.play()
|
|
|
- },
|
|
|
-
|
|
|
- // 视频开始播放
|
|
|
- onVideoPlay() {
|
|
|
- console.log('视频开始播放')
|
|
|
- },
|
|
|
-
|
|
|
- // 视频暂停
|
|
|
- onVideoPause() {
|
|
|
- console.log('视频暂停')
|
|
|
- },
|
|
|
-
|
|
|
- // 视频播放结束
|
|
|
- onVideoEnd() {
|
|
|
- console.log('视频播放结束')
|
|
|
- uni.showToast({
|
|
|
- title: '播放完成',
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 视频播放错误
|
|
|
- onVideoError(e) {
|
|
|
- console.error('视频播放错误:', e.detail.errMsg)
|
|
|
- this.error = true
|
|
|
- this.errorMessage = '视频播放出错，请检查视频地址或格式'
|
|
|
- },
|
|
|
-
|
|
|
- // 重新加载视频
|
|
|
- retryLoadVideo() {
|
|
|
- this.getVideoData()
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- handlePlayFirst() {
|
|
|
-
|
|
|
- console.log('this.list', this.list);
|
|
|
- if (this.list && this.list[0].jieList && this.list[0].jieList[0].kejianList) {
|
|
|
- // 设置默认展开项
|
|
|
- this.list[0].open = true;
|
|
|
- this.list[0].jieList[0].open = true;
|
|
|
- // 设置播放可见
|
|
|
- const kejian = this.list[0].jieList[0].kejianList[0];
|
|
|
- this.handlePlay(kejian)
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- onPause() {
|
|
|
- clearInterval(this.timer1);
|
|
|
- this.timer1 = null;
|
|
|
- },
|
|
|
- onPlay() {
|
|
|
- clearInterval(this.timer1);
|
|
|
- this.timer1 = null;
|
|
|
- // this.timer = setInterval(() => {
|
|
|
- // updateSectionProgress(this.operId);
|
|
|
- // }, 1000 * 1 * 60) // 自动保存进度 1分钟已保存
|
|
|
-
|
|
|
- },
|
|
|
- sectionPlayerProgress(progress) {
|
|
|
- let sectionPage = getKechengSectionPageFromHistory(this.operId);
|
|
|
- let maxProcess = this.list[sectionPage.iChapter].jieList[sectionPage.iSection].kejianList.find(it1 => it1
|
|
|
- .kjId == sectionPage.kjId).maxProcess;
|
|
|
- // 更新缓存进度
|
|
|
- this.list[sectionPage.iChapter].jieList[sectionPage.iSection].kejianList.find(it1 => it1.kjId ==
|
|
|
- sectionPage.kjId).curProcess = progress;
|
|
|
- if (progress < 100) {
|
|
|
- // 播放进度小于100
|
|
|
- if (progress < maxProcess) {
|
|
|
- this.list[sectionPage.iChapter].jieList[sectionPage.iSection].kejianList.find(it1 => it1.kjId ==
|
|
|
- sectionPage.kjId).maxProcess = maxProcess
|
|
|
- } else {
|
|
|
- this.list[sectionPage.iChapter].jieList[sectionPage.iSection].kejianList.find(it1 => it1.kjId ==
|
|
|
- sectionPage.kjId).maxProcess = progress
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 播放进度大于100
|
|
|
- this.list[sectionPage.iChapter].jieList[sectionPage.iSection].kejianList.find(it1 => it1.kjId ==
|
|
|
- sectionPage.kjId).maxProcess = 100
|
|
|
- }
|
|
|
- },
|
|
|
- onTimeupdate(time) {
|
|
|
- const progress = parseInt(time / this.curPlayData.duration * 100);
|
|
|
- this.curPlayData.curProgress = parseInt(progress >= 100 ? '99' : progress);
|
|
|
- // 保存进度
|
|
|
- // saveCourseProgress(time, this.curPlayData.duration, this.operId)
|
|
|
- // 更新进度
|
|
|
- // this.sectionPlayerProgress(progress)
|
|
|
- },
|
|
|
- onPlayEnd() {
|
|
|
- clearInterval(this.timer1);
|
|
|
- this.timer1 = null;
|
|
|
- // saveCourseProgress(this.curPlayData.duration, this.curPlayData.duration, this.operId, 'end');
|
|
|
- // updateSectionProgress(this.operId, 'end', 'video', () => {
|
|
|
- // this.curPlayData.maxProcess = 99;
|
|
|
- // this.curPlayData.curProcess = 99;
|
|
|
- // });
|
|
|
- console.log('end')
|
|
|
- },
|
|
|
- goUpPage() {
|
|
|
- const pages = getCurrentPages();
|
|
|
- if (pages.length > 1) {
|
|
|
- uni.navigateBack()
|
|
|
- } else {
|
|
|
- /* if (this.from == 'kechengList') {
|
|
|
- uni.redirectTo({
|
|
|
- url: '/pages/client/Kecheng/list'
|
|
|
- })
|
|
|
- } else if (this.from == 'shouye') {
|
|
|
- uni.redirectTo({
|
|
|
- url: '/pages/client/ShouYe/shouye'
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.redirectTo({
|
|
|
- url: '/pages/client/ShouYe/shouye'
|
|
|
- })
|
|
|
- } */
|
|
|
- history.back();
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- onClickItem(e) {
|
|
|
- if (this.current !== e.currentIndex) {
|
|
|
- this.current = e.currentIndex
|
|
|
- }
|
|
|
- // if (this.current == 0) {
|
|
|
- // if (!this.showVideo) {
|
|
|
- // this.shaDowImgFlag = false
|
|
|
- // } else {
|
|
|
- // this.shaDowImgFlag = true
|
|
|
- // }
|
|
|
- // } else {
|
|
|
- // this.shaDowImgFlag = true
|
|
|
- // }
|
|
|
- this.shaDowImgFlag = this.current !== 0 || this.showVideo
|
|
|
- },
|
|
|
- formatData(data) {
|
|
|
- data.forEach(zhang => {
|
|
|
- zhang.open = false;
|
|
|
- zhang.jieList.forEach(jie => {
|
|
|
- jie.open = false;
|
|
|
- })
|
|
|
- })
|
|
|
- return data;
|
|
|
- },
|
|
|
- handlePlay(data) {
|
|
|
- this.showVideo = true;
|
|
|
- this.shaDowImgFlag = true;
|
|
|
- if (this.curPlayData && this.curPlayData.url == data.url) {
|
|
|
- return;
|
|
|
- }
|
|
|
- console.log('data', data);
|
|
|
- this.curPlayData = data;
|
|
|
-
|
|
|
- //this.videoUrl = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
|
|
|
-
|
|
|
- kechengApi.getVideoId({
|
|
|
- videoId: data.url
|
|
|
- }).then(res => {
|
|
|
- this.videoUrl = res.data
|
|
|
- console.log('res', res);
|
|
|
- // const progress = data.curProcess || 0;
|
|
|
- // this.$refs.videoRef.init({
|
|
|
- // videoId: data.url,
|
|
|
- // playAuth: res.data,
|
|
|
- // seekTime: data.duration * progress / 100,
|
|
|
- // isPlay: false
|
|
|
- // })
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- initFirstVideo() {
|
|
|
-
|
|
|
- if (this.list && this.list[0].jieList && this.list[0].jieList[0].kejianList) {
|
|
|
- // 设置默认展开项
|
|
|
- this.list[0].open = true;
|
|
|
- this.list[0].jieList[0].open = true;
|
|
|
- // 设置播放可见
|
|
|
- const kejian = this.list[0].jieList[0].kejianList[0];
|
|
|
- // this.handlePlay(kejian)
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- //saveKechengSectionPage(this.operId, sectionPage)
|
|
|
- },
|
|
|
-
|
|
|
- init() {
|
|
|
- kechengApi.getClientKechengStart({
|
|
|
- kcId: this.kcId,
|
|
|
- jzId: this.jzId
|
|
|
- }).then(res => {
|
|
|
- const {
|
|
|
- userCount,
|
|
|
- period,
|
|
|
- name,
|
|
|
- kejianUserVo,
|
|
|
- intro,
|
|
|
- operId,
|
|
|
- } = res.data;
|
|
|
- this.userCount = userCount;
|
|
|
- this.period = formatSecondsToCnhms(period, true);
|
|
|
- this.name = name;
|
|
|
- this.formatData(kejianUserVo.zhangList)
|
|
|
- this.list = kejianUserVo.zhangList;
|
|
|
- this.intro = intro;
|
|
|
- this.operId = operId;
|
|
|
-
|
|
|
- // 获取课程缓存 && 课件缓存(课件缓存点击后产生)
|
|
|
- //let historyArrKecheng = getKechengDataFromHistory(this.operId)
|
|
|
- // let sectionPageHistory = getKechengSectionPageFromHistory(this.operId)
|
|
|
- // // 判断是否有前台缓存
|
|
|
- // if (historyArrKecheng && sectionPageHistory) {
|
|
|
- // // 有缓存---- 把start接口中，返回数据进度100%，更新到前台缓存
|
|
|
- // const arrKecheng = mergeProgress(kejianUserVo && kejianUserVo.zhangList,
|
|
|
- // historyArrKecheng);
|
|
|
- // // 后台数据 同步前台缓存
|
|
|
- // saveKechengData(this.operId, arrKecheng)
|
|
|
- // } else {
|
|
|
- // // 无缓存----把start接口中，返回的所有数据，更新到前台缓存
|
|
|
- // saveKechengData(this.operId, kejianUserVo && kejianUserVo.zhangList)
|
|
|
- // }
|
|
|
- // 初始化页面 常规数据
|
|
|
- //initCourseProgressAll(this.operId)
|
|
|
-
|
|
|
- console.log('初始化播放首1123次')
|
|
|
- // 设置播放视频
|
|
|
- this.initFirstVideo();
|
|
|
- }).catch(err => {
|
|
|
- this.goUpPage();
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.video-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 400rpx;
|
|
|
- background-color: #000;
|
|
|
- overflow: hidden; /* 防止水印溢出 */
|
|
|
-
|
|
|
- .phone-video-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1; /* 明确视频层级，低于水印 */
|
|
|
- }
|
|
|
-
|
|
|
- // 1. 确保水印组件样式完全生效（铺满、置顶、不遮挡操作）
|
|
|
- .watermark-component {
|
|
|
- position: absolute !important; /* 强制绝对定位，避免组件自身样式覆盖 */
|
|
|
- top: 0 !important;
|
|
|
- left: 0 !important;
|
|
|
- width: 100% !important;
|
|
|
- height: 100% !important;
|
|
|
- z-index: 999 !important; /* 高于视频z-index:1 */
|
|
|
- pointer-events: none !important;
|
|
|
- background: transparent !important; /* 避免组件背景遮挡视频 */
|
|
|
- }
|
|
|
-
|
|
|
- // 2. 优化静态水印：提高对比度，确保可见
|
|
|
- .static-watermark {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%) rotate(-30deg);
|
|
|
- font-size: 32rpx;
|
|
|
- color: rgba(255, 255, 255, 0.3) !important; /* 提高不透明度，增强可见性 */
|
|
|
- font-weight: bold;
|
|
|
- white-space: nowrap;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 999 !important;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 全屏样式优化：确保水印铺满屏幕
|
|
|
-.video-wrapper.wx-video-fullscreen {
|
|
|
- position: fixed !important;
|
|
|
- top: 0 !important;
|
|
|
- left: 0 !important;
|
|
|
- width: 100vw !important;
|
|
|
- height: 100vh !important;
|
|
|
- z-index: 9999 !important;
|
|
|
- background-color: #000 !important;
|
|
|
-
|
|
|
- .static-watermark {
|
|
|
- font-size: 80rpx !important;
|
|
|
- color: rgba(255, 255, 255, 0.4) !important; /* 全屏时进一步提高可见性 */
|
|
|
- }
|
|
|
-
|
|
|
- .watermark-component {
|
|
|
- width: 100vw !important;
|
|
|
- height: 100vh !important;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
wangguoyu