ylrz_scrm_course_h5/pages/course/learningNewApp.vue

<template>
	<view>
		<view class="expirebox" v-if="isExpire">
			<image src="/static/images/expire.png" mode="aspectFill"></image>
			{{msg}}
		</view>
		<view class="content" v-show="!isExpire">
			<view class="video-box">
				<image v-if="!isLogin || isAddKf!=1" class="video-poster" :src="courseInfo.imgUrl" mode="aspectFill">
				</image>
				<video 
				@timeupdate="onTimeUpdate" 
				@progress="progressChange" 
				@error="videoErrorCallback" 
				@play="getPlay"
				@pause="getPause" 
				@ended="getEnded"
				@waiting="getWaiting"
				@fullscreenchange="fullscreenchange"
				:title="courseInfo.title"
				style="width: 100%;height: 420rpx;" 
				:poster="poster"  
				id="video-content-box"  
				controls
				:show-center-play-btn="false"
				:auto-pause-if-open-native="true"
				:auto-pause-if-navigate="true"
				:enable-progress-gesture="false" 
				:show-progress="true"
				:picture-in-picture-mode="[]"
				:show-background-playback-button="false"
				:src="videoUrl">
				<commentBox
				v-if="openCommentStatus==2"
				ref="danmuBox" 
				:height="height" 
				:urlOption="urlOption" 
				:time="playTime"
				:showDanmu="showDanmu"
				:viewCommentNum="viewCommentNum"
				:openCommentStatus="openCommentStatus"
				@setInputText="setInputText" 
				@getScrollTop="getScrollTop"
				@getMore="getMore"></commentBox>
				<cover-view class="video-danmu-btnbox" :style="{display: openCommentStatus==2&&isfull&&crtShow&&isLogin&&isAddKf==1 ? 'block':'none'}">
					<cover-image class="video-danmu-image"
					 src="https://cos.his.cdwjyyh.com/fs/20250418/beaf9df1a6204b8babc3e28d9b563c62.png"
					 @click="openDanmu(1)"></cover-image>
				</cover-view>
				<!-- logo -->
				<cover-image v-if="courseLogo" :class="isfull?'logo-full':'logo'" :src="courseLogo" mode="widthFix"></cover-image>
				<cover-view class="video-controls-box" v-if="isLogin&&isAddKf==1&&isPause">
					<cover-image class="video-play" src="@/static/images/video_icon.png" @click="clickVideo()"></cover-image>
				</cover-view>
				</video>
			</view>
			<view class="title-content" id="title-contentnav" v-show="openCommentStatus!=1">
				<!-- 答题时展示小节课程名，其他展示课程名 -->
				<!-- 小节课程名 -->
				<view class="subtitlebox" v-if="isLogin&&isAddKf==1">
					{{courseInfo.title}}
				</view>
				<!-- 课程名字 -->
				<view class="miantitlebox" v-else>
					{{courseInfo.courseName}}
				</view>
				<view class="giftbtn" v-if="showAnswerTip&&source == 'app'" @click="handleGift">兑换礼品</view>
			</view>
			<view class="tabbox" v-if="openCommentStatus==1">
				<view :class="currentTab == nav.id ? 'tabbox-active':''" v-for="nav in navList" :key="nav.id" @click="handleTab(nav.id)">{{nav.name}}</view>
			</view>
			<scroll-view
			class="scroll-view" 
			:style="{height: height}" 
			:scroll-top="scrollTop" 
			:scroll-y="true" 
			:refresher-enabled="currentTab == 2"
			:refresher-triggered="triggered"
			@refresherrefresh="handleRefresher">
				<template v-if="openCommentStatus==1">
					<view v-show="currentTab==0">
						<descInfoNav ref="descInfoNav" :isLogin="isLogin" :isAddKf="isAddKf" :courseInfo="courseInfo" :showAnswerTip="showAnswerTip" :source="source" @handleGift='handleGift'></descInfoNav>
					</view>
					<view v-show="currentTab==2">
						<commentBox 
						ref="commentBox" 
						:height="height" 
						:urlOption="urlOption" 
						:time="playTime"
						:flagTime="flagTime"
						:showDanmu="showDanmu"
						:viewCommentNum="viewCommentNum"
						:openCommentStatus="openCommentStatus"
						@setInputText="setInputText" 
						@getScrollTop="getScrollTop"
						@getMore="getMore"></commentBox>
					</view>
				</template>
				<view v-show="currentTab==1">
					<template v-if="openCommentStatus!=1">
						<!-- 介绍 -->
						<descInfo ref="descInfo" :isLogin="isLogin" :isAddKf="isAddKf" :courseInfo="courseInfo"></descInfo>
					</template>
					<!-- 问题 -->
					<template v-if="isLogin&&isAddKf==1">
						<ques ref="ques" :quesList="quesList" :openCommentStatus="openCommentStatus" @handleAnswer="handleAnswer"></ques>
					</template>
				</view>
			</scroll-view>
			<!-- 线路 -->
			<view class="video-line" @click="openPop" v-if="isLogin&&isAddKf==1">
				<image src="/static/images/changePlayer-icon.png"></image>
				<text>线路{{lineIndex + 1 | numberToChinese}}</text>
			</view>
			<!-- 线路弹窗 -->
			<uni-popup ref="popup" type="bottom"  class="full-width-popup">
				<view class="popupbox">
					<view class="popupbox-head">
						<text>线路选择</text>
						<image class="close-icon" src="/static/images/tc_close_icon.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>
			<!-- 温馨提示弹窗 -->
			<uni-popup ref="tipsPopup" type="center" :is-mask-click="false">
				<view class="tipsPopup-mask">
					<image class="red_envelope_top" src="/static/images/red_envelope_img.png" mode="aspectFill"></image>
					<view class="tipsPopup">
						<image class="tipsPopup-close" src="/static/images/course_close_white_icon.png" mode="aspectFill"
							@click="closeTipsPop"></image>
						<view class="tipsPopup-line">
							<view class="tipsPopup-box">
								<view class="tipsPopup-head">
									<image class="tipsPopup-head-title" src="/static/images/tips_title_img.png"
										mode="widthFix"></image>
								</view>
								<view class="tipsPopup-content">
									<view class="tipsPopup-content-title">亲爱的用户，</view>
									<view>您已经观看课程一半的时间了，请注意休息并保持专注。</view>
								</view>
								<view class="tipsPopup-btn-box">
									<view class="tipsPopup-btn" @click="closeTipsPop">继续观看领奖励</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 发送弹幕 -->
			<view class="video-line danmu-line" @click="openDanmu(0)" v-if="isLogin&&isAddKf==1&&openCommentStatus==2">
				<image class="set_image" src="https://cos.his.cdwjyyh.com/fs/20250418/5e508642737a44169061382566043ac9.png" mode="aspectFill"></image>
				<text>发弹幕</text>
			</view>
			<!-- 发送弹幕弹窗 -->
			<uni-popup ref="danmuPopup" type="bottom" style="z-index: 999;" @change="changeShowPopup">
				<view class="danmuPopup" :style="{marginLeft:isfull ? statusBarHeight+'px': 0,marginBottom: danmuboxHeight+'px'}">
					<view class="danmuPopup-head border-line">
						<image class="danmu-icon" :src="showDanmu==0?'/static/images/danmu-off.png':'/static/images/danmu-on.png'" mode="heightFix" @click="switchDanmu()"></image>
						<input 
						class="danmuPopup-input" 
						placeholder="发个弹幕吧~" 
						border="surround" 
						shape="circle" 
						:focus="focus"
						:adjustPosition="false" 
						:autoBlur="true" 
						maxlength="140" 
						clearable
						v-model.trim="inputText"></input>
						<button class="danmuPopup-send"  @click="handleChatInput">发送</button>
					</view>
				</view>
			</uni-popup>
			<!-- 答题弹窗 -->
			<uni-popup ref="answerPopup" type="center" :show="answerPopup">
				<view :class="errTitle == '恭喜你，回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
					<!-- 正确 -->
					<image class="tipimg" v-if="errTitle == '恭喜你，回答正确'" src="/static/images/course_answer_img.png"
						mode="aspectFill"></image>
					<!-- 错误 -->
					<image class="tipimg" v-else src="/static/images/course_answer_incorrectly_img.png" mode="aspectFill">
					</image>
					<view class="answerPopup-title">{{errTitle}}</view>
					<view class="answerPopup-desc" v-html="errDesc"></view>
					<!-- 选择奖励 -->
					<view class="reward-list" v-if="errTitle == '恭喜你，回答正确'">
						<radio-group class="reward-list-group" @change="rewardChange">
							<label class="reward-list-option" v-for="(item, index) in rewardType" :key="item.value">
								<radio :value="item.value+ ''" :checked="item.value == currentReward"
									activeBorderColor="#FF5C03" activeBackgroundColor="#FF5C03"
									style="transform:scale(0.7)" />
								<view :style="{color: item.value == currentReward ? '#FF5C03':''}">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
					<!-- 错误题目 -->
					<view class="errQuesbox" v-if="errQues&&errQues.length>0">
						<view class="errQuesbox-item textOne" v-for="(it,index) in errQues" :key="index">{{it.title}}</view>
					</view>
					<view class="answerPopup-btn" v-if="errTitle == '恭喜你，回答正确'" @click="closeAnswerPopup">领取</view>
					<view class="tipsPopup-btn-box" v-else
						:style="{marginTop: errQues&&errQues.length>0 ? '40rpx':'54rpx'}">
						<view class="tipsPopup-btn" @click="closeAnswerPopup">{{remain > 0 ? '重新答题': '确认'}}</view>
					</view>
				</view>
			</uni-popup>
			<!-- app回答正确弹窗 -->
			<appPopup ref="appPopup"></appPopup>
			<!-- 客服二维码弹窗 -->
			<uni-popup ref="kfPopup" type="center" :mask-click="false">
				<view class="kfqrcode-box">
					<image class="kfqrcode" :src="qrcode" show-menu-by-longpress="true"></image>
					<view v-show="qrcodeMsg" style="margin-top: 30rpx;" v-html="qrcodeMsg"></view>
					<image class="kfqrcode-close" src="/static/images/course_close_white_icon.png" mode="aspectFill"
						@click="closeKFPop"></image>
				</view>
			</uni-popup>
			<!-- 可以答题提示 -->
			<view class="answerTip" v-if="isLogin&&currentTab!=1&&openCommentStatus==1&&showAnswerTip" @click="handleTab(1)">
				<text>开始</text>
				<text>答题</text>
			</view>
			<!-- footer -->
			<view class="footer" v-if="currentTab!=2&&(videoId||sortLink)">
				<view class="footer-btn" v-if="!isLogin || isAddKf !=1" @click="submit">
					<text>立即学习</text>
				</view>
				<view v-if="currentTab==1&&isLogin&&isAddKf==1&&quesList&&quesList.length>0" class="footer-btn footer-btn-border" @click="submit">
					<!-- <image class="footer-btn-img" v-show="isLogin&&isAddKf==1" src="@/static/images/red_envelope_btnimg.png"
						mode="aspectFill"></image> -->
					<text>提交答案领取奖励</text>
				</view>
				<view @click="checked=!checked" class="agreement" v-if="!isLogin">
					<radio value="r1" :checked="checked" color="#ff5c03" activeBorderColor="#ff5c03"
						style="transform:scale(0.6);" />
					<view>阅读并同意<text style="color: #ff5c03;" @click.stop="goWeb(0)">《用户协议》</text>和<text
							style="color: #ff5c03;" @click.stop="goWeb(1)">《隐私协议》</text></view>
				</view>
				<view class="footer-tips" v-if="isLogin">重庆云联融智提供技术支持</view>
			</view>
			<view v-show="currentTab==2">
				<view class="chatinput">
					<input class="uni-input" v-model.trim="inputText" maxlength="140" placeholder="发消息···" confirm-type="send" @confirm="handleChatInput" />
					<button class="send" @click="handleChatInput">发送</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import "@/utils/webview.js"
	import appPopup from "@/components/appPopup.vue"
	import ques from "@/components/ques.vue"
	import descInfo from "@/components/descInfo.vue"
	import descInfoNav from "@/components/descInfoNav.vue"
	import commentBox from "@/components/commentBox.vue"
	import { generateRandomString } from "@/utils/common.js"
	import dayjs from 'dayjs';
	import {
		getErrMsg,
		getH5CourseByVideoId,
		getH5CourseVideoDetails,
		courseAnswer,
		getFinishCourseVideo,
		getIsAddKf,
		internetTraffic,
		getIntegralByH5Video,
		sendReward,
		loginByMp,
		getRealLink,
		sendAppReward
	} from "@/api/course.js"
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	export default {
		components: {
			descInfoNav,
			descInfo,
			commentBox,
			ques,
			appPopup
		},
		data() {
			return {
				source: '', // app，app内嵌H5页面
				// 1 红包 2 积分
				rewardType: [{
					name: '红包奖励',
					value: 1
				}, {
					name: '积分奖励',
					value: 2
				}],
				currentReward: 1,
				player: null,
				loading: true,
				progress: 0,
				code: null,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				scrollTop: 0,
				height: '0px',
				isLogin: false,
				videoUrl: "",
				videoId: "",
				//现在的时长
				playTime: 0,
				//总时长
				duration: 0,
				playDuration: 0,
				// 用于续播
				playDurationSeek: 0,
				// 温馨提醒时间节点，
				tipsTime: 0,
				tipsOpen: false,
				config: {},
				courseInfo: {},
				quesList: [],
				lineList: [],
				// 错题
				errQues: [],
				// 答题机会
				remain: 0,
				errTitle: "",
				errDesc: "",
				showPlay: true,
				showControls: false,
				playStatus: "",
				isAddKf: 0,
				lineIndex: 0,
				textHeight: 0, //文本高度
				qwUserId: "",
				qrcode: "",
				corpId: "",
				qrcodeMsg: "",
				urlOption: {},
				bufferRate: 0, // 缓冲时间
				uuId: "",
				isEnded: false,
				// 是否允许拖动进度条
				linkType: 0,
				ip: null,
				checked: true,
				isFinish: 0, // 是否完课
				interval: null,
				intervalIntegral: null, // 积分定时
				// 错误请求次数
				errorCount: 0,
				answerPopup: false,
				sortLink:"",
				// 课程是否过期
				isExpire: false,
				menuButtonLeft: 281,
				menuButtonH: 45,
				timer: null,
				flag: false,
				poster:"",
				msg:"",
				authDomainName: "",
				// 是否暂停
				isPause: true,
				courseLogo: '',
				isfull: false,
				navList:[{
					id: 0,
					name: '介绍'
				},{
					id: 1,
					name: '答题'
				},{
					id: 2,
					name: '评论'
				}],
				currentTab: 1,
				triggered: false,
				// 没有更多
				isMore: false,
				inputText:"",
				// 获取最多历史评论条数
				viewCommentNum: 200,
				// 1-开启评论；2-开启弹幕；3-关闭
				openCommentStatus: 3,
				flagTime:0,
				showDanmu: 1,
				focus: false,
				openDanmuType: 0,
				danmuboxHeight: 0,
				crtShow: true,
				showAnswerTip: false,
				userId:""
			}
		},
		filters: {
			numberToChinese(number) {
				if (number) {
					const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
					return chineseNumber[number - 1];
				} else {
					return ''
				}
			},
		},
		computed: {
			isAnswer() {
				return (item, name) => {
					if (item.type == 1) {
						return item.answer == name
					} else if (item.type == 2) {
						const array = item.answer.split(',')
						return array.some(i => i == name)
					} else {
						return false
					}
				}
			}
		},
		onLoad(option) {
			this.sortLink = option.s || ''
			this.code = option.code
			this.urlOption = option.course ? JSON.parse(option.course) : {}
			this.videoId = this.urlOption.videoId || ''
			console.log("this.videoId====",this.videoId)
			this.qwUserId = this.urlOption.qwUserId || ''
			this.corpId = this.urlOption.corpId || ''
			this.linkType = this.urlOption.linkType || 0
			this.source = option.source || ''
			if(option.source == 'app') {
				this.userId = option.userId && option.userId != 'undefined' && option.userId != 'null'? option.userId : ''
				this.plusReady(() => {
				 	const AppToken = plus.storage.getItem('AppToken');
					uni.setStorageSync(this.$TOKEN_KEY,AppToken);
					const userInfo = plus.storage.getItem('userInfo');
					uni.setStorageSync('userInfo',userInfo)
					console.log("from app AppToken======",AppToken)
					console.log("from app userInfo======",userInfo)
				})
			}
			if (this.videoId) {
				this.getH5CourseByVideo()
			}
			// #ifndef H5
			uni.onKeyboardHeightChange(this.keyboardHeightChange);
			// #endif
		},
		onShow() {
			this.isLogin = this.$isLogin()
			console.log("isLogin=",this.isLogin)
			this.tipsOpen = false
			this.uuId = generateRandomString(16)
			if(this.videoId) {
				if (this.$isLogin()) {
					if(this.isAddKf == 1) {
						this.getH5CourseVideoDetails()
					} else {
						this.getIsAddKf()
					}
				} else {
					this.loginByMp()
				}
			} else if(this.source != 'app'){
				if(this.sortLink){
					this.getLink()
					return
				}
				uni.showToast({
					title: 'sortLink is not found',
					icon: 'none'
				});
			}
		},
		mounted() {
			this.getIP()
			this.getHeight()
		},
		onHide() {
			if (this.player) {
				this.player.pause()
			}
			this.getFinishCourseVideo()
			this.getInternetTraffic()
			if (this.interval != null) {
				clearInterval(this.interval)
				this.interval = null
			}
		},
		onUnload() {
			console.log("==onUnload===")
			this.getFinishCourseVideo()
			this.getInternetTraffic()
			if (this.interval != null) {
				clearInterval(this.interval)
				this.interval = null
			}
			this.clearIntegral()
			// #ifndef H5
			uni.offKeyboardHeightChange(this.keyboardHeightChange);
			// #endif
		},
		beforeDestroy() {
			this.player = uni.createVideoContext('video-content-box');
			if (this.player) {
				this.player.stop()
				this.player = null
			}
			if (this.interval != null) {
				clearInterval(this.interval)
				this.interval = null
			}
			this.clearIntegral()
			// #ifndef H5
			uni.offKeyboardHeightChange(this.keyboardHeightChange);
			// #endif
		},
		methods: {
			fullscreenchange(e) {
				this.isfull = e.detail.fullScreen
				if(this.source == 'app') {
					this.postMessage({isFullscreen: this.isfull,login: 1})
				}
				if(this.isfull) {
					this.$refs.danmuBox&&this.$refs.danmuBox.initTracks()
				}
			},
			clickVideo() {
				if (this.player) {
					this.player.play()
				}
			},
			//播放时间更新事件方法
			onTimeUpdate(e){
				let currentTime = Math.round(e.detail.currentTime)
				if (this.playDurationSeek > 0) {
					this.playTime = this.playDurationSeek
					this.throttle(() => this.changeTime(this), 1000, false)
				} else {
					if (this.linkType != 1 && (currentTime - this.playTime > 3 || currentTime - this.playTime < -3)&&this.isFinish!=1) {
						uni.showToast({
							title: '不能快进哦',
							icon: 'none',
						});
						currentTime = this.playTime
						this.player.seek(this.playTime);
					}
					this.playTime = currentTime
				}
				if(this.isEnded||this.playTime >= this.duration - 60) {
					this.showAnswerTip = true
				} else {
					this.showAnswerTip = false
				}
				if (Math.floor(e.detail.currentTime) != this.flagTime &&this.openCommentStatus == 2) {
					this.flagTime = Math.floor(e.detail.currentTime)
					this.$refs.danmuBox&&this.$refs.danmuBox.checkDanmu(this.flagTime)
				}
			},
			changeTime(that,e) {
				that.playDurationSeek = 0
			},
			videoErrorCallback(e) {
				if(this.$isLogin()&&this.isAddKf==1) {
					this.clearIntegral()
					this.errorCount++
					if (this.errorCount > 3) return
					console.log(e)
					this.getErrMsg(e.target.errMsg)
					this.getH5CourseVideoDetails('error')
				}
			},
			// 当开始/继续播放时触发play事件
			getPlay() {
				this.isPause = false
				this.errorCount = 0
				this.judgeDuration()
			},
			getPause() {
				this.isPause = true
				this.clearIntegral()
			},
			getEnded() {
				this.clearIntegral()
				this.isEnded = true
				this.showAnswerTip = true
				this.getFinishCourseVideo()
			},
			getWaiting() {
				this.getErrMsg('','waiting')
			},
			controlstoggle(event) {
				this.crtShow =  event.detail.show
			},
			getIP() {
				uni.request({
					url: 'https://ipinfo.io/json', //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						this.ip = res.data.ip
					}
				});
			},
			goWeb(tyep) {
				const path = uni.getStorageSync('requestPath',path);
				const url = tyep == 0 ? path + "/web/userAgreement" : path + "/web/privacyPolicy"
				window.open(url)
			},
			getHeight() {
				setTimeout(()=>{
					const query = uni.createSelectorQuery().in(this);
					query
						.select("#title-contentnav")
						.boundingClientRect((data) => {
							if(data) {
								this.height =
									`calc(100vh - ${data.height}px - 420rpx - ${this.statusBarHeight}px - 44px - 88rpx)`
							}
						})
						.exec();
				},200)
			},
			numberToLetter(num) {
				// 将数字转换为字母的 ASCII 码
				let letterCode = num + 65;
				// 将 ASCII 码转换为大写字母
				let letter = String.fromCharCode(letterCode);
				return letter;
			},
			updateTime() {
				var that = this;
				if (this.interval != null) {
					clearInterval(this.interval)
				}
				this.interval = setInterval(function() {
					that.getFinishCourseVideo()
					that.getInternetTraffic()
				}, 60000);
			},
			judgeDuration() {
				var that = this;
				if (this.intervalIntegral != null) {
					clearInterval(this.intervalIntegral)
					this.intervalIntegral = null
				}
				// 观看10分钟获得积分
				this.intervalIntegral = setInterval(function() {
					that.getIntegralByH5Video()
				}, 600000);
			},
			clearIntegral() {
				if (this.intervalIntegral != null) {
					clearInterval(this.intervalIntegral)
					this.intervalIntegral = null
				}
			},
			getH5CourseByVideo(videoId) {
				this.loading = true
				getH5CourseByVideoId({
					videoId: this.videoId || videoId
				}).then(res => {
						this.loading = false
						if (res.code == 200) {
							this.courseInfo = res.data
							uni.setNavigationBarTitle({
								title: this.courseInfo && this.courseInfo.title ? this.courseInfo.title : ''
							});
						}
						this.getHeight()
						this.$nextTick(()=>{
							this.$refs.descInfo&&this.$refs.descInfo.getDescHeight()
							this.$refs.descInfoNav&&this.$refs.descInfoNav.getDescHeight()
						})
					},
					rej => {
						this.loading = false
					}
				).catch(() => {
					this.loading = false
				})
			},
			getH5CourseVideoDetails(type) {
				const param = {
					...this.urlOption
				}
				getH5CourseVideoDetails(param).then(res => {
						if (res.code == 200) {
							this.config = res.config || {}
							this.isFinish = res.isFinish || 0
							this.duration = res.course && res.course.duration ? res.course.duration : 0
							this.playDuration = res.playDuration || 0
							this.playDurationSeek = res.playDuration || 0
							this.tipsTime = res.tipsTime || 0
							let lineList = []
							if (res.course && res.course.lineOne) {
								lineList.push(res.course.lineOne)
							}
							if (res.course && res.course.lineTwo) {
								lineList.push(res.course.lineTwo)
							}
							if (res.course && res.course.lineThree) {
								lineList.push(res.course.lineThree)
							}
							this.lineList = lineList
							this.courseLogo = res.config&&res.config.courseLogo
							this.viewCommentNum = res.config&&res.config.viewCommentNum || 200
							if(this.openCommentStatus == 3) {
								this.$refs.commentBox&&this.$refs.commentBox.closeWSocket()
								this.$refs.danmuBox&&this.$refs.danmuBox.closeWSocket()
							}
							const status = res.config&&res.config.openCommentStatus || 3
							if(status != this.openCommentStatus) {
								this.openCommentStatus = status
							}
							if(this.openCommentStatus==1) {
								this.currentTab = 0
							} else {
								this.currentTab = 1
							}
							if (!this.player || type == 'error') {
								this.lineIndex = this.config.defaultLine
								this.videoUrl = lineList[this.lineIndex]
								this.poster= res.course && res.course.imgUrl ? res.course.imgUrl : ''
								this.playTime = this.playDuration >= this.duration ? 0 : this.playDuration
								setTimeout(()=>{
									this.player = uni.createVideoContext('video-content-box');
									this.player.seek(this.playTime)
									this.player.play();
								},500);
							} else {
								this.playTime = this.playTime > this.playDuration ? this.playTime : this.playDuration >= this.duration ? 0 : this.playDuration
								this.player.seek(this.playTime)
								this.player.play();
							}
							this.updateTime();
							this.quesList = res.questions && res.questions.length > 0 ? res.questions : [],
								this.quesList = this.quesList.map(item => ({
									...item,
									questionOption: JSON.parse(item.question),
									answer: ''
								}))
						}
						this.getHeight()
						this.$nextTick(()=>{
							this.$refs.descInfo&&this.$refs.descInfo.getDescHeight()
							this.$refs.descInfoNav&&this.$refs.descInfoNav.getDescHeight()
						})
					},
					rej => {}
				)
			},
			handleAnswer(val) {
				let {item, option} = val
				let time = this.playTime
				if(this.isEnded) {
					time = this.duration
				} else {
					if(time < this.playDuration&&this.isFinish!=1) {
						// 没完课且小于续播的时间
						time = this.playDuration
					}
				}
				if(Number(this.duration || 0) == 0 || time < this.duration - 60) {
					uni.showToast({
						title: "请先观看完整课程再答题哦～",
						icon: "none"
					})
					return
				}
				
				if (item.type == 1) {
					// 单选option
					item.answer = option.name
				} else if (item.type == 2) {
					// 多选
					let answer = item.answer ? item.answer.split(',') : []
					if (answer.indexOf(option.name) === -1) {
						answer.push(option.name)
						item.answer = answer.join(',')
					} else {
						answer.splice(answer.indexOf(option.name), 1)
						item.answer = answer.join(',')
					}
				}
			},
			submit() {
				// 登录
				if (this.$isLogin()) {
					if (this.isAddKf == 1) {
						// 答题
						// 您已提交过答案，请领取红包
						this.courseAnswer()
					} else {
						// 添加客服
						if (this.videoId && this.qwUserId) {
							this.getIsAddKf()
						} else {
							uni.showToast({
								title: '请添加客服',
								icon: 'none'
							})
						}
					}
				} else {
					// 登录
					if (!this.checked) {
						uni.showToast({
							title: "请先勾选阅读并同意《用户协议》和《隐私协议》",
							icon: "none"
						})
						return
					}
					if(this.source == 'app') {
						this.postMessage({isFullscreen: false,login: 0})
					} else {
						// #ifdef H5
						if (isWechat) { //是否在微信浏览器中打开
							this.loginByMp()
						} else {
							uni.showToast({
								title: '请在微信浏览器中打开',
								icon: 'error'
							})
						}
						// #endif
					}
				}
			},
			// 答题
			courseAnswer() {
				let time = this.playTime
				if (this.isEnded) {
					time = this.duration
				} else {
					if (time < this.playDuration && this.isFinish != 1) {
						// 没完课且小于续播的时间
						time = this.playDuration
					}
				}
				if (Number(this.duration || 0) == 0 || time < this.duration - 60) {
					uni.showToast({
						title: "请先观看完整课程再答题哦～",
						icon: "none"
					})
					return
				}
				if (this.quesList.some(item => !item.answer)) {
					uni.showToast({
						title: "请确认是否答完所有题目",
						icon: "none"
					})
					return
				}
				const questions = this.quesList.map(obj => {
					const {
						questionOption,
						...rest
					} = obj;
					return rest;
				});
				const param = {
					...this.urlOption,
					questions: questions,
					videoId: this.videoId,
					duration: this.playTime
				}
				this.errTitle = ""
				this.errDesc = ""
				this.errQues = []
				courseAnswer(param).then(res => {
						if (res.code == 200) {
							if (res.incorrectQuestions) {
								// 答题失败
								if (res.incorrectQuestions.length > 0) {
									this.errQues = res.incorrectQuestions
								}
								this.remain = res.remain || 0
								if (res.remain > 0) {
									this.errTitle = "很遗憾答错了"
									this.errDesc = `<span style="color:#FF5C03">还有${res.remain}次机会，继续加油</span>`
									this.$refs.answerPopup.open("center")
								}
							} else {
								// 答题成功
								this.errTitle = "恭喜你，回答正确"
								this.errDesc = `您有一份奖励待领取哦~`
								if(this.source == "app") {
									this.getAppReward()
								} else {
									this.$refs.answerPopup.open("center")
									// this.closeAnswerPopup()
								}
							}
						} else {
							if (res.msg == "该课题到达答错次数限制") {
								this.errTitle = "答题次数超过限制"
								this.errDesc = "以后的课程要认真学习哦"
								this.$refs.answerPopup.open("center")
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						}
					},
					rej => {}
				)
			},
			// 选择
			rewardChange(e) {
				this.currentReward = e.detail.value
			},
			closeAnswerPopup() {
				this.$refs.answerPopup.close()
				if (this.errTitle == '恭喜你，回答正确') {
					const param = {
						...this.urlOption,
						rewardType: Number(this.currentReward),
					}
					sendReward(param).then(res => {
						if(res.code == 200) {
							if(res.isNew&&res.isNew==1) {
								const packageInfo = res.data.packageInfo || ''
								if(packageInfo) {
									uni.setStorageSync('receive_package',packageInfo);
									if(res.mchId) uni.setStorageSync('mchId',res.mchId);
									uni.navigateTo({
										url: '/pages/course/reward'
									})
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			// 线路
			openPop() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			handleLine(index) {
				var that=this;
				if (this.lineIndex == index && this.videoUrl == this.lineList[index]) {
					this.close()
					return
				} else {
					// let div = document.querySelector(".vjs-progress-control");
					// if(div) {
					// 	if (this.isFinish == 1 || this.isEnded || this.linkType == 1) {
					// 		div.style.pointerEvents = "auto";
					// 	} else {
					// 		div.style.pointerEvents = "none"; //禁止所有事件
					// 	}
					// }
					this.lineIndex = index
					this.videoUrl = this.lineList[index]
					this.tipsOpen = false
					this.playDurationSeek = this.playTime || 0
					this.player = uni.createVideoContext('video-content-box');
					setTimeout(function(){
						that.player.seek(that.playDurationSeek)
						that.player.play();
					},500);
					// this.player.src(this.lineList[index])
					// this.player.one('loadedmetadata', () => {
					// 	this.player.currentTime(this.playDurationSeek);
					// 	this.player.play();
					// });
					this.close()
				}

			},
			// 温馨提示
			openTipsPop() {
				this.$refs.tipsPopup.open()
				this.tipsOpen = true
				this.pause()
			},
			closeTipsPop() {
				this.$refs.tipsPopup.close()
			},
			// 客服
			getIsAddKf() {
				this.qrcode = ''
				this.qrcodeMsg = ''
				this.isAddKf = 0
				// {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
				const param = {
					...this.urlOption
				}
				getIsAddKf(param).then(res => {
						if (res.code == 200) {
							if (this.urlOption.isRoom == 1 && res.qwExternalId) {
								this.urlOption = {
									...this.urlOption,
									qwExternalId: res.qwExternalId
								}
							}
							this.isAddKf = 1
							this.getH5CourseVideoDetails()
						} else if (res.code == 400) {
							this.isAddKf = 0
							this.qrcode = res.qrcode
							this.qrcodeMsg = res.msg
							this.$refs.kfPopup.open()
						} else if (res.code == 567) {
							// 群聊通用链接
							this.urlOption = {
								...this.urlOption,
								qwExternalId: res.qwExternalId
							}
							this.isAddKf = 1
							this.getH5CourseVideoDetails()
						} else if (res.code == 504) {
							if(this.source == 'app') {
								this.postMessage({isFullscreen: false,login: 0})
							} else {
								// 登录
								// #ifdef H5
								if (isWechat) { //是否在微信浏览器中打开
									this.loginByMp()
								} else {
									uni.navigateTo({
										url: "/pages/auth/login"
									});
								}
								// #endif
							}
						} else {
							this.isAddKf = 0
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					err => {}
				);
			},
			closeKFPop() {
				this.$refs.kfPopup.close()
			},
			loginByMp() {
				if(this.source == 'app') {
					this.postMessage({isFullscreen: false,login: 0})
					return
				}
				if (this.code == null||!this.code) {
					if(this.sortLink) {
						window.location.href = uni.getStorageSync('authDomainName') + '?sortLink='+this.sortLink
					} else {
						if(this.urlOption.link) {
							window.location.href = uni.getStorageSync('authDomainName') + '?sortLink='+this.urlOption.link
						} else {
							this.isExpire = true
							this.msg = '课程链接地址有误'
							uni.showToast({
								title: '课程链接地址有误',
								icon: 'none'
							});
						}
					}
					return;
				}
				uni.showLoading({
					title: "处理中..."
				});
				let that = this;
				var data = {
					code: this.code
				}
				loginByMp(data).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.setStorageSync(this.$TOKEN_KEY, res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							this.isLogin = this.$isLogin()
							if(this.isAddKf == 1) {
								this.getH5CourseVideoDetails()
							} else {
								this.getIsAddKf()
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					err => {}
				).catch(err=>{
					uni.hideLoading();
				});
			},
			getFinishCourseVideo() {
				if (!this.playTime||!this.$isLogin()||this.isAddKf != 1) return
				// {videoId: this.videoId,duration:this.playTime}
				const param = {
					duration: this.playTime,
					...this.urlOption
				}
				getFinishCourseVideo(param)
			},
			// 每十分钟获得积分
			getIntegralByH5Video() {
				if (!this.$isLogin()||this.isAddKf != 1) return
				const param = {
					duration: this.playTime,
					...this.urlOption,
				}
				getIntegralByH5Video(param).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "积分+10",
							icon: "none"
						})
					}
				})
			},
			progressChange(e) {
				this.bufferRate = Math.ceil(e.detail.buffered)
			},
			// 缓冲
			getInternetTraffic() {
				if (!this.$isLogin()||this.isAddKf != 1) return
				const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
				if(this.bufferRate == 0 || this.bufferRate < playVideoTime) {
					this.bufferRate = playVideoTime
				}
				if(this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
				const param = {
					...this.urlOption,
					uuId: dayjs().format('YYYYMMDD') + this.uuId,
					duration: this.playTime,
					bufferRate: Number(this.bufferRate.toFixed(2)),
				}
				if(!param.bufferRate) return
				internetTraffic(param)
			},
			getErrMsg(err,type) {
				let msgerr = {
					errType: type || 'error',
					videoUrl: this.videoUrl,
					lineIndex: this.lineIndex,
					errTime: new Date(),
					ip: this.ip,
					errMsg: err || ''
				}
				getErrMsg({
					msg: JSON.stringify(msgerr)
				})
			},
			getLink() {
				let that = this;
				getRealLink({sortLink:this.sortLink}).then(res=>{
					if(res.code == 200) {
						this.isExpire = false
						this.authDomainName = res.config.authDomainName || ''
						if(this.authDomainName) {
							uni.setStorageSync('authDomainName',this.authDomainName)
						}
						if(this.isLogin) {
							window.location.replace(res.realLink)
						} else{
							const option = res.realLink.split('?course=')[1]
							const urlOption = option ? JSON.parse(option) : {}
							const videoId = urlOption.videoId || ''
							this.getH5CourseByVideo(videoId)
						}
					} else {
						this.isExpire = true
						this.msg = '课程已过期或链接无效'
						uni.showToast({
							title: '课程已过期或链接无效',
							icon: 'none'
						});
					}
				}).catch(err=>{
					this.isExpire = true
					this.msg = '发生错误，请稍后再试'
					uni.showToast({
						title: '发生错误，请稍后再试',
						icon: 'none'
					});
				})
			},
			/**
			 * 节流原理：在一定时间内，只能触发一次
			 *
			 * @param {Function} func 要执行的回调函数
			 * @param {Number} wait 延时的时间
			 * @param {Boolean} immediate 是否立即执行
			 * @return null
			 */
			throttle(func, wait = 500, immediate = true) {
			    if (immediate) {
			        if (!this.flag) {
			            this.flag = true
			            // 如果是立即执行，则在wait毫秒内开始时执行
			            typeof func === 'function' && func()
			            this.timer = setTimeout(() => {
			                this.flag = false
			            }, wait)
			        }
			    } else if (!this.flag) {
			        this.flag = true
			        // 如果是非立即执行，则在wait毫秒内的结束处执行
			        this.timer = setTimeout(() => {
			            this.flag = false
			            typeof func === 'function' && func()
			        }, wait)
			    }
			},
			// 弹幕
			keyboardHeightChange(res) {
				// #ifndef H5
				console.log("this.danmuboxHeight",this.danmuboxHeight)
				 this.danmuboxHeight = res.height
				// #endif
			},
			openDanmu(type) {
				this.openDanmuType = type
				this.inputText = ''
				if(type == 1) {
					this.player.exitFullScreen()
				}
				this.$refs.danmuPopup.open()
			},
			changeShowPopup(val) {
				this.focus = val.show
			},
			switchDanmu() {
				this.showDanmu = this.showDanmu == 1 ? 0:1
				if(this.showDanmu == 0&&this.$refs.danmuBox) {
					this.$refs.danmuBox.activeDanmus = []
					this.$refs.danmuBox.initTracks()
				}
			},
			getScrollTop(res) {
				if(this.currentTab == 2) {
					this.scrollTop = res
				} else {
					this.scrollTop = 0
				}
			},
			handleTab(index) {
				this.currentTab = index
				if(this.currentTab==2) {
					if(this.$refs.commentBox) {
						this.$refs.commentBox.msgs = []
						this.$refs.commentBox.pageNum = 1
						this.$refs.commentBox.getComments()
					}
				} else {
					setTimeout(()=>{
						this.scrollTop = 0
					},100)
				}
			},
			handleRefresher() {
				this.triggered = true;
				if (!this.isMore&&this.currentTab==2&&this.openCommentStatus==1) {
					this.$nextTick(()=>{
						this.$refs.commentBox&&this.$refs.commentBox.getComments()
					})
				}
				setTimeout(() => {
					this.triggered = false;
				}, 500);
			},
			getMore(val) {
				this.triggered = false;
				this.isMore = val == 1
			},
			handleChatInput() {
				this.inputText = this.inputText.trim()
				if (this.inputText == "" || this.inputText.trim() == "") {
					uni.showToast({
						title: '请输入评论',
						icon: "none"
					})
					return;
				}
				if(this.openCommentStatus==1) {
					this.$refs.commentBox&&this.$refs.commentBox.handleInput(this.inputText)
				} else if(this.openCommentStatus==2) {
					this.$refs.danmuBox&&this.$refs.danmuBox.handleInput(this.inputText)
				}
			},
			setInputText() {
				this.inputText = ""
				if(this.openCommentStatus==2) {
					this.$refs.danmuPopup.close()
				}
			},
			// app
			postMessage(data) {
				this.uniReady(() => {
					uni.webView.postMessage({
					    data: data
					});  
				})	
			},
			uniReady(callback) {
			  if (uni.webView) {
				callback()
			  } else {
				document.addEventListener('UniAppJSBridgeReady', callback, { once: true })
			  }
			},
			plusReady(callback) {
			  if (window.plus) {
				callback()
			  } else {
				document.addEventListener('plusready', callback, { once: true })
			  }
			},
			handleGift() {
				this.uniReady(() => {
					uni.webView.postMessage({
					    data: {
							isFullscreen: false,
							login: 1,
							productId: '',
							pagesUrl:'/pages/user/integral/integralGoodsList'
						}
					});  
				})	
			},
			// app奖励
			getAppReward() {
				const param = {
					...this.urlOption
				}
				sendAppReward(param).then(res => {
					if(res.code == 200) {
						this.$refs.appPopup.openPop()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
.full-width-popup {
  width: 100%;
}
</style>
<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.footer-tips {
		margin-top: 14rpx;
		text-align: center;
		font-family: PingFang SC,PingFang SC;
		font-weight: 500;
		font-size: 12px;
		color: #bbb;
	}
	.textOne {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.textTwo {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.expirebox {
		height: 100vh;
		@include u-flex(column, center, center);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #757575;
		image {
			width: 428rpx;
			height: 360rpx;
			margin-bottom: 30rpx;
		}
	}
	.reward-list {
		width: 100%;
		margin-top: 20rpx;
		margin-bottom: -40rpx;

		&-group {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #222222;
			@include u-flex(row, center, center);
		}

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

			&:first-child {
				margin-right: 40rpx;
			}
		}
	}

	.err {
		color: #f56c6c !important;
	}

	.kfqrcode-box {
		background-color: #fff;
		border-radius: 16rpx;
		max-width: 560rpx;
		padding: 60rpx 40rpx;
		margin-top: -100rpx;
		box-sizing: border-box;
		@include u-flex(column, center, flex-start);
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 34rpx;
		color: #222;
		position: relative;
		text-align: center;

		.kfqrcode {
			height: 460rpx;
			width: 460rpx;
		}
	}

	.kfqrcode-close {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.tipsPopup-mask {
		position: relative;
		width: 560rpx;
		background-color: transparent;

		.red_envelope_top {
			width: 480rpx;
			height: 360rpx;
			margin: 0 auto;
			display: inherit;
		}
	}

	.tipsPopup-btn-box {
		width: 456rpx;
		height: 104rpx;
		padding: 4rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(252, 209, 94, 1), rgba(254, 253, 251, 1));
		border-radius: 52rpx;
	}

	.tipsPopup-btn {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #FF9F22 0%, #FA1E05 100%);
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}

	.tipsPopup {
		width: 560rpx;
		padding: 12rpx;
		margin-top: -72rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		position: relative;

		&-close {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			right: 0;
			top: -188rpx;
		}

		&-line {
			padding: 3rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(247, 245, 220, 1), rgba(250, 220, 157, 1));
			border-radius: 24rpx;
		}

		&-box {
			padding: 0 40rpx 40rpx 40rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #FFFBEF 0%, #FFFFF5 43%, #F5EAC2 100%);
			border-radius: 24rpx;
			@include u-flex(column, center, flex-start);
		}

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

			&-title {
				width: 364rpx;
				height: auto;
				margin-top: -22rpx;
			}
		}

		&-content {
			margin: 48rpx 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
			text-align: center;

			&-title {
				margin-bottom: 26rpx;
				font-weight: 600;
				font-size: 40rpx;
				color: #FF5C03;
			}
		}
	}

	.video-controls-box {
		width: 100%;
		height: calc(100% - 44px);
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		// background: rgba(0, 0, 0, 0.2);

		.video-play {
			height: 72rpx;
			width: 72rpx;
			position: absolute;
			top: calc(50% + 22px);
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.video-controls {
		width: 100%;
		height: 80rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(to top, #222 0%, transparent 80%);

		.video-icon {
			height: 44rpx;
			width: 44rpx;
		}
	}

	.errQuesbox {
		width: 100%;
		max-height: 260rpx;
		overflow-y: auto;
		margin-top: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;

		&-item {
			width: 100%;
			height: 128rpx;
			line-height: 128rpx;
			margin-bottom: 24rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			overflow: hidden;
			background: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			position: relative;

			&::after {
				content: "题目";
				min-width: 64rpx;
				height: 36rpx;
				padding: 0 12rpx;
				line-height: 36rpx;
				background: #FF5C03;
				box-sizing: border-box;
				border-radius: 0rpx 0rpx 16rpx 0rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #fff;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}

	.bg {
		background: #fff !important;
	}

	.answerPopup {
		&-box {
			width: 560rpx;
			background: linear-gradient(180deg, #FFFAF6 0%, #FEECD8 100%);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			background-color: #fff;
			font-weight: 400;
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;
			@include u-flex(column, center, flex-start);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;

			.tipimg {
				width: 206rpx;
				height: 206rpx;
				margin-bottom: 16rpx;
			}
		}

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

		&-desc {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #757575;
		}

		&-btn {
			width: 464rpx;
			height: 84rpx;
			margin-top: 54rpx;
			margin-bottom: 16rpx;
			background: #FF5C03;
			border-radius: 42rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 84rpx;
		}
	}

	.popupbox {
		width: 100%;
		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;
				min-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;
			}
		}
	}

	.content {
		padding-bottom: calc(var(--window-bottom));
		.video-box {
			width: 100%;
			height: 420rpx;
			overflow: hidden;
			position: relative;

			#myVideo {
				width: 100%;
				height: 100%;
			}
		}

		.video-poster {
			width: 100%;
			height: 420rpx;
		}

		.miantitlebox {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F5F7FA;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
		}

		.subtitlebox {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F5F7FA;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
		}

		.title-content {
			padding: 0 32rpx;
			background-color: #fff;
			font-size: 28rpx;
			line-height: 1.6;
			@include u-flex(row, center, space-between);
			.title {
				font-size: 36rpx;
				font-weight: 500;
				color: #414858;
			}

			.time-or-subtitle {
				margin-top: 12rpx;
				color: #666666;
			}
			.giftbtn {
				flex-shrink: 0;
				padding: 6rpx 16rpx;
				background: #FF5C03;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				@include u-flex(row, center, center);
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.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: 34rpx;
				width: 34rpx;
				margin-right: 6rpx;
			}
		}
		.footer {
			border-top: 1rpx solid #ededef;
			background: #fff;
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 18rpx 32rpx;
			padding-bottom: calc(var(--window-bottom) + 18rpx);
			box-sizing: border-box;
			z-index: 9;

			&-btn {
				width: 100%;
				height: 98rpx;
				background: #FF5C03;
				border-radius: 49rpx 49rpx 49rpx 49rpx;
				line-height: 98rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				@include u-flex(row, center, center);

				&-img {
					flex-shrink: 0;
					width: 144rpx;
					height: 144rpx;
					margin-right: 8rpx;
					margin-top: -24rpx;
				}
			}

			&-btn-border {
				position: relative;

				&::after {
					content: "";
					background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
					position: absolute;
					top: -2rpx;
					left: 0;
					height: 103rpx;
					width: 100%;
					z-index: -1;
					border-radius: 49rpx 49rpx 49rpx 49rpx;
					box-shadow: 0rpx 8rpx 11rpx 0rpx rgba(255, 92, 3, 0.3);
					overflow: hidden;
				}
			}
		}
	}

	.agreement {
		display: inline-flex;
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #525252;
		align-items: center;
		justify-content: center;
	}
	.logo {
		display: inline-block;
		width: 30px;
		height: auto;
		margin: 20px 0 0 10px;
		pointer-events: none;
		object-fit: cover;
	}
	.logo-full {
		display: inline-block;
		width: 40px;
		height: auto;
		margin: 50px 0 0 30px;
		pointer-events: none;
		object-fit: cover;
	}
	.tabbox {
		@include u-flex(row, center, center);
		border-bottom: 2rpx solid #F5F7FA;
		height: 44px;
		background-color: #fff;
		view {
			flex: 1;
			padding: 20rpx 0;
			margin-right: 40rpx;
			text-align: center;
		}
		&-active {
			position: relative;
			&::after {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				content: "";
				width: 3rem;
				border-bottom: 4px solid #FF5C03;
			}
		}
	}
	.chatinput {
		position: fixed;
		left: 32rpx;
		right: 32rpx;
		z-index: 999;
		bottom: calc(var(--window-bottom) + 24rpx);
		height: 96rpx;
		background-color: green;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 21rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		@include u-flex(row, center, center);
		padding: 0 24rpx;
		box-sizing: border-box;
		.uni-input {
			flex: 1;
			margin-right: 32rpx;
			font-size: 30rpx;
		}
	
		.send {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF !important;
			flex-shrink: 0;
			padding: 0 20rpx;
			height: 72rpx;
			background: #FF5C03 !important;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			&::after {
				border: none;
			}
		}
	}
	.danmu-line {
		bottom: calc(var(--window-bottom) + 370rpx) !important;
		word-break: keep-all;
		.set_image {
			height: 40rpx;
			width: 40rpx;
		}
	}
	.video-danmu-btnbox {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		right: 10px;
		bottom: calc(50% - 50px);
		transform: translateY(-50%);
		padding: 8px;
		box-sizing: border-box;
	}
	.video-danmu-image {
		width: 100%;
		height: 100%;
	}
	.danmuPopup-input {
		flex: 1;
		height: 35px;
		border-radius: 35px;
		border: 1rpx solid #eee;
		padding: 0 24rpx;
	}
	.danmuPopup {
		background-color: #fff;
		padding-bottom: calc(var(--window-bottom) + 10px);
		&-head {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			overflow: hidden;
			@include u-flex(row,center,flex-start);
			.danmu-icon {
				height: 24px;
				width: 24px;
				margin-right: 12px;
			}
		}
		&-send {
			flex-shrink: 0;
			height: 35px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5px 15px;
			box-sizing: border-box;
			background: #FF5C03 !important;
			border-radius: 22px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #fff !important;
			margin-left: 12px;
			&::after {
				border: none;
			}
		}
		&-con {
			background-color: #F5F7FA;
			padding: 24px 12px 48px 12px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #757575;
		}
	}
	.answerTip {
		position: fixed;
		right: 0;
		z-index: 9;
		bottom: calc(var(--window-bottom) + 380rpx);
		box-shadow: 0rpx 8rpx 21rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-color: #ff5c03;
		color: #fff;
		border-radius: 50%;
		height: 90rpx;
		width: 90rpx;
		font-size: 25rpx;
		text-align: center;
		padding: 10rpx;
		@include u-flex(column, center, center);
	}
</style>