uniProject/pages/ziranpindu/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 jstx-ksp-page-body">
			<!-- 核心基础题 -->
			<videoPlayVue ref="c1" :key="1" :videoId1="videoId" :progressMarkers1="progressMarkers"
				:playAuth1="playAuth" :hideFlag1="hideFlag" :seek-time1="seekTime" class="ksp-video-box"
				@playEnd="playEnd"></videoPlayVue>
			<view class="ksp-scroll-view">
				<view class="ksp-item-list" v-for="(item,index) in jieInfo.jiedianList1" :key="index">
					<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">
						<rich-text :nodes="item.title"></rich-text>
					</view>
				</view>
			</view>
			<!-- 无数据 -->
			<template v-if="!videoId">
				<view class="ezy-no-sj">
					<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/chanpinZiRanPinDu.js";
	import tishiDlVue from './components/tishiDl.vue';
	import videoPlayVue from './components/videoPlay.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: '',
			}
		},
		components: {
			tishiDlVue,
			videoPlayVue,
			ezyActiveVue
		},
		onLoad(options) {
			this.init(options)
		},
		onHide() {
			this.hideFlag = 'hide'
		},
		onUnload() {
			this.hideFlag = 'hide'
		},
		methods: {
			//  当前节学习完成
			saveJieWancheng() {
				httpApi.getPinduChanpinWancheng({
					jieId: this.jieInfo.jieId
				}).then(res => {
					if (res.data) {
						// 更新单员状态
						cacheManager.updatePinduWanchengStatus(this.jieInfo.jieId)
						// 学习完成提示弹窗
						this.$refs.popupRef.open();
					}
				})
			},
			// 当前节学习开始
			saveJinduStart() {
				httpApi.getPinduChanpinSave({
					jieId: this.jieInfo.jieId
				})
			},
			getDataInfo() {
				httpApi.getPinduChanpinJieInfo({
					jieId: this.jieId
				}).then(res => {
					// 时间节点转换
					res.data.jiedianList1.forEach(item => item.offset = convertTimeToSeconds(item.time1))
					// 重新赋值
					Object.assign(this.jieInfo, res.data)
					// 触发当前节学习进度
					// this.saveJinduStart();
					// 	针对视频进行赋值
					this.videoId = this.jieInfo.video1;
					// 针对节点赋值
					this.progressMarkers = this.jieInfo.jiedianList1;
					// 执行方法
					this.getLive(); //获取播放凭证
				})
			},
			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
				})
			},
			markersClick(data) {
				this.seekTime = ""
				this.$nextTick(() => {
					this.seekTime = data.offset
				});
			},
			goUpPage() {
				uni.switchTab({
					url: "/pages/chanpinneirong/index"
				})
			},
		},
	}
</script>