uniProject/pages/study/lookShipin.vue

<template>
	<view class="ezy-course-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{shipinTitle}}</text>
		</view>
		<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>
		<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>
		<view class="course-content-border">
			<view class="course-content-box">
				<!-- <view class="course-title">{{jieName}}</view> -->
				<view v-for="(item,index) in progressMarkers" :key="index" @click="markersClick(item)">
					<view class="title-play-box">
						<icon class="course-icon" :style="{backgroundImage: 'url(' + courseIconFun() + ')'}"></icon>
						<view class="course-title">{{item.title}}</view>
						<view class="course-play-btn" @click="markersClick(item)">视频讲解</view>
					</view>
					<rich-text :nodes="item.describe" class="course-content-item"></rich-text>
				</view>
			</view>
		</view>
		<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
			mask-background-color="rgba(51, 137, 217, 0.95);">
			<view :class="courseClass">
				<view class="text-score">{{credit}}</view>
				<view class="course-btn-box">
					<view @click="goBack" class="return-btn"></view>
					<view @click="goNext" class="continue-btn"></view>
				</view>
			</view>
		</uni-popup>
		<tip-big-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :imgShow="true"></tip-big-dialog>
		<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
	</view>

</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		getVideoAuth,
		getVideoAuthYk,
		videoWancheng
	} from "@/api/shipin.js"
	import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
	import tipBigDialog from '@/components/dialog/tipBigDialog.vue';
	import tipSmallDialog from '@/components/dialog/tipSmallDialog.vue'
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import {
		userZhangNextInfo,
	} from "@/api/learnPlan.js"
	import cacheManager from "@/utils/cacheManager.js";

	export default {
		data() {
			return {
				pageData: null, //上个页面获取的视频参数（视频id）
				playAuth: "", //播放凭证
				progressMarkers: [],
				jieName: '',
				hideFlag: 'show',
				videoId: "", //阿里云视频id
				levelId: '',
				tipFlag: '',
				credit: '',
				subjectId: '',
				tipContent: '是否前往开通付费',
				typeId: '',
				seekTime: '',
				jieId: '',
				courseClass: '',
				shipinTitle: '',
				cacheZhangInfo: {},
				cacheCurrentZhangIndex: '',
				YouKeContent: '您当前的身份是游客，想要体验完整内容需注册成用户!'
			}
		},
		components: {
			tipMiddleDialog,
			tipBigDialog,
			tipSmallDialog
		},
		onLoad(options) {
			if (!cacheManager.get('auth')) {
				const youkeData = JSON.parse(options.youkePageData)
				// 游客
				this.videoId = youkeData.jieList.videoId
				this.subjectId = youkeData.subjectId
				this.levelId = youkeData.levelId
				this.typeId = youkeData.typeId
				this.tipFlag = youkeData.tipFlag
				this.shipinTitle = youkeData.jieName
				this.progressMarkers = youkeData.jieList.jiedianList || []
				this.getLiveYk(); //获取播放凭证
			} else {
				this.init(options)
			}
		},

		onHide() {
			console.log('onHideonHideonHideonHide');
			this.hideFlag = 'hide'
		},
		onUnload() {
			console.log('onUnloadonUnloadonUnloadonUnloadonUnload');
			this.hideFlag = 'hide'
		},
		methods: {
			courseBjFun() {
				if (!cacheManager.get('auth')) {
					switch (Number(this.subjectId)) {
						case 1:
							return 'static/images/course/couse-shuxue-bj.png'
							break;
						case 2:
							return 'static/images/course/course-yingyu-bj.png'
							break;
						default:
							break;
					}
				} else {
					switch (Number(cacheManager.get('auth').subjectId)) {
						case 1:
							return 'static/images/course/couse-shuxue-bj.png'
							break;
						case 2:
							return 'static/images/course/course-yingyu-bj.png'
							break;
						default:
							break;
					}
				}
			},
			courseIconFun() {
				if (!cacheManager.get('auth')) {
					switch (Number(this.subjectId)) {
						case 1:
							return 'static/images/course/shuxue-icon.png'
							break;
						case 2:
							return 'static/images/course/yingyu-icon.png'
							break;
						default:
							break;
					}
				} else {
					switch (Number(cacheManager.get('auth').subjectId)) {
						case 1:
							return 'static/images/course/shuxue-icon.png'
							break;
						case 2:
							return 'static/images/course/yingyu-icon.png'
							break;
						default:
							break;
					}
				}
			},
			init(options) {
				this.jieId = options.jieId
				if (!(cacheManager.get('zhangInfo') && options.jieId)) {
					toast('数据错误,缓存丢失/ jieId丢失')
					return false
				}
				this.cacheCurrentZhangIndex = cacheManager.get('auth').currentZhang
				this.cacheZhangInfo = cacheManager.get('zhangInfo')

				// let zhang = this.cacheZhangInfo.zhangList.find(zhang => zhang.zhangId == this.zhangId);
				// if (!zhang) {
				// 	return
				// }
				let zhang = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex]
				let currentObject = zhang.jieList.find(item => item.jieId == options.jieId);
				console.log(currentObject);
				this.shipinTitle = currentObject.jieName
				this.pageData = {
					...currentObject
				}
				console.log(this.pageData);
				this.videoId = this.pageData.videoId
				this.jieName = this.pageData.jieName
				this.credit = this.pageData.credit
				this.progressMarkers = this.pageData.jiedianList || []
				this.getLive(); //获取播放凭证
			},
			goNextZhang() {
				let that = this
				cacheManager.updateObject('auth', {
					currentZhang: this.cacheCurrentZhangIndex + 1
				})
				this.cacheZhangInfo = cacheManager.get('zhangInfo')
				let zhang = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex + 1]
				uni.redirectTo({
					url: '/pages/study/lookShipin?jieId=' + zhang.jieList[0].jieId
				})
			},
			playEnd(data) {
				console.log('data', data);
				console.log('111111');
				// #ifdef APP-PLUS
				plus.screen.lockOrientation('portrait-primary');
				// #endif
				const AuthCode = getUserIdentity();
				console.log(AuthCode);
				if (AuthCode == 'Visitor') {
					return false
				} else {

					let currentJieData = cacheManager.getCurrentJieData('zhangInfo', this.cacheCurrentZhangIndex, this
						.jieId)
					if (currentJieData.studyFlag == 1) {
						// 学完一遍
						this.courseClass = 'course-finish-dialog'
						this.$refs.popupRef.open();
					} else {
						cacheManager.updateJieStatus('zhangInfo', this.cacheCurrentZhangIndex, this.jieId)
						this.courseClass = 'course-score-dialog'
						this.$refs.popupRef.open();
						let req = {
							credit: this.credit,
							jieId: this.jieId,
						}
						videoWancheng(req).then(res => {

						})
					}
				}

			},
			goBack() {
				// #ifdef APP-PLUS
				plus.screen.unlockOrientation();
				// #endif
				this.$refs.popupRef.close();
				this.goUpPage()
			},
			goNext() {
				// #ifdef APP-PLUS
				plus.screen.unlockOrientation();
				// #endif
				this.$refs.popupRef.close();
				if (!cacheManager.get('auth')) {
					console.log(this);
					this.$refs.youkeDialogRef.handleShow();
				} else {
					const AuthCode = getUserIdentity();
					console.log(AuthCode);
					if (AuthCode == 'Not-Vip') {
						this.$refs.goPayDialogRef.handleShow();
						return false
					}
					//	debugger
					Number(this.jieId++)
					console.log('this.pageData', this.pageData);
					let currentObject = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex].jieList.find(item =>
						item.jieId == this.jieId);
					if (currentObject) {
						this.pageData = {
							...currentObject
						}
					}
					// lastFlag是否是本章最后一节,0否1是  type，1视频，2试题
					if (this.pageData.lastFlag == 1 && this.pageData.type == 2) {
						uni.redirectTo({
							url: `/pages/unitTest/index?jieId=` + this.pageData.jieId
						})
					} else if (this.pageData.lastFlag == 1 && this.pageData.type == 1) {
						// 当前是本章最后一节，并且是 视频 切换下一章
						this.goNextZhang()
					} else {
						uni.redirectTo({
							//url: '/pages/study/lookShipin?studyData=' + JSON.stringify(pageData)
							url: '/pages/study/lookShipin?jieId=' + this.jieId
						})
					}
				}
			},
			getLiveYk() {
				if (!this.videoId) {
					toast("video缺失！")
					return false
				}
				let req = {
					videoId: this.videoId
				}
				getVideoAuthYk(req).then(res => {
					this.playAuth = res.data
				})
			},
			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() {
				if (!cacheManager.get('auth')) {
					uni.redirectTo({
						url: '/pages/study/index?levelId=' + this.levelId + '&typeId=' + this.typeId +
							'&subjectId=' +
							this.subjectId + '&tipFlag=' + this.tipFlag
					})
				} else {
					uni.redirectTo({
						url: `/pages/study/index`

					})
				}



			},
			goPayPage() {
				let zhangInfoLocal = cacheManager.get('zhangInfo')
				if (!zhangInfoLocal.cardId) {
					toast("cardId 丢失请重新选择学科LevelId");
					return false
				}
				uni.redirectTo({
					url: '/pages/mall/mallPage?cardId=' + zhangInfoLocal.cardId + '&from=daoPage' + '&subjectId=' +
						zhangInfoLocal.subjectId
				})
			},
			ykConfirm() {
				uni.redirectTo({
					url: '/pages/login/index'
				});
			}
		},
		created() {
			// console.log("getLive")
			// this.getLive(); //获取播放凭证

		},

	}
</script>



<script module="renderScript" lang="renderjs">
	export default {
		mounted() {
			console.log("renderScript1")
			// 在适合的生命周期，通过script和link标签引入播放器sdk、css
			//	this.loadWebPlayerSDK()
		},
		data() {
			return {
				player: null,
				playAuth: '',
				videoId: '',
				progressMarkers: [],
				isFullScreen: false,
				seekTime: ''

			}
		},
		methods: {

			receiveMsg(newValue, oldValue, ownerInstance, instance) {
				// console.log('service层中的options发生变化')
				// console.log('新值', newValue)
				// console.log('旧值', oldValue)
				// ownerInstance和this.$ownerInstance一样，可用来向service层通信
				// instance和ownerInstance的区别是：
				// instance.$el指向的是触发事件的那个节点；ownerInstance.$el指向当前vue文件中的根节点；
				// instance的作用目前尚不明确，官方没有给出用法
				if (newValue) {
					this.playAuth = ''
					this.playAuth = newValue
					this.loadWebPlayerSDK()

				}
			},
			videoIdFun(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.videoId = ''
					this.videoId = newValue
				}
			},
			hideFlagFun(newValue, oldValue, ownerInstance, instance) {
				if (this.player) {
					this.player.pause()
				}
			},
			progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {

				if (newValue) {
					this.progressMarkers = newValue
				}
			},
			seekTimeFun(newValue, oldValue, ownerInstance, instance) {
				if (newValue) {
					this.player.play()
					this.player.seek(newValue)
					// switch (this.player.getStatus()) {
					// 	case 'init':
					// 		break;
					// 	case 'ready':
					// 		break;
					// 	case 'loading':
					// 	this.player.play()
					// 	this.player.seek(newValue)
					// 		break;
					// 	case 'play':
					// 		this.player.seek(newValue)
					// 		break;
					// 	case 'pause':
					// 	this.player.play()
					// 	this.player.seek(newValue)
					// 		break;
					// 	case 'playing':
					// 	this.player.seek(newValue)
					// 		break;
					// 	case 'waiting':
					// 		break;
					// 	case 'error':
					// 		break;
					// 	case 'ended':
					// 		break;
					// 	default:
					// 		break;
					// }
					//	this.player.seek(newValue)
				}
			},
			playAli() {
				let that = this
				// console.log(this.videoId);
				// console.log(this.playAuth);
				//配置播放器
				if (!this.playAuth) {
					return false;
				}
				var player = new Aliplayer({
					id: "wgy-player-test",
					"vid": this.videoId,
					"playauth": this.playAuth,
					extraInfo: {
						poster: 'noposter'
					},
					fullscreenEvents: {
						fullscreenChange: (isFull) => {
							this.isFullScreen = isFull
						}
					},
					//cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
					// "vid": '',
					// "playauth": '',
					// "playConfig": {
					// 	"EncryptType": 'AliyunVoDEncryption'
					// },
					"skinLayout": [{
							"name": "bigPlayButton",
							"align": "blabs",
							"x": 30,
							"y": 80
						},
						{
							"name": "H5Loading",
							"align": "cc"
						},
						{
							"name": "controlBar",
							"align": "blabs",
							"x": 0,
							"y": 0,
							"children": [{
									"name": "progress",
									"align": "blabs",
									"x": 0,
									"y": 44
								},
								{
									"name": "playButton",
									"align": "tl",
									"x": 15,
									"y": 12
								},
								{
									"name": "fullScreenButton",
									"align": "tr",
									"x": 10,
									"y": 12
								},
								{
									"name": "timeDisplay",
									"align": "tr",
									"x": 10,
									"y": 5
								}
							]
						}
					],
					"qualitySort": "asc",
					"format": "mp4",
					"mediaType": "video",
					"encryptType": 1,
					"progressMarkers": this.progressMarkers,
					"autoplay": false,
					"isLive": false,
					"rePlay": false,
					"playsinline": true,
					"preload": false,
					"controlBarVisibility": "hover",
					"useH5Prism": true

				}, function(player) {});
				this.player = player;
				player.on('canplay', function() {
					console.log('canplay', this.player.tag);
					player.tag.play();

				});

				player.on('ended', function(data) {
					that.exitFullScreen();
					that.$ownerInstance.callMethod('playEnd', {
						data: 'end'
					})
					// uni.$emit('playEnd', {
					// 	data: 'end'
					// });
				});
			},
			exitFullScreen() {
				if (document.exitFullscreen) {
					document.exitFullscreen(); // 标准方法
				} else if (document.mozCancelFullScreen) { // Firefox
					document.mozCancelFullScreen();
				} else if (document.webkitExitFullscreen) { // Chrome, Safari & Opera
					document.webkitExitFullscreen();
				} else if (document.msExitFullscreen) { // IE/Edge
					document.msExitFullscreen();
				}
			},

			loadWebPlayerSDK() {
				return new Promise((resolve, reject) => {
					const s_tag = document.createElement('script'); // 引入播放器js
					s_tag.type = 'text/javascript';
					s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js';
					s_tag.charset = 'utf-8';
					s_tag.onload = () => {
						//	console.log(this.playAuth);
						this.playAli()
						resolve();
					}
					document.body.appendChild(s_tag);
					const l_tag = document.createElement('link'); // 引入播放器css
					l_tag.rel = 'stylesheet';
					l_tag.href =
						'https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css';
					document.body.appendChild(l_tag);
				});
			},
		}
	}
</script>