baiyuApp/pages/course/info1.vue

<template>	
    <!-- <page-meta :page-font-size="`${this.$store.getters.scaleFontSize}px`"  :root-font-size="`${this.$store.getters.scaleFontSize}px`"></page-meta>
	 -->
	<view class="es-view-w-x">
		
		<!-- #ifdef APP-PLUS -->
		   <es-nav-title title="课程详情" mode="cover"></es-nav-title>
		<!-- #endif -->
		
		<view class="video es-mt-20">
			<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" >
			 </video>
			 <!-- #ifdef APP-PLUS -->
					 <cover-image src="/static/images/other/yuan-1.png" class="video-1"></cover-image>
					 <cover-image src="/static/images/other/yuan-2.png" class="video-2"></cover-image>
					 <cover-image src="/static/images/other/yuan-3.png" class="video-3"></cover-image>
					 <cover-image src="/static/images/other/yuan-4.png" class="video-4"></cover-image>
			 <!-- #endif -->
		  </view>

	    <view class="es es-ac es-mt-20">
			<view class="es-icon-70 es-br">
				<image mode="aspectFill" :src="data.talentAvatar"></image>
			</view>
			<view class="es-f1 es-fw-600 es-fs-28 es-ml-10">
				{{data.courseName}}
			</view>
			<view class="es-w-111 es-h-46 es-br-10 es es-ac es-pc es-fs-24" @tap="doFollow()"   :class="isFollow?'es-btn-ygz':'es-bc'">
				<!-- <view style="line-height: 1em;margin-bottom: 4rpx;">+</view> -->
				<view  :class="isFollow?'':'es-icon-26 es-icon-add'" style="margin-right: -5rpx;"></view>
				<view>{{isFollow?"已关注":"关注"}}</view>
			</view>
		</view>

          <!-- 音频播放 -->
		<view class="es-mt-11 es-bc-f9 es-br-10 es-pl-26 es-pr-26 es-h-67 es es-ac es-mt-10 es-c-66 es-fs-24 es-fw-500">
			<view class="es-icon-39 es-brc es-br es es-ac es-pc" @tap="playAudioAction()">
				<view class="es-icon es-w-16 es-h-19 " :class="!audioPlayIng?'es-icon-course-play':'es-icon-course-pause'" ></view>
			</view>
			<view class="es-ml-16">{{playTime}}</view>
			
			<view class="slider-box es-p-r load-con es-h-40 es-ml-32 es-mr-28">
				<u-slider  :disabled="data.isFast==0"  @change="audioChange" @changing="audioChanging" @input="input" blockSize="22" activeColor="#fff" blockStyle="white-bloack" inactiveColor="#AAAAAA"  v-model="video.percent"  min="0" max="100"></u-slider>
			</view>
			
			<view class="es-mr-16">{{ $formatSeconds(pickCatalog.seconds)  }}</view>
			<view class="es-icon es-w-30 es-h-22 es-icon-course-play-menu"></view>
		</view>

        <!-- 简介 -->
		<view class="es es-ac es-c-66 es-mt-22">
			<view class="es-icon-27 es-icon-course-play_icon"></view>
			<view class="es-fs-24 es-fw-500 es-ml-13">{{data.views}}</view>
			<view class="es-icon-27 es-icon-course-time_icon es-ml-20"></view>
			<view class="es-fs-24 es-fw-500 es-ml-13">{{data.totalDuration}}</view>
			<view class="es-f1"></view>
			<view class="es-fs-24 es es-ac" @tap="goToIntroduce">
				<text>简介</text>
				<view class="es-icon-ret-right"></view>
			</view>
		</view>

		<view class="es-mt-24 es-fw-500 es-fs-28 more-t">
			{{data.description}}
		</view>

       <!-- 笔记/收藏 -->
		<view class="es es-pt-40 es-pb-40 es-fs-26 es-fw-500 es-c-66">
			<view class="es es-ver es-ac es-pc es-wp-25" @tap="$navTo('./note?courseId='+courseId)">
				<view class="es-icon-70 es-br es-bc-e6 es es-ac es-pc">
					<view class="es-w-36 es-h-40 es-icon es-icon-course-note"></view>
				</view>
				<view class="es-mt-8" >笔记·{{data.noteNum}}</view>
			</view>
			<view class="es es-ver es-ac es-pc es-wp-25" @tap="doFavorite()">
				<view class="es-icon-70 es-br  es es-ac es-pc" :class="isFavorite?'es-bc-theme':'es-bc-e6'" >
					<view class="es-w-40 es-h-40 es-icon es-icon-course-collect"></view>
				</view>
				<view class="es-mt-8">{{isFavorite?"已收藏":"收藏"}}</view>
			</view>
			
			<view class="es es-ver es-ac es-pc es-wp-25" @tap="doLike()">
				<view class="es-icon-70 es-br es es-ac es-pc" :class="isLike?'es-bc-theme':'es-bc-e6'" >
					<view class="es-w-33 es-h-32 es-icon es-icon-course-like"></view>
				</view>
				<view class="es-mt-8">{{isLike?"喜欢":"喜欢"}}</view>
			</view>

			<view class="es es-ver es-ac es-pc es-wp-25" @tap="openShare()">
				<view class="es-icon-70 es-br es-bc-e6 es es-ac es-pc">
					<view class="es-w-38 es-h-37 es-icon es-icon-course-share"></view>
				</view>
				<view class="es-mt-8">分享</view>
			</view>
		
		</view>

        <!-- 目录 -->
		<view class="catalogue">
			<view class="es es-ac" >
				<view class="es-f1 es-fw-600 es-fs-30">目录</view>
				<view class="es-c-66 es-fs-26 es es-ac"  @tap="goToCatalogue()">共<text class="es-c">{{catalogueList.length}}</text>节<view class="es-icon-ret-right"></view></view>
			</view>
			<scroll-view style="display: flex;white-space: nowrap;overflow-x: scroll;" class="es es-fs-24 es-fw-600 es es-center es-pt-20 es-pb-20" scroll-x="true" :scroll-into-view="scrollIntoViewId" >
				<view :id="'cataLogue'+index"  v-for="(item, index) in catalogueList"  :key="index" @click="pickCatalogAction(index)"   class="catalogue-item"  :class="index==pickCatalogIdx?'ac':''" >
					<view class="es-ml-29 es-mr-29 es es-pc es-center es-ver">
						<view class="es es-ac es-mt-12">
							<view class="" style="max-width: 6em;">第{{index+1}}讲</view>
							<view class="es-ml-23 es-icon es-w-30 es-h-28"></view>
						</view>
						<view class="es-omit es-mb-12">{{item.title}}</view>
						<view class="vip" v-if="index>1 && canShowVip(item)">VIP</view>
					</view>
				</view>
	         </scroll-view>
		</view>
		
		<!-- 评论 -->
		<view class="comment">
			<view class="es-bc-f8 es-br-10 es-mt-15 es-view-w-x es-pt-28 es-pb-10">
				<view class="es es-ac " >
					<view class="es-f1 es-fw-600 es-fs-30">评论</view> 
					<view class="es-c-66 es-fs-26 es es-ac" @tap="doCommentAction()">共{{data.commentNum}}条 <view class="es-icon-ret-right"></view></view>
				</view>
				<swiper class="carousel"   :vertical="true" circular :autoplay="true" interval="5000" duration="2000">
				    <swiper-item v-for="(item, index) in data.commentList"  :key="index" class="carousel-item">
				          <view class="es es-ac">
								<!-- <view class="es-f1"></view> -->
								<view class="es-icon-48 es-br es-mt-20">
									<image  :src="item.avatar?item.avatar:''"></image>
								</view>
								<view class="es-ml-21 es-mr-37 es-fs-28 es-fw-500 es-omit" style="max-width: 12em;">{{item.nickName}}</view>
				          </view>  
						  <view  class="es-fs-26 es-pt-16 es-pb-16">{{item.content}}</view>
						  <view class="es-fs-24 es-c-99">{{ $formatDate(item.createTime) }}</view>
				          
				    </swiper-item>
				</swiper>
			</view>
		</view>
		
		<!-- 猜你喜欢 -->
		<view class="es es-ac es-mt-24">
			<view class="es-f1 es-fw-600 es-fs-30">猜你喜欢</view>
			<view class="es-c-66 es-fs-28 es es-ac" > <view class="es-icon-ret-right"></view></view>
		</view>
		<view class="es-mt-4 con es-center" :style="{ marginBottom:(isH5?145:20)+'px'}">
			<block v-for="(item, index) in dataList" :key="index">
				<es-course-item @tap.native="goToInfo(item)" :data="item"></es-course-item>
			</block>
		</view>
		
		<!-- h5下载 -->
		<view class="es-c es-share-bg-box" v-if="false">
			<image class="image x-c" src="/static/images/other/bg_bar.png"></image>
			<view class="es-bc-white es-h-100" style="width: 100%;line-height: 100rpx;">下载中康未来App,查看更多内容↓</view> 
		    <view class="line flex es-h-1 es-bc-fa"></view>
			<view class="es-h-120 es-bc-white x-bc es-pl-20 es-pr-20 es-pb-20">
				<view class="left x-f">
					<image  class="es-w-100 es-h-100 es-mr-20" src="../../static/logo.png"></image>
					<view class="y-b">
						<view class="es-fs-30 es-fw-bold es-c-33 es-mb-10 x-f">中康未来</view>
						<view class="es-fs-26 es-fw-n es-c-33">古籍·中药·方剂大全</view>
					</view>
				</view>
				<view class="es-br-20 es-h-80 es-w-250 es-bc es es-pc es-ac es-fw-bold es-fs-30" @tap="openApp()">
					<view class="es-ml-30 es-mr-30 es-h-50">App内打开</view>
				</view>
			</view>
		</view>
		
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false" >
			<share-box :shareItem="shareItem"  @closeShare='showShare = false' ></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="closeTip" @confirm="confirmTip"></uni-popup-dialog>
	    </uni-popup>
		
		<!-- 评论弹窗 -->
		<popupBottom ref="mescrollItem" :visible.sync="specVisible"   @close="closePop" :cmdId="courseId" :smsNum="data.commentNum"  :title="data.commentNum+'条评论'"  :type="1" radius="32"  maxHeight="1200"></popupBottom> 
		
	</view>
</template>

<script>
	import {getUserInfo} from '@/api/user'
	// import { formatSeconds,formatDate } from '@/utils/tools.js'
	import { getCourseById,getCourseList,getCourseVideoList,checkFavorite,checkFollow,checkLike,doFavorite,doFollow,doLike,addDuration,
	createCourseOrder,createIntegralOrder,createVipOrder,aliPayment,wxPayment } from '@/api/course'
	import popupBottom from '@/components/popupBottom/popupBottom.vue'
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
	export default {
		mixins: [MescrollCompMixin],
        components: {
        	popupBottom
        },
		data() {
			return {
				videoContext: null,
				video: {
					percent: 10, //进度百分比
				},
				courseId:null,
				talentId:null,
				videoId:null,
				showShare:false,
				shareItem:{ imageUrl:"",title:"",path:""},
				scrollIntoViewId:"cataLogue0",
				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:"",thumbnail:"",duration:0,videoId:0,seconds:0},  
				pickCatalogIdx:0,
				danmuList:[],
			    isFavorite:0,
			    isFollow:0,
			    isLike:0,  
				courseDuration:0,
				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,
				currentTime:null,
				isLearning:false,
				myVideo:null,
				showProgress:true,
				videoUrl:"https://1319721001.vod-qcloud.com/3525603bvodcq1319721001/2b3e76ac1253642698811158287/Hmod7JMfAowA.mp4",
				poster: "",
				studyLog:null,	     
				isPostBack:false,//页面是否已初次加载
				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,
				
			}
		},
		onLoad(options) {
           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();
		  },200);
		
		   if(this.$isLogin()){
			    this.getUserInfo();
			    this.checkFavorite();
			    this.checkLike();
		   }
		},
		onShow(){
			
			  if(this.data.courseId!=null && !this.countdowning){
				 console.log("qxj onShow startCountsTime");
			  }
			  //#ifdef H5
			      this.isH5=true;
			  //#endif
			//#ifdef APP-PLUS
			   //plus.navigator.setFullscreen(false)
			   //plus.screen.lockOrientation('portrait-primary');
			//#endif
			
			if(this.showPayTips){
				this.$refs.popTip.open();
				this.showPayTips=false;
			}
			
		},
		onHide() {
			 this.pauseVideo();	
			//this.$store.commit('setScaleFontSize',16);
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo", this);
			this.audioContext = uni.createInnerAudioContext();
		},
		methods: {
            getCourseInfo(){
			   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;
						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.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,30).then(res => {
						if(res.code==200){
							this.catalogueList=res.data.list;  
							if(this.catalogueList.length>0){
								if(this.videoId!=null){
									this.pickCatalogIdx=this.getCatalogIdx();
									this.scrollIntoViewId="cataLogue"+this.pickCatalogIdx;
									this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
								}else{
									this.pickCatalog=this.catalogueList[0];
								}
								if(this.pickCatalog.studyTime!=null){
									this.initStudyTime(this.pickCatalog.studyTime);
								}
								//开始播放计时
								if(this.data.isAutoPlay==1){
									this.pickCatalogMethod(this.pickCatalogIdx);
									this.startCountsTime();
								}
								this.poster=this.pickCatalog.thumbnail;
								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){
				//添加切换之前课程目录学习记录
				this.addStudyCourse();
				this.pickCatalogMethod(index);
			},
			pickCatalogMethod(index){
				//console.log("qxj pickCatalogMethod--------");
				let tempCatalogue=this.catalogueList[index];
				if(tempCatalogue.isVip==1){  //需要Vip才能观看
					if(!this.$isLogin()){
						this.$showLoginPage();
						return;
					}
					if(this.user==null){
						this.user=this.$getUserInfo()
					}
					if(this.user.isVip==0 && tempCatalogue.isBuy==0){
						this.openVipCourse();
						return;
					}
				}
				this.pickCatalogIdx=index;  
				this.pickCatalog=this.catalogueList[index];
				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;
				if (this.audioContext==null) {
				    this.audioContext = uni.createInnerAudioContext();
				}
				this.audioContext.src = this.pickCatalog.videoUrl;
				let that=this;
				setTimeout(function(){
					that.playVideo();
				},300);
			},
		
		    addStudyCourse(){
				if(this.catalogueList.length==0 || this.courseDuration==0){
					return;
				}
				this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				if(this.pickCatalog.isBuy==0){
					return;
				}
				const parmas={"courseId":parseInt(this.courseId),"duration":this.courseDuration,"videoId":this.pickCatalog.videoId};
				console.log("qxj courseDuration:"+this.courseDuration);
				addDuration(parmas).then(res => {
						if(res.code==200){
							this.courseDuration=0;
						}
					},
					rej => {}
				);
			},
			playVideo() {
			  this.videoContext.play();
			},
			pauseVideo() {
			   console.log("pauseVideo");
			   this.videoContext.pause();
			},
			onPlayVideo(){ //视频播放器事件
			    console.log("qxj onPlayVideo tempAudioDuration:"+this.tempAudioDuration);
			    if(this.tempAudioDuration==0){
					return;
				}
				this.playVideoAction();
			},
			playVideoAction(){
				this.courseDuration=(this.tempAudioDuration*1.0).toFixed(0);
				this.studyTimes=this.tempAudioDuration;
				console.log("qxj courseDuration:"+this.courseDuration);
				if(this.audioPlayIng){
					this.pauseAudio();
					this.audioPlayIng=false;
				}
				this.videoContext.seek(this.courseDuration);
			},
			onPauseVideo(){
				
			},
			playAudioAction(){
				//if(this.isLearning){  //若从在学课程跳转过来则续播
					this.playTime=this.$formatSeconds(this.courseDuration);
					this.audioContext.seek(this.audioDuration+0.8);
					this.isLearning=false;
				//}
				if(!this.audioPlayIng){
					this.pauseVideo();
					this.playAudio();
				}
				else{
					this.pauseAudio();
				}
				this.audioPlayIng=!this.audioPlayIng;
			},
			playAudio() {
				  let that=this;
				  this.audioTimer = setInterval(() => {
						if(that.isAudioChanging){
							 return;
					    }
					   if(that.audioDuration>that.pickCatalog.seconds){
					   	   clearInterval(that.audioTimer);
						   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);
				  }, 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();
				 }
			 },
			 input(){
				 this.isAudioChanging=true;
			 },
			 audioChanging(){
				 this.isAudioChanging=true; //正在拖动时屏蔽掉audio倒计时
			 },
			 audioChange(value){
				 console.log("audioChange value:"+value+" audioPlayIng:"+this.audioPlayIng);
				 this.isAudioChanging=false;
				 this.tempAudioDuration=parseInt(value/100.0*this.pickCatalog.seconds);
				 this.playTime=this.$formatSeconds(this.tempAudioDuration);
				 if(this.audioPlayIng){
					 console.log("qxj audioDuration:"+this.tempAudioDuration);
					 this.audioDuration=this.tempAudioDuration;
					 this.audioContext.seek(this.tempAudioDuration);
				 }else{
					 this.playVideoAction();
				 }
			 },
			 startCountsTime(){
				  // if (this.countdowning) return;
				  // this.countdowning = true;
				  // this.timer = setInterval(() => {
					 // if(this.courseDuration>this.pickCatalog.seconds){
						//   clearInterval(this.timer);
						//   return;
					 // }
					 // this.courseDuration++;
					 // console.log("qxj courseDuration:"+this.courseDuration);
				  // }, 1000);
			 },
			 pauseCountsTime(){ //暂停
			   // if (this.countdowning){
				  //  clearInterval(this.timer);
				  //  this.countdowning=false;
			   // }
			},
			resumeCountsTime(){ //恢复
			   // if (!this.countdowning){
				  // this.startCountsTime();
			   // }
			},
			endCountsTime(){
				if (this.timer) {
				  clearInterval(this.timer);
				  this.timer = null;
				}
			},
			onFullscreenChange(event){
				// 检查是否全屏
				if (event.fullscreen) {
					// 如果是全屏，则退出全屏
					//this.videoContext.exitFullScreen();
				}
			},
			toggleBarChange(event){
				console.log("qxj toggleBarChange");
				this.showFullScreenBtn=!this.showFullScreenBtn;
			},
			onWaiting(){
			   this.isWaiting=true;
			   console.log("qxj onWaiting:");
			},
			onProgress() {
			   console.log("qxj onProgress");
			},
			onLoadeddata() {
			    console.log('视频缓冲完成');
			},
			onVideoCanPlay() {
			    console.log('视频可以开始播放，但可能需要缓冲');
			},
			onVideoCanPlayThrough() {
			     console.log('视频可以无暂停地播放');
			},
			onLoadedMetadata(e) {
			   console.log("qxj onLoadedMetadata");
			},
			endedPlayNext(){
				let nextCatalog=this.catalogueList[this.pickCatalogIdx+1];
				if(nextCatalog.isBuy==0){
					return;
				}
				if(this.pickCatalogIdx<this.catalogueList.length-1){  //未播放到最后一节自动续播
					this.pickCatalogAction(this.pickCatalogIdx+1)
				}
			},
			onTimeUpdate(res){
				 this.audioDuration=res.detail.currentTime;
				 this.courseDuration = (res.detail.currentTime*1.0).toFixed(0);
				 this.totalDuration=res.detail.currentTime;
				 if(this.totalDuration>=120){   //未登录状态播放两分钟就跳出登录页面
					 if(!this.$isLogin()){
					 	 this.$showLoginPage();
					 }
					 this.totalDuration=0;
				 }
			     let detail=res.detail;
				 let currentDuration=parseInt(detail.duration);
				 if(this.pickCatalog.duration==null && !!currentDuration){
					 this.pickCatalog.duration=currentDuration;
					 this.pickCatalog.seconds=currentDuration;
					 this.catalogueList[this.pickCatalogIdx]=this.pickCatalog;
					 this.$forceUpdate();
					 console.log("qxj currentDuration:"+this.pickCatalog.duration);
				 }
				if(!this.isWaiting){
					this.video.percent=(this.courseDuration/this.pickCatalog.seconds*1.0).toFixed(2)*100;
					this.playTime=this.$formatSeconds(this.courseDuration);
				}else{
					setTimeout(()=>{
						this.isWaiting=false;
					},2000);
				}
			},
			initStudyTime(times){
				this.studyTimes=times;
				this.courseDuration=times;
				this.audioDuration=times;
				this.playTime=this.$formatSeconds(this.studyTimes);
			},
			getCatalogIdx(){
				let index=0;
				for (var i = 0; i < this.catalogueList.length; i++) {
					let item=this.catalogueList[i];
					if(this.videoId==item.videoId){
						break;
					}
					index++;
				}
				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(){
				 //this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				let url='./introduce?courseId='+this.courseId+'&videoId='+this.pickCatalog.videoId+'&studyTimes='+this.courseDuration;
				this.$navTo(url);
			},
			doCommentAction(){
				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 
					});
				}
			},
			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 
					});
				}
			},
			closePop(){
				console.log("qxj closePop");
				this.specVisible=false;
			},
			navTo(url) {
				console.log("qxj url:"+url);
				uni.navigateTo({
					url: url
				})
			},
			openShare(){
				if(this.isH5){
					return;
				}
				this.shareItem.title=this.data.courseName+"-"+this.pickCatalog.title;
				this.shareItem.imageUrl=this.data.imgUrl;
				this.shareItem.compressImage = 1;
				this.shareItem.summary=!this.$isEmpty(this.data.description)?this.data.description:"";
				let cdn=uni.getStorageSync('requestPath');
				this.shareItem.url=cdn+"/h5/pages/course/info?courseId="+this.courseId;
				this.showShare=true;
			},
			openVipCourse() {
				if(!this.isPostBack){
					this.isPostBack=true;
					return;
				}
				this.showPopPrivilege();
			},
			showPopPrivilege(){
				if(this.isH5){
					this.$refs.popPrivilege.open("bottom");
				}
				else{
					const subNVue = uni.getSubNVueById('privilege');
					subNVue.show('slide-in-bottom', 250);
					uni.$emit('privilege', {  
					    videoId: this.pickCatalog.videoId,  
					    courseId: this.courseId 
					});
				}
			},
			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: 'error'});
			   			}
			   		},
			   		rej => {}
			   	);
			},
			doAlipay(){
				var data = {orderId:this.order.orderId};
				uni.showLoading();
				aliPayment(data).then(res => {
						console.log(res.data)
						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));  
				});
			},
			closePrivilege(){
				this.$refs.popPrivilege.close();
			},
			closeTip(){
				this.$refs.popTip.close()
			},
			confirmTip() {
				this.$refs.popTip.close();
				this.getCourseInfo();
				this.getUserInfo();
				uni.showToast({
					title:"操作成功",
					icon:'success'
				})
			},
			canShowVip(item){
				return true;
				if(this.user.isVip){
					return false;
				}
				return item.isVip==1 && item.isBuy==0;
			},
			openApp(){
			    window.location.href="zklive://course?courseId="+this.courseId;	
			},
			videoErrorCallback(){
				
			},
		},
		onUnload() {
			console.log("qxj onUnload");
		    // 页面卸载时清除计时器
		    this.endCountsTime();
			this.addStudyCourse();
			this.destoryAudio();
			uni.$emit('refreshStudyTime', {});
		},
		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.pickCatalogMethod(that.pickCatalogIdx);
			});
		
			uni.$on('showPayTips', function(data) {
				that.showPayTips=true;
			});
			uni.$on('refreshUser', function(data) {
				that.getUserInfo();
				that.getCourseInfo();
			});
			uni.$on('pickCatalogAction', function(index) {
				console.log("qxj index:"+index);
				that.pickCatalogAction(index);
			});
			
		},
		destroyed() {
			// 注销全局配置监听
			uni.$off("backStudyTime");
			uni.$off("refreshUser");
			uni.$off("showPayTips");
			uni.$off("pickCatalogAction");
			uni.$off("refreshTitle");
			
		}
		
	}
</script>

<style>
	page {
		background-color: white;
	}
	.video {
		height: 380rpx;
		position: relative;
		display: flex;
		.cover{
			position: absolute;
			left: 0;
			top: 0;
		    width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		.playIcon{
			position: absolute;
			width:44rpx ;
			height: 44rpx;
			z-index: 10;
		    right: 26rpx;
			bottom: 50rpx;
		 }
	}

	
	.bottom {
		position: absolute;
		left: 0;
		top:0px;
		width: 100%;
		z-index: 100;
		/* background-color: red; */
	}
	
	.video video {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	
	.video .video-1,.video .video-2,.video .video-3,.video .video-4{
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		z-index: 1;
	}
	.video .video-1{
		left:0;top:0;
	}
	.video .video-2{
		right:0;top:0;
	}
	.video .video-3{
		left:0;bottom:0;
	}
	.video .video-4{
		right:0;bottom:0;
	}
	
	.es-icon-add{
		background-image: url(../../static/images/other/add.png);
	}

	.es-icon-course-collect {
		background-image: url(../../static/images/other/course/collect.png);
	}

	.es-icon-course-like {
		background-image: url(../../static/images/other/course/like.png);
	}

	.es-icon-course-note {
		background-image: url(../../static/images/other/course/note.png);
	}

	.es-icon-course-play {
		background-image: url(../../static/images/other/course/play.png);
	}
	
	.es-icon-course-pause {
		background-image: url(../../static/images/other/course/pause.png);
	}
	
	.es-icon-course-play_icon {
		background-image: url(../../static/image/course/play_small.png);
	}
	
	.es-icon-course-time_icon {
		background-image: url(../../static/image/course/time_small.png);
	}
	
	.catalogue-item{
		display: inline-block; /* 将子元素设置为行内块级元素 */
	}

	.es-icon-course-play1,
	.catalogue-item .es-icon {
		background-image: url(../../static/images/other/course/play1.png);
	}

	.es-icon-course-play2,
	.catalogue-item.ac .es-icon {
		background-image: url(../../static/images/other/course/play2.png);
	}

	.es-icon-course-play-menu {
		background-image: url(../../static/images/other/course/play-menu.png);
	}

	.es-icon-course-share {
		background-image: url(../../static/images/other/course/share.png);
	}
	.load-con>view {
		position: absolute;
		left: 0;
		top: 0;
		height: 30rpx;
		width: 100%;
	}

	.load-con>view:nth-child(1)>view {
		background-color: #AAAAAA;
	}

	.load-con>view:nth-child(2)>view {
		background-color: #ffffff;
	}

	.white-bloack {
		background-color: white;
		width: 36rpx;
		height: 10rpx;
		margin-left: -12rpx;
		border-radius: 100rpx;
		box-shadow: 2px 6px 10px 0px rgba(153, 153, 153, 0.22);
	}

	/* 	.load-con .white-block {
		position: absolute;
		width: 24rpx;
		margin-left: -12rpx;
		top: 5rpx;
		background-color: red;
		box-shadow: 2px 6px 10px 10px rgba(153,153,153,0.52);
	} */


	.catalogue-item {
		border: 3rpx solid #E6E4E5;
		height: 111rpx;
		border-radius: 10rpx;
		color: #999;
		margin-right: 20rpx;
		width: calc(50% - 40rpx);
		/* margin-top: 4rpx; */
	}
	
	.catalogue-item:last-child {
	   margin-right: 0;
	}

	.catalogue-item>view {
		height: 100%;
	}

	.catalogue-item.ac {
		border: 3rpx solid #EA581B;
		color: #EA581B;
		/* margin-top: 0rpx; */
	}

	.vip{
		  position: absolute;
		  width: 44rpx;
		  height: 19rpx;
		  line-height: 15rpx;
		  background: linear-gradient(94deg, #FFE9D0 0%, #E9BD97 100%);
		  border-radius: 5rpx;
		  top: 0rpx;
		  right: -29rpx;
		  color:#333;
		  font-size:18rpx ;
		  text-align: center;
		  font-weight: 500;
		  font-style: italic;		  
	}
	
	
	.con{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.es-f1, .es-f2, .es-f3, .es-f4 {
	    flex-shrink: 0 !important;
	}
	
	.es-btn-ygz{
		background: #e5e5e5;
		color: #333;
	}

	.swiper-box,
	.carousel {
	    width: 100%;
	    height: 190rpx;
	    position: relative;
	    border-radius: 20rpx;
		margin-top: 10rpx;
	    .carousel-item {
	        width: 100%;
	        height: 100%;
	        /* padding: 0 28upx; */
	        overflow: hidden;
	    }
	    .swiper-image {
	        width: 100%;
	        height: 100%;
	       /* border-radius: 10upx; */
	        background: #ccc;
	    }
	}
	/deep/uni-slider{
		margin: 0;
	}
	
	
	.es-icon-play-1 {
		background-image: url(../../static/images/other/video/1.png);
	}
	
	.es-icon-play-2 {
		background-image: url(../../static/images/other/video/2.png);
	}
	
	.es-icon-play-3 {
		background-image: url(../../static/images/other/video/3.png);
	}
	
	.es-icon-play-last {
		background-image: url(../../static/images/other/video/play-last.png);
	}
	
	.es-icon-play-stop {
		background-image: url(../../static/images/other/video/play-stop.png);
	}
	
	.es-icon-play-next {
		background-image: url(../../static/images/other/video/play-next.png);
	}
	
	.es-icon-play-dan {
		background-image: url(../../static/images/other/video/dan.png);
	}


	.es-share-bg-box {
		position: fixed;
		z-index: 9999;
		bottom: 0;
		left:0;
		width: 100%;
		text-align: center;
		.image{
			width: 100%;
			height:100rpx ;
		}
	}
	
	.vipCourseBtn{
		background: #1B1F22;
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #FFDAA3;
		width: calc(33.33333% - 46.6666rpx);
	}
	
	.vipAc{
		background: linear-gradient(90deg, #FFE0B2, #F8BA8B);
		border-radius: 46rpx;
		border: 1px solid #FFDAA3;
		color: #1B1F22;
	}
	
	.privilegeBox{
		 background-color:#171a1d;
		 box-sizing: border-box;
	}
	
	.primenu-box{
		border-radius: 16rpx;
		margin-top: 0rpx;
		padding: 10rpx 20rpx;
	}
	
	.content-inner {
		display: flex;
		flex-wrap: wrap; 
		min-height:310rpx ;
	}
	
	.content-inner .item{
		width: calc(33.3333333%);
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 0rpx;
		
	}
	
	.content-inner .item .img{
		width: 84rpx;
		height: 84rpx;
		margin-bottom: 8rpx;
	}
	
	.content-inner .item .label{ 
		font-size: 32rpx;
		color: #83878A;
		
	}
		
	.vipMethodItem{
	   border-radius: 10rpx;
	   width: calc(100%);
	   height: 70rpx;
	   color: #FDD8A1;
	}

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

</style>