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"
			@scrolltolower="getPageNewCommentData">
			<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>共{{ newCommentArrList.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="newCommentArrList" />
				</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="inputComment" 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 v-if="pickCatalog && pickCatalog.videoId && isShowPageEntryTimer"
			:typeNum="isShowPageEntryTimer" :pointsNum="answerPointsNum" :remainSeconds="pageEntryRequiredTime"
			@handleShowAnswer="handleAnswerMethods" @showTomorrowTipMethods="handleTomorrowTipMethods" />

		<!-- 答题弹窗 -->
		<questionsPopup v-if="pickCatalog && pickCatalog.videoId && isShowPageEntryTimer" :isShow="isShowQuestions"
			:remainSeconds="pageEntryRequiredTime" :videoId="pickCatalog.videoId" @closeMethod="questionsCloseMethod"
			@submitAnswer="handleSubmitAnswer" />

		<!-- 答题提示框和明日再来提示框 -->
		<answerPromptPopup v-if="pickCatalog && pickCatalog.videoId" :pointsNum="answerPointsNum"
			:isShow="isShowAnswerPrompt" :typeStatus="answerPromptType" @closeMethod="isShowAnswerPrompt = false" />
	</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,
	getNewCommentListApi,
	addNewCommentApi,
	newPublicCourseAnswerApi,
	publicCourseAnswerStatusApi,
	publicCourseAnswerClaimIntegralApi,
} 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"
import answerPromptPopup from "./components/answerPromptPopup.vue"

export default {
	mixins: [MescrollCompMixin],
	components: {
		popupBottom,
		commentList,
		newCommentList,
		hallItem,
		adMask,
		answerFloatBox,
		questionsPopup,
		answerPromptPopup
	},
	data() {
		return {
			player: null,
			Events: null,
			isH5: false,
			showDes: false,
			showExpandText: false,
			isExpand: true,
			textHeight: 0, //文本高度
			courseId: null,
			isShare: false,
			videoId: null,//当前视频（小节）章节ID(旧的，页面进入时带入的，后面没有更新，需要的话用pickCatalog.videoId来判断)
			isLearning: false,
			isShowQuestions: false,
			isShowAnswerPrompt: false,
			answerPromptType: 1,
			answerPointsNum: 0, // 答题获得的积分
			inputComment: '',
			newCommentArrList: [],
			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,
			// 页面一进入-答题奖励相关
			pageEntryTimer: null, // 页面一进入-答题奖励计时器
			pageEntryRequiredTime: 0, // 页面一进入-答题奖励当前小节后台设定的奖励时间（秒）(倒计时总时长)
			hasGotPageEntryReward: 0, // 页面一进入-答题奖励当前小节是否已领取奖励-答题状态：1未答题 2可以答题 3达到上限 4已完成；-1学习缺失 -2无看课 -3未完课
			isSocketOpen: false,
			isSend: true,
			reOpenSocket: false,
			pingpangTimes: null,
			danmuboxHeight: 0,
			isPause: true, // 视频是否暂停
			isClickVideo: false, // 是否点击视频
			commentPage: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
		}
	},
	computed: {
		isShowPageEntryTimer() {
			let newData = 0
			if (this.hasGotPageEntryReward == 1) {
				// 未答题
				newData = 4
			}
			if (this.hasGotPageEntryReward == 2) {
				// 答错了但未达上限- 可以答题
				newData = 3
			}
			if (this.hasGotPageEntryReward == 3) {
				// 答错了且达上限- 达到上限
				newData = 2
			}
			if (this.hasGotPageEntryReward == 4) {
				// 答对了获得积分- 已完成
				newData = 1
			}
			return newData
		}
	},
	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.getNewCommentArrList();
			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.stopPageEntryTimer(); // 清理章节奖励计时器
		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: {
		// 获取新版-评论列表
		async getNewCommentArrList() {
			let params = {
				courseId: this.courseId,
				sortType: 2
			};
			const res = await getNewCommentListApi(params, this.commentPage.pageNum, this.commentPage.pageSize);
			if (res.code === 200 && res.data.list.length > 0) {
				this.commentPage.total = res.data.total;
				this.newCommentArrList = [...this.newCommentArrList, ...res.data.list];
			}
		},
		// 分页获取评论数据
		getPageNewCommentData() {
			if (this.commentPage.total <= this.newCommentArrList.length) {
				return;
			}
			this.commentPage.pageNum++;
			this.getNewCommentArrList();
		},

		// 点击答题
		handleAnswerMethods() {
			this.isShowQuestions = true
		},
		// 点击关闭答题弹窗
		questionsCloseMethod() {
			this.isShowQuestions = false
		},
		// 点击提交答案后
		handleSubmitAnswer(quesList) {
			let newData = quesList.map(item => ({ ...item, question: JSON.stringify(item.question) }));
			let param = {
				questions: newData,
				videoId: this.pickCatalog.videoId,
				courseId: this.courseId
			}
			uni.showLoading({
				title: '加载中'
			});
			newPublicCourseAnswerApi(param).then(res => {
				this.questionsCloseMethod()
				uni.hideLoading()
				if (res.code == 200) {
					if (res.msg == "答题成功") {
						// 答对
						this.answerPromptType = 1
						this.handleClaimIntegralMethods()
					} else {
						// 答错
						this.answerPromptType = 2
					}
					this.checkPageEntryStatus();
					this.isShowAnswerPrompt = true
				}
			})
		},

		// 答题成功后领取本节答题积分
		handleClaimIntegralMethods() {
			publicCourseAnswerClaimIntegralApi({
				videoId: this.pickCatalog.videoId,
			})
		},
		// 点击提示明日再来
		handleTomorrowTipMethods() {
			this.answerPromptType = 3
			this.isShowAnswerPrompt = true
		},
		// 发送评论
		sendCommentMsg() {
			if (this.inputComment == '' || this.inputComment.trim() == '') {
				uni.showToast({
					title: '评论不能为空~',
					icon: 'none'
				})
				return;
			}
			if (!this.$isLogin()) {
				uni.showToast({
					title: '请先登录后评论~',
					icon: 'none'
				})
				setTimeout(() => {
					this.$showLoginPage();
				}, 1500);
			}

			addNewCommentApi({
				courseId: this.courseId,
				type: 1,
				content: this.inputComment,
				toUserId: this.user.userId,
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '评论成功~',
						icon: 'none'
					})
					this.inputComment = '';
					this.commentPage.pageNum = 1;
					this.commentPage.total = 0;
					this.newCommentArrList = [];
					this.getNewCommentArrList();
				}
			});
		},

		endCountsTime() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
			if (this.allLookTimer) {
				clearInterval(this.allLookTimer);
				this.allLookTimer = null;
			}
		},
		// 检查章节奖励领取状态
		checkPageEntryStatus() {
			this.hasGotPageEntryReward = 0;
			// 检查该章节是否已领取章节奖励
			publicCourseAnswerStatusApi({
				videoId: this.pickCatalog.videoId,
				courseId: this.courseId
			}).then(res => {
				if (res.code == 200) {
					this.hasGotPageEntryReward = Number(res.data.status);

					// 启动答题奖励计时器（需要先获取当前章节ID）
					if (this.pickCatalog.videoId && (this.hasGotPageEntryReward == 1 || this.hasGotPageEntryReward == 2)) {
						this.startPageEntryTimer();
					}
				}
			})
		},
		// 启动章节奖励计时器
		startPageEntryTimer() {
			// 启动前或切换章节都先重置计时
			this.stopPageEntryTimer();
			// 每秒计时
			this.pageEntryTimer = setInterval(() => {
				this.pageEntryRequiredTime--;
				if (this.pageEntryRequiredTime <= 0) {
					this.stopPageEntryTimer();
				}
			}, 1000);
		},
		// 重置-停止-清除章节奖励计时器
		stopPageEntryTimer() {
			if (this.pageEntryTimer) {
				clearInterval(this.pageEntryTimer);
				this.pageEntryTimer = 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);
							setTimeout(() => {
								this.addStudyCourse();
							}, 1000);
						}
					}
				}
			},
				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.answerPointsNum = this.pickCatalog.integralReward;
			// 获取章节看视频答题奖励所需时间
			this.pageEntryRequiredTime = Number(this.pickCatalog.watchDurationMinutes) * 60;
			// 检查该章节是否已领取章节奖励-获取答题状态
			this.checkPageEntryStatus();

			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: 160rpx;
	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: 96rpx;
		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>