uniProject/pages/xinshuxue/lookShipin.vue

<template>
	<view class="ezy-ksp-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{jieInfo.jieIntro}}</text>
		</view>
		<view class="ezy-page-body ksp-page-body">
			<view class="ksp-tab-box">
				<ezyActiveVue class="ezy-tab-item-active tab-item" :class="{active: showA}"
					@click="handleSelectHexinti">核心基础题</ezyActiveVue>
				<ezyActiveVue class="ezy-tab-item-active tab-item" :class="{active: showB}"
					@click="handleSelectNengliTishengti">能力提升题</ezyActiveVue>
			</view>
			<!-- 核心基础题 -->
			<videoPlayVue ref="c1" v-show="showA" :key="1" :videoId1="videoId" :progressMarkers1="progressMarkers"
				:playAuth1="playAuth" :hideFlag1="hideFlag" :seek-time1="seekTime" class="ksp-video-box"
				@playEnd="playEnd"></videoPlayVue>
			<videoPlayVue2 ref="c2" v-show="videoId2 && showB" :key="2" :videoId1="videoId2"
				:progressMarkers1="progressMarkers2" :playAuth1="playAuth2" :hideFlag1="hideFlag2"
				:seek-time1="seekTime2" class="ksp-video-box" @playEnd="playEnd2"></videoPlayVue2>
			<view class="ksp-scroll-view">
				<view class="ksp-item-list" v-for="(item,index) in jieInfo.jiedianList1" :key="index" v-show="showA">
					<view class="list-head">
						<view class="list-title">{{item.name}}</view>
						<ezyActiveVue class="ezy-btn-active list-btn" @click="markersClick(item)"></ezyActiveVue>
					</view>
					<view class="list-body">
						<!-- <view class="ksp-title">课程位置：{{item.time1}}-{{item.time2}}</view> -->
						<rich-text :nodes="item.title"></rich-text>
					</view>
				</view>
				<!-- 能力提升题 -->
				<template v-if="!!videoId2">
					<view class="ksp-item-list" v-for="(item,index) in jieInfo.jiedianList2" :key="index"
						v-show="showB">
						<view class="list-head">
							<view class="list-title">{{item.name}}</view>
							<ezyActiveVue class="ezy-btn-active list-btn" @click="markersClick2(item)"></ezyActiveVue>
						</view>
						<view class="list-body">
							<!-- <view class="ksp-title">课程位置：{{item.time1}}-{{item.time2}}</view> -->
							<rich-text :nodes="item.title"></rich-text>
						</view>
					</view>
				</template>


			</view>
			<!-- 无数据 -->
			<template v-if="!videoId2 && showB">
				<view class="ezy-no-sj" v-if="showB">
					<icon></icon>
					<text>暂无数据</text>
				</view>
			</template>
		</view>
		<!-- 弹窗 -->
		<tishiDlVue ref="popupRef"></tishiDlVue>
	</view>

</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		getVideoAuth,
		getVideoAuthYk,
		videoWancheng
	} from "@/api/shipin.js"
	import {
		toast,
		convertTimeToSeconds
	} from "@/utils/common";
	import cacheManager from "@/utils/cacheManager.js";
	import * as httpApi from "@/api/chanpinShuxue.js";
	import tishiDlVue from './components/tishiDl.vue';
	import videoPlayVue from './components/videoPlay.vue';
	import videoPlayVue2 from './components/videoPlay2.vue';
	import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";
	export default {
		data() {
			return {
				danyuanId: null,
				jieInfo: {
					cover1: '',
					cover2: '',
					jieId: '',
					jieIntro: '',
					jieName: '',
					jiedianList1: [],
					jiedianList2: [],
					type: '',
					video1: '',
					video2: '',
				},

				jieId: '',
				shipinTitle: '',

				pageData: null, //上个页面获取的视频参数（视频id）
				playAuth: "", //播放凭证
				progressMarkers: [],
				hideFlag: 'show',
				videoId: "", //阿里云视频id
				seekTime: '',
				showA: true,

				pageData2: null, //上个页面获取的视频参数（视频id）
				playAuth2: "", //播放凭证
				progressMarkers2: [],
				hideFlag2: 'show',
				videoId2: "", //阿里云视频id
				seekTime2: '',
				showB: false,
			}
		},
		components: {
			tishiDlVue,
			videoPlayVue,
			videoPlayVue2,
			ezyActiveVue
		},
		onLoad(options) {
			this.init(options)
		},
		onHide() {
			this.hideFlag = 'hide'
			this.hideFlag2 = 'hide'
		},
		onUnload() {
			this.hideFlag = 'hide'
			this.hideFlag2 = 'hide'
		},
		methods: {
			handleSelectHexinti() {
				if (this.showA) return;
				this.showB = false;
				this.showA = true;
				this.$refs.c1 && this.$refs.c1.handleStop()
				this.$refs.c2 && this.$refs.c2.handleStop()
			},
			handleSelectNengliTishengti() {
				if (this.showB) return;
				
				if (!this.jieInfo.jiedianList2 || this.jieInfo.jiedianList2.length === 0) {
					toast("本节无能力提升题");
					// tab回核心基础题状态
					this.showB = false;
					this.showA = true;
					return; 
				}
				
				this.showB = true;
				this.showA = false;
				this.$refs.c1 && this.$refs.c1.handleStop()
				this.$refs.c2 && this.$refs.c2.handleStop()
			},
			//  当前节学习完成
			saveJieWancheng() {
				httpApi.getShuxueChanpinWancheng({
					jieId: this.jieInfo.jieId
				}).then(res => {
					if (res.data) {
						// 更新单员状态
						cacheManager.updateShuxueWanchengStatus(this.jieInfo.jieId)
						// 学习完成提示弹窗
						this.$refs.popupRef.open();
					}
				})
			},
			// 当前节学习开始
			saveJinduStart() {
				httpApi.getShuxueChanpinSave({
					jieId: this.jieInfo.jieId
				})
			},
			getDataInfo() {
				httpApi.getShuxueChanpinJieInfo({
					jieId: this.jieId
				}).then(res => {
					// 时间节点转换
					res.data.jiedianList1.forEach(item => item.offset = convertTimeToSeconds(item.time1))
					res.data.jiedianList2.forEach(item => item.offset = convertTimeToSeconds(item.time1))
					// 重新赋值
					Object.assign(this.jieInfo, res.data)
					// 触发当前节学习进度
					// this.saveJinduStart();
					// 	针对视频进行赋值
					this.videoId = this.jieInfo.video1;
					this.videoId2 = this.jieInfo.video2;
					// 针对节点赋值
					this.progressMarkers = this.jieInfo.jiedianList1;
					this.progressMarkers = this.jieInfo.jiedianList2;
					// 执行方法
					this.getLive(); //获取播放凭证

					this.getLive2();
				})
			},
			init(options) {
				this.jieId = options.jieId;
				this.getDataInfo()
			},
			playEnd(data) {
				// #ifdef APP-PLUS
				plus.screen.lockOrientation('portrait-primary');
				// #endif
				this.saveJieWancheng();
			},
      playEnd2(data) {
        // #ifdef APP-PLUS
        plus.screen.lockOrientation('portrait-primary');
        // #endif
      },
			getLive() {
				if (!this.videoId) {
					toast("video缺失！")
					return false
				}
				let req = {
					videoId: this.videoId
				}

				getVideoAuth(req).then(res => {
					this.playAuth = res.data
				})
			},
			getLive2() {
				if (!this.videoId2) {
					// toast("video缺失！")
					return false
				}
				let req = {
					videoId: this.videoId2
				}

				getVideoAuth(req).then(res => {
					this.playAuth2 = res.data
				})
			},
			markersClick(data) {
				this.showA = true;
				this.showB = false;
				this.$refs.c2 && this.$refs.c2.handleStop();
				this.seekTime = ""
				this.$nextTick(() => {
					this.seekTime = data.offset
				});
			},
			markersClick2(data) {
				this.showA = false;
				this.showB = true;
				this.$refs.c1 && this.$refs.c1.handleStop()
				this.seekTime2 = ""
				this.$nextTick(() => {
					this.seekTime2 = data.offset
				});
			},
			goUpPage() {
				uni.switchTab({
					url: "/pages/chanpinneirong/index"
				})
				// uni.navigateBack()
				// uni.redirectTo({
				// 	url: "/pages/chanpinneirong/index"
				// })
			},
		},
	}
</script>