ylrz_scrm_uniapp/pages_course/info.vue

<template>
	<view class="content">
		<view class="video-box">
			<!-- 返回按钮 -->
			<!-- #ifdef APP-PLUS -->
			<image class="back-img" @click.stop="navBack()" src="@/static/images/course/back_white_icon.png"></image>
			<!-- #endif -->
			<view class="cousrseImg x-c" v-show="!pickCatalog.url">
				<u-loading-icon size="30"></u-loading-icon>
				<!-- <image :src="data.imgUrl" mode="aspectFit"></image> -->
			</view>
			<!-- 视频 -->
			<view class="video-container" style="position: relative;height: 422rpx;" :videoPlayStatus="videoPlayStatus" :change:videoPlayStatus="xgplayer.changeVideo">
				<view id="detail-video"
				:pickCatalog="pickCatalog" 
				:change:pickCatalog="xgplayer.initJs"
				:exitFullscreen="exitFullscreen"
				:change:exitFullscreen="xgplayer.handleExitFullscreen"
				></view>
				<image class="back-img" v-if="fullScreen" @click.stop="videoback" src="@/static/images/course/back_white_icon.png"></image>
				<!-- 疗法  -->
				<!-- <view v-if="showTherapy&&fullScreen" class="horizontal" @tap.stop>
					<view class="goods" @tap.stop="goToPro(showTherapyItem.packageId)">
						<image :src="showTherapyItem.imgUrl" mode="aspectFill" class="goodsimg"></image>
						<view class="goodsname textOne">{{showTherapyItem.packageName}}</view>
					</view>
					<view style="width: 20px;height: 20px;position: absolute;right:0rpx;top:0rpx;z-index:999">
						<image style="width: 20px;height: 20px" src="@/static/images/close40.png"
							@tap.stop="closeTherapy"></image>
					</view>
				</view> -->
				<view class="audiobox es es-ver es-ac es-pc" v-if="showAudio" @click.stop>
			
					<view class="audiobox-title">
						<image class="back" @click.stop="navBack()" src="@/static/images/course/back_white_icon.png"></image>
						<view class="textOne">
						{{catalogueList[pickCatalogIdx]&&catalogueList[pickCatalogIdx].title}}
						</view>
					</view>
					<view class="es es-ver es-ac es-pc">
						<view class="es es-ac es-pc">
							<image class="es-icon-52 es-icon-play-last"
								src="/static/images/video/play-last.png" @tap="endedPlayPrev()"></image>
							<image class="es-icon-88 es-ml-50 es-mr-50"
								:src="audioPlayIng?'/static/images/video/play-stop.png':'/static/images/course/video_icon.png'" @tap="playAudioAction()"></image>
							<image class="es-icon-52 es-icon-play-next"
								src="/static/images/video/play-next.png" @tap="endedPlayNext('click')"></image>
						</view>
						<view class="audiobox-time">{{utils.formatSeconds(tempAudioDuration)}} / {{utils.formatSeconds(pickCatalog.seconds)}}</view>
					</view>
					<view class="audiobox-video x-ac" @tap="backPlayVideo">返回视频</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-Y" :scroll-y="true" :style="'height:' + clientHeight + 'px;'" v-show="!isShowList">
			<view class="video-info">
				<view class="video-info-header">
					<view class="video-info-headerl">
						<image mode="aspectFill" :src="data.talentAvatar"></image>
						<text class="textOne">{{data.courseName}}</text>
					</view>
					<button class="follow-btn" @tap="doFollow()">
						<image v-show="!isFollow" src="@/static/images/course/guanzhu_icon.png" mode="aspectFill"></image>
						<text>{{isFollow?"已关注":"关注"}}</text>
					</button>
				</view>
				<view>
					<view class="video-info-voicebox2">
						<text>{{data.views}}次播放 · 总时长：{{data.totalDuration}}</text>
						<view class="x-c" @click="isExpand = !isExpand" v-if="showExpandText">
							<text>{{isExpand ? '收起简介' : '展开简介'}}</text>
							<view :class="isExpand ? 'rotate':''"><uni-icons type="down" size="14"
									color="#bbbbbb"></uni-icons></view>
						</view>
					</view>
					<view :class="showDes|| !showExpandText? 'opacity video-info-desc':'video-info-desc' "
						id="descbox-desc" :style="{height: isExpand ? 'auto': '84rpx'}">
						{{data.description}}
						<image v-show="!isExpand&&showExpandText" class="desc-image x-c"
							src="/static/images/other/bg_bar.png"></image>
					</view>
				</view>

				<view class="video-info-footer">
					<view @tap="handleListen()">
						<image src="@/static/images/course/sound_icon24.png" mode="aspectFill"></image>
						<text :style="{color: showAudio ? '#FF5C03':'#757575'}">听声</text>
					</view>
					<!-- v-if="!$qconfig.isAppStore" -->
					<view @tap="$navTo('./note?courseId='+courseId)">
						<image src="@/static/images/course/note_icon24.png" mode="aspectFill"></image>
						<text>笔记</text>
					</view>
					<view @tap="doFavorite()">
						<image
							:src="isFavorite?'/static/images/course/collect_on_icon24.png':'/static/images/course/collect_icon24.png'"
							mode="aspectFill"></image>
						<text>{{isFavorite?"已收藏":"收藏"}}</text>
					</view>
					<view @tap="doLike()">
						<image :src="isLike?'/static/images/course/like_on_icon.png':'/static/images/course/like_icon.png'"
							mode="aspectFill"></image>
						<text>{{isLike?"喜欢":"喜欢"}}</text>
					</view>
					<!-- <view @tap="openShare()">
						<image src="@/static/images/course/weixin_icon.png" mode="aspectFill"></image>
						<text>分享</text>
					</view> -->
				</view>

			</view>
			<!-- 讲堂目录 -->
			<view class="video-directory">
				<view class="box-header">
					<view class="box-header-title">讲堂目录</view>
					<view class="box-header-r" @tap="goToCatalogue()">
						<text>共{{catalogueList.length}}节</text>
						<image src="@/static/images/course/my_right_arrow_right_icon.png" mode="aspectFill"></image>
					</view>
				</view>

				<scroll-view class="video-directory-scrollx" scroll-x="true" :scroll-into-view="scrollIntoViewId"
					scroll-with-animation="true" overflow-anchor="none">
					<view :id="'cataLogue' + index"
						:class="pickCatalogIdx == index ? 'active-scrollitem video-directory-scrollitem':'video-directory-scrollitem'"
						v-for="(item,index) in catalogueList" :key="index" @click="pickCatalogAction(index)">
						<view
							:class="index>1 && canShowVip(item) ? 'freeflag freeflag-member':'freeflag freeflag-free'">
							{{ index>1 && canShowVip(item) ? '限时特惠' : '免费'}}
						</view>
						<view class="video-directory-num">
							<text>第{{item.courseSort}}讲</text>
							<image v-if='pickCatalogIdx == index' src="@/static/images/course/hear_icon.png"></image>
							<view class="empty" v-else></view>
						</view>
						<view class="video-directory-title">
							<view class="textTwo">{{item.title}}</view>
							<!-- <view class="imagebox">
			  						<view class="mask" v-if='pickCatalogIdx != index'>
			  							<image src="@/static/images/course/video_icon.png" mode="aspectFill"></image>
			  						</view>
			  						<image class="video-directory-img" src="@/static/image/home1/logo.png" mode="aspectFill"></image>
			  					</view> -->
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 课程疗法 -->
			<!-- <view class="therapy" v-show="packageJsonList&&packageJsonList.length > 0">
				<view class="box-header-title" style="margin-bottom: 20rpx;">课程疗法</view>
				<scroll-view class="therapy-scrollx" scroll-x="true" :scroll-into-view="scrollIntoTherapy"
					scroll-with-animation="true" overflow-anchor="none">
					<view :class="therapyIndex == idx ? 'therapy-active therapy-scrollitem':'therapy-scrollitem'"
						:id="'therapy' + idx" v-for="(item,idx) in packageJsonList" :key="idx"
						@click="handleTherapy(item,idx)">
						<image mode="aspectFill" class="therapy-goodsimg" :src="item.imgUrl"></image>
						<view class="therapy-goodsname textTwo">{{item.packageName}}</view>
					</view>
				</scroll-view>
			</view> -->
			<!-- 评论 v-if="!$qconfig.isAppStore"-->
			<view class="video-comment">
				<view class="box-header">
					<view class="box-header-title">评论</view>
					<view class="box-header-r" @tap="goToComment()">
						<text>共{{data.commentNum}}条</text>
						<image src="@/static/images/course/my_right_arrow_right_icon.png" mode="aspectFill"></image>
					</view>
				</view>
				<view style="padding: 20rpx 24rpx;">
					<commentList :commentList="data.commentList" />
				</view>
			</view>

			<!-- 猜你喜欢 -->
			<view class="video-comment">
				<view class="box-header">
					<view class="box-header-title">猜你喜欢</view>
					<view class="box-header-r" v-if="false">
						<text>更多</text>
						<image src="@/static/images/course/my_right_arrow_right_icon.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="hall-box">
					<hallItem class="gapitem" v-for="(item, index) in dataList " :key="index" :item="item"
						@click.native="navTo('/pages_course/info?courseId='+item.courseId)" />
				</view>
			</view>
		</scroll-view>

		<!-- h5下载 -->
		<!-- <h5-down-app-tip :pageUrl="pageUrl" :type="'course'" :courseId="courseId" /> -->

		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="closeShareAct()">
			<share-box :shareItem="shareItem" @closeShare='closeShareAct()'></share-box>
		</u-popup>

		<!-- VIP特权弹窗 -->
		<uni-popup ref="popPrivilege" type="bottom" borderRadius="10rpx 10rpx 0px 0px">
			<view class="privilegeBox es es-ver es-br-38 es-pt-30 es-pb-30 ">
				<view class="es es-fx es-pc es-h-56 es-ml-48 es-mr-48">
					<image class="es-w-74 es-h-40" style="position: absolute;left:60rpx;top:0"
						src="/static/images/course/xiangyun.png"></image>
					<view class="es-fs-40 es-h-56 es-fw-500" style="color: #FFDAA3;">限时特惠</view>
					<image class="es-w-74 es-h-40" style="position: absolute;right:60rpx;top:0"
						src="/static/images/course/xiangyun2.png"></image>
					<image class="es-w-40 es-h-40" style="position: absolute;right:-20rpx;top:-10rpx"
						@tap="closePrivilege" src="/static/images/close40.png"></image>
				</view>

				<!-- <view class="sec1 es-mt-20 es-ml-48 es-mr-48">
					<view class="es x-bc es-pl-28 es-pt-12">
						<view class="l1">
							<view class="x-f">
								<image class="es-w-44 es-h-44" src="/static/images/course/fozhu.png">
								</image>
								<view class="es-ml-8 es-c-white es-fs-32 es-fw-600">名家讲堂</view>
							</view>
							<view class="es-fs-30 es-mt-10 es-c-99">畅享10000+VIP视频</view>
						</view>
						<view class="es">
							<image src="/static/images/course/zyx.png" class="es-w-183 es-h-98 es-br-15"></image> -->
							<!-- <view class="es-fs-20 es-br-8 es-w-80 es-h-30 es-fw-bold x-c" style="position:absolute; right: 0;top:10rpx;background: #000;opacity: 0.7;color: #FFDAA3;">10000+</view> -->
						<!-- </view>
					</view>
				</view> -->

				<!-- <view class="sec2 es es-fx es-pc es-h-56 es-mt-40 es-ml-48 es-mr-48"> -->
					<!-- <image class="es-w-148 es-h-3" style="position: absolute;left:0;top:16rpx" src="/static/image/course/privilege/line1.png"></image> -->
					<!-- <view class="es-fs-30 es-h-56 es-fw-bold" style="color: #FFDAA3;">超多权益待你开启</view> -->
					<!-- <image class="es-w-148 es-h-3" style="position: absolute;right:0;top:16rpx" src="/static/image/course/privilege/line2.png"></image> -->
				<!-- </view> -->

				<!-- <view class="primenu-box es es-fx es-pc es-mt-20 es-ml-48 es-mr-48">
					<view class="content-inner">
						<view class="item">
							<image class="img" src="/static/images/course/privilege/she.png" mode="heightFix"></image>
							<text class="label">AI舌诊</text>
						</view>
						<view class="item">
							<image class="img jlxw" src="/static/images/course/privilege/tizhi.png" mode="heightFix">
							</image>
							<text class="label">体质检测</text>
						</view>
						<view class="item">
							<image class="img" src="/static/images/course/privilege/baike.png" mode="heightFix"></image>
							<text class="label">养生百科</text>
						</view>
						<view class="item">
							<image class="img" src="/static/images/course/privilege/yishu.png" mode="heightFix"></image>
							<text class="label">经典医书</text>
						</view>
						<view class="item">
							<image class="img" src="/static/images/course/privilege/more.png" mode="heightFix"></image>
							<text class="label">多设备登陆</text>
						</view>
						<view class="item">
							<image class="img" src="/static/images/course/privilege/ad.png" mode="heightFix"></image>
							<text class="label">去除广告</text>
						</view>
					</view>
				</view> -->

				<view class="es-ml-48 es-mr-48 es-mt-10 es-pt-10 es-pb-10 es-br-5" style="background:#2a2f32">
					<view v-for="(item, index) in vipMethods" :key="index" @tap="changeVipMethod(index)">
						<view v-if="index!=0" class="vipMethodItem es x-bc">
							<view class="x-bc es-ml-14">
								<view class="es-fs-32  es-fw-500 es-ml-14">{{item}}</view>
							</view>
							<image v-if="vipMethodIdx==index" class="es-w-40 es-h-40 es-br-ban es-mr-14 es-mr-26"
								src="/static/images/course/check.png"></image>
							<view v-else class="es-w-40 es-h-40 es-br-ban es-mr-14 es-mr-26 circle"></view>
						</view>
					</view>
				</view>

				<view v-if="isShowPayType" class="es-ml-48 es-mr-48 es-mt-40 x-bc" style="background:#2a2f32">
					<view v-for="(item, index) in payTypes" :key="index" @tap="changePayType(index)"
						class="payTypeItem es x-bc " :class="payType==index+1?'pt_ac':''">
						<view class="x-bc es-ml-14">
							<image class="es-w-59 es-h-52"
								:src="index==0?'/static/images/course/vipBuy/wx.png':'/static/images/course/vipBuy/zfb.png'">
							</image>
							<view class="es-fs-33 es-c-white es-fw-500 es-ml-14">{{item}}</view>
						</view>
						<image v-if="payType==index+1" src="/static/images/course/check.png"
							class="es-w-40 es-h-40 es-br-ban es-mr-14"></image>
						<view v-else class="es-w-40 es-h-40 es-br-ban es-mr-14 circle"></view>
					</view>
				</view>

				<view class="es es-mt-40 es-ml-48 es-mr-48 x-c">
					<view @tap="doBuy()" class="es-h-94 x-c es-fw-700 es-fs-34 vipCourseBtn vipAc es-br-46"
						style="width: 310rpx;">
						立即购买
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popTip" type="dialog">
			<uni-popup-dialog cancelText="支付失败" confirmText="支付成功" mode="base" content="是否已支付成功?" title="提示"
				:duration="2000" :before-close="true" @close="confirmTip" @confirm="confirmTip"></uni-popup-dialog>
		</uni-popup>

		<!-- 评论弹窗 -->
		<popupBottom ref="mescrollItem" :visible.sync="specVisible" @close="closePop" :cmdId="courseId"
			:smsNum="data.commentNum" :title="data.commentNum+'条评论'" :type="1" radius="32" maxHeight="1200">
		</popupBottom>
	</view>
</template>

<script>
	import {getUserInfo} from '@/api/user'
	import { getCourseById,getCourseList,getCourseVideoList,checkFavorite,checkFollow,checkLike,doFavorite,doFollow,doLike,addDuration,
	createCourseOrder,createIntegralOrder,getIntegral,createVipOrder,aliPayment,wxPayment,getCourseOrderById } from '@/api/course'
	import commentList from "./components/commentList.vue";
	import hallItem from "@/pages/course/components/hallItem.vue";
	import popupBottom from '@/components/popupBottom/popupBottom.vue'
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
	import adMask from "@/components/adMask/adMask.vue"
	export default {
		mixins: [MescrollCompMixin],
	    components: {
	    	popupBottom,
			commentList,
			hallItem,
			adMask
	    },
		data() {
			return {
				player: null,
				Events: null,
				isH5: false,
				showDes: false,
				showExpandText: false,
				isExpand: true,
				textHeight: 0, //文本高度
				courseId: null,
				isShare: false,
				videoId: null,
				isLearning: false,
				data: {
					courseId: null,
					imgUrl: "",
					talentAvatar: "",
					price: "",
					remark: "",
					noteNum: 0,
					courseName: "",
					description: "",
					cataIndex: 0,
					isFast: 1,
					isAutoPlay: false,
					commentList: [{
						avatar: "",
						content: "",
						createTime: "",
						nickName: ""
					}]
				},
				dataList: [],
				talentId: null,
				studyLog: null,
				isNext: 0,			
				user: {},
				isFavorite: 0,
				isFollow: 0,
				isLike: 0,
				clientHeight: 0,
				isShowList: false, // 是否展示讲堂目录列表
				catalogueList: [],
				scrollIntoViewId: 'cataLogue0',
				pickCatalog: {
					// videoUrl: "https://tcpv.ylrzcloud.com/course/20241014/1728890026184.mp4",
					videoUrl:"",
					thumbnail: "",
					duration: 0,
					videoId: 0,
					seconds: 0,
					studyTime: null,
					isFast: 1,
				},
				pickCatalogIdx: 0,
				packageJsonList: [],
				poster: '',
				showShare: false,
				shareItem: {
					imageUrl: "",
					title: "",
					path: ""
				},
				fullScreen: false,
				showTherapy: false,
				showTherapyItem: {},
				playDuration:0, // 播放时长
				timer: null, // 定时器
				lookDuration: 0 ,// 观看时长
				countdowning: false, // 观看时长计时开关
				showAudio: false, //音频展示
				videoPlayStatus:{
					status: '',
					tempAudioDuration: 0,
					studyTime: 0,
				}, // 视频播放状态
				pageUrl: '',
				courseOrderId:0,
				scrollIntoTherapy: 'therapy0',
				therapyIndex: null,
				allLookTimer: null, // 定时器
				allLookDuration:0,//H5未登录状态播放五分钟就跳出登录页面
				tempAudioDuration:0, //用于记录视频和音频播放的时间，达到无缝续播				
				audioTimer:null,
				playTime:"00:00",
				studyTimes:0,
				audioContext: null,
				audioPlayIng:false,  
				isPostBack:true,//页面是否已初次加载
				specVisible: false,
				esComment:null,
				vipSelIndex:0,
				vipMethods:["开通会员"],
				vipMethodIdx:0,
				isShowPayType:false,
				payTypes:["微信支付","支付宝支付"],
				payType:1,//微信支付1  支付宝支付2
				createType:3,//1直接购买，2积分兑换 3开通会员
				orderId:null,
				order:null,
				showPayTips:false,
				isPlayIng:false,//是否正在播放
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				direction: "",
				nodeTime: 0,
				exitFullscreen: '', //是否退出全屏yes , no 加上时间戳
			}
		},
		onLoad(options) {
			this.courseId = options.courseId;
			this.isShare = options.isShare || false
			this.videoId = options.videoId || null;
			this.isLearning = options.isLearning || false;
			// #ifdef APP-PLUS
			uni.getSubNVueById('videoPopup').hide();
			uni.$on('getEventType', (data) => {
				uni.getSubNVueById('videoPopup').hide();
				if(data.type == 'confirm') {
					// 确认
					this.tipConfirm(data.extraData)
				} else {
					// 取消
					this.tipCancel(data.extraData)
				}
			})
			// #endif
			this.esComment=this.$refs["esComment"];
			
			let that=this;
			uni.$on('refreshTitle', (pingCount) => {
				that.data.commentNum=pingCount;
			}); 
			this.getCourseInfo();
			if (this.$checkToken()) {
				this.getUserInfo();
				this.checkFavorite();
				this.checkLike();
			}
		},
		onShow() {
			this.exitFullscreen = 'no'+ new Date().getTime()
			//#ifdef H5
			this.isH5 = true;
			//#endif
			
			//#ifdef APP-PLUS
			   if(this.$checkToken()){
			   		if(!this.timer){
			   			this.timer=setInterval(() => {
			   				if(this.countdowning){   //观看时长计时开关开启
			   					this.lookDuration+=5;
			   					this.addIntegral();	
			   				}			
			   			}, 5000);
			   		}
			   }
			//#endif
			if(!this.$checkToken()){
					if(!this.allLookTimer){
						this.allLookTimer=setInterval(() => {
							if(this.countdowning){   //观看时长计时开关开启
								this.allLookDuration+=5;
							}			
						}, 5000);
					}
			}
			this.playFun()
			if(this.showPayTips){
				this.$refs.popTip.open();
				this.showPayTips=false;
			}
		},
		onReady() {
			this.audioContext = uni.createInnerAudioContext();
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(422) - res.statusBarHeight;
				}
			});
		},
		onHide() {
			const type = this.showAudio ? 'audio' : 'video'
			this.pauseFun(type);
		},
		onUnload() {
			this.exitFullscreen = 'yes'+ new Date().getTime()
		    // 页面卸载时清除计时器
		    this.endCountsTime();
			this.addStudyCourse();
			this.destoryAudio();
			// #ifdef APP-PLUS
			uni.$off('getEventType');
			// #endif 
			uni.$emit('refreshStudyTime', {});
			uni.$off("backStudyTime");
			uni.$off("refreshUser");
			uni.$off("showPayTips");
			uni.$off("pickCatalogAction");
			uni.$off("refreshTitle");
			uni.$off("refreshCatalog");
		},
		methods: {
			navBack() {
				uni.navigateBack({
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			endCountsTime(){
				if (this.timer) {
				   clearInterval(this.timer);
				   this.timer = null;
				}
				if (this.allLookTimer) {
				   clearInterval(this.allLookTimer);
				   this.allLookTimer = null;
				}
			},
			getCourseInfo() {
				this.showDes = false
				getCourseById(this.courseId).then(res => {
						if (res.code == 200) {
							this.data = res.data;
							this.dataList = res.data.courseList;
							this.talentId = res.data.talentId;
							this.studyLog = res.data.studyLog;
							this.isNext = res.data.isNext;
							this.videoId = this.studyLog ? this.studyLog.videoId : null;
							this.vipMethods = ["开通会员"];
							if (this.data.isIntegral == 1) {
								this.vipMethods.push("积分兑换")
							}
							if (this.data.sellPrice > 0) {
								this.vipMethods.push(this.data.sellPrice + "元购买");
							}
							this.getDescHeight()
							this.getCourseVideoList();
							if (this.$checkToken()) {
								this.checkFollow();
							}
						}
					},
					rej => {}
				);
			},
			getDescHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select("#descbox-desc")
						.boundingClientRect((data) => {
							this.textHeight = data.height
							this.isExpand = this.textHeight > uni.upx2px(84) ? false : true
							this.showExpandText = this.textHeight > uni.upx2px(84) ? true : false
							this.showDes = true
						})
						.exec();
				})
			},
			//课程目录
			getCourseVideoList() {
				let that = this;
				const params = {
					"courseId": this.courseId
				};
				getCourseVideoList(params, 1, 50).then(res => {
						if (res.code == 200) {
							this.catalogueList = res.data.list;
							if (this.catalogueList.length > 0) {
								this.pickCatalogIdx = this.getCatalogIdx();
								//开始播放计时
								if (this.data.isAutoPlay == 1) {
									this.pickCatalogMethod(this.pickCatalogIdx);
								}
							}
						}
					},
					rej => {}
				);
			},
			canShowVip(item) {
				return true;
				if (this.user.isVip) {
					return false;
				}
				return item.isVip == 1 && item.isBuy == 0;
			},
			getCatalogIdx() {
				let index = this.catalogueList.findIndex(item => item.videoId == this.videoId);
				if (!this.videoId || index < 0) {
					index = 0;
				}
				return index;
			},
			getUserInfo() {
				let that = this;
				getUserInfo().then(res => {
						if (res.code == 200) {
							if (res.user != null) {
								uni.setStorageSync('userInfo', JSON.stringify(res.user));
								this.user = res.user;
							} else {
								uni.showToast({
									icon: 'none',
									title: res.msg,
								});
							}
						}
					},
					rej => {}
				);
			},
			checkFavorite() {
				checkFavorite(this.courseId).then(res => {
						if (res.code == 200) {
							this.isFavorite = res.isFavorite;
						}
					},
					rej => {}
				);
			},
			checkFollow() {
				checkFollow(this.talentId).then(res => {
						if (res.code == 200) {
							this.isFollow = res.isFollow;
						}
					},
					rej => {}
				);
			},
			checkLike() {
				checkLike(this.courseId).then(res => {
						if (res.code == 200) {
							this.isLike = res.isLike;
						}
					},
					rej => {}
				);
			},
			doFollow() {
				if (!this.$checkToken()) {
					this.$showLoginPage();
					return;
				}
				uni.showLoading({
					title: ""
				});
				doFollow(this.talentId).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						this.isFollow = !this.isFollow;
					},
					rej => {}
				);
			},
			doFavorite() {
				if (!this.$checkToken()) {
					this.$showLoginPage();
					return;
				}
				uni.showLoading({
					title: ""
				});
				doFavorite(this.courseId).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						this.isFavorite = !this.isFavorite;
					},
					rej => {}
				);

			},
			doLike() {
				if (!this.$checkToken()) {
					this.$showLoginPage();
					return;
				}
				uni.showLoading({
					title: ""
				});
				doLike(this.courseId).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						this.isLike = !this.isLike;
					},
					rej => {}
				);
			},
			openShare() {
				if (this.isH5) {
					return;
				}
				console.log("qxj title：" + this.pickCatalog.title);
				if (this.$isEmpty(this.pickCatalog.title)) {
					this.shareItem.title = this.data.courseName;
				} else {
					this.shareItem.title = this.data.courseName + "-" + this.pickCatalog.title;
				}
				this.shareItem.isMini = false
				this.shareItem.imageUrl = this.data.imgUrl;
				this.shareItem.courseId = this.courseId;
				this.shareItem.summary = !this.$isEmpty(this.data.description) ? this.data.description : "";
				let cdn = uni.getStorageSync('h5Path');
				this.shareItem.url = cdn + "/pages_course/info?courseId=" + this.courseId;
				this.showShare = true;
			},
			goToComment(){
				if(this.isH5){
					this.specVisible=true;
				}
				else{
					// this.$navTo('./comment?courseId='+this.courseId);
					// return;
					const subNVue = uni.getSubNVueById('commentN');
					subNVue.show('slide-in-bottom', 250);
					uni.$emit('comment', {  
					    videoId: this.pickCatalog.videoId,  
					    courseId: this.courseId 
					});
				}
			},
			closePop(){
				this.specVisible=false;
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			openVipCourse(index) {
				if(!this.isPostBack){
					this.isPostBack=true;
					return;
				}
				this.showPopPrivilege(index);
			},
			showPopPrivilege(index){
				if(this.isH5){
					this.$refs.popPrivilege.open("bottom");
				}
				else{
					const subNVue = uni.getSubNVueById('privilege');
					subNVue.show('slide-in-bottom', 250);
					let pickCatalog=this.catalogueList[index];
					uni.$emit('privilege', {  
					    videoId: pickCatalog.videoId,  
					    courseId: this.courseId,
						sellPrice:this.data.sellPrice,
						catalogIndex:index,
						integral: this.data.integral,
					});
				}
			},
			changeVip(index){
				this.vipSelIndex=index;
				if(index==2){
					this.showPopPrivilege();
				}
			},
			changeVipMethod(index){
			    this.vipMethodIdx=index;	
				const vipMethod=this.vipMethods[index];
				this.isShowPayType=false;
				if(vipMethod.indexOf('元购买')!=-1){  //直接购买
					this.isShowPayType=true;
					this.createType=1;
				}
				if(vipMethod.indexOf('积分兑换')!=-1){  //积分兑换
					this.createType=2;
				}
				if(vipMethod.indexOf('开通会员')!=-1){  //开通会员
					this.createType=3;
				}
			},
			changePayType(index){
				this.payType=index+1;
			},
			doBuy(){
				if(this.createType==1){  //直接购买
					 this.createCourseOrder();
				}
				else if(this.createType==2){   //积分兑换
					 this.createIntegralOrder();
				}
				else{  //开通会员
					 this.$navTo('./vipBuy');	
				}
			},
			createCourseOrder(){
			   	if(!this.$checkToken()){
			   		this.$showLoginPage();
			   		return;
			   	}
			   	uni.showLoading({title:""});
				let params={"courseId":this.courseId,"createType":this.createType,"videoId":this.pickCatalog.videoId,"payType":this.payType};
			   	createCourseOrder(params).then(res => {
			   			uni.hideLoading();
			   			if(res.code==200){
							this.order=res.order;
							if(this.payType==1){  //微信支付
								this.doWxPay();
							}else{   //支付宝
								this.doAlipay();
							}
			   			}else{
			   				uni.showToast({title: res.msg,icon: 'none'});
			   			}
			   		},
			   		rej => {}
			   	);
			},
			createIntegralOrder(){
			   	if(!this.$checkToken()){
			   		this.$showLoginPage();
			   		return;
			   	}
			   	uni.showLoading({title:""});
				let params={"courseId":this.courseId,"videoId":this.pickCatalog.videoId};
			   	createIntegralOrder(params).then(res => {
			   			uni.hideLoading();
			   			if(res.code==200){
			   				uni.showToast({title: res.msg,icon: 'success'});
							
			   			}else{
			   				uni.showToast({title: res.msg,icon: 'none'});
			   			}
			   		},
			   		rej => {}
			   	);
			},
			doAlipay(){
				var data = {orderId:this.order.orderId};
				uni.showLoading();
				aliPayment(data).then(res => {
						uni.hideLoading()
						this.$refs.popPrivilege.close();
						if(res.code==200){
							this.$refs.popTip.open();
							if (uni.getSystemInfoSync().platform == 'android') {
								var alipayScheme ='alipays://platformapi/startApp?&saId=10000007&qrcode=' + res.data.qr_code;
								
							}else{
							    var alipayScheme ='alipay://platformapi/startApp?&saId=10000007&qrcode=' + res.data.qr_code;
							    	
							}
							console.log(alipayScheme)
							// 在uni-app中使用plus.runtime.openURL打开URL
							plus.runtime.openURL(alipayScheme, function(error) {
							  // console.error('打开支付宝失败: ' + error.message);
							  // 处理打开支付宝失败的情况，比如提示用户或者跳转到其他支付方式
							});
						}
						else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							
						}
					},
					rej => {}
				);
			},
			doWxPay(){
				var that=this;
				plus.share.getServices(function(res){
				    var sweixin = null;  
				    for(var i=0;i<res.length;i++){  
				        var t = res[i];  
				        if(t.id == 'weixin'){  
				            sweixin = t;  
				        }  
				    }  
					if(sweixin){
						console.log('调起小程序')
						that.$refs.popPrivilege.close();
						that.$refs.popTip.open()
						//唤起微信跳转小程序
						sweixin.launchMiniProgram({
							id:"gh_7a6a32e5ef61",
							path:'pages_order/coursePayment?orderId='+that.orderId+"&payMethod=app",
							type:0
						},function(){
							console.log("微信唤起成功");
							return true;
						},function(e){
							console.log("微信唤起失败",e);
							uni.showToast({
								title:'微信唤起失败，请检查是否有微信应用',
								icon:'none'
							})
							return false;
						})
						
					}else{
						uni.showToast({
							title:'微信唤起失败，请检查是否有微信应用',
							icon:'none',
							duration:3000
						})
						return false;
					}
				      
				},function(res){  
				    console.log(JSON.stringify(res));  
				});
			},
			goToCatalogue(){
				if(this.isH5){
					 let url='./catalogue?courseId='+this.courseId+'&videoId='+this.pickCatalog.videoId+'&isAutoPlay='+this.data.isAutoPlay+'&studyTimes='+this.tempAudioDuration;
					 this.$navTo(url);	
				}
				else{
					const subNVue = uni.getSubNVueById('catalogueN');
					subNVue.show('slide-in-bottom', 250);
					uni.$emit('catalogue', {  
					    videoId: this.pickCatalog.videoId,  
					    courseId: this.courseId,
						pickCatalogIdx:this.pickCatalogIdx 
					});
				}
			},
			pickCatalogAction(index,type){
				if (this.pickCatalogIdx === index) return;
				if(type == 'catalogueN'&&this.isNext == 1 && this.pickCatalogIdx != index - 1) {
					const type = this.showAudio ? 'audio' : 'video'
					this.pauseFun(type);
					this.openTips(index)
					return
				}
				this.pickCatalogActionFun(index,type)
			},
			pickCatalogActionFun(index,type) {
				if(!this.$checkToken()){   //切换小节需要登录
					this.$showLoginPage();
					return;
				}
				if(this.isH5 && index>1){
					uni.showToast({title: "请下载App观看",icon: 'none'});
					return;
				}
				//切换之前添加课程目录学习记录
				this.addStudyCourse();
				this.addIntegral();	//加积分
				this.pickCatalogMethod(index,type);
				this.scrollIntoViewId = 'cataLogue' + index;
			},
			pickCatalogMethod(index,type){
				let tempCatalogue=this.catalogueList[index];
				this.lookDuration=0;//重置观看当前小节的课程时长
				if(tempCatalogue.isVip==1){  //需要Vip才能观看
					if(!this.$checkToken()){
						this.$showLoginPage();
						return;
					}
					if(this.user==null){
						this.user=this.$getUserInfo();
					}
					if(this.user.isVip!=1 && tempCatalogue.isBuy!=1){
						this.openVipCourse(index);
						return;
					}
				}
				this.pickCatalogIdx=index;
				//传递消息给小节弹窗
				uni.$emit('pickCatalogIdx', {pickCatalogIdx:index,type:type});  
				this.pickCatalog=this.catalogueList[index];
				this.pickCatalog.isFast = this.data.isFast
				this.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog.packageJson) : []
				this.initStudyTime(this.pickCatalog.studyTime || 0)
				const url = this.pickCatalog.lineTwo ? this.pickCatalog.lineTwo : this.pickCatalog.videoUrl
				this.resetAudioContext(url)
			},
			resetAudioContext(url) {
				if (this.audioContext==null) {
				    this.audioContext = uni.createInnerAudioContext();
				}
				this.audioContext.src = url
				// this.audioContext.src = this.pickCatalog.videoUrl;
				this.audioContext.onTimeUpdate(()=>{
					this.initStudyTime(this.audioContext.currentTime)
				})
			},
			changeLine(data) {
				this.resetAudioContext(data.url)
			},
			endedPlayNext(type){
				let nextCatalog=this.catalogueList[this.pickCatalogIdx+1];
				if(!nextCatalog){
					return;
				}
				if(nextCatalog && this.pickCatalogIdx<this.catalogueList.length-1){  //未播放到最后一节自动续播
					this.pickCatalogAction(this.pickCatalogIdx+1)
				}
			},
			endedPlayPrev(){
				if(this.pickCatalogIdx == 0) {
					uni.showToast({
						title: '已经是第一节视频了',
						icon: 'none',
						position: 'top',
						duration: 2000
					})
					return 
				}
				let nextCatalog=this.catalogueList[this.pickCatalogIdx-1];
				if(!nextCatalog){
					return;
				}
				this.pickCatalogAction(this.pickCatalogIdx-1)
			},
			addStudyCourse(){
				if(this.catalogueList.length==0 || this.tempAudioDuration==0){
					return;
				}
				// this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				// this.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog.packageJson) : []
				if(this.pickCatalog.isBuy==0){
					return;
				}
				const parmas={"courseId":parseInt(this.courseId),"duration":this.tempAudioDuration,"videoId":this.pickCatalog.videoId};
				addDuration(parmas).then(res => {
						if(res.code==200){
							
						}
					},
					rej => {}
				);
			},
			addIntegral(){
				// 观看到视频时长50%加一次积分
				if(this.lookDuration==0 || this.playDuration==0){
					return;
				}
				// this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				// this.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog.packageJson) : []
				if(this.lookDuration<this.pickCatalog.seconds*0.5){
					return;
				}
				let data={videoId:this.pickCatalog.videoId,duration:this.lookDuration};
				getIntegral(data).then(res => {
						if(res.code==200){
							uni.showToast({icon:'none',title:res.msg,duration:3000,position:'bottom'});
							this.countdowning=false;
						}
					},
					rej => {}
				);
			},
			closeShareAct(){
				this.showShare=false;
			},
			closeTherapy() {
				this.showTherapy = false
			},
			goToPro(productId) {
				this.exitFullscreen = 'yes'+ new Date().getTime()
				this.showTherapy = false
				setTimeout(()=> {
					uni.navigateTo({
						url: "/pages/store/packageDetails?packageId="+productId
					});
				}, 500);
			},
			// 返回视频
			backPlayVideo() {
				this.showAudio = false;
				this.audioPlayIng = false;
				this.isLearning=false;
				this.pauseFun('audio');
				this.playFun();
			},
			changeCountdowning(data) {
				this.countdowning=data.countdowning;
			},
			onTimeUpdate(data) {
				this.playDuration = Math.round(data.time)
				this.initStudyTime(this.playDuration)
				if(data.time>=this.pickCatalog.seconds){
					this.countdowning = false;  //观看时长开关关闭					  
				}
				if(this.isH5){
					 if(this.allLookDuration>=300){   //H5未登录状态播放五分钟就跳出登录页面
						 if(!this.$checkToken()){
							 this.$showLoginPage();
							 const type = this.showAudio ? 'audio' : 'video'
							 this.pauseFun(type);
						 }
					 }
				}
				else{
					 if(this.allLookDuration>=120){   //未登录状态播放两分钟就跳出登录页面
						 if(!this.$checkToken()){
							 this.$showLoginPage();
							 const type = this.showAudio ? 'audio' : 'video'
							 this.pauseFun(type);
						 }
					 }
				}
				uni.$u.throttle(this.checkTherapy, 1000,false);
			},
			checkTherapy() {
				let currentTime = Math.round(this.tempAudioDuration || 0)
				let node = this.packageJsonList.filter(item => item.duration == currentTime)
				if(node&&node.length > 0) {
					this.nodeTime = node[0].duration
					this.showTherapyItem = node[0]
					if(!this.showTherapy) {
						this.showTherapy = true
					}
				} else {
					if(this.showTherapy && this.nodeTime && this.nodeTime > currentTime) {
						this.showTherapy = false
					}
				}
			},
			// 打开集观看提示弹窗
			openTips(index){
				// #ifdef APP-PLUS
				uni.$emit('getTipShowType', {index:index})
				uni.getSubNVueById('videoPopup').show();
				// #endif 
			},
			tipConfirm() { // 提示确认
				// 继续播放
				//传递消息给小节弹窗
				uni.$emit('pickCatalogIdx', {pickCatalogIdx:this.pickCatalogIdx,type: 'catalogueN'}); 
				this.playFun()
			},
			tipCancel(index) { // 提示取消
				// 播放选择的一节
				this.pickCatalogActionFun(index,'catalogueN')
			}, 
			// 听声
			handleListen() {
				if(this.showAudio) {
					this.backPlayVideo()
				} else {
					// 打开音频
					this.showAudio = true
					this.pauseFun('video');
					this.playFun()
				}
			},
			// 播放音频
			playAudioAction(type) {
				if(!this.audioPlayIng){
					setTimeout(()=>{
						this.audioContext.play()
					},200)
				}
				else{
					this.pauseAudioAction()
				}
				this.audioPlayIng=!this.audioPlayIng;
			},
			// 播放
			playFun() {
				this.audioPlayIng = false
				if(this.showAudio) {
					const ended = this.tempAudioDuration == this.pickCatalog.seconds
					this.audioContext.seek(ended ? 0: this.tempAudioDuration);
					// this.audioContext.onSeeked(() => {
						this.playAudioAction()
					// })
				} else {
					this.videoPlayStatus={
						status: 'play'+ new Date().getTime(),
						tempAudioDuration: this.tempAudioDuration || 0,
						studyTime: this.pickCatalog.studyTime,
					}
				}
			},
			initStudyTime(time){
				this.tempAudioDuration = Math.round(time)
			},
			// 暂停音频
			pauseAudioAction() {
				if(this.audioContext) {
					setTimeout(()=>{
						this.audioContext.pause();
					},200)
				   clearInterval(this.audioTimer);
				   this.audioTimer=null;
				}
			},
			destoryAudio() {
				if(this.audioContext) {
					this.audioContext.destroy();
					clearInterval(this.audioTimer);
					this.audioTimer=null;
				}
			},
			// 暂停
			pauseFun(type) {
				this.audioPlayIng = true
				if(type == 'audio') {
					this.pauseAudioAction()
				} else if(type == 'video'){
					this.videoPlayStatus={
						status: 'pause'+ new Date().getTime(),
						tempAudioDuration: this.tempAudioDuration || 0,
						studyTime: this.pickCatalog.studyTime,
					}
				}
			},
			closePrivilege(){
				this.$refs.popPrivilege.close();
			},
			closeTip(){
				this.$refs.popTip.close();
			},
			canShowVip(item){
				return true;
				if(this.user.isVip){
					return false;
				}
				return item.isVip==1 && item.isBuy==0;
			},
			confirmTip() {
				this.getUserInfo();
				this.getCourseInfo();
				this.$refs.popTip.close();
				uni.showLoading({title:"请稍侯...",mask:true,duration:3000});
				setTimeout(()=>{
					this.getCourseOrderById();
				},2000);
			},
			getCourseOrderById(){
				getCourseOrderById(this.courseOrderId).then(res => {
					    uni.hideLoading();
						if(res.code==200){
							if(res.order.status==2 || res.order.payTime!=null){
								// #ifdef APP-PLUS
								if(plus.runtime.channel=="baidu"){  //获取渠道标识
									let bdCmdType=uni.getStorageSync("bdCmdType");
									if(bdCmdType!=null && parseInt(bdCmdType)<=2){
									    //this.$registerIdCode("orders",2,res.order.payMoney.toString()); //已下单
									}
								}
								//  #endif
								uni.showToast({title:"支付成功",icon:'success'});
							}
							else if(res.order.status==1){
								uni.showToast({title:"课程待支付请稍侯",icon:'none'});
							}
							else{
								uni.showToast({title:"支付失败",icon:'error'});
							}
						}
					},
					rej => {}
				);
			},
			handleTherapy(item,idx) {
				this.scrollIntoTherapy = 'therapy' + idx,
				this.therapyIndex = idx
				setTimeout(()=> {
					uni.navigateTo({
						url: "/pages/store/packageDetails?packageId="+item.packageId
					});
				}, 500);
			},
			onFullscreenChange(data) {
				this.fullScreen = data.isFullscreen
				// direction取为 vertical 或 horizontal
				this.direction = data.direction
				if (!data.isFullscreen) {
					// 退出全屏，锁定竖屏
					// #ifdef APP-PLUS
					plus.screen.lockOrientation('portrait-primary');
					// #endif
				}
			},
			// 全屏返回
			videoback() {
				this.exitFullscreen = 'yes'+ new Date().getTime()
			}
		},
		created() {
			let that = this;
			uni.$on('backStudyTime', function(data) {
				 that.videoId=data.videoId;
				 that.pickCatalogIdx=that.getCatalogIdx();
				 that.pickCatalog=that.catalogueList[that.pickCatalogIdx];
				 that.pickCatalog.studyTime=data.studyTimes;
				 that.catalogueList[that.pickCatalogIdx]=that.pickCatalog;
				
				 that.packageJsonList = that.pickCatalog && that.pickCatalog.packageJson ? JSON.parse(that.pickCatalog.packageJson) : []
				 that.pickCatalogMethod(that.pickCatalogIdx);
			});
			
			uni.$on('showPayTips', function(data) {
				console.log("qxj showPayTips")
				that.courseOrderId=data.courseOrderId;
				//that.showPayTips=true;
				that.$refs.popTip.open();
			});
			
			uni.$on('refreshUser', function(data) {
				that.getUserInfo();
				that.getCourseInfo();
			});
			
			uni.$on('pickCatalogAction', function(data) {
				that.pickCatalogAction(data.index,data.type);
			});
			uni.$on('refreshCatalog', function(index) {
				let catalog=that.catalogueList[index];
				catalog.isBuy=true;
				that.catalogueList[index]=catalog;
			});
		},
		destroyed() {
			uni.$off("backStudyTime");
			uni.$off("refreshUser");
			uni.$off("showPayTips");
			uni.$off("pickCatalogAction");
			uni.$off("refreshTitle");
			uni.$off("refreshCatalog");
			// #ifdef APP-PLUS
			uni.$off('getEventType');
			// #endif 
		}
	}
</script>

<script module="xgplayer" lang="renderjs">
	// import Player from "xgplayer"
	// import Mp4Plugin from "xgplayer-mp4"
	// import 'xgplayer/dist/index.min.css';
	let xgPlayer
	export default {
		data() {
			return {
				player: null,
				ownerInstance: null,
				ownerInstanceVideo: null,
				isFullscreen: false,
				isCSSFull: false,
				lineName:""
			}
		},
		beforeDestroy() {
			if(this.player) {
				if(this.isFullscreen) {
					if(this.isCSSFull) {
						this.player.exitCssFullscreen()
					} else {
						this.player.exitFullscreen()
					}
				}
				this.player.destroy() 
				// 销毁播放器
				this.player = null 
			}
		},
		methods: {
			initJs(newValue, oldValue,ownerInstance) {
				if (typeof window.Player === 'function') {
					this.initPlayer(newValue, oldValue,ownerInstance)
				} else {
					// 动态引入较大类库避免影响页面展示
					const script = document.createElement('script')
					// view 层的页面运行在根目录
					script.src = 'https://unpkg.byted-static.com/xgplayer/3.0.20/dist/index.min.js'
					script.onload = this.initPlayer.bind(this, newValue, oldValue,ownerInstance)
					document.head.appendChild(script)
					const l_tag = document.createElement('link'); // 引入播放器css
					l_tag.rel = 'stylesheet';
					l_tag.href = 'https://unpkg.byted-static.com/xgplayer/3.0.20/dist/index.min.css';
					document.body.appendChild(l_tag);
				}
			},

			initPlayer(newValue, oldValue,ownerInstance) {
				this.Events = window.Player.Events
				if (!this.ownerInstance) this.ownerInstance = ownerInstance
				let xgplayerOption = {
					lang: 'zh',
					url: "",
					id: 'detail-video',
					autoplay: false,
					// height: uni.upx2px(422),
					height: '100%',
					width: '100%',
					poster: "",
					'x5-video-player-type': 'h5', // 微信内置浏览器设置，防止被浏览器劫持
					playsinline: true,
					playbackRate: false,
					ignores: ['volume', 'miniscreen', 'keyboard'],
					plugins: [],
					startTime: 0, // 起始播放时间
					fullscreenTarget: document.querySelector('.video-container'),
					commonStyle: {
						// 播放完成部分进度条底色
						playedColor: '#FF5C03',
						cachedColor: 'transparent'
					},
					seekedStatus: 'auto',
					disableGesture: true,
					closeVideoTouch: true,
					closeVideoDblclick: true,
					closeVideoClick: false,
					progress: {
						isDraggingSeek: false,
						isCloseClickSeek: true,
						closeMoveSeek: true
					},
					fullscreen:{
						useScreenOrientation: true,
						lockOrientationType: 'landscape'
					},
					definition: {
						defaultDefinition: "线路二"
					}
				}
				xgplayerOption.url = newValue.lineTwo ? newValue.lineTwo : newValue.videoUrl
				xgplayerOption.definition.defaultDefinition = newValue.lineTwo ? '线路二' :'线路一'
				if(!xgplayerOption.url) return
				xgplayerOption.poster = newValue.thumbnail
				if(newValue.studyTime && newValue.seconds != newValue.studyTime) {
					xgplayerOption.startTime = newValue.studyTime
				}
				if(newValue.isFast == 1) {
					// 允许拖动进度条
					xgplayerOption.progress.isCloseClickSeek = false
					xgplayerOption.progress.closeMoveSeek = false
				}else {
					// 不允许拖动进度条
					xgplayerOption.progress.isCloseClickSeek = true
					xgplayerOption.progress.closeMoveSeek = true
				}
				if(this.player) {
					this.player.playNext({
						url: newValue.lineTwo ? newValue.lineTwo : newValue.videoUrl,
						startTime: newValue.startTime || 0,
						poster:xgplayerOption.thumbnail  || '',
						ignores:xgplayerOption.ignores,
						progress: xgplayerOption.progress,
						definition: xgplayerOption.definition,
					})
				} else {
					this.player = new Player(xgplayerOption);
				}
				if(newValue.isFast == 1) {
					this.player.getPlugin('progress').show()
				}else {
					this.player.getPlugin('progress').hide()
				}
				let lines=[]
				if(newValue.lineOne) {
					lines.push({
						name: '线路一', 
						definition: '线路一', 
						url:newValue.lineOne
					})
				}
				if(newValue.lineTwo) {
					lines.push({
						name: '线路二', 
						definition: '线路二', 
						url:newValue.lineTwo
					})
				} 
				if(newValue.lineThree) {
					lines.push({
						name: '线路三', 
						definition: '线路三', 
						url:newValue.lineThree
					})
				} 
				this.player.emit('resourceReady', lines)
				this.progressMove(xgplayerOption)
			},
			progressMove(data) {
				this.rjsPlayFun(data)
				const Events = this.Events
				this.player.on(Events.PlAY, () => {
				  this.ownerInstance.callMethod("changeCountdowning",{countdowning:true})
				})
				this.player.on(Events.PLAYING, () => {
					// console.log("===播放Events.PLAYING")
				  this.ownerInstance.callMethod("changeCountdowning",{countdowning:true})
				})
				this.player.on(Events.WAITING, () => {
					this.ownerInstance.callMethod("changeCountdowning",{countdowning:false})
				})
				this.player.on(Events.PAUSE, () => {
					// console.log("===暂停Events.PAUSE")
				  this.ownerInstance.callMethod("changeCountdowning",{countdowning:false})
				})
				this.player.on(Events.ERROR, (error) => {
					console.log('video error:', error)
					this.ownerInstance.callMethod("changeCountdowning",{countdowning:false})
				})
				// 监听用户的播放进度
				this.player.on(Events.TIME_UPDATE, () => {
					this.ownerInstance.callMethod("onTimeUpdate",{time: this.player.currentTime});
				})
				this.player.on(Events.ENDED, () => {
					this.ownerInstance.callMethod("changeCountdowning",{countdowning:false})
				})
				this.player.on(Events.FULLSCREEN_CHANGE, (isFullscreen) => {
					if(this.isFullscreen == isFullscreen) return
					this.isFullscreen = isFullscreen
					plus.screen.lockOrientation('landscape')
					this.ownerInstance.callMethod("onFullscreenChange",{isFullscreen:isFullscreen})
				})
				this.player.on(Events.CSS_FULLSCREEN_CHANGE, (isFullscreen) => {
					if(this.isFullscreen == isFullscreen) return
					this.isCSSFull = true
					this.isFullscreen = isFullscreen
					this.ownerInstance.callMethod("onFullscreenChange",{isFullscreen:isFullscreen})
				})
				// 清晰度发生变化
				this.player.on(Events.DEFINITION_CHANGE, (res) => {
					if(this.lineName == res.to.name) return
					this.lineName = res.to.name
					this.ownerInstance.callMethod("changeLine",{url: res.to.url})
				})
			},
			rjsPlayFun(xgplayerOption){
				this.ownerInstance.callMethod("playFun",{time: xgplayerOption.startTime})
			},
			changeVideo(newValue, oldValue,ownerInstance) {
				if (!this.ownerInstanceVideo) this.ownerInstanceVideo = ownerInstance
				if(this.player) {
					if(newValue.status.indexOf('play') > -1) {
						const tempAudioDuration = newValue.tempAudioDuration
						const flag = newValue.tempAudioDuration != newValue.studyTime
						if(flag) {
							this.player.seek(tempAudioDuration)
							this.player.on(this.Events.SEEKED, () => {
								setTimeout(()=>{
									this.player.play()
								},200)
							})
						} else {
							setTimeout(()=>{
								this.player.play()
							},200)
						}
					}else if(newValue.status.indexOf('pause') > -1) {
						this.player.pause()
					}
				}
			},
			handleExitFullscreen(newValue, oldValue,ownerInstance) {
				// 退出全屏
				if(this.player&&this.isFullscreen && newValue.indexOf('yes') > -1) {
					if(this.isCSSFull) {
						this.player.exitCssFullscreen()
					} else {
						this.player.exitFullscreen()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.content {
		background: #f7f7f7;
	}
	.cousrseImg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 422rpx;
		background-color: #000;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.video-box {
		width: 100%;
		height: calc(var(--status-bar-height) + 422rpx);
		overflow: hidden;
		position: relative;
		padding-top: var(--status-bar-height);
	}

	.scroll-Y {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	.horizontal {
		width: 130px;
		height: 150px;
		position: absolute;
		bottom: 50px;
		left: 20px;
		z-index: 999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background-color: transparent;

		.es-w-40 {
			width: 20px;
		}

		.es-h-40 {
			height: 20px;
		}

		.goods {
			width: 120px;
			height: 140px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 0.4);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.goodsimg {
			width: 100px;
			height: 100px;
			border-radius: 10px;
		}

		.goodsname {
			width: 100px;
			font-size: 12px;
			box-sizing: border-box;
			padding-top: 7px;
			verflow: hidden;
			word-break: break-all;
		}
	}

	.rotate {
		transform: rotate(-180deg);
	}

	.status_bar {
		background-color: #000;
	}

	.back-img {
		width: 25px;
		height: 25px;
		position: absolute;
		top: calc(var(--status-bar-height) + 10px);
		left: 34rpx;
		z-index: 99;
	}

	.audiobox {
		width: 100%;
		height: 422rpx;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #333;
		z-index: 9990;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #fff;

		&-video {
			background-color: rgba(255, 255, 255, 0.3);
			padding: 8rpx 20rpx;
			border-radius: 50rpx;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9991;
			text-align: center;
		}

		&-title {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9991;
			padding: 30rpx 40rpx;
			width: 100%;
			box-sizing: border-box;
			background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
			display: flex;
			align-items: center;
			.back {
				width: 50rpx;
				height: 50rpx;
				margin-right: 15rpx;
				flex-shrink: 0;
			}
		}

		&-time {
			margin-top: 18rpx;
			font-size: 24rpx;
		}
	}
	.scroll-Y {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}

	.video-info {
		padding: 24rpx;
		background-color: #fff;

		&-header {
			width: 100%;
			@include u-flex(row, center, space-between);
		}

		&-headerl {
			flex: 1;
			@include u-flex(row, center, flex-start);
			font-weight: 500;
			font-size: 32rpx;
			overflow: hidden;

			image {
				flex-shrink: 0;
				width: 88rpx;
				height: 88rpx;
				margin-right: 28rpx;
				background: #F5F7FA;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.follow-btn {
			@include u-flex(row, center, center);
			height: 56rpx;
			min-width: 154rpx;
			padding: 0 23rpx;
			background: #FF5C03;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			color: #FFFFFF;
			font-size: 28rpx;

			image {
				height: 32rpx;
				width: 32rpx;
				margin-right: 6rpx;
			}
		}

		&-voice {
			width: 100%;
			padding: 24rpx 20rpx 38rpx 28rpx;
			margin-top: 26rpx;
			background: #F5F7FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-sizing: border-box;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			&-l {
				@include u-flex(row, center, flex-start);

				image {
					margin-right: 20rpx;
				}
			}
		}

		&-voicebox1 {
			@include u-flex(row, center, space-between);
		}

		&-voicebox2 {
			padding: 24rpx 0;
			@include u-flex(row, center, space-between);
			font-weight: 400;
			font-size: 26rpx;
			color: #757575;
		}

		::v-deep .uni-collapse-item__title-arrow {
			margin-right: -8rpx;
		}

		.opacity {
			position: relative !important;
			opacity: 1 !important;
			z-index: 1 !important;
		}

		&-desc {
			margin-bottom: 52rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			word-break: break-all;
			overflow: hidden;
			line-height: 42rpx;
			position: absolute;
			opacity: 0;
			z-index: -1;

			.desc-image {
				height: 60rpx;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}

		.text-clamp {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* 显示的行数 */
			-webkit-box-orient: vertical;
			/* 内容会垂直堆叠 */
			overflow: hidden;
			/* 隐藏溢出的内容 */
			text-overflow: ellipsis;
			/* 当内容被裁剪时显示省略号 */
		}

		&-footer {
			@include u-flex(row, center, space-between);
			color: #757575;
			font-weight: 400;
			font-size: 24rpx;

			view {
				width: 128rpx;
				height: 104rpx;
				@include u-flex(column, center, center);
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 8rpx;
			}
		}
	}

	.box-header {
		height: 80rpx;
		padding: 0 24rpx;
		@include u-flex(row, center, space-between);
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;

		&-title {
			color: #222222;
			font-size: 34rpx;
		}

		&-r {
			@include u-flex(row, center, flex-start);

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.therapy {
		background-color: #fff;
		padding-left: 24rpx;
		padding-bottom: 20rpx;

		&-scrollx {
			white-space: nowrap;
			width: 100%;
			// margin-left: 24rpx;
		}

		&-scrollitem {
			display: inline-block;
			overflow: hidden;
			background: #F5F7FA;
			padding: 10rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			border: 1rpx solid #F5F7FA;
			box-sizing: border-box;
			position: relative;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				background-color: #F5F7FA;
			}

			&::after {
				content: '查看详情';
				background-color: #F5F7FA;
				position: absolute;
				top: 0;
				left: 0;
				font-weight: 400;
				font-size: 20rpx;
				padding: 4rpx 14rpx;
				border-radius: 10rpx 0 10rpx 0;
				color: #757575;
			}
		}

		&-active {
			background: #fff;
			border: 1rpx solid #FF5C03;

			.therapy-goodsname {
				color: #FF5C03 !important;
			}

			&::after {
				background: #fff;
				color: #FF5C03 !important;
			}
		}

		&-goodsname {
			margin-top: 6rpx;
			width: 200rpx;
			min-height: 64rpx;
			font-size: 24rpx;
			color: #757575;
			word-break: break-all;
			white-space: normal;
		}
	}

	.video-directory {
		background-color: #fff;
		padding-top: 12rpx;
		margin-top: 20rpx;

		&-scrollx {
			white-space: nowrap;
			width: calc(100% - 24rpx);
			margin-left: 24rpx;
		}

		&-scrollitem {
			display: inline-block;
			width: 276rpx;
			height: 160rpx;
			background: #F5F7FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 18rpx;
			padding: 20rpx 12rpx 20rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 20rpx;
			overflow: hidden;
		}

		.freeflag {
			min-width: 68rpx;
			height: 32rpx;
			padding: 0 12rpx 0 12rpx;
			text-align: center;
			line-height: 32rpx;
			position: absolute;
			right: 0;
			top: 0;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
			border-radius: 0 8rpx 0 8rpx;
			box-sizing: border-box;
			&-free {
				// background: url('@/static/images/course/free_lable_bg.png') no-repeat right / 100% 32rpx;
				background-color: #FF5C03;
			}

			&-member {
				// background: url('@/static/images/course/member_label_bg.png') no-repeat right / 100% 32rpx;
				background-color: #FFB205;
			}
		}

		&-num {
			font-weight: 500;
			font-size: 28rpx;
			@include u-flex(row, center, flex-start);

			image,
			.empty {
				width: 48rpx;
				height: 48rpx;
				margin-left: 10rpx;
			}
		}

		&-title {
			@include u-flex(row, center, space-between);
			font-size: 24rpx;
			color: #757575;
			word-break: break-all;
			white-space: normal;

			.imagebox {
				flex-shrink: 0;
				margin: 0 8rpx;
				position: relative;

				image {
					width: 92rpx;
					height: 72rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					overflow: hidden;
				}
			}
		}

		.mask {
			width: 92rpx;
			height: 72rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			background: rgba(0, 0, 0, 0.2);
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			@include u-flex(row, center, center);

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.active-scrollitem {
			background: #FCF0E7;
			color: #FF5C03;

			.video-directory-title {
				color: #FF5C03;
			}
		}
	}

	.video-comment {
		background-color: #fff;
		padding-top: 12rpx;
		margin-top: 20rpx;
	}

	.hall-box {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		margin: 0 -18rpx -18rpx 0;
		padding: 12rpx 24rpx 24rpx 24rpx;

		.gapitem {
			margin: 0 18rpx 18rpx 0;
		}
	}

	.popbox {
		background-color: #fff;
		position: relative;

		.box-header {
			padding-top: 12rpx;
			padding-bottom: 12rpx;
			box-sizing: border-box;
			background-color: #fff;
		}

		.popbox-body {

			.comment,
			.directoryinfo {
				padding: 24rpx;
			}
		}

		.search-box {
			@include u-flex(row, center, space-between);
			padding: 10px 24rpx;

			.search {
				padding: 0;
				flex: 1;

				image {
					width: 24rpx;
					height: 24rpx;
					padding-left: 16rpx;
				}
			}
		}
	}

	.search-btn {
		flex-shrink: 0;
		height: 68rpx;
		padding: 0 42rpx;
		margin-left: 20rpx;
		background: #FCF0E7;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #FF5C03;
		text-align: center;
		line-height: 68rpx;
	}

	.comment-inputbox {
		@include u-flex(row, center, space-between);
		padding: 28rpx 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;

		.inputbox {
			flex: 1;
			height: 72rpx;
			padding-left: 24rpx;
			background: #F5F7FA;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 72rpx;
		}

		.release-btn {
			@extend .search-btn;
		}
	}

	.audio {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #757575;

		&-play {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		&-icon {
			width: 48rpx;
			height: 48rpx;
		}

		&-slider {
			flex: 1;
		}

		&-time {
			flex-shrink: 0;
		}
	}

	.vipCourseBtn {
		background: #1B1F22;
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #FFDAA3;
		width: calc(33.33333% - 46.6666rpx);
	}

	.vipAc {
		background: linear-gradient(90deg, #FFE0B2, #F8BA8B);
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #1B1F22;
	}

	.privilegeBox {
		background-color: #171a1d;
		box-sizing: border-box;
	}

	.primenu-box {
		border-radius: 16rpx;
		margin-top: 0rpx;
		padding: 10rpx 20rpx;
	}

	.content-inner {
		display: flex;
		flex-wrap: wrap;
		min-height: 310rpx;
	}

	.content-inner .item {
		width: calc(33.3333333%);
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 0rpx;

	}

	.content-inner .item .img {
		width: 84rpx;
		height: 84rpx;
		margin-bottom: 8rpx;
	}

	.content-inner .item .label {
		font-size: 32rpx;
		color: #83878A;

	}

	.vipMethodItem {
		border-radius: 10rpx;
		width: calc(100%);
		height: 70rpx;
		color: #FDD8A1;
	}

	.payTypeItem {
		background-color: #1B1F22;
		border: 1px solid #fff;
		border-radius: 10rpx;
		width: calc(50% - 15rpx);
		height: 94rpx;
	}

	.circle {
		border: 1px solid #FDD8A1;
	}

	.pt_ac {
		border: 1px solid #FDD8A1;
	}

	.slider-box {
		flex: 1
	}
</style>