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="ksp-body">
		<!-- <view class="ezy-video-box course-video-box">
			<view ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
				:change:playAuth="renderScript.receiveMsg" :videoId="videoId" :change:videoId="renderScript.videoIdFun"
				:hideFlag="hideFlag" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers"
				:change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime"
				:change:seekTime="renderScript.seekTimeFun" class="ezy-video">
			</view>
		</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="showB" :key="2"  :videoId1="videoId2" :progressMarkers1="progressMarkers2" :playAuth1="playAuth2"
			:hideFlag1="hideFlag2" :seek-time1="seekTime2" class="ksp-video-box" @playEnd="playEnd"
			></videoPlayVue2>
			<!-- 核心基础题 -->
			<view class="ksp-item-list">
				<view class="item-title">核心基础题</view>
				<view class="ksp-item-box" v-for="(item,index) in jieInfo.jiedianList1" :key="index" @click="markersClick(item)">
					<icon class="ksp-icon"></icon>
					<view>
						<view class="ksp-title">{{item.name}}</view>
						<view class="ksp-title">课程位置：{{item.time1}}-{{item.time2}}</view>
					</view>
				</view>
			</view>
			<!-- 能力提升题 -->
			<view class="ksp-item-list">
				<view class="item-title">能力提升题</view>
				<view class="ksp-item-box" v-for="(item,index) in jieInfo.jiedianList2" :key="index" @click="markersClick2(item)">
					<icon class="ksp-icon"></icon>
					<view>
						<view class="ksp-title">{{item.name}}</view>
						<view class="ksp-title">课程位置：{{item.time1}}-{{item.time2}}</view>
					</view>
				</view>
			</view>
		</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';

	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
		},
		onLoad(options) {
			this.init(options)
		},
		onHide() {
			this.hideFlag = 'hide'
			this.hideFlag2 = 'hide'
		},
		onUnload() {
			this.hideFlag = 'hide'
			this.hideFlag2 = 'hide'
		},
		methods: {
			//  当前节学习完成
			saveJieWancheng() {
				httpApi.getShuxueChanpinWancheng({jieId: this.jieInfo.jieId}).then(res => {
					if (res.data) {
						// 更新单员状态
						cacheManager.updateStatusAndProess(this.jieInfo.jieId)
						// 学习完成提示弹窗
						this.$refs.popupRef.open();
					}
				})
			},
			// 当前节学习开始
			saveJinduStart() {
				httpApi.getShuxueChanpinSave({jieId: this.jieInfo.jieId})
			},
			courseBjFun() {
				return 'static/images/course/couse-shuxue-bj.png'
			},
			courseIconFun() {
				return 'static/images/course/shuxue-icon.png'
			},
			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();
			},
			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.handleStop();
				this.seekTime = ""
				this.$nextTick(() => {
					this.seekTime = data.offset
				});
			},
			markersClick2(data) {
				this.showA = false;
				this.showB = true;
				this.$refs.c1.handleStop()
				this.seekTime2 = ""
				this.$nextTick(() => {
					this.seekTime2 = data.offset
				});
			},
			goUpPage() {
				uni.navigateBack()
			},
		},
	}
</script>