uniProject/pages/client/Kecheng/study.vue

<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>