uniProject/pages/admin/Kecheng/study.vue

<template>
	<view class="kecheng-study-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{title}}</text>
		</view>
		<!-- 播放器 -->
		<videoPlayVue ref="videoRef" class="phone-video-box"></videoPlayVue>
		<!-- 中间区域 -->
		<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="false" :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 * as kechengApi from "@/api/kecheng.js";
	import videoPlayVue from "@/components/videoPlay/videoPlay.vue";
	import kechengMuluVue from "@/components/kecheng-mulu/kecheng-mulu.vue";
	import {
		useUserCache
	} from "@/utils/userCache.js"
	import {
		formatDuration
	} from "@/utils/common.js"

	export default {
		components: {
			videoPlayVue,
			kechengMuluVue
		},
		data() {
			return {
				items: ['目录', '介绍'],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				activeColor: '#3fd2a1',
				current: 0, // 激活的选项卡
				kcId: '', // 课程
				title: '',
				period: 0, // 时长
				userCount: 0, // 学习人数
				list: [],
				intro: '',
				curPlayData: null
			}
		},
		onLoad(options) {
			this.kcId = options.kcId;
			this.init();
		},
		methods: {
			goUpPage() {
				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) {
				if (this.curPlayData && this.curPlayData.videoId == data.videoId) {
					return;
				}
				this.curPlayData = data;
				kechengApi.getVideoAuth({
					videoId: data.url
				}).then(res => {
					this.$refs.videoRef.init({
						videoId: data.url,
						playAuth: res.data,
						seekTime: '',
					})
				})
			},
			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)
				}
			},
			init() {
				kechengApi.getKechengGlStart({
					kcId: this.kcId
				}).then(res => {
					const {
						userCount,
						period,
						name,
						kejianUserVo,
						intro
					} = res.data;
					this.userCount = userCount;
					this.period = formatDuration(period);
					this.name = name;
					let testData = JSON.parse(JSON.stringify([...kejianUserVo.zhangList, ...kejianUserVo.zhangList,
						...kejianUserVo.zhangList
					]))
					this.formatData(testData)
					this.list = testData;
					this.intro = intro;

					this.initFirstVideo();

					uni.setNavigationBarTitle({
						title: this.name
					});
				})
			}
		}
	}
</script>


<style>

</style>