uniProject/pages/admin/Kecheng/study.vue

<template>
	<view class="kecheng-study-page">
		<zmm-watermark :watermark="watermark" color="#999" column="2" margin="24" opacity="0.1"></zmm-watermark>
		<view class="icon-title-navBar-box kecheng-study-navBar">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{name}}</text>
		</view>
		<!-- 	  <zmm-watermark :watermark="watermark"></zmm-watermark> -->
		<!-- <view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{name}}</text>
		</view> -->
		<!-- 播放器 -->
		<videoPlayVue ref="videoRef" class="phone-video-box" v-if="showVideo"></videoPlayVue>
		<view v-else class="phone-video-box master-image">
			<!-- <view class="video-player-icon" @click="handlePlayFirst"></view> -->
		</view>
		<view class="kecheng-study-body">
			<!-- 播放引导 -->
			<template v-if="kechengFlag">
				<view class="yindao-shadow-image" v-if="!showVideo"> </view>
			</template>
			<!-- 中间区域 -->
			<view class="kc-info-box">
				<view class="info-tip">旋转手机，享受横屏沉浸式视频学习体验</view>
				<view class="info-content-box">
					<view>时长：{{period}}</view>
					<view>{{userCount}}人学习</view>
				</view>
				<view class="info-sm">
					郑重声明：课程版权归平台所有，禁止对本课程进行任何录音录像，违者将承担法律责任。
				</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="false"
					:activeKjId="curPlayData&&curPlayData.kjId"></kechengMuluVue>
				<!-- 介绍 -->
				<rich-text :nodes="intro || '暂无内容'" v-if="current === 1 && intro"
					class="kecheng-jieshao-box"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import * as kechengApi from "@/api/kecheng.js";
	import videoPlayVue from "@/components/videoPlay/videoPlay.vue";
	import kechengMuluVue from "@/components/kecheng-mulu/kecheng-mulu.vue";
	import cacheManager from "@/utils/cacheManager.js";
	import {
		useUserCache
	} from "@/utils/userCache.js"
	import {
		formatSecondsToCnhms
	} from "@/utils/common.js"

	export default {
		components: {
			videoPlayVue,
			kechengMuluVue
		},
		data() {
			return {
				showVideo: false,
				items: ['目录', '介绍'],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				activeColor: '#3fd2a1',
				current: 0, // 激活的选项卡
				kcId: '', // 课程
				title: '',
				period: 0, // 时长
				userCount: 0, // 学习人数
				list: [],
				intro: '',
				curPlayData: null,
				kechengFlag: null,
				operId: '', // 课程
				pageFrom: '',
				name: '',
				watermark: `<h5>${cacheManager.get("auth").userName}-${cacheManager.get("auth").jzName}"</h5>`
				//    watermark: '<h5>我是h5标签我是h5标签我是h5标签我是h5标签</h5><p style="color:#f00">我是p标签</p><br>'
			}
		},
		onLoad(options) {
			this.kcId = options.kcId;
			this.pageFrom = options.from;
			this.init();
		},
		methods: {
			handlePlayFirst() {
				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)
				}
			},
			goUpPage() {
				if (this.pageFrom === 'shouye') {
					uni.redirectTo({
						url: '/pages/admin/ShouYe/shouye'
					})
				} else {
					uni.redirectTo({
						url: '/pages/admin/Kecheng/list'
					})
				}

			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			formatData(data) {
				data.forEach(zhang => {
					zhang.open = false;
					zhang.jieList.forEach(jie => {
						jie.open = false;
					})
				})
				return data;
			},
			handlePlay(data) {
				console.log('data', data, this.curPlayData)
				if (!this.kechengFlag) {
					uni.showToast({
						icon: 'none',
						title: '当前课件不可查看'
					})
					return;
				}
				this.showVideo = true;
				if (this.curPlayData && this.curPlayData.url == data.url) {
					return;
				}
				this.curPlayData = data;

				kechengApi.getVideoAuth({
					videoId: data.url
				}).then(res => {
					this.$refs.videoRef.init({
						videoId: data.url,
						playAuth: res.data,
						seekTime: '',
						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];
				}
			},
			init() {
				kechengApi.getKechengGlStart({
					kcId: this.kcId
				}).then(res => {
					const {
						userCount,
						period,
						name,
						kejianUserVo,
						intro,
						kechengFlag,
						operId,
					} = res.data;
					this.userCount = userCount;
					this.period = formatSecondsToCnhms(period, true);
					this.name = name;
					this.kechengFlag = kechengFlag;
					this.formatData(kejianUserVo.zhangList)
					this.list = kejianUserVo.zhangList;
					this.intro = intro;
					this.operId = operId;

					this.initFirstVideo();

				})
			}
		}
	}
</script>


<style>

</style>