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"></videoPlayVue>
		<!-- 中间区域 -->
		<view>
			<view>{{period}}分钟</view>
			<view>{{userCount}}人学习</view>
		</view>
		<!-- 大纲 -->
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<!-- 目录 -->
			<view v-if="current === 0">
				<kechengMuluVue :chapterArr="list"></kechengMuluVue>
			</view>
			<!-- 介绍 -->
			<view v-if="current === 1"><text class="content-text">选项卡2的内容</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 {
		formatDuration
	} from "@/utils/common.js"

	export default {
		components: {
			videoPlayVue,kechengMuluVue
		},
		data() {
			return {
				items: ['目录', '介绍'],
				colors: ['#007aff', '#4cd964', '#dd524d'],
				activeColor: '#007aff',
				current: 0, // 激活的选项卡
				kcId: '', // 课程
				title: '',
				period: 0, // 时长
				userCount: 0, // 学习人数
				list: [],
			}
		},
		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
				}
			},
	
			init() {
				kechengApi.getKechengGlStart({
					kcId: this.kcId
				}).then(res => {
					console.log('rrr', res.data)
					const {
						userCount,
						period,
						name,
						kejianUserVo,
						intro
					} = res.data;
					this.userCount = userCount;
					this.period = formatDuration(period);
					this.name = name;
					this.list = kejianUserVo.zhangList;
					this.intro = intro;
				})
			}
		}
	}
</script>


<style>

</style>