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 ?'#FF233C':'#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 ?'#FF233C':'#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 ?'#FF233C':'#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 ?'#FF233C':'#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 v-if="false" mode="aspectFill" :src="data.talentAvatar"></image>
						<text class="textOne">{{data.courseName}}</text>
					</view>
					<button v-if="false" 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 class="boTextClass">{{data.views}}次播放</text>
						<!-- 						<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 v-if="false" class="video-info-footer">
					<view @tap="handleListen()">
						<image src="@/static/image/hall/sound_icon24.png" mode="aspectFill"></image>
						<text :style="{color: showAudio ? '#FF233C':'#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="kechengLeftClass">
						<image class="kechengIconClass" src="/static/images/new/ke_list-icon.png" mode=""></image>
						<view class="box-header-title">课程目录</view>
					</view>
					<view class="box-header-r" @tap="goToCatalogue()">
						<text class="dataNumTextClass">共{{catalogueList.length}}节</text>
						<image src="@/static/images/new/see_more.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 && false">
				<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">
				<view class="box-header">
					<view class="box-header-title">评论</view>
					<view v-if="false" class="box-header-r" @tap="goToComment()">
						<text>共{{newCommentList.length}}条</text>
						<image src="@/static/image/hall/my_right_arrow_right_icon.png" mode="aspectFill"></image>
					</view>
				</view>
				<view style="padding: 0 24rpx 20rpx;">
					<!-- <commentList :commentList="data.commentList" /> -->
					<newCommentList :commentList="newCommentList" />
				</view>
			</view>

			<!-- 猜你喜欢 -->
			<view class="video-comment" v-if="false">
				<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>
		<view class="bottomCommentInputClass">
			<input type="text" v-model="inputContent" placeholder="发表我的态度" :maxlength="50" class="input-box"
				confirm-type="send" @confirm="sendCommentMsg" />
			<view class="send-btn" @click="sendCommentMsg">发送</view>
			<view class="icon-btn" @tap="openShare">
				<image src="/static/image/hall/share_icon.png" mode="aspectFill"></image>
				<text>分享</text>
			</view>
		</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>

		<answerFloatBox :typeNum="4" @handleShowAnswer="handleAnswerMethods" />

		<questionsPopup :isShow="isShowQuestions" :typeStatus="1" @closeMethod="questionsCloseMethod"
			@submitAnswer="handleSubmitAnswer" />
	</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 newCommentList from "./components/newCommentList.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"
	import answerFloatBox from "./components/answerFloatBox.vue"
	import questionsPopup from "./components/questionsPopup.vue"

	export default {
		mixins: [MescrollCompMixin],
		components: {
			popupBottom,
			commentList,
			newCommentList,
			hallItem,
			adMask,
			answerFloatBox,
			questionsPopup
		},
		data() {
			return {
				player: null,
				Events: null,
				isH5: false,
				showDes: false,
				showExpandText: false,
				isExpand: true,
				textHeight: 0, //文本高度
				courseId: null,
				isShare: false,
				videoId: null,
				isLearning: false,
				isShowQuestions: false,
				inputContent: '',
				newCommentList: [{
						avatar: "",
						content: "讲的真好，循序渐进，让小白也很容易能入门学习！让小白也很容易能入门学习让小白也很容易能入门学习让小白也很容易能入门学习让小白也很容易能入门学习让小白也很容易能入门学习",
						createTime: "2026-04-23  12:37",
						nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
					},
					{
						avatar: "",
						content: "讲的真好，循序渐进，让小白也很容易能入门学习！",
						createTime: "2026-02-10  12:37",
						nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
					},
					{
						avatar: "",
						content: "讲的真好，循序渐进，让小白也很容易能入门学习！",
						createTime: "2025-02-10  12:37",
						nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
					},
					{
						avatar: "",
						content: "讲的真好，循序渐进，让小白也很容易能入门学习！",
						createTime: "2026-02-10  12:37",
						nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
					},
					{
						avatar: "",
						content: "讲的真好，循序渐进，让小白也很容易能入门学习！",
						createTime: "2026-02-10  12:37",
						nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
					},
					{
						avatar: "",
						content: "讲的真好，循序渐进，让小白也很容易能入门学习！",
						createTime: "2026-02-10  12:37",
						nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
					}
				],
				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: {
			// 点击答题
			handleAnswerMethods() {
				this.isShowQuestions = true
			},
			// 点击关闭答题弹窗
			questionsCloseMethod() {
				this.isShowQuestions = false
			},
			// 点击提交答案后
			handleSubmitAnswer() {},
			sendCommentMsg() {},
			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: '#FF233C',
						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: #FF233C !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: 30rpx 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: 600;
			font-size: 40rpx;
			color: rgba(0, 0, 0, 0.85);
			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: #FF233C;
			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: 20rpx 0;
			@include u-flex(row, center, space-between);
			font-weight: 400;
			font-size: 26rpx;
			color: #757575;

			.boTextClass {
				font-weight: 400;
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.45);
			}
		}

		::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: 32rpx;
			color: rgba(0, 0, 0, 0.65);
			line-height: 44rpx;
			word-break: break-all;
			overflow: hidden;
			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 {
		margin-bottom: 24rpx;
		padding: 0 24rpx;
		@include u-flex(row, center, space-between);
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;

		.kechengLeftClass {
			@include u-flex(row, center, center);
		}

		&-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.kechengIconClass {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx
		}

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

			image {
				width: 16rpx;
				height: 16rpx;
				margin-left: 10rpx;
			}
		}
	}

	.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 #FF233C;

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

			&::after {
				background: #fff;
				color: #FF233C !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: 24rpx;
		margin-top: 20rpx;

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

		&-scrollitem {
			display: inline-block;
			width: 280rpx;
			height: 192rpx;
			background: #F5F5F5;
			border-radius: 20rpx;
			margin-right: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 20rpx;
		}

		.freeflag {
			min-width: 132rpx;
			height: 44rpx;
			padding: 0 12rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 0rpx 20rpx 0rpx 20rpx;

			&-free {
				// background: url('@/static/image/hall/free_lable_bg.png') no-repeat right / 100% 32rpx;
				background-color: #FF233C;
			}

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

		&-num {
			font-weight: 600;
			font-size: 32rpx;
			@include u-flex(row, center, flex-start);
			margin-bottom: 12rpx;

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

		&-title {
			@include u-flex(row, center, space-between);
			font-size: 32rpx;
			color: #757575;
			line-height: 44rpx;
			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: #FFF0F2FF;
			color: #FF233CFF;

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

	.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: #FF233C;
		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
	}

	.dataNumTextClass {
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.45);
	}

	.bottomCommentInputClass {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 900;
		bottom: 0;
		width: 100%;
		height: 180rpx;
		background-color: #fff;
		padding: 0 24rpx 10rpx;
		display: flex;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.input-box {
			flex: 1;
			background-color: #f5f5f5;
			height: 96rpx;
			border-radius: 48rpx;
			padding: 0 30rpx;
			font-size: 32rpx;
			margin-right: 24rpx;
		}

		.send-btn {
			width: 160rpx;
			height: 96rpx;
			background: linear-gradient(135deg, #FF5267 0%, #FF233C 100%);
			border-radius: 48rpx;
			font-weight: 600;
			font-size: 40rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 90rpx;
			margin-right: 25rpx;
		}

		.icon-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

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

			text {
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				margin-top: 4rpx;
			}
		}
	}
</style>