siyu_app/pages/course/infoOld.vue

<template>	
    <!-- <page-meta :page-font-size="`${this.$store.getters.scaleFontSize}px`"  :root-font-size="`${this.$store.getters.scaleFontSize}px`"></page-meta>
	 -->
	<view class="content">
		  <view class="video-box">
			  <!-- #ifndef APP-PLUS -->
				<video  @tap="toggleBarChange" ref="myVideo" id="myVideo"  :src="pickCatalog.videoUrl"
					 @error="videoErrorCallback"  :enable-progress-gesture="data.isFast==1"  :enable-danmu="false" :danmu-btn="false" :danmu-list="danmuList" :initial-time="studyTimes"  
					 @play="onPlayVideo"  @pause="onPauseVideo"  :poster="poster" objectFit="contain" :show-progress="data.isFast==1" :title="pickCatalog.courseName" :controls="true" :show-fullscreen-btn="true"  @controlstoggle="toggleBarChange" 
					 @timeupdate="onTimeUpdate" @fullscreenchange="onFullscreenChange" @waiting="onWaiting()"  @progress="onProgress" @ended="endedPlayNext()" @canplay="onVideoCanPlay" @canplaythrough="onVideoCanPlayThrough"  
					 @loadeddata="onLoadeddata" @loadedmetadata="onLoadedMetadata" >
					 <!-- 疗法  -->
					 <cover-view v-if="showTherapy&&fullScreen" class="horizontal" @tap.stop>
					 	<cover-view class="goods" @tap.stop="goToPro(showTherapyItem.packageId)">
					 		<cover-image :src="showTherapyItem.imgUrl" mode="aspectFill" class="goodsimg"></cover-image>
					 		<cover-view class="goodsname"><cover-view class="goodsname-txt">{{showTherapyItem.packageName}}</cover-view></cover-view>
					 	</cover-view>
							<cover-view class="es-w-40 es-h-40" style="position: absolute;right:0rpx;top:0rpx;z-index:999">
								<cover-image class="es-w-40 es-h-40" src="@/static/images/close40.png" @tap.stop="closeTherapy"></cover-image>
							</cover-view>
					 </cover-view>
				 </video>
				 
				<cover-view v-if="showAudio" class="audiobox es es-ver es-ac es-pc" @click.stop>
					<cover-view class="audiobox-title textOne" :style="{paddingTop: paddingTop + 'px'}">{{catalogueList[pickCatalogIdx]&&catalogueList[pickCatalogIdx].title}}</cover-view>
					<cover-view class="es es-ver es-ac es-pc">
						<cover-view class="es es-ac es-pc">
							<cover-image class="es-icon-52 es-icon-play-last"
								src="/static/images/other/video/play-last.png" @tap="endedPlayPrev()"></cover-image>
							<cover-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()"></cover-image>
							<cover-image class="es-icon-52 es-icon-play-next"
								src="/static/images/other/video/play-next.png" @tap="endedPlayNext('click')"></cover-image>
						</cover-view>
						<cover-view class="audiobox-time">{{playTime}} / {{$formatSeconds(pickCatalog.seconds)}}</cover-view>
					</cover-view>
					<cover-view class="audiobox-video es es-pc" @tap="backPlayVideo">返回视频</cover-view>
				</cover-view>
				<!-- #endif -->
		  </view>
		  <scroll-view class="scroll-Y" :scroll-y="true" :style="'height:' + clientHeight + 'px;'" v-show="!isShowList">
		  	<view class="video-info">
		  		<view class="video-info-header">
		  			<view class="video-info-headerl">
		  				<image mode="aspectFill" :src="data.talentAvatar"></image>
		  				<text class="textOne">{{data.courseName}}</text>
		  			</view>
		  			<button class="follow-btn"  @tap="doFollow()" >
		  				<image  v-show="!isFollow" src="@/static/image/hall/guanzhu_icon.png" mode="aspectFill"></image>
		  				<text>{{isFollow?"已关注":"关注"}}</text>
		  			</button>
		  		</view>
		  		<view class="video-info-voice" v-if="false">
		  			<view class="video-info-voicebox1">
		  				<view class="video-info-voice-l">
		  					<image src="@/static/image/hall/hear_icon.png" mode="aspectFill"></image>
		  					<text>听声音</text>
		  				</view>
		  				<image class="video-info-voice-r" src="@/static/image/hall/left_show_icon.png" mode="aspectFill"></image>
		  			</view>
		  			<view style="margin-top: 36rpx;">
		  				<!-- <myAudio audioId="audio1" :url="audioPath" /> -->
						<view class="audio">
							<view class="audio-play" @tap='playAudioAction()'>
								<image class='audio-icon' :src="audioPlayIng?'/static/image/hall/hear_play_icon.png':'/static/image/hall/hear_suspend_icon.png'"></image>
							</view>
							<view class='audio-time es-ml-18 es-mr-18'>{{playTime}}</view>
							<view class='audio-slider'>
								<slider  :disabled="data.isFast==0"  @change="audioChange" @changing="audioChanging" activeColor='#FF5C03' :block-size="25" :min="0" :max="pickCatalog.seconds==0?1:pickCatalog.seconds.toFixed(0)"  :value="courseDuration" :step='0.1'></slider>
							</view>
							<view class='audio-time'>{{ $formatSeconds(pickCatalog.seconds) }}</view>
						</view>
		  			</view>
		  		</view>
		  		
				<view>
					<view class="video-info-voicebox2">
						<text>{{data.views}}次播放 · 总时长：{{data.totalDuration}}</text>
						<view class="x-c" @click="isExpand = !isExpand" v-if="showExpandText">
							<text>{{isExpand ? '收起简介' : '展开简介'}}</text>
							<view :class="isExpand ? 'rotate':''"><uni-icons type="down" size="14" color="#bbbbbb"></uni-icons></view>
						</view>
					</view>
					<view :class="showDes|| !showExpandText? 'opacity video-info-desc':'video-info-desc' " id="descbox-desc" :style="{height: isExpand ? 'auto': '84rpx'}">
						{{data.description}}
						<image v-show="!isExpand&&showExpandText" class="desc-image x-c" src="/static/images/other/bg_bar.png"></image>
					</view>
				</view>
		  		
		  		<view class="video-info-footer">
					<view @tap="playAudioAction('backvideo')">
						<image src="@/static/image/hall/sound_icon24.png" mode="aspectFill"></image>
						<text :style="{color: showAudio ? '#FF5C03':'#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>
		  	
		  	</view>
		  	
		  	<!-- 讲堂目录 -->
		  	<view class="video-directory">
		  		<view class="box-header">
		  			<view class="box-header-title">讲堂目录</view>
		  			<view class="box-header-r" @tap="goToCatalogue()">
		  				<text>共{{catalogueList.length}}节</text>
		  				<image src="@/static/image/hall/my_right_arrow_right_icon.png" mode="aspectFill"></image>
		  			</view>
		  		</view>
		  		
		  		<scroll-view class="video-directory-scrollx" scroll-x="true" :scroll-into-view="scrollIntoViewId"
		  			scroll-with-animation="true" overflow-anchor="none">
		  			<view :id="'cataLogue' + index"
		  				:class="pickCatalogIdx == index ? 'active-scrollitem video-directory-scrollitem':'video-directory-scrollitem'"
		  				v-for="(item,index) in catalogueList" :key="index" @click="pickCatalogAction(index)">
		  				<view :class="index>1 && canShowVip(item) ? 'freeflag freeflag-member':'freeflag freeflag-free'">
		  					{{ index>1 && canShowVip(item) ? '会员' : '免费'}}
		  				</view>
		  				<view class="video-directory-num">
		  					<text>第{{item.courseSort}}讲</text>
		  					<image v-if='pickCatalogIdx == index' src="@/static/image/hall/hear_icon.png"></image>
							<view class="empty" v-else></view>
		  				</view>
		  				<view class="video-directory-title">
		  					<view class="textTwo">{{item.title}}</view>
		  					<!-- <view class="imagebox">
		  						<view class="mask" v-if='pickCatalogIdx != index'>
		  							<image src="@/static/image/hall/video_icon.png" mode="aspectFill"></image>
		  						</view>
		  						<image class="video-directory-img" src="@/static/image/home1/logo.png" mode="aspectFill"></image>
		  					</view> -->
		  				</view>
		  			</view>
		  		</scroll-view>
		  	</view>
		  	<!-- 课程疗法 -->
			<view class="therapy" v-show="packageJsonList&&packageJsonList.length > 0">
				<view class="box-header-title" style="margin-bottom: 20rpx;">课程疗法</view>
				<scroll-view class="therapy-scrollx" scroll-x="true" :scroll-into-view="scrollIntoTherapy"
					scroll-with-animation="true" overflow-anchor="none">
					<view 
						:class="therapyIndex == idx ? 'therapy-active therapy-scrollitem':'therapy-scrollitem'"
						:id="'therapy' + idx" 
						v-for="(item,idx) in packageJsonList" 
						:key="idx" 
						@click="handleTherapy(item,idx)">
						<image mode="aspectFill" class="therapy-goodsimg" :src="item.imgUrl"></image>
						<view class="therapy-goodsname textTwo">{{item.packageName}}</view>
					</view>
				</scroll-view>
			</view>
		  	<!-- 评论 -->
		  	<view class="video-comment" v-if="!$qconfig.isAppStore">
		  		<view class="box-header">
		  			<view class="box-header-title">评论</view>
		  			<view class="box-header-r" @tap="goToComment()">
		  				<text>共{{data.commentNum}}条</text>
		  				<image src="@/static/image/hall/my_right_arrow_right_icon.png" mode="aspectFill"></image>
		  			</view>
		  		</view>
		  		<view style="padding: 20rpx 24rpx;">
		  			<commentList :commentList="data.commentList" />
		  		</view>
		  	</view>
			
		  	<!-- 猜你喜欢 -->
		  	<view class="video-comment">
		  		<view class="box-header">
		  			<view class="box-header-title">猜你喜欢</view>
		  			<view class="box-header-r" v-if="false">
		  				<text>更多</text>
		  				<image src="@/static/image/hall/my_right_arrow_right_icon.png" mode="aspectFill"></image>
		  			</view>
		  		</view>
		  		<view class="hall-box">
					<hallItem  class="gapitem" v-for="(item, index) in dataList " :key="index" :item="item"  @click="navTo('/pages/course/info?courseId='+item.courseId)"  />
		  		</view>
		  	</view>
		  </scroll-view>
		  
		<!-- h5下载 -->
		<h5-down-app-tip :pageUrl="pageUrl" :type="'course'" :courseId="courseId" />
		
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="closeShareAct()" >
			<share-box :shareItem="shareItem"  @closeShare='closeShareAct()' ></share-box>
		</u-popup>
		
	    <!-- VIP特权弹窗 -->
	    <uni-popup ref="popPrivilege" type="bottom" borderRadius="10rpx 10rpx 0px 0px">
	    	<view class="privilegeBox es es-ver es-br-38 es-pt-30 es-pb-30 ">
	    		<view class="es es-fx es-pc es-h-56 es-ml-48 es-mr-48">
	    			<image class="es-w-74 es-h-40" style="position: absolute;left:60rpx;top:0" src="../../static/image/course/xiangyun.png"></image>
	    			<view class="es-fs-40 es-h-56 es-fw-500" style="color: #FFDAA3;">开通VIP专享以下特权</view>
	    			<image class="es-w-74 es-h-40" style="position: absolute;right:60rpx;top:0" src="../../static/image/course/xiangyun2.png"></image>
	    		    <image  class="es-w-40 es-h-40" style="position: absolute;right:-20rpx;top:-10rpx" @tap="closePrivilege" src="/static/images/close40.png"></image>
				</view>
				
				<view class="sec1 es-mt-20 es-ml-48 es-mr-48">
					<view class="es x-bc es-pl-28 es-pt-12">
						<view class="l1">
							<view class="x-f">
								<image class="es-w-44 es-h-44" src="../../static/image/course/privilege/fozhu.png"></image>
								<view class="es-ml-8 es-c-white es-fs-32 es-fw-600">名家讲堂</view>
							</view>
							<view class="es-fs-30 es-mt-10 es-c-99">畅享10000+VIP视频</view>
						</view>
						<view class="es">
							<image src="../../static/image/course/zyx.png" class="es-w-183 es-h-98 es-br-15"></image>
							<!-- <view class="es-fs-20 es-br-8 es-w-80 es-h-30 es-fw-bold x-c" style="position:absolute; right: 0;top:10rpx;background: #000;opacity: 0.7;color: #FFDAA3;">10000+</view> -->
						</view>
					</view>
				</view>
				
				<view class="sec2 es es-fx es-pc es-h-56 es-mt-40 es-ml-48 es-mr-48">
					<!-- <image class="es-w-148 es-h-3" style="position: absolute;left:0;top:16rpx" src="../../static/image/course/privilege/line1.png"></image> -->
					<view class="es-fs-30 es-h-56 es-fw-bold" style="color: #FFDAA3;">超多权益待你开启</view>
					<!-- <image class="es-w-148 es-h-3" style="position: absolute;right:0;top:16rpx" src="../../static/image/course/privilege/line2.png"></image> -->
				</view>
				
			   <view class="primenu-box es es-fx es-pc es-mt-20 es-ml-48 es-mr-48">
					 <view class="content-inner">
					 	<view class="item">
					 		<image class="img" src="/static/image/course/privilege/she.png" mode="heightFix"></image>
					 		<text class="label">AI舌诊</text>
					 	</view>
					 	<view class="item">
					 		<image class="img jlxw" src="/static/image/course/privilege/tizhi.png" mode="heightFix"></image>
					 		<text class="label">体质检测</text>
					 	</view>
					 	<view class="item" >
					 		<image class="img" src="/static/image/course/privilege/baike.png" mode="heightFix"></image>
					 		<text class="label">养生百科</text>
					 	</view>
					 	<view class="item">
					 		<image class="img" src="/static/image/course/privilege/yishu.png" mode="heightFix"></image>
					 		<text class="label">经典医书</text>
					 	</view>
					 	<view class="item">
					 		<image class="img" src="/static/image/course/privilege/more.png" mode="heightFix"></image>
					 		<text class="label">多设备登陆</text>
					 	</view>
					 	<view class="item">
					 		<image class="img" src="/static/image/course/privilege/ad.png" mode="heightFix"></image>
					 		<text class="label">去除广告</text>
					 	</view>
					 </view>	 
			   </view>
			   
			   <view class="es-ml-48 es-mr-48 es-mt-10 es-pt-10 es-pb-10 es-br-5" style="background:#2a2f32">
					<view v-for="(item, index) in vipMethods" :key="index" @tap="changeVipMethod(index)" class="vipMethodItem es x-bc">
						<view class="x-bc es-ml-14">
							<view class="es-fs-32  es-fw-500 es-ml-14">{{item}}</view>
						</view>
						<image  v-if="vipMethodIdx==index" class="es-w-40 es-h-40 es-br-ban es-mr-14 es-mr-26" src="../../static/image/course/vipBuy/check.png"></image>
						<view   v-else class="es-w-40 es-h-40 es-br-ban es-mr-14 es-mr-26 circle"></view>	
					</view>
			   </view>
			   
			   <view v-if="isShowPayType" class="es-ml-48 es-mr-48 es-mt-40 x-bc" style="background:#2a2f32">
				   <view v-for="(item, index) in payTypes" :key="index"  @tap="changePayType(index)"  class="payTypeItem es x-bc " :class="payType==index+1?'pt_ac':''">
						<view class="x-bc es-ml-14">
							<image class="es-w-59 es-h-52" :src="index==0?'../../static/image/course/vipBuy/wx.png':'../../static/image/course/vipBuy/zfb.png'"></image>
							<view class="es-fs-33 es-c-white es-fw-500 es-ml-14">{{item}}</view>
						</view>
						<image v-if="payType==index+1" src="../../static/image/course/vipBuy/check.png" class="es-w-40 es-h-40 es-br-ban es-mr-14"></image>
						<view v-else class="es-w-40 es-h-40 es-br-ban es-mr-14 circle"></view>
				   </view>
			   </view>
			
	    		<view class="es es-mt-40 es-ml-48 es-mr-48 x-c">
	    			<view @tap="doBuy()" class="es-h-94 x-c es-fw-700 es-fs-34 vipCourseBtn vipAc es-br-46" style="width: 310rpx;">
	    				立即购买
	    			</view>
	    		</view>
	    	</view>
		</uni-popup>
	 
	    <uni-popup ref="popTip" type="dialog">
	    	<uni-popup-dialog cancelText="支付失败" confirmText="支付成功" mode="base" content="是否已支付成功?" title="提示" :duration="2000" :before-close="true" @close="confirmTip" @confirm="confirmTip"></uni-popup-dialog>
	    </uni-popup>
		
		<!-- 评论弹窗 -->
		<popupBottom ref="mescrollItem" :visible.sync="specVisible"   @close="closePop" :cmdId="courseId" :smsNum="data.commentNum"  :title="data.commentNum+'条评论'"  :type="1" radius="32"  maxHeight="1200"></popupBottom> 
		<!-- 线路 -->
		<!-- #ifdef APP-PLUS -->
		<view class="video-line" @click="openPop">
			
			<text>线路{{lineIndex + 1 | numberToChinese}}</text>
		</view>
		<!-- #endif -->
		<!-- 线路弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupbox">
				<view class="popupbox-head">
					<text>线路选择</text>
					<image class="close-icon" src="@/static/images/close40.png" mode="aspectFill" @click="close"></image>
				</view>
				<view class="popupbox-content">
					<view 
						:class="lineIndex == index ? 'line-item line-active': 'line-item'" 
						v-for="(it,index) in lineList" 
						:key="index"
						@click="handleLine(index)"
					>线路{{index + 1 | numberToChinese}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getUserInfo} from '@/api/user'
	import { getCourseById,getCourseList,getCourseVideoList,checkFavorite,checkFollow,checkLike,doFavorite,doFollow,doLike,addDuration,
	createCourseOrder,createIntegralOrder,getIntegral,createVipOrder,aliPayment,wxPayment,getCourseOrderById } from '@/api/course'
	import commentList from "./components/commentList.vue";
	import hallItem from "./components/hallItem.vue";
	import popupBottom from '@/components/popupBottom/popupBottom.vue'
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
	import adMask from "@/components/adMask/adMask.vue"
	export default {
		mixins: [MescrollCompMixin],
        components: {
        	popupBottom,
			commentList,
			hallItem,
			adMask
        },
		data() {
			return {
				lineIndex: 0,
				showDes: false,
				showExpandText: false,
				isExpand: true,
				textHeight: 0, //文本高度
				videoContext: null,
				video: {
					percent: 10, //进度百分比
				},
				courseId:null,
				talentId:null,
				videoId:null,
				curVideoId:null,
				showShare:false,
				shareItem:{ imageUrl:"",title:"",path:""},
				scrollIdx: 1,
				scrollIntoViewId: 'cataLogue0',
				isShowList: false, // 是否展示讲堂目录列表
				isShare:false,
				user:null,
				data:{
					courseId:null,
					imgUrl:"",
					talentAvatar:"",
					price:"",
					remark:"",
					noteNum:0,
					courseName:"",
					description:"",
					cataIndex:0,
					isFast:false,
					isAutoPlay:false,
					commentList:[
						{avatar:"",content:"",createTime:"",nickName:""}
					]
				},
				dataList:[],
				notes:[],
				catalogueList:[],
				pickCatalog:{ videoUrl:"https://tcpv.ylrzcloud.com/course/20241014/1728890026184.mp4",thumbnail:"",duration:0,videoId:0,seconds:0,studyTime:null},  
				pickCatalogIdx:0,
				danmuList:[],
			    isFavorite:0,
			    isFollow:0,
			    isLike:0,  
				courseDuration:0,
				lookDuration:0, //记录当前观看小节的时长
				allLookDuration:0,//H5未登录状态播放五分钟就跳出登录页面
				audioDuration:0,
				totalDuration:0,
				tempAudioDuration:0, //用于记录视频/音频播放切换时 播放的时间，达到无缝续播
			    countdowning: false, // 观看时长计时开关
				isAudioChanging:false,//音频滑块是否在拖动，audioTimer倒计时是否暂停
				timer: null, // 定时器
				audioTimer:null,
				playTime:"00:00",
				scaleFontSize:18,
				studyTimes:0,
			    audioContext: null,
				audioPlayIng:false,
				showFullScreenBtn:true,
				isLearning:false,
				myVideo:null,
				showProgress:true,
				videoUrl:"https://1319721001.vod-qcloud.com/3525603bvodcq1319721001/2b3e76ac1253642698811158287/Hmod7JMfAowA.mp4",
				poster: "",
				studyLog:null,	     
				isPostBack:true,//页面是否已初次加载
				isWaiting:false, //视频出现缓冲
				specVisible: false,
				esComment:null,
				isH5:false,
				vipSelIndex:0,
				vipMethods:["开通会员"],
				vipMethodIdx:0,
				isShowPayType:false,
				payTypes:["微信支付","支付宝支付"],
				payType:1,//微信支付1  支付宝支付2
				createType:3,//1直接购买，2芳华币兑换 3开通会员
				orderId:null,
				order:null,
				showPayTips:false,
			    clientHeight: 0,
				courseOrderId:0,
				accordionVal:'0',
				dataUsage:0,
				lastBuffered: 0,
				isPlayIng:false,//是否正在播放
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				fullScreen: false,
				direction: "",
				scrollIntoTherapy: 'therapy0',
				therapyIndex: null,
				packageJsonList: [],
				showTherapy: false,
				showTherapyItem: {},
				currentTime: 0,
				nodeTime: 0,
				paddingTop: 0,
				showAudio: false,
				isNext: 0,
				pageUrl: ''
			}
		},
		watch: {
			studyTimes: {
				handler(val){
					uni.$emit("studyTimes",val);
				},
				immediate: true
			}
		},
		filters: {
			numberToChinese(number) {
				if(number) {
					const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
					  return chineseNumber[number - 1];
				} else {
					return ''
				}
			},
		},
		onLoad(options) {
			this.paddingTop = this.statusBarHeight > 0 ? this.statusBarHeight : this.statusBarHeight + uni.upx2px(30)
			// #ifdef APP-PLUS
			uni.getSubNVueById('videoPopup').hide();
			const height = uni.upx2px(425)+ this.statusBarHeight
		   const subNVue = uni.getSubNVueById('courseVideo')
		   subNVue.setStyle({  
		       position: "absolute",
		       width: "100%",
		       height: height + 'px',
		       left:"0",
		       top:"0"  
		   })
		   uni.$on('getEventType', (data) => {
			    uni.getSubNVueById('videoPopup').hide();
				if(data.type == 'confirm') {
					// 确认
					this.tipConfirm(data.extraData)
				} else {
					// 取消
					this.tipCancel(data.extraData)
				}
		   })
		   // #endif
		  
           this.courseId=options.courseId;
		   if(options.isShare!=undefined){
			   this.isShare=options.isShare;
		   }
		   if(options.videoId!=undefined){
		   	    this.videoId=options.videoId;
		   }
		   if(options.isLearning!=undefined){
		   	    this.isLearning=options.isLearning;
		   }
		   this.esComment=this.$refs["esComment"];
		   
		   let that=this;
		   uni.$on('refreshTitle', (pingCount) => {
				that.data.commentNum=pingCount;
		   }); 
		
		  setTimeout(()=>{
		  	 this.getCourseInfo();
			 this.onNvueEvent()
		  },200);
		
		   if(this.$isLogin()){
			    this.getUserInfo();
			    this.checkFavorite();
			    this.checkLike();
		   }
		},
		onShow(){
			if(!this.$isLogin()) {
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
				return
			}
			  //#ifdef H5
			      this.isH5=true;
			  //#endif
			  
			//#ifdef APP-PLUS
			   //plus.navigator.setFullscreen(false)
			   //plus.screen.lockOrientation('portrait-primary');
			   if(this.$isLogin()){
			   		if(!this.timer){
			   			this.timer=setInterval(() => {
			   				if(this.countdowning){   //观看时长计时开关开启
			   					this.lookDuration+=5;
			   					this.allLookDuration+=5;
			   					this.addIntegral();	
			   				}			
			   			}, 5000);
			   		}
			   }
			   if(this.isPlayIng){
				   this.playVideo();
			   }
			//#endif
		
			if(this.showPayTips){
				this.$refs.popTip.open();
				this.showPayTips=false;
			}
			
		},
		onHide() {
			 this.pauseVideo();	
			//this.$store.commit('setScaleFontSize',16);
		},
		onReady() {
			// #ifndef APP-PLUS
			this.videoContext = uni.createVideoContext("myVideo", this);
			// #endif
			this.audioContext = uni.createInnerAudioContext();
			uni.getSystemInfo({success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(422) - res.statusBarHeight;
				}
			});
		},
		methods: {
			onNvueEvent() {
				uni.$on("navBack",()=>{this.$navBack()});
				uni.$on("onPlayVideo",()=>{
					this.onPlayVideo()
				});
				uni.$on("onWaiting",()=>{this.onWaiting()});
				uni.$on("onTimeUpdate",(res)=>{this.onTimeUpdate(res)});
				uni.$on("endedPlayNext",(type)=>{this.endedPlayNext(type)});
				uni.$on("onLoadedMetadata",(event)=>{this.onLoadedMetadata(event)});
				uni.$on("audioBtnEvent",(event)=>{
					if(event == 'backPlayVideo') {
						this.backPlayVideo()
					} else if(event == 'endedPlayPrev'){
						this.endedPlayPrev()
					} else if(event == 'playAudioAction'){
						this.playAudioAction()
					}
				});
			},
			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();
				})
			},
			handleTherapy(item,idx) {
				this.scrollIntoTherapy = 'therapy' + idx,
				this.therapyIndex = idx
				setTimeout(()=> {
					uni.navigateTo({
						url: "/pages/store/packageDetails?packageId="+item.packageId
					});
				}, 500);
			},
            getCourseInfo(){
				this.showDes = false
			   getCourseById(this.courseId).then(res => {
			   		if(res.code==200){
			   			this.data=res.data;
						uni.$emit("getDataInfo",this.data);
						this.dataList=res.data.courseList;
						this.talentId=res.data.talentId;
						this.studyLog=res.data.studyLog;
						this.isNext = res.data.isNext;
						if(this.studyLog!=null){
							this.videoId=this.studyLog.videoId;
						}
						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 => {}
			   );
		   },
	        getCourseList(){
				let that=this;
				const params={"cateId":this.data.cateId,"isTui":1};
				getCourseList(params).then(res => {
						if(res.code==200){
							this.dataList=res.data.list;  
						}
					},
					rej => {}
				);
			},
			//课程目录
			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){
								if(this.videoId!=null&&this.videoId!=0){
									this.pickCatalogIdx=this.getCatalogIdx();
									this.scrollIntoViewId="cataLogue"+this.pickCatalogIdx;
									this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
								}else{
									this.pickCatalog=this.catalogueList[0];
								}
								this.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog.packageJson) : []
								uni.$emit("getPickCatalog",this.pickCatalog);
								if(this.pickCatalog.studyTime!=null&&this.pickCatalog.studyTime!=0){
									this.initStudyTime(this.pickCatalog.studyTime);
								}
								//开始播放计时
								if(this.data.isAutoPlay==1){
									this.pickCatalogMethod(this.pickCatalogIdx);
									this.startCountsTime();
								}
								this.poster=this.pickCatalog.thumbnail;
								uni.$emit('poster',this.poster)
								this.audioContext.src = this.pickCatalog.videoUrl;
								this.video.percent=(this.audioDuration/this.pickCatalog.seconds*1.0).toFixed(2)*100;
							}
						}
					},
					rej => {}
				);
			},
			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 => {}
				);
			},
			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 => {}
				);
			},
			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 => {}
				);
			},
			pickCatalogAction(index,type){	
				if (this.pickCatalogIdx === index) return;
				if(type == 'catalogueN'&&this.isNext == 1 && this.pickCatalogIdx != index - 1) {
					if(this.showAudio && this.audioPlayIng) {
						this.playAudioAction()
					}
					if(!this.showAudio) {
						this.pauseVideo()
					}
					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);
				this.scrollIntoViewId = 'cataLogue' + index;
			},
			pickCatalogMethod(index,type){
				let tempCatalogue=this.catalogueList[index];
				this.curVideoId=tempCatalogue.videoId;
				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.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog.packageJson) : []
				uni.$emit("getPickCatalog",this.pickCatalog);
				this.studyTimes=0;//当pickCatalog.studyTime=null 或者等于视频总时长时默认切为零
				if(this.pickCatalog.studyTime!=this.pickCatalog.seconds){
					this.studyTimes=this.pickCatalog.studyTime;
				}
				this.initStudyTime(this.studyTimes);
				this.poster=this.pickCatalog.thumbnail;
				uni.$emit('poster',this.poster)
				if (this.audioContext==null) {
				    this.audioContext = uni.createInnerAudioContext();
				}
				this.audioContext.src = this.pickCatalog.videoUrl;
				if(this.audioTimer) {
					clearInterval(this.audioTimer);
					this.audioTimer=null;
				}
				this.audioPlayIng = false
				uni.$emit('changeData',{
					audioPlayIng: this.audioPlayIng,
					showAudio: this.showAudio,
				})
				let that=this;
				setTimeout(function(){
					if(that.showAudio) {
						that.playAudioAction()
					} else {
						that.playVideo();
					}
				},300);
			},
			playVideo() {
				if(this.audioPlayIng) {
					this.playAudio()
					return
				}
				// #ifdef APP-PLUS
				uni.$emit("playVideo");
				// #endif
				// #ifndef APP-PLUS
				this.videoContext.play();
				// #endif
			},
			pauseVideo() {
				// #ifdef APP-PLUS
				uni.$emit("pauseVideo");
				// #endif
					
				// #ifndef APP-PLUS
				this.videoContext.pause();
				// #endif
			},
			onPlayVideo(){ //视频播放器事件
				if(this.showAudio) {
					setTimeout(()=>{
						this.videoContext.pause();
					},200)
					return
				}
			    console.log("qxj onPlayVideo tempAudioDuration:"+this.tempAudioDuration);
				this.countdowning=true;
				// this.isPlayIng = true
			    if(this.tempAudioDuration==0){
					return;
				}
				this.playVideoAction('onPlayVideo');
			},
			playVideoAction(type){
				this.courseDuration=(this.tempAudioDuration*1.0).toFixed(0);
				this.studyTimes=this.tempAudioDuration;
				if(this.audioPlayIng){
					this.pauseAudio();
					this.audioPlayIng=false;
					uni.$emit('changeData',{
						audioPlayIng: this.audioPlayIng,
						showAudio: this.showAudio,
					})
				}
				// #ifdef APP-PLUS
				uni.$emit("seekVideo",this.courseDuration);
				// #endif
					
				// #ifndef APP-PLUS
				this.videoContext.seek(this.courseDuration);
				// #endif
			},
			onPauseVideo(){
				console.log("qxj onPauseVideo");
				this.isPlayIng=false;
			},
			playAudioAction(type){
				if(type == 'backvideo' && this.showAudio) {
					this.backPlayVideo()
				} else {
					const ended = this.playTime  == this.$formatSeconds(this.pickCatalog.seconds)
					this.showAudio = true
					uni.$emit('changeData',{
						audioPlayIng: this.audioPlayIng,
						showAudio: this.showAudio,
					})
					if(!this.audioPlayIng){
						//if(this.isLearning){  //若从在学课程跳转过来则续播
							this.playTime= ended ? '00:00' : this.$formatSeconds(this.courseDuration);
							uni.$emit('playTime',this.playTime)
							this.audioDuration = ended ? 0: this.audioDuration
							this.audioContext.seek(ended ? 0: this.audioDuration+0.8);
							this.isLearning=false;
						//}
						
						setTimeout(()=>{
							this.pauseVideo();
							this.playAudio();
						},200)
					}
					else{
					
						this.courseDuration = (this.tempAudioDuration*1.0).toFixed(0)
						//if(this.isLearning){
							this.isLearning=false;
						// }
						setTimeout(()=>{
							
							this.pauseAudio();
						},200)
					}
					this.audioPlayIng=!this.audioPlayIng;
					uni.$emit('changeData',{
						audioPlayIng: this.audioPlayIng,
						showAudio: this.showAudio,
					})
				}
			},
			playAudio() {
				  let that=this;
				  this.audioTimer = setInterval(() => {
						if(that.isAudioChanging){
							 return;
					    }
						if((that.audioDuration*1.0).toFixed(0)>=that.pickCatalog.seconds){
					   	   this.audioPlayIng = false
						   this.courseDuration = (this.tempAudioDuration*1.0).toFixed(0)
						   uni.$emit('changeData',{
						   	audioPlayIng: this.audioPlayIng,
						   	showAudio: this.showAudio,
						   })
						   clearInterval(that.audioTimer);
						   that.countdowning=false;  //观看时长开关关闭
						   this.endedPlayNext()
						   return;
					   }
					   that.audioDuration++;
					   that.tempAudioDuration=that.audioDuration;
					   let tempAudioDuration=(that.audioDuration*1.0).toFixed(0);
					   that.video.percent=(tempAudioDuration/that.pickCatalog.seconds*1.0).toFixed(2)*100;
				  	   that.playTime=this.$formatSeconds(tempAudioDuration);
					   that.countdowning=true; //观看时长开关开启
					   uni.$emit('playTime',this.playTime)
				  }, 1000);
			      this.audioContext.play();
			      this.pauseCountsTime();
			 },
			 pauseAudio() {
				  if(this.audioContext) {
					   this.audioContext.pause();
					   clearInterval(this.audioTimer);
					   this.audioTimer=null;
				  }
			 },
			 destoryAudio() {
				 console.log("qxj destoryAudio");
				 if (this.audioContext) {
				     this.audioContext.destroy();
					 clearInterval(this.audioTimer);
					 this.audioTimer=null;
				 }
			 },
			 input(){
				 this.isAudioChanging=true;
			 },
			 audioChanging(){
				 this.isAudioChanging=true; //正在拖动时屏蔽掉audio倒计时
			 },
			 audioChange(e){
				 let value=e.detail.value;
				 console.log("audioChange value:"+JSON.stringify(e)+" audioPlayIng:"+this.audioPlayIng);
				 this.isAudioChanging=false;
				 this.tempAudioDuration=parseInt(value/100.0*this.pickCatalog.seconds);
				 this.playTime=this.$formatSeconds(this.tempAudioDuration);
				uni.$emit('playTime',this.playTime)
				 if(this.audioPlayIng){
					 console.log("qxj audioDuration:"+this.tempAudioDuration);
					 this.audioDuration=this.tempAudioDuration;
					 this.audioContext.seek(this.tempAudioDuration);
				 }else{
					 this.playVideoAction();
				 }
			 },
			 startCountsTime(){
				  
			 },
			 pauseCountsTime(){ //暂停
			  
			},
			resumeCountsTime(){ //恢复
			   
			},
			endCountsTime(){
				if (this.timer) {
				   clearInterval(this.timer);
				   this.timer = null;
				}
			},
			onFullscreenChange(event){
				// #ifndef APP-PLUS
				this.fullScreen = event.detail.fullScreen
				// direction取为 vertical 或 horizontal
				this.direction = event.detail.direction
				// 检查是否全屏
				if (!event.detail.fullScreen) {
					// this.showTherapy = false
				}
				// #endif
			},
			toggleBarChange(event){
				console.log("qxj toggleBarChange");
				this.showFullScreenBtn=!this.showFullScreenBtn;
			},
			onWaiting(res){
			   this.isWaiting=true;
			   //this.showToast("qxj onWaiting:"+JSON.stringify(res));
			},
			onProgress(event) {
			     //console.log("qxj onProgress:"+JSON.stringify(event));
				 //uni.showToast({title:event.detail.buffered,icon: 'none'});
			},
			onVideoCanPlay(res) {
			    console.log('视频可以开始播放，但可能需要缓冲');
			    //this.showToast("qxj onVideoCanPlay:"+JSON.stringify(res));
			},
			onVideoCanPlayThrough(res) {
			      console.log('视频可以无暂停地播放');
				  //this.showToast("qxj onVideoCanPlay:"+JSON.stringify(res));
			},
			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 || nextCatalog.isBuy==0){
					return;
				}
				this.pickCatalogAction(this.pickCatalogIdx-1)
			},
			onLoadeddata(res) {
				//this.showToast("qxj onLoadeddata res:"+JSON.stringify(res));
			    console.log('视频缓冲完成');
			},
			onLoadedMetadata(event) { //在视频元数据加载完成时初始化。
			  
			   this.lastBuffered+=event.detail.duration;
			   //this.showToast("qxj onLoadedMetadata 已缓冲(秒):"+event.detail.duration);
			   // const video = event.target;
			   // if (video.buffered.length > 0) {
			   //     this.lastBuffered = video.buffered.end(0);
			   // }
			},
			onTimeUpdate(res){  //在视频播放时，检查缓存的变化，估算新增的已加载字节数并累加到 dataUsage 中。
				 this.audioDuration=res.detail.currentTime;
				 this.courseDuration = (res.detail.currentTime*1.0).toFixed(0);
				 this.totalDuration=res.detail.currentTime;
				 if(this.isH5){
					 if(this.allLookDuration>=300){   //H5未登录状态播放五分钟就跳出登录页面
						 if(!this.$isLogin()){
							 this.$showLoginPage();
							 this.pauseVideo();
						 }
					 }
				 }
				 else{
					 if(this.allLookDuration>=120){   //未登录状态播放两分钟就跳出登录页面
						 if(!this.$isLogin()){
							 this.$showLoginPage();
							 this.pauseVideo();
						 }
					 }
				 }
			     let detail=res.detail;
				 let currentDuration=parseInt(detail.duration);
				 if(this.pickCatalog.duration==null&&this.pickCatalog.duration==0 && !!currentDuration){
					 this.pickCatalog.duration=currentDuration;
					 this.pickCatalog.seconds=currentDuration;
					 this.catalogueList[this.pickCatalogIdx]=this.pickCatalog;
					 this.$forceUpdate();
				 }
				 if(res.detail.currentTime>=this.pickCatalog.seconds){
				 	this.countdowning=false;  //观看时长开关关闭					  
				 }
				if(!this.isWaiting){
					this.video.percent=(this.courseDuration/this.pickCatalog.seconds*1.0).toFixed(2)*100;
					this.playTime=this.$formatSeconds(this.courseDuration);
					uni.$emit('playTime',this.playTime)
				}else{
					setTimeout(()=>{
						this.isWaiting=false;
					},2000);
				}
				this.isPlayIng=true;
				// #ifndef APP-PLUS
				uni.$u.throttle(this.checkTherapy, 1000,false);
				//  #endif
			},
			checkTherapy() {
				let currentTime = Math.round(this.audioDuration || 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
					}
				}
			},
			initStudyTime(times){
				this.studyTimes=times;
				this.courseDuration=times;
				this.audioDuration=times;
				// this.tempAudioDuration=times;
				this.playTime=this.$formatSeconds(this.studyTimes);
				uni.$emit('playTime',this.playTime)
			},
			getCatalogIdx(){
				let index=this.catalogueList.findIndex(item=>item.videoId==this.videoId);
				if(index<0){
					index=0;
				}
				return index;
			},
			goToPlay(){
				this.navTo("./videoUni");
				//this.navTo("/pages/course/video/play?videoUrl="+this.pickCatalog.videoUrl+"&currentTime="+this.currentTime+"&catalogIdx="+this.pickCatalogIdx);
			},
			goToInfo(item){
			    this.$navTo('./info?courseId='+item.courseId);	
			},
			goToIntroduce(){
				let url='./introduce?courseId='+this.courseId+'&videoId='+this.pickCatalog.videoId+'&studyTimes='+this.courseDuration;
				this.$navTo(url);
			},
			goToCatalogue(){
				if(this.isH5){
					 let url='./catalogue?courseId='+this.courseId+'&videoId='+this.pickCatalog.videoId+'&isAutoPlay='+this.data.isAutoPlay+'&studyTimes='+this.courseDuration;
					 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 
					});
				}
			},
			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
				});
			},
			openShare(){
				if(this.isH5){
					return;
				}
				console.log("qxj title："+this.pickCatalog.title);
				if(this.$isEmpty(this.pickCatalog.title)){
					this.shareItem.title=this.data.courseName;
				}else{
					this.shareItem.title=this.data.courseName+"-"+this.pickCatalog.title;
				}
				this.shareItem.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;
			},
			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:"gh_7a6a32e5ef61",
							path:'pages_order/coursePayment?orderId='+that.orderId+"&payMethod=app",
							type:0
						},function(){
							console.log("微信唤起成功");
							return true;
						},function(e){
							console.log("微信唤起失败",e);
							uni.showToast({
								title:'微信唤起失败，请检查是否有微信应用',
								icon:'none'
							})
							return false;
						})
						
					}else{
						uni.showToast({
							title:'微信唤起失败，请检查是否有微信应用',
							icon:'none',
							duration:3000
						})
						return false;
					}
				      
				},function(res){  
				    console.log(JSON.stringify(res));  
				});
			},
			addStudyCourse(){
				if(this.catalogueList.length==0 || this.courseDuration==0){
					return;
				}
				this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				this.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog.packageJson) : []
				uni.$emit("getPickCatalog",this.pickCatalog);
				if(this.pickCatalog.isBuy==0){
					return;
				}
				const parmas={"courseId":parseInt(this.courseId),"duration":this.courseDuration,"videoId":this.pickCatalog.videoId};
				addDuration(parmas).then(res => {
						if(res.code==200){
							this.courseDuration=0;
						}
					},
					rej => {}
				);
			},
			addIntegral(){
				if(this.lookDuration==0 || this.courseDuration==0){
					return;
				}
				this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				this.packageJsonList = this.pickCatalog && this.pickCatalog.packageJson ? JSON.parse(this.pickCatalog.packageJson) : []
				uni.$emit("getPickCatalog",this.pickCatalog);
				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 => {}
				);
			},
			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 => {}
				);
			},
			openApp(){
			    window.location.href="rtlive://course?courseId="+this.courseId;	
			},
			videoErrorCallback(){
				
			},
			showToast(title){
				uni.showToast({
					title:title,
					icon:'none',
					duration:3000
				})
			},
			closeShareAct(){
				this.showShare=false;
				
			},
			closeTherapy() {
				this.showTherapy = false
			},
			goToPro(productId) {
				this.videoContext.exitFullScreen()
				this.showTherapy = false
				setTimeout(()=> {
					uni.navigateTo({
						url: "/pages/store/packageDetails?packageId="+productId
					});
				}, 500);
			},
			// 返回视频
			backPlayVideo() {
				this.showAudio = false;
				this.audioPlayIng = false;
				uni.$emit('changeData',{
					audioPlayIng: this.audioPlayIng,
					showAudio: this.showAudio,
				})

				this.isLearning=false;
				setTimeout(()=>{
					this.pauseAudio();
					this.playVideo();
				},200)
			},
			// 打开集观看提示弹窗
			openTips(index){
				// #ifdef APP-PLUS
				uni.$emit('getTipShowType', {index:index})
				uni.getSubNVueById('videoPopup').show();
				// #endif 
			},
			tipConfirm() { // 提示确认
				// 继续播放
				//传递消息给小节弹窗
				uni.$emit('pickCatalogIdx', {pickCatalogIdx:this.pickCatalogIdx,type: 'catalogueN'}); 
				if(this.showAudio) {
					this.playAudioAction()
				} else {
					this.playVideo();
				}
			},
			tipCancel(index) { // 提示取消
				// 播放选择的一节
				this.pickCatalogActionFun(index,'catalogueN')
			}, 
			// 线路
			openPop() {
				console.log("线路===",this.pickCatalog)
				let lineList = []
				if(this.pickCatalog&&this.pickCatalog.lineOne) {
					lineList.push(this.pickCatalog.lineOne)
				}
				if(this.pickCatalog&&this.pickCatalog.lineTwo) {
					lineList.push(this.pickCatalog.lineTwo)
				}
				if(this.pickCatalog&&this.pickCatalog.lineThree) {
					lineList.push(this.pickCatalog.lineThree)
				}
				this.lineList = lineList
				this.lineList.push("https://tcpv.ylrzcloud.com/transferCode/1732246123922_transcode_100323.mp4")
				this.lineIndex = lineList.indexOf(this.pickCatalog.videoUrl)
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			handleLine(index) {
				this.lineIndex = index
				this.pickCatalog.videoUrl=this.lineList[index]
				uni.$emit("getPickCatalog",this.pickCatalog);
				// this.$nextTick(()=>{
				// 	this.tipsOpen = false
				// 	// this.player = null
				// 	this.videoConfig.url = this.lineList[index]
				// 	this.videoConfig.startTime = this.playTime
				// 	this.videoConfig.plugins = this.checkMSE()&&this.lineIndex!=0 ? [Mp4Plugin] : []
				// 	// this.initVideo('play')
				// 	this.playDuration = this.playTime
				// 	this.player.playNext({
				// 	  url: this.lineList[index],
				// 	  startTime: this.playTime,
				// 	  plugins: this.videoConfig.plugins,
				// 	  mp4plugin: this.videoConfig.mp4plugin
				// 	})
				// 	if(this.checkMSE()&&this.lineIndex!=0) {
				// 		this.player.registerPlugin(Mp4Plugin)
				// 	} else {
				// 		this.player.unRegisterPlugin('Mp4Plugin')
				// 	}
				// 	this.isPlayNext = true
				// })
				this.close()
			},
		},
		onUnload() {
		    // 页面卸载时清除计时器
		    this.endCountsTime();
			this.addStudyCourse();
			this.destoryAudio();
			uni.$emit('refreshStudyTime', {});
			uni.$off("navBack");
			uni.$off("onPlayVideo");
			uni.$off("onWaiting");
			uni.$off("onTimeUpdate");
			uni.$off("endedPlayNext");
			uni.$off("onLoadedMetadata");
			uni.$off("audioBtnEvent");
			// #ifdef APP-PLUS
			uni.$off('getEventType');
			// #endif 
		},
		created(){
			let that = this;
			uni.$on('backStudyTime', function(data) {
				 //console.log("qxj backStudyTime:"+JSON.stringify(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.tempAudioDuration=data.studyTimes;
				 that.packageJsonList = that.pickCatalog && that.pickCatalog.packageJson ? JSON.parse(that.pickCatalog.packageJson) : []
				 uni.$emit("getPickCatalog",that.pickCatalog);
				 that.pickCatalogMethod(that.pickCatalogIdx);
			});
			
			uni.$on('showPayTips', function(data) {
				console.log("qxj showPayTips")
				that.courseOrderId=data.courseOrderId;
				//that.showPayTips=true;
				that.$refs.popTip.open();
			});
			
			uni.$on('refreshUser', function(data) {
				that.getUserInfo();
				that.getCourseInfo();
			});
			
			uni.$on('pickCatalogAction', function(data) {
				that.pickCatalogAction(data.index,data.type);
			});
			uni.$on('refreshCatalog', function(index) {
				let catalog=that.catalogueList[index];
				catalog.isBuy=true;
				that.catalogueList[index]=catalog;
			});
		},
		destroyed() {
			// 注销全局配置监听
			uni.$off("backStudyTime");
			uni.$off("refreshUser");
			uni.$off("showPayTips");
			uni.$off("pickCatalogAction");
			uni.$off("refreshTitle");
			uni.$off("refreshCatalog");
			uni.$off("navBack");
			uni.$off("onPlayVideo");
			uni.$off("onWaiting");
			uni.$off("onTimeUpdate");
			uni.$off("endedPlayNext");
			uni.$off("onLoadedMetadata");
			uni.$off("audioBtnEvent");
		}
		
	}
</script>

<style lang="scss" scoped>
	.content{
		background: #f7f7f7;
	}
	.popupbox {
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx 32rpx;
		position: relative;
		&-head {
			height: 60rpx;
			margin-bottom: 30rpx;
			text-align: center;
			overflow-y: auto;
			color: #414858;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;
			.close-icon {
				position: absolute;
				right: 0;
				top: 0;
				height: 40rpx;
				width: 40rpx;
			}
		}
		&-content {
			height: 20vh;
			overflow-y: auto;
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 32rpx;
			.line-item {
				display: inline-block;
				min-width: 200rpx;
				height: 60rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 50rpx;
				overflow: hidden;
				background-color: #f7f7f7;
				text-align: center;
				color: #414858;
				font-size: 28rpx;
				line-height: 60rpx;
			}
			.line-active {
				color: #f56c6c !important;
				background-color: #fef0f0 !important;
			}
		}
	}
	.video-line {
		min-width: 140rpx;
		max-width: 200rpx;
		height: 60rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 50rpx 0 0 50rpx;
		overflow: hidden;
		background-color: #fff;
		text-align: center;
		color: #888;
		font-size: 28rpx;
		line-height: 60rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 0;
		z-index: 9;
		bottom: calc(var(--window-bottom) + 280rpx);
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12);
		image {
			flex-shrink: 0;
			height: 30rpx;
			width: 30rpx;
			margin-right: 6rpx;
		}
	}
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.rotate {
		transform: rotate(-180deg);
	}
	.status_bar {
		background-color: #000;
	}
	.back-img {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 20rpx;
		left: 34rpx;
		z-index: 99;
	}
	.audiobox {
		width: 100%;
		height: calc(422rpx + var(--status-bar-height));
		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;
		}
		&-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%);
		}
		&-time {
			margin-top: 18rpx;
			font-size: 24rpx;
		}
	}
	.video-box {
		width: 100%;
		height: 422rpx;
		overflow: hidden;
		position: relative;
		margin-top: var(--status-bar-height);
		#myVideo {
			width: 100%;
			height: 100%;
		}
	}
	.scroll-Y {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
	}
	
	.video-info {
		padding: 24rpx;
		background-color: #fff;
	
		&-header {
			width: 100%;
			@include u-flex(row, center, space-between);
		}
	
		&-headerl {
			flex: 1;
			@include u-flex(row, center, flex-start);
			font-weight: 500;
			font-size: 32rpx;
			overflow: hidden;
			image {
				flex-shrink: 0;
				width: 88rpx;
				height: 88rpx;
				margin-right: 28rpx;
				background: #F5F7FA;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	
		.follow-btn {
			@include u-flex(row, center, center);
			height: 56rpx;
			min-width: 154rpx;
			padding: 0 23rpx;
			background: #FF5C03;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			image {
				height: 32rpx;
				width: 32rpx;
				margin-right: 6rpx;
			}
		}
		&-voice {
			width: 100%;
			padding: 24rpx 20rpx 38rpx 28rpx;
			margin-top: 26rpx;
			background: #F5F7FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-sizing: border-box;
			image {
				width: 48rpx;
				height: 48rpx;
			}
			&-l {
				@include u-flex(row, center, flex-start);
	
				image {
					margin-right: 20rpx;
				}
			}
		}
	
		&-voicebox1 {
			@include u-flex(row, center, space-between);
		}
	
		&-voicebox2 {
			padding: 24rpx 0;
			@include u-flex(row, center, space-between);
			font-weight: 400;
			font-size: 26rpx;
			color: #757575;
		}

		::v-deep .uni-collapse-item__title-arrow {
			margin-right: -8rpx;
		}
		.opacity {
			position: relative !important;
			opacity: 1 !important;
			z-index: 1 !important;
		}
		&-desc {
			margin-bottom: 52rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			word-break: break-all;
			overflow: hidden;
			line-height: 42rpx;
			position: absolute;
			opacity: 0;
			z-index: -1;
			.desc-image {
				height: 60rpx;
				width: 100%;
				// background-color: red;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
		
		.text-clamp{
		   display: -webkit-box;
		    -webkit-line-clamp: 2; /* 显示的行数 */
		    -webkit-box-orient: vertical; /* 内容会垂直堆叠 */
		    overflow: hidden; /* 隐藏溢出的内容 */
		    text-overflow: ellipsis; /* 当内容被裁剪时显示省略号 */
		}
	
		&-footer {
			@include u-flex(row, center, space-between);
			color: #757575;
			font-weight: 400;
			font-size: 24rpx;
	
			view {
				width: 128rpx;
				height: 104rpx;
				@include u-flex(column, center, center);
			}
	
			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	
	.box-header {
		height: 80rpx;
		padding: 0 24rpx;
		@include u-flex(row, center, space-between);
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	
		&-title {
			color: #222222;
			font-size: 34rpx;
		}
	
		&-r {
			@include u-flex(row, center, flex-start);
	
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	.therapy {
		background-color: #fff;
		padding-left: 24rpx;
		padding-bottom: 20rpx;
		&-scrollx {
			white-space: nowrap;
			width: 100%;
			// margin-left: 24rpx;
		}
		&-scrollitem {
			display: inline-block;
			overflow: hidden;
			background: #F5F7FA;
			padding: 10rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			border: 1rpx solid #F5F7FA;
			box-sizing: border-box;
			position: relative;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				background-color:  #F5F7FA;
			}
			&::after {
				content: '查看详情';
				background-color: #F5F7FA;
				position: absolute;
				top: 0;
				left: 0;
				font-weight: 400;
				font-size: 20rpx;
				padding: 4rpx 14rpx;
				border-radius: 10rpx 0 10rpx 0;
				color: #757575;
			}
		}
		&-active {
			background: #fff;
			border: 1rpx solid #FF5C03;
			.therapy-goodsname {
				color: #FF5C03 !important;
			}
			&::after {
				background: #fff;
				color: #FF5C03 !important;
			}
		}
		&-goodsname {
			margin-top: 6rpx;
			width: 200rpx;
			min-height: 64rpx;
			font-size: 24rpx;
			color: #757575;
			word-break: break-all;
			white-space: normal;
		}
	}
	.video-directory {
		background-color: #fff;
		padding-top: 12rpx;
		margin-top: 20rpx;
		&-scrollx {
			white-space: nowrap;
			width: calc(100% - 24rpx);
			margin-left: 24rpx;
		}
		&-scrollitem {
			display: inline-block;
			width: 276rpx;
			height: 160rpx;
			background: #F5F7FA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 18rpx;
			padding: 20rpx 12rpx 20rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 20rpx;
		}
	
		.freeflag {
			width: 68rpx;
			height: 32rpx;
			text-align: center;
			line-height: 32rpx;
			position: absolute;
			right: 0;
			top: 0;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
			&-free {
				background: url('@/static/image/hall/free_lable_bg.png') no-repeat right / 68rpx 32rpx;
			}
			&-member {
				background: url('@/static/image/hall/member_label_bg.png') no-repeat right / 68rpx 32rpx;
			}
		}
	
		&-num {
			font-weight: 500;
			font-size: 28rpx;
			@include u-flex(row, center, flex-start);
			image,.empty{
				width: 48rpx;
				height: 48rpx;
				margin-left: 10rpx;
			}
		}
	
		&-title {
			@include u-flex(row, center, space-between);
			font-size: 24rpx;
			color: #757575;
			word-break: break-all;
			white-space: normal;
			.imagebox {
				flex-shrink: 0;
				margin: 0 8rpx;
				position: relative;
				image {
					width: 92rpx;
					height: 72rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					overflow: hidden;
				}
			}
		}
	
		.mask {
			width: 92rpx;
			height: 72rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			background: rgba(0, 0, 0, 0.2);
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			@include u-flex(row, center, center);
	
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
		
		.active-scrollitem {
			background: #FCF0E7;
			color: #FF5C03;
			.video-directory-title {
				color: #FF5C03;
			}
		}
	}
	
	.video-comment {
		background-color: #fff;
		padding-top: 12rpx;
		margin-top: 20rpx;
	}
	
	.hall-box {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		margin: 0 -18rpx -18rpx 0;
		padding: 12rpx 24rpx 24rpx 24rpx;
		.gapitem {
			margin: 0 18rpx 18rpx 0;
		}
	}
	
	.popbox {
		background-color: #fff;
		position: relative;
		.box-header {
			padding-top: 12rpx;
			padding-bottom: 12rpx;
			box-sizing: border-box;
			background-color: #fff;
		}
		.popbox-body {
			.comment,
			.directoryinfo {
				padding: 24rpx;
			}
		}
		.search-box {
			@include u-flex(row, center, space-between);
			padding: 10px 24rpx;
	
			.search {
				padding: 0;
				flex: 1;
	
				image {
					width: 24rpx;
					height: 24rpx;
					padding-left: 16rpx;
				}
			}
		}
	}
	
	.search-btn {
		flex-shrink: 0;
		height: 68rpx;
		padding: 0 42rpx;
		margin-left: 20rpx;
		background: #FCF0E7;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 26rpx;
		color: #FF5C03;
		text-align: center;
		line-height: 68rpx;
	}
	
	.comment-inputbox {
		@include u-flex(row, center, space-between);
		padding: 28rpx 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		.inputbox {
			flex: 1;
			height: 72rpx;
			padding-left: 24rpx;
			background: #F5F7FA;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 72rpx;
		}
	
		.release-btn {
			@extend .search-btn;
		}
	}
	
	.audio {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #757575;
		&-play {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		&-icon {
			width: 48rpx;
			height: 48rpx;
		}
		&-slider {
			flex: 1;
		}
		&-time {
			flex-shrink: 0;
		}
	}	
	
	.vipCourseBtn{
		background: #1B1F22;
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #FFDAA3;
		width: calc(33.33333% - 46.6666rpx);
	}
	
	.vipAc{
		background: linear-gradient(90deg, #FFE0B2, #F8BA8B);
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #1B1F22;
	}
	
	.privilegeBox{
		 background-color:#171a1d;
		 box-sizing: border-box;
	}
	
	.primenu-box{
		border-radius: 16rpx;
		margin-top: 0rpx;
		padding: 10rpx 20rpx;
	}
	
	.content-inner {
		display: flex;
		flex-wrap: wrap; 
		min-height:310rpx ;
	}
	
	.content-inner .item{
		width: calc(33.3333333%);
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 0rpx;
		
	}
	
	.content-inner .item .img{
		width: 84rpx;
		height: 84rpx;
		margin-bottom: 8rpx;
	}
	
	.content-inner .item .label{ 
		font-size: 32rpx;
		color: #83878A;
		
	}
		
	.vipMethodItem{
	   border-radius: 10rpx;
	   width: calc(100%);
	   height: 70rpx;
	   color: #FDD8A1;
	}
	
	.payTypeItem{
	   background-color:#1B1F22;
	   border:1px solid #fff;
	   border-radius: 10rpx;
	   width: calc(50% - 15rpx);
	   height: 94rpx;
	}
	
	.circle{
		   border:1px solid #FDD8A1;
	}
	
	.pt_ac{
		border:1px solid #FDD8A1;
	}
	
	.slider-box{
		flex:1
	}
	.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;
			box-sizing: border-box;
			padding-top: 7px;
			verflow: hidden;
			word-break: break-all; /* break-all(允许在单词内换行 */
			text-overflow: ellipsis; /* 超出部分省略号 */
			-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
			-webkit-line-clamp: 1; /* 显示的行数 */
			lines:1;
		}
		.goodsname-txt {
			font-size: 12px;
			text-overflow: ellipsis; /* 超出部分省略号 */
			lines:1; 
		}
	}
</style>