wangguoyu пре 4 недеља
родитељ
комит
ca947fb2f4
3 измењених фајлова са 552 додато и 3 уклоњено
  1. 6 0
      pages.json
  2. 3 3
      pages/pay/order.vue
  3. 543 0
      pages/study/lookShipinNew.vue

+ 6 - 0
pages.json

@@ -49,6 +49,12 @@
 				"navigationBarTitleText": "视频",
 				"navigationStyle": "custom"
 			}
+		},	{
+			"path": "pages/study/lookShipinNew",
+			"style": {
+				"navigationBarTitleText": "视频",
+				"navigationStyle": "custom"
+			}
 		},
 		{
 			"path": "pages/game/index",

+ 3 - 3
pages/pay/order.vue

@@ -45,7 +45,7 @@
 											</view>
 										</view>
 									</view>
-									<view class="content-heji">合计:¥{{item.money}}</view>
+									<view class="content-heji" v-if="item.cardList.length>1">合计:¥{{item.money}}</view>
 									<view v-if="item.status !=2" class="footer-mall-pay-box">
 										<view class="pay-status-box"
 											v-if="payType =='weixin'&&currentPlatform =='android'"
@@ -119,7 +119,7 @@
 											</view>
 										</view>
 									</view>
-									<view class="content-heji">合计:¥{{item.money}}</view>
+									<view class="content-heji" v-if="item.cardList.length>1">合计:¥{{item.money}}</view>
 									<view v-if="item.status !=2" class="footer-mall-pay-box">
 										<view class="pay-status-box"
 											v-if="payType =='weixin'&&currentPlatform =='android'"
@@ -193,7 +193,7 @@
 											</view>
 										</view>
 									</view>
-									<view class="content-heji">合计:¥{{item.money}}</view>
+									<view class="content-heji" v-if="item.cardList.length>1">合计:¥{{item.money}}</view>
 									<view v-if="item.status !=2" class="footer-mall-pay-box">
 										<view class="pay-status-box"
 											v-if="payType =='weixin'&&currentPlatform =='android'"

+ 543 - 0
pages/study/lookShipinNew.vue

@@ -0,0 +1,543 @@
+<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="course-content-border">
+			<view class="course-content-box">
+				<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>
+		<svip-dialog ref="svipDialogRef" @confirm-btn="svipConfirm"></svip-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 svipDialog from './svipDialog.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
+				cardId: '',
+				credit: '',
+				nianji: '',
+				zhangId: '',
+				seekTime: '',
+				jieId: '',
+				courseClass: '',
+				shipinTitle: '',
+				cacheZhangInfo: {},
+				cacheCurrentZhangIndex: '',
+				YouKeContent: '您当前的身份是游客,想要体验完整内容需注册成用户!'
+			}
+		},
+		components: {
+			tipMiddleDialog,
+			tipBigDialog,
+			svipDialog
+		},
+		onLoad(options) {
+			if (!cacheManager.get('auth')) {
+				const youkeData = JSON.parse(options.youkePageData)
+				// 游客
+				this.videoId = youkeData.jieList.videoId
+				this.nianji = youkeData.nianji
+				this.zhangId = youkeData.zhangId
+				this.cardId = youkeData.cardId
+				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() {
+				switch (Number(cacheManager.get('auth').cardId)) {
+					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() {
+				switch (Number(cacheManager.get('auth').cardId)) {
+					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.svipDialogRef.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() {
+				let req = {
+					videoId: this.videoId
+				}
+				getVideoAuthYk(req).then(res => {
+					this.playAuth = res.data
+				})
+			},
+			getLive() {
+				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?cardId=' + this.cardId + '&nianji=' + this.nianji + '&zhangId=' +
+							this.zhangId + '&tipFlag=' + this.tipFlag
+					})
+				} else {
+					uni.redirectTo({
+						url: `/pages/study/index`
+
+					})
+				}
+
+
+
+			},
+			svipConfirm() {
+				uni.redirectTo({
+					url: '/pages/pay/svip?cardId=' + cacheManager.get('auth').cardId
+				})
+			},
+			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>