baiyuApp/pages/course/info.vue

<template>
	<view class="content">
		<view :style="{height: statusBarHeight+'px',width: '100%',background:'#000'}"></view>
		<view class="video-box">
			<!-- 返回按钮 -->
			<!-- #ifdef APP-PLUS -->
			<image class="back-img" @click.stop="$navBack()" src="@/static/image/hall/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"
			:danmuFunInfo="danmuFunInfo"
			:change:danmuFunInfo="xgplayer.danmuFun">
				<view id="detail-video"
				:pickCatalog="pickCatalog" 
				:change:pickCatalog="xgplayer.initJs"
				:exitFullscreen="exitFullscreen"
				:change:exitFullscreen="xgplayer.handleExitFullscreen"
				@click.stop="clickVideo"
				></view>
				
				<image class="back-img" v-if="fullScreen" @click.stop="videoback" src="@/static/image/hall/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/image/hall/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/other/video/play-last.png" @tap="endedPlayPrev()"></image>
							<image class="es-icon-88 es-ml-50 es-mr-50"
								:src="audioPlayIng?'/static/images/other/video/play-stop.png':'/static/image/hall/video_icon.png'" @tap="playAudioAction()"></image>
							<image class="es-icon-52 es-icon-play-next"
								src="/static/images/other/video/play-next.png" @tap="endedPlayNext('click')"></image>
						</view>
						<view class="audiobox-time">{{$formatSeconds(tempAudioDuration)}} / {{$formatSeconds(pickCatalog.seconds)}}</view>
					</view>
					<view class="audiobox-video x-ac" @tap="backPlayVideo">返回视频</view>
				</view>
				<!-- 视频控制栏 -->
				<view class="es" 
				:style="{paddingLeft:fullScreen ? statusBarHeight+'px': 0,display: isPause||isClickVideo?'flex':'none'}"
				style="width: 100%;height: 48px;position: absolute;z-index: 999;bottom: 0;left: 0;background: transparent;">
					<view class="xgplayer" id="controls_new_root" style="flex: 1;background:transparent;"></view>
					<view v-if="fullScreen" class="xgplayer-switch xgplayer-icon es es-ac es-pc" style="padding: 0 8px 8px 8px;">
						<view class="danmu-controls es es-ac es-pc" @click="openDanmu">
							点我发弹幕
						</view>
						<view class="danmu-controls-r es es-ac es-pc">
							<image class="xg-img danmu-switch-open" v-show="danmuFunInfo.switch==1" src="/static/images/other/course/danmu-on.png" @tap="switchDanmu(0)"></image>
							<image class="xg-img danmu-switch-open" v-show="danmuFunInfo.switch==0" src="/static/images/other/course/danmu-off.png" @tap="switchDanmu(1)"></image>
						</view>
					</view>
				</view>
				<!-- 弹幕设置 -->
				<uni-popup ref="danmuPopup" type="bottom" style="z-index: 999;">
					<view class="danmuPopup" :style="{marginLeft:fullScreen ? statusBarHeight+'px': 0}">
						<view class="danmuPopup-head border-line" style="margin-bottom: 20px;">
							<image class="danmu-icon" v-show="danmuFunInfo.switch==1" src="/static/images/other/course/danmu-on.png" @click="switchDanmu(0)"></image>
							<image class="danmu-icon" v-show="danmuFunInfo.switch==0" src="/static/images/other/course/danmu-off.png" @click="switchDanmu(1)"></image>
							<image class="danmu-icon" src="/static/images/other/course/danmu-style-on.png" mode="aspectFill" @click="openDanmuStyle(2)"></image>
							<u--input class="danmuPopup-input" placeholder="发个弹幕吧~" border="surround" shape="circle" focus :adjustPosition="false" :autoBlur="true" maxlength="140" clearable v-model="danmuIput.txt"></u--input>
							<button class="danmuPopup-send" 
							:disabled="danmubtnLoading"
							@click="sendDanmu"
							>发送</button>
						</view>
						<view 
						class="danmuPopup-con"
						:style="{height: danmuboxHeight ? fullScreen ? `calc(${danmuboxHeight}px + 20px)` : danmuboxHeight+'px' : 'auto'}"
						>
							<view class="es" style="margin-bottom: 25px;">
								<view class="es-mr-24px">弹幕字号</view>
								<view class="es">
									<view class="es-mr-24px" v-for="size in danmuFontSize" :style="{color: danmuIput.fontSize==size ?'#2583EB':'#757575'}" @click="clickStyle('font',size)">{{size=='16px'?'默认':'较小'}}</view>
								</view>
							</view>
							<view class="es" style="margin-bottom: 25px;">
								<view class="es-mr-24px">弹幕位置</view>
								<view class="es">
									<view class="es-mr-24px" v-for="mode in danmuMode" :style="{color: danmuIput.mode==mode ?'#2583EB':'#757575'}" @click="clickStyle('mode',mode)">
										{{mode=='top'?'置顶':mode=='bottom'?'置底':'滚动'}}
									</view>
								</view>
							</view>
							<view class="es" style="margin-bottom: 25px;">
								<view class="es-mr-24px">弹幕颜色</view>
								<view class="es es-fx" style="flex-wrap: wrap;">
									<view class="es-mr-24px coloritem" v-for="color in colorList" 
									:style="{background: color,border:`2px solid ${danmuIput.color== color ?'#2583EB':'#F5F7FA'}`}"
									 @click="clickStyle('color',color)"></view>
								</view>
							</view>
							<view class="es">
								<view class="es-mr-24px">弹幕位置</view>
								<view class="es">
									<view class="es-mr-24px" v-for="item in danmuArea" :style="{color: danmuFunInfo.area==item ?'#2583EB':'#757575'}" @click="clickArea(item)">
										{{item*100+'%'}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-popup>
			</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/image/hall/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/image/hall/sound_icon24.png" mode="aspectFill"></image>
						<text :style="{color: showAudio ? '#2583EB':'#757575'}">听声</text>
					</view>

					<view @tap="$navTo('./note?courseId='+courseId)" v-if="!$qconfig.isAppStore">
						<image src="@/static/image/hall/note_icon24.png" mode="aspectFill"></image>
						<text>笔记</text>
					</view>
					<view @tap="doFavorite()">
						<image
							:src="isFavorite?'/static/image/hall/collect_on_icon24.png':'/static/image/hall/collect_icon24.png'"
							mode="aspectFill"></image>
						<text>{{isFavorite?"已收藏":"收藏"}}</text>
					</view>
					<view @tap="doLike()">
						<image :src="isLike?'/static/image/hall/like_on_icon.png':'/static/image/hall/like_icon.png'"
							mode="aspectFill"></image>
						<text>{{isLike?"喜欢":"喜欢"}}</text>
					</view>
					<view @tap="openShare()">
						<image src="@/static/image/hall/weixin_icon.png" mode="aspectFill"></image>
						<text>分享</text>
					</view>
					
					<view @tap="openDanmu()" :style="{display: $isLogin()&&!showAudio ? 'flex':'none'}">
						<image src="@/static/images/other/course/danmu-set.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/image/hall/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/image/hall/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/image/hall/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>
			
			<!-- 评论 -->
			<view class="video-comment" v-if="$qconfig.isAppStore && false">
				<view class="box-header">
					<view class="box-header-title">评论</view>
					<view class="box-header-r" @tap="goToComment()">
						<text>共{{data.commentNum}}条</text>
						<image src="@/static/image/hall/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/image/hall/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/image/course/xiangyun.png"></image>
					<view class="es-fs-40 es-h-56 es-fw-500" style="color: #FFDAA3;">开通VIP专享以下特权</view>
					<image class="es-w-74 es-h-40" style="position: absolute;right:60rpx;top:0"
						src="../../static/image/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/image/course/privilege/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/image/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/image/course/privilege/she.png" mode="heightFix"></image>
							<text class="label">AI舌诊</text>
						</view> -->
						<view class="item">
							<image class="img jlxw" src="/static/image/course/privilege/tizhi.png" mode="heightFix">
							</image>
							<text class="label">体质检测</text>
						</view>
						<view class="item">
							<image class="img" src="/static/image/course/privilege/baike.png" mode="heightFix"></image>
							<text class="label">养生百科</text>
						</view>
						<view class="item">
							<image class="img" src="/static/image/course/privilege/yishu.png" mode="heightFix"></image>
							<text class="label">经典医书</text>
						</view>
						<view class="item">
							<image class="img" src="/static/image/course/privilege/more.png" mode="heightFix"></image>
							<text class="label">多设备登陆</text>
						</view>
						<view class="item">
							<image class="img" src="/static/image/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)"
						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/image/course/vipBuy/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 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/image/course/vipBuy/wx.png':'../../static/image/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/image/course/vipBuy/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,getComments,saveMsg } from '@/api/course'
	import commentList from "./components/commentList.vue";
	import hallItem from "./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 加上时间戳
				danmubtnLoading: false,
				colorList:['#ffffff','#e70012','#fcf103','#009843','#00a0ea','#e2027f'],
				danmuMode:['scroll','top','bottom'],
				danmuArea:[0.1,0.25,0.5,0.75,1],
				danmuFontSize: ['18px','16px'],
				danmuIput: {
					txt: '',
					mode: 'scroll',
					color: '#ffffff',
					fontSize: '18px',
				},
				danmuItem:{
					//发送弹幕
					duration: 10000,
					id: '',
					txt: '',
					mode: 'scroll',
					style: {
						color: '#ffffff',
						fontSize: '18px',
						border: 'solid 1px #ffffff',
						borderRadius: '5px',
						padding: '2px 5px',
						backgroundColor: 'rgba(255, 255, 255, 0.1)'
					}
				},
				danmuFunInfo: {
					time: new Date().getTime(),
					event: '',
					switch: 1,
					area: 0.25
				},
				socket:null,
				isSocketOpen: false,
				isSend:true,
				reOpenSocket: false,
				pingpangTimes:null,
				danmuboxHeight: 0,
				isPause: true, // 视频是否暂停
				isClickVideo: false, // 是否点击视频
			}
		},
		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.$isLogin()) {
				this.getUserInfo();
				this.checkFavorite();
				this.checkLike();
				// #ifndef H5
				uni.onKeyboardHeightChange(this.keyboardHeightChange);
				// #endif
			}
		},
		onShow() {
			this.exitFullscreen = 'no'+ new Date().getTime()
			//#ifdef H5
			this.isH5 = true;
			//#endif
			
			//#ifdef APP-PLUS
			   if(this.$isLogin()){
			   		if(!this.timer){
			   			this.timer=setInterval(() => {
			   				if(this.countdowning){   //观看时长计时开关开启
			   					this.lookDuration+=5;
			   					this.addIntegral();	
			   				}			
			   			}, 5000);
			   		}
			   }
			//#endif
			if(!this.$isLogin()){
					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() {
			if(this.socket!=null){
				this.socket.close()
				clearInterval(this.pingpangTimes)
				this.socket = null
			}
			// #ifndef H5
			uni.offKeyboardHeightChange(this.keyboardHeightChange);
			// #endif
			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: {
			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.$isLogin()) {
								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.$isLogin()) {
					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.$isLogin()) {
					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.$isLogin()) {
					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;
				}
				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.compressImage = 1;
				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.$isLogin()){
			   		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.$isLogin()){
			   		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:getApp().globalData.miniprogamId,
							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.$isLogin()){   //切换小节需要登录
					this.$showLoginPage();
					return;
				}
				if(this.isH5 && index>1){
					uni.showToast({title: "请下载App观看",icon: 'none'});
					return;
				}
				//切换之前添加课程目录学习记录
				this.addStudyCourse();
				this.addIntegral();	//加福币
				this.pickCatalogMethod(index,type);
			},
			pickCatalogMethod(index,type){
				setTimeout(()=>{
					this.scrollIntoViewId = 'cataLogue' + index;
				},100)
				let tempCatalogue=this.catalogueList[index];
				console.log("qxj catalogueList",this.catalogueList);
				this.lookDuration=0;//重置观看当前小节的课程时长
				// if(tempCatalogue.isVip==1){  //需要Vip才能观看
				// 	if(!this.$isLogin()){
				// 		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();
			},
			// 点击视频
			clickVideo() {
				this.isClickVideo = true
				setTimeout(()=>{
					this.isClickVideo = false
				},3000)
			},
			changeCountdowning(data) {
				this.countdowning=data.countdowning;
				// 视频是否暂停
				if(data.isXGPause==false) {
					setTimeout(()=>{
						this.isPause = data.isXGPause
					},3000)
				} else {
					this.isPause = data.isXGPause
				}
			},
			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.$isLogin()){
							 this.$showLoginPage();
							 const type = this.showAudio ? 'audio' : 'video'
							 this.pauseFun(type);
						 }
					 }
				}
				else{
					 if(this.allLookDuration>=120){   //未登录状态播放两分钟就跳出登录页面
						 if(!this.$isLogin()){
							 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() {
				// console.log("initSocket videoId：",this.pickCatalog.videoId)
				this.reOpenSocket = false
				if(this.pickCatalog.videoId) {
					this.getDanmuList()
					if (this.socket) {
						this.socket.close({
							success:()=>{
								this.reOpenSocket = true
								clearInterval(this.pingpangTimes)
							}
						})
					} else {
						this.initSocket()
					}
				}
				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()
			},
			// 弹幕
			openDanmu() {
				// #ifdef H5
				uni.showToast({
					title: "请下载app发弹幕",
					icon: "none"
				})
				return
				// #endif
				this.danmuIput= {
					txt: '',
					mode: 'scroll',
					color: '#ffffff',
					fontSize: '18px',
				}
				this.$refs.danmuPopup.open()
			},
			keyboardHeightChange(res) {
				// #ifndef H5
				 this.danmuboxHeight = res.height
				// #endif
			},
			openDanmuStyle(type) {
				if(type==2) {
					uni.hideKeyboard()
				}
			},
			clickStyle(type,value) {
				if(type=='mode') {
					this.danmuIput.mode = value
				} else if(type=='font') {
					this.danmuIput.fontSize = value
				} else if(type=='color') {
					this.danmuIput.color = value
					this.danmuIput.border = `solid 1px ${value}`
				}
			},
			clickArea(value) {
				this.danmuFunInfo = {
					time: new Date().getTime(),
					event: 'setArea',
					switch: this.danmuFunInfo.switch,
					area: value
				}
			},
			// 发送弹幕
			sendDanmu() {
				if(this.danmuIput.txt==''||this.danmuIput.txt.trim()=='') {
					uni.showToast({
						title: '弹幕不能为空',
						icon: 'none'
					})
					return;
				}
				if (!this.isSend) {
					return;
				}
				const param = {
					userId: this.user.userId || '',
					userType: 2, // 1-管理员，2-用户
					courseId: this.courseId,
					videoId: this.pickCatalog.videoId,
					type:1, // 评论类型 1：评论，2：回复，目前没有回复，默认传1就行了
					content: this.danmuIput.txt,
					time: this.tempAudioDuration, // 弹幕对应视频时间节点()秒
					fontSize: this.danmuIput.fontSize,
					mode: this.danmuIput.mode,
					color: this.danmuIput.color,
				}
				saveMsg(param).then(res=>{
					if(res.code == 200) {
						const status = res.status ? 0 : 1
						this.sendMsg(param,status);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			//  弹幕开关
			switchDanmu(type) {
				this.danmuFunInfo = {
					time: new Date().getTime(),
					event: 'switch',
					switch: type,
					area: this.danmuFunInfo.area
				}
			},
			// 弹幕列表
			getDanmuList(){
				this.danmuFunInfo = {
					time: new Date().getTime(),
					event: 'clearDanmuList',
					switch: this.danmuFunInfo.switch,
					area: this.danmuFunInfo.area,
				}
				let patam = {
					pageNum: 1,
					pageSize: 300,
					courseId: this.courseId,
					videoId: this.pickCatalog.videoId,
					openCommentStatus: 2,// 1-开启评论；2-开启弹幕；3-关闭
				}
				getComments(patam).then(res=>{
					let danmuList = []
					if(res.code == 200&&res.data.list&&res.data.list.length>0) {
						let arry = res.data.list.sort((a, b) => a.time - b.time)
						danmuList = arry.map(item=>({
							duration: this.danmuItem.duration,
							id: item.commentId,
							txt: item.content,
							start: Number(item.time || 0)*1000, // 单位：ms 毫秒
							mode: item.mode|| this.danmuItem.mode,
							style: {
								color: item.color || this.danmuItem.style.color,
								fontSize: item.fontSize || this.danmuItem.style.fontSize,
								padding: this.danmuItem.style.padding,
								border:this.user.userId ==item.userId ? item.color ? `solid 1px ${item.color}`: this.danmuItem.style.border : 'none',
								borderRadius: this.user.userId==item.userId ? this.danmuItem.style.borderRadius : 0,
								backgroundColor: this.user.userId==item.userId ? this.danmuItem.style.backgroundColor : 'transparent'
							}
						}))
					}
					try {
						this.danmuFunInfo = {
							time: new Date().getTime(),
							event: 'getDanmuList',
							switch: this.danmuFunInfo.switch,
							danmuList: danmuList,
							area: this.danmuFunInfo.area
						}
					} catch (e) {
						console.log('e',e)
					}
				})
			},
			//创建一个socket连接
			initSocket() {
				let userId = this.user.userId;
				let that = this;
				this.socket = uni.connectSocket({
					// url: getApp().globalData.danmuWSUrl + "/ws/barrage/" + this.pickCatalog.videoId,
					url: getApp().globalData.danmuWSUrl + "/app/webSocket/" + userId,
					multiple: true,
					// header: {
					// 	'token': uni.getStorageSync('AppToken')
					// },
					success: res => {
						console.log('WebSocket连接已打开1！');
						that.isSocketOpen = true
						that.reOpenSocket = false
						
						// 保持心跳
						if(that.pingpangTimes) {
							clearInterval(that.pingpangTimes)
							that.pingpangTimes= null
						}
						that.pingpangTimes=setInterval(()=>{
							// let data={cmd:"heartbeat",userId: userId};
							let data = {
								userId: userId || '',
								userType: 2, // 1-管理员，2-用户
								courseId: that.courseId,
								videoId: that.pickCatalog.videoId,
								type:1, // 评论类型 1：评论，2：回复，目前没有回复，默认传1就行了
								cmd:'heartbeat'
							}
							that.socket.send({
								data: JSON.stringify(data),
								success: () => {
									// console.log('WebSocket发送心条数据！');
								},
								fail: () => {
									that.isSocketOpen=false
								}
							});
						},15000)
					},
					error: err => {
						console.log(err)
					},
				})
				this.socket.onMessage((res) => {
					// console.log("收到消息parse",JSON.parse(res.data))
					const redata = JSON.parse(res.data);
					if(redata.cmd=="heartbeat"){
						  //心跳
						  // console.log("heartbeat")
					}else if(redata.cmd=="sendMsg"){
						that.isSend=true;
						that.addMsg(redata);
					}
				})
				//监听socket打开
				this.socket.onOpen(() => {
					console.log('WebSocket连接已打开2！');
					that.isSocketOpen = true
					that.reOpenSocket = false
					that.isSend = true;
				})
				//监听socket关闭
				this.socket.onClose(() => {
					that.isSocketOpen = false
					that.socket = null
					console.log('WebSocket连接已关闭！',that.reOpenSocket);
					if(that.pingpangTimes) {
						clearInterval(that.pingpangTimes)
						that.pingpangTimes= null
					}
					if(that.reOpenSocket) {
						//重启
						that.initSocket()
					}
					// that.msgEnd = true
				})
				//监听socket错误
				this.socket.onError((err) => {
					console.log("socket err：",err)
					that.isSocketOpen = false
					that.reOpenSocket = false
					that.socket = null
					if(that.pingpangTimes) {
						clearInterval(that.pingpangTimes)
						that.pingpangTimes= null
					}
				})
			},
			sendMsg(param,status) {
				if(status == 1) {
					this.isSend = true;
					this.addMsg({msg: param.content,time: param.time},2)
					return
				}
				if (this.isSocketOpen) {
					var userId = this.user.userId;
					var data = {
						userId: userId || '',
						userType: 2, // 1-管理员，2-用户
						courseId: this.courseId,
						videoId: this.pickCatalog.videoId,
						type:1, // 评论类型 1：评论，2：回复，目前没有回复，默认传1就行了
						msg: param.content,
						cmd: 'sendMsg',
						time: param.time,
						fontSize: param.fontSize,
						mode: param.mode,
						color: param.color,
					};
					this.socket.send({
						data: JSON.stringify(data),
						success: () => {
							console.log("发送成功",data)
							this.$refs.danmuPopup.close()
							this.isSend = false;
						},
						fail: () => {
							console.log("发送失败")
						}
					});
							
				}
			},
			// 收到消息
			addMsg(data,type) {
				let obj  = {}
				if (type==2) {
					obj = {
						content: data.msg,
						courseId: this.courseId,
						type: 1,
						userId: this.userId,
						userType: 2,
						videoId: this.pickCatalog.videoId,
						nickName: '',
						time: data.time,
						fontSize: data.fontSize,
						mode: data.mode,
						color: data.color,
					}
				} else {
					obj = {
						content: data.msg,
						courseId: this.courseId,
						type: data.type,
						userId: data.userId,
						userType: data.userType,
						videoId: this.pickCatalog.videoId,
						nickName: data.nickName,
						time: data.time,
						fontSize: data.fontSize,
						mode: data.mode,
						color: data.color,
					}
				}
				this.addDanmuMsg(obj)
			},
			addDanmuMsg(content) {
				const id = content.userId +'_' + new Date().getTime()
				const mystyle = {
					color: content.color || this.danmuItem.style.color,
					fontSize: content.fontSize || this.danmuItem.style.fontSize,
					border: content.color ? `solid 1px ${content.color}`: this.danmuItem.style.border,
					borderRadius: this.danmuItem.style.borderRadius,
					padding: this.danmuItem.style.padding,
					backgroundColor: this.danmuItem.style.backgroundColor
				}
				const otherstyle = {
					color: content.color || this.danmuItem.style.color,
					fontSize: content.fontSize || this.danmuItem.style.fontSize,
					padding: this.danmuItem.style.padding,
				}
				const mode = content.mode || this.danmuItem.mode
				const danmuItem = {
					//发送弹幕
					duration: content.duration ? content.duration : mode=='scro11'? this.danmuItem.duration : this.danmuItem.duration,
					id: content.id || id,
					txt: content.content,
					mode: mode,
					style: this.user.userId == content.userId ? mystyle : otherstyle
				}
				this.danmuFunInfo = {
					time: new Date().getTime(),
					event: 'send',
					switch: this.danmuFunInfo.switch,
					danmuItem: danmuItem,
					area: this.danmuFunInfo.area
				}
			},
		},
		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;
				that.pickCatalogAction(index);
			});
		},
		beforeDestroy() {
			if(this.socket!=null){
				this.socket.close()
			}
			if(this.pingpangTimes) {
				clearInterval(this.pingpangTimes)
				this.pingpangTimes= null
			}
			this.danmuFunInfo = {
				time: new Date().getTime(),
				event: '',
				area: this.danmuFunInfo.area
			}
		},
		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';
	import Danmu from 'xgplayer/es/plugins/danmu'
	// import "xgplayer/es/plugins/danmu/index.css"
	let xgPlayer
	const openDanmu='/static/images/other/course/danmukai.png';
	const closeDanmu='/static/images/other/course/danmukai_1.png';
	export default {
		data() {
			return {
				player: null,
				ownerInstance: null,
				ownerInstanceVideo: null,
				isFullscreen: false,
				isCSSFull: false,
				lineName:"",
				danmuInstance: null,
				newDanmu: {
					//发送弹幕
					duration: 10000,
					id: '',
					txt: '',
					mode: 'scroll',
					style: {
						color: '#ffffff',
						fontSize: '18px',
						border: 'solid 1px #ffffff',
						borderRadius: '10px',
						padding: '5px 11px',
						backgroundColor: 'rgba(255, 255, 255, 0.1)'
					}
				},
				isXGPause: true,
			}
		},
		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: [Danmu],
					danmu: {
						"comments": [],
						"area": {
								  "start": 0,
								  "end": 0.25
						},
						"closeDefaultBtn": true,
						"defaultOpen": true,
						ext: {
							channelSize: 30
						}
					},
					startTime: 0, // 起始播放时间
					fullscreenTarget: document.querySelector('.video-container'),
					controls: {
						root: document.getElementById('controls_new_root')  // 指定播放器之外挂载dom
					} ,
					// icons: {
					// 	openDanmu: openDanmu,
					// 	closeDanmu: closeDanmu
					// },
					commonStyle: {
						// 播放完成部分进度条底色
						playedColor: '#2583EB',
						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.off()
					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);
					this.danmuInstance = this.player.getPlugin('danmu')
					this.progressMove(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.rjsPlayFun(xgplayerOption)
			},
			progressMove(data) {
		
				const Events = this.Events
				this.player.on(Events.PlAY, () => {
					this.isXGPause = false
				  this.ownerInstance.callMethod("changeCountdowning",{countdowning:true,isXGPause:this.isXGPause})
				})
				this.player.on(Events.PLAYING, () => {
					// console.log("===播放Events.PLAYING")
					this.isXGPause = false
				  this.ownerInstance.callMethod("changeCountdowning",{countdowning:true,isXGPause:this.isXGPause})
				})
				this.player.on(Events.WAITING, () => {
					this.ownerInstance.callMethod("changeCountdowning",{countdowning:false,isXGPause:this.isXGPause})
				})
				this.player.on(Events.PAUSE, () => {
					// console.log("===暂停Events.PAUSE")
					this.isXGPause = true
				  this.ownerInstance.callMethod("changeCountdowning",{countdowning:false,isXGPause:this.isXGPause})
				})
				this.player.on(Events.ERROR, (error) => {
					console.log('video error:', error)
					this.ownerInstance.callMethod("changeCountdowning",{countdowning:false,isXGPause:this.isXGPause})
				})
				// 监听用户的播放进度
				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,isXGPause:this.isXGPause})
					this.ownerInstance.callMethod("endedPlayNext")
				})
				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()
					}
				}
			},
			// 发送弹幕
			danmuFun(newValue, oldValue,ownerInstance) {
				if(oldValue && newValue.event == oldValue.event && newValue.time == oldValue.time) {
					return
				}
				if(newValue.event=='send') {
					// 发送弹幕
					// console.log("===========发送弹幕",this.danmuInstance)
					this.danmuInstance.sendComment(newValue.danmuItem)
				}else if(newValue.event=='switch'){
					// 弹幕开关
					// console.log("===========弹幕开关",newValue.switch)
					if(newValue.switch == 1) {
						this.danmuInstance.start()
					} else {
						this.danmuInstance.stop()
					}
				} else if(newValue.event=="getDanmuList") {
					// console.log("===========弹幕列表")
					this.danmuInstance.updateComments(newValue.danmuList,true)
				} else if(newValue.event=="clearDanmuList") {
					// console.log("===========清除列表")
					this.danmuInstance.clear()
				} else if(newValue.event=="setArea"){
					this.danmuInstance.setArea({
						start: 0,
						end: newValue.area,
					})
				}
			}
		}
	}
</script>

<style>
	@import './danmu.css';
</style>
<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.es-mr-24px {
		margin-right: 24px;
	}
	.coloritem {
		height: 24px;
		width: 24px;
		margin-bottom: 12px;
		border-radius: 5px;
	}
	.danmu-controls {
		background-color: #F5F7FA;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #999999;
		padding: 0 10px;
		border-radius: 50px 0 0 50px;
		height: 28px;
		overflow: hidden;
		box-sizing: border-box;
		&-r {
			padding: 0 10px;
			border-radius: 0 50px 50px 0;
			height: 28px;
			overflow: hidden;
			box-sizing: border-box;
			background-color: #fff;
			image {
				height: 20px;
				width: 20px;
			}
		}
	}
	::v-deep {
		.danmu-switch-open, .danmu-switch-closed {
			height: 25px;
			width:  25px;
		}
	}
	.xgplayer-switch {
		background-image: linear-gradient(180deg,transparent,rgba(0,0,0,.37),rgba(0,0,0,.75),rgba(0,0,0,.75));
	}
	.danmuPopup {
		background-color: #fff;
		&-head {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			overflow: hidden;
			@include u-flex(row,center,flex-start);
			.danmu-icon {
				height: 24px;
				width: 24px;
				margin-right: 12px;
			}
		}
		&-input {
			flex: 1;
			height: 35px;
		}
		&-send {
			flex-shrink: 0;
			height: 35px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5px 15px;
			box-sizing: border-box;
			background: #2583EB !important;
			border-radius: 22px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #fff !important;
			margin-left: 12px;
			&::after {
				border: none;
			}
		}
		&-con {
			background-color: #F5F7FA;
			padding: 24px 12px 48px 12px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #757575;
		}
	}
	.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: 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: 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: #2583EB;
			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;
			overflow: hidden;

			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 #2583EB;

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

			&::after {
				background: #fff;
				color: #2583EB !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;
		}

		.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;
			&-free {
				// background: url('@/static/image/hall/free_lable_bg.png') no-repeat right / 100% 32rpx;
				background-color: #2583EB;
			}

			&-member {
				// background: url('@/static/image/hall/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: #eef5fd;
			color: #2583EB;

			.video-directory-title {
				color: #2583EB;
			}
		}
	}

	.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: #eef5fd;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #2583EB;
		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>