zhibo/pages_course/videovip.vue

<template>
	<view class="content ">
		<view class="header-nav"
			:style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
			<u-icon name="arrow-left" size="28" @click="tosales" v-if="appToken"></u-icon>
			<view class="header-title"
				:style="{width:menuButtonLeft + 'px',height:menuButtonH+'px',lineHeight:menuButtonH+'px'}">
				{{courseInfo.title}}</view>
		</view>
		<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" @fullscreenchange="fullscreenchange" :title="courseInfo.title"
				style="width: 100%;height: 420rpx;" :poster="poster" id="video-content-box" controls
				: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">
				<!-- <cover-image v-if="courseLogo" :class="isFull?'logo-full':'logo'" :src="courseLogo" mode="widthFix"></cover-image> -->
			</video>
		</view>

		<view class="justify-start align-center fs24 base-color-9" v-if="userInfo.userId">
			<view>{{nameuser?nameuser:'暂未授权昵称'}}#</view>
			<view>{{userInfo.userId}}</view>
		</view>
		<view class="title-content" id="title-content">
			<!-- 答题时展示小节课程名，其他展示课程名 -->
			<!-- 小节课程名 -->
			<view class="subtitlebox " v-if="isLogin&&isAddKf==1">
				{{courseInfo.title}}
			</view>
			<!-- 课程名字 -->
			<view class="miantitlebox" v-else>
				{{courseInfo.courseName}}
			</view>
		</view>
		<scroll-view class="scroll-view" :style="{height: height}" :scroll-top="scrollTop" scroll-y="true">
			<!-- 介绍 -->
			<view class="descbox">
				<template v-if="!isLogin||isAddKf!=1">
					<view class="descbox-title">{{courseInfo.title}}</view>
					<view class="descbox-info">
						<!-- <view class="descbox-info-l">
							<view>{{courseInfo.views}}次播放</view>
							<view class="descbox-info-time">总时长：{{courseInfo.totalDuration}}</view>
						</view> -->
						<view class="descbox-info-r expand" v-if="textHeight > 21">
							<text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
							<image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
							<image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
						</view>
					</view>
				</template>
				<view class="descbox-desc" id="descbox-desc" :style="{height: isExpand ? 'auto': '42rpx'}">
					<text>{{courseInfo.description==null?'暂无简介':courseInfo.description}}</text>
					<view :class="isExpand ? 'expand': 'expand expand-ab'" v-if="isLogin&&isAddKf==1&&textHeight > 21">
						<text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
						<image :src="imgPath+'/app/image/course_arrow_up_icon.png'" v-show="isExpand"></image>
						<image :src="imgPath+'/app/image/course_arrow_down_icon.png'" v-show="!isExpand"></image>
					</view>
				</view>
			</view>
			<!-- 无效或者已过期 -->
			<view class="nocourse" v-if="msg">
				<image :src="imgPath+'/app/image/course_expiration_img.png'" mode="widthFix"></image>
				<view>{{msg}}</view>
			</view>
			<!-- 问题 -->
			<view class="ques-content" v-if="isLogin&&isAddKf==1">
				<view class="ques-content-tit" v-if="isLogin &&!isquestion">问答题</view>
				<view v-for="(item,index) in quesList" :key="index">
					<view class="ques-title">
						<text>{{index + 1}}.</text>
						<view class="ques-type" v-show="item.type == 1 || item.type == 2">
							{{item.type == 1 ? '单选' : item.type == 2 ? '多选' : ''}}
						</view>
						<text class="fs40">{{item.title}}</text>
					</view>
					<view :class="isAnswer(item,option.name) ?'ques-option ques-option-active':'ques-option'"
						v-for="(option,idx) in item.questionOption" :key="idx" @click="handleAnswer(item,option)">
						<view class="fs40">
							{{numberToLetter(idx)}}.
						</view>
						<view class="fs40">{{option.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 线路 -->
		<!-- <view class="video-line" @click="openPop" v-if="isLogin&&isAddKf==1">
			<image :src="imgPath+'/app/image/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="imgPath+'/app/image/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> -->
		<!-- 温馨提示弹窗 -->
		<u-popup :show="tipsPopup" mode="center" :closeOnClickOverlay='true' @close='tipsPopup=!tipsPopup'
			:safeAreaInsetBottom='false' round='12'>
			<view class="tipsPopup-mask">
				<image class="red_envelope_top" :src="imgPath+'/app/image/red_envelope_img.png'" mode="aspectFill">
				</image>
				<view class="tipsPopup">
					<image class="tipsPopup-close" :src="imgPath+'/app/image/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="imgPath+'/app/image/tips_title_img.png'"
									mode="widthFix"></image>
							</view>
							<view class="tipsPopup-content">
								<view class="tipsPopup-content-title">亲爱的用户，</view>
								<view>您已经观看课程{{timepath}}的时间了，请注意休息并保持专注。</view>
							</view>
							<view class="tipsPopup-btn-box">
								<view class="tipsPopup-btn" @click="closeTipsPop">继续观看领奖励</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 答题弹窗 -->
		<u-popup :show="answerPopup" mode="center" @close="closepop()" @open="open" closeOnClickOverlay
			:safeAreaInsetBottom='false' round='12'>
			<view :class="errTitle == '恭喜你，回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
				<!-- 正确 -->
				<image class="tipimg" v-if="errTitle == '恭喜你，回答正确'" :src="imgPath+'/app/image/course_answer_img.png'"
					mode="aspectFill"></image>
				<!-- 错误 -->
				<image class="tipimg" v-else :src="imgPath+'/app/image/course_answer_incorrectly_img.png'"
					mode="aspectFill">
				</image>
				<view class="answerPopup-title">{{errTitle}}</view>
				<view class="answerPopup-desc" v-html="errDesc"></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="answerPopup-btn" v-if="errTitle == '恭喜你，回答正确'" @click="nvtored">点击领取红包</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>
		</u-popup>
		<!-- 客服二维码弹窗 -->
		<u-popup :show="kfPopup" mode="center" :mask-click="false" round='12' @close="kefpop">
			<view class="kfqrcode-box">
				<view class="justify-start align-center fs24 base-color-9">
					<view>{{nameuser}}#</view>
					<view>{{userInfo.userId}}</view>
				</view>
				<view>请添加客服</view>
				<image class="kfqrcode" :src="qrcode" show-menu-by-longpress="true" mode="aspectFit"></image>
				<!-- <view v-show="qrcodeMsg" style="margin-top: 30rpx;" v-html="qrcodeMsg"></view> -->
				<!-- <image class="kfqrcode-close" :src="imgPath+'/app/image/course_close_white_icon.png'" mode="aspectFill"
					@click="closeKFPop"></image> -->
			</view>
		</u-popup>
		<u-popup :show="timepop" mode="center" round='12'>
			<view class="timepopbox center column">
				<view class="fs40 bold ">不在看课时间范围内</view>
				<view class="mtb20">看课时间</view>
				<view>{{videocont.startDateTime}}</view>
				<view>至</view>
				<view>{{videocont.endDateTime}}</view>
				<view class="base-bg-orange colorf p20 radius50 mt20" @click="getH5CourseVideoDetails">刷新时间</view>
			</view>
		</u-popup>
		<u-popup :show="userlogo" mode="bottom" round='12'>
			<view class="userlogo column">
				<view class="mtb30 justify-start align-center ml20">
					<u-avatar :src="imgPath+'/app/image/logo.png'" size="50"></u-avatar>
					<!-- <view class="bold mlr20">{{imgname}}</view> -->
					<view>申请</view>
				</view>
				<view class="bold fs36 ml20">授权你的昵称头像信息</view>
				<view class="mtb20 justify-between align-center  plr20">
					<view class="justify-start align-center">
						<view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
							<view v-if="userinfos.nickname">√</view>
						</view>
						<view class="ml20">
							<view class="base-color-3 bold">第一步</view>
							<view class="fs32 base-color-9">请点击授权微信昵称</view>
						</view>
					</view>
					<view class="button-container">
						<input type="nickname" class="hidden-input" @blur="onNickNameInput" @input="onNickNameInput" />
						<button class="custom-button"
							:class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button>
					</view>
				</view>
				<view class="mtb20 justify-between align-center  plr20 mt40">
					<view class="justify-start align-center">
						<view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
							<view v-if="userinfos.avatar">√</view>
						</view>
						<view class="ml20">
							<view class="base-color-3 bold">第二步</view>
							<view class="fs32 base-color-9">请点击授权微信头像</view>
						</view>
					</view>
					<view class="button-container">
						<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="hidden-input"
							v-if="nameuser">
							允许授权
						</button>
						<button class="custom-button sub" @click="shouquan" v-if="nameuser==''">允许授权</button>
						<button class="custom-button " :class="avataruser==''?'subname':'subavt'"
							v-else>{{avataruser?"已授权":'允许授权'}}</button>
					</view>
				</view>
				<view class="submitname" @click="confimrname" :class="nameuser&&avataruser?'subact':'sub'">确定</view>
			</view>
		</u-popup>
		<!-- <view class="footer-tips">重庆云联融智提供技术支持</view> -->
		<!-- footer -->
		<view class="footer" v-if="videoId">
			<view class="btns">
				<!-- 				<button
					class="author-btn"
					open-type="getPhoneNumber"
					@getphonenumber="phoneLogin"  v-if="!isquestion&&authType==1">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button>
				<button
					class="author-btn"
					open-type="getUserInfo" :disabled="userdisabled"
					@getuserinfo="userInfologin"  v-if="authType==0&&!isquestion">{{isLogin&&isAddKf==1 ? '提交答案领取奖励' : '立即学习'}}</button> -->
				<button class="author-btn" v-if="!isquestion||(!isLogin&&isAddKf==0)"
					@click="submit">{{isLogin&&isAddKf==1 ?'提交答案领取奖励' : '立即学习'}}</button>
			</view>
		</view>
		<view>
			<u-modal :show="showfalse" title="提示" :content='contentmsg' @confirm='showfalse=false'></u-modal>
		</view>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="24"
			:loading-text="loadingtext"></u-loading-page>
	</view>
</template>

<script>
	import {
		generateRandomString
	} from "@/utils/common.js"
	import dayjs from 'dayjs';
	import {
		getErrMsg,
		getH5CourseByVideoId,
		getH5CourseVideoDetails,
		courseAnswer,
		getFinishCourseVideo,
		getIsAddKf,
		getInternetTraffic,
		getIntegralByH5Video,
		sendReward,
		getRealLink,
		loginByMiniApp,
		handleFsUserWx,
		getUserInfoLook
	} from "@/api/courseLook.js"
	import {
		getConfigByKey
	} from "@/api/course.js"
	export default {
		data() {
			return {
				imgPath: uni.getStorageSync('requestImagesPath'),
				videoItem: {},
				viewload: true,
				loadingtext: "数据加载中...",
				baseUrl: uni.getStorageSync('requestPath'),
				// 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: "",
				isFull: false,
				isAddKf: 0,
				lineIndex: 0,
				// 是否展开
				isExpand: true,
				textHeight: 0, //文本高度
				qwUserId: "",
				qrcode: "",
				corpId: "",
				periodId: "", //营期id
				companyUserId: "", //销售id
				companyId: "", //公司id
				courseId: "", //课程id
				qrcodeMsg: "",
				urlOption: {},
				bufferRate: 0, // 缓冲时间
				uuId: "",
				isEnded: false,
				// 是否允许拖动进度条
				linkType: 0,
				ip: null,
				checked: true,
				isFinish: 0, // 是否完课
				interval: null,
				intervalIntegral: null, // 积分定时
				options: {
					sources: [{
						src: ""
					}],
					poster: "",
					live: false /* 是否直播 */ ,
					controls: true,
					autoplay: false,
					licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1323137866_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl,
					LicenseKey: 'bcc5bd9a14b798b48c52ff005a21d926',
					controlBar: {
						volumePanel: false,
						playbackRateMenuButton: false,
						QualitySwitcherMenuButton: false,
						// progressControl: false
					},
					plugins: {
						// ProgressMarker: false,
						ContextMenu: {
							statistic: false
						}
					},
				},
				// 错误请求次数
				errorCount: 0,
				answerPopup: false,
				sortLink: "",
				// 课程是否过期
				isExpire: false,
				menuButtonLeft: 281,
				menuButtonH: 45,
				timer: null,
				flag: false,
				msg: '',
				poster: '',
				userInfo: {},
				timeid: '',
				videocont: {},
				timepop: false,
				appToken: '',
				kfPopup: false,
				iskftype: 0,
				iskftypemsg: '',
				courseLogo: '',
				isquestion: false,
				tipsPopup: false,
				timepath: '3分之1',
				tipsTime2: 0,
				userlogo: false,
				userinfos: {
					nickname: "",
					avatar: ""
				},
				headImg: '',
				authType: 0, //0微信登录 1手机号登录
				userdisabled: false,
				projectId: '',
				showfalse: false,
				contentmsg: null,
			}
		},
		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
					}
				}
			},
			// imgname() {
			//   return this.$store.state.logoname
			// },
			appid() {
				return this.$store.state.appid
			},
			nameuser() {
				return this.userinfos.nickname
			},
			avataruser() {
				return this.userinfos.avatar
			},
		},
		onLoad(option) {

			this.getWebviewUrl()
			uni.$on('usercode', (data) => {
				console.log('huoqu ', data)
				this.goLogin(data)
			})
			uni.$on('vipMsg', (data) => {
				console.log(4444, data)
				this.contentmsg = data
				this.showfalse = true
				uni.showToast({
					icon: 'none',
					title: data,
					duration: 5000
				});
			})
			this.videoContext = uni.createVideoContext('video-content-box', this)
			this.code = option.code
			if (uni.getStorageSync('userInfo') && JSON.stringify(uni.getStorageSync('userInfo')) != '{}') {
				this.userInfo = uni.getStorageSync('userInfo')
			} else {
				this.userInfo = {}
			}
			this.appToken = uni.getStorageSync('companyUserInfo')
			if (!option.course) {
				const keys = decodeURIComponent(Object.keys(option)[0]);
				this.urlOption = JSON.parse(keys.split('course=')[1])
			} else {
				this.urlOption = option.course ? JSON.parse(option.course) : {}
			}
			uni.setStorageSync('H5course', this.urlOption)
			console.log('lll', this.urlOption)
			this.videoId = this.urlOption.videoId
			this.courseId = this.urlOption.courseId
			this.periodId = this.urlOption.periodId
			this.companyId = this.urlOption.companyId
			this.companyUserId = this.urlOption.companyUserId
			this.projectId = this.urlOption.projectId
			this.timeid = this.urlOption.id
			console.log(this.urlOption)
			console.log(decodeURIComponent(option.course))
			// this.sortLink = this.urlOption.link || ''
			this.getMenuButton()
			// #ifdef MP-WEIXIN
			// if(this.$store.state.logoname!=='乐氏本源'&&!uni.getStorageSync('userInfos')){
			// 	this.userlogo=true
			// }
			console.log(uni.getStorageSync('userInfos'))
			// if(!uni.getStorageSync('userInfos')&&this.$store.state.logoname=='乐氏本源'){
			// 	uni.navigateTo({
			// 		url:'/pages_course/webview'
			// 	})
			// 	return
			// }
			// #endif
		},
		onShow() {
			this.userinfos = uni.getStorageSync('userinfos')
			this.userinfo = uni.getStorageSync('userinfo')
			this.tipsOpen = false
			this.isExpand = true
			this.uuId = generateRandomString(16)
			if (this.videoId) {
				this.getH5CourseByVideo()
			}
			const AppToken = uni.getStorageSync('TOKEN_WEXIN')
			console.log(AppToken)
			if (AppToken) {
				// this.isLogin=true
				this.getUserInfoLooks()
				if (this.isAddKf == 1 && this.userinfo.userId) {
					console.log(1233)
					this.getH5CourseVideoDetails()
				} else {
					// this.checkUserInfoA()
					this.getIsAddKf()
				}
			}
			// if(this.sortLink){
			// 	this.getLink()
			// } else {
			// 	uni.showToast({
			// 		title: 'sortLink is not found',
			// 		icon: 'none'
			// 	});
			// }	
			console.log("uuid是什么>>>",this.uuId)
				console.log("bufferRate是什么>>>",Number(this.bufferRate.toFixed(2)))
				console.log("duration是什么>>>",this.playTime)
				console.log("periodId是什么>>>",this.periodId)
		},
		mounted() {
			// this.getIP()
			this.getHeight()

		},
		onHide() {
			// this.player = uni.createVideoContext('video-content-box');
			if (this.player) {
				this.player.pause()
			}
			// if (this.interval != null) {
			// 	clearInterval(this.interval)
			// 	this.interval = null
			// }
		},
		onUnload() {
			if (this.interval != null) {
				clearInterval(this.interval)
				this.interval = null
			}
			this.clearIntegral()
			uni.$off('usercode')
		},
		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()
		},
		methods: {
			getUserInfoLooks() {
				getUserInfoLook().then(res => {
					if (res.code == 200) {
						this.userinfos.nickname = res.user.nickname
						this.userInfo = res.user;
					}
					console.log(res)
				})
			},
			getWebviewUrl() {
				var data = {
					key: 'course.config'
				}
				getConfigByKey(data).then(res => {
					if (res.code == 200) {
						console.log("getConfigByKey====", JSON.parse(res.data))
						let data = JSON.parse(res.data, )
						uni.setStorageSync('weixinOauth', data.userCourseAuthDomain)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
						});
					}
				})
			},
			goLogin(data) {
				if (data) {
					console.log('huoqu1222', data)
					uni.showLoading({
						title: '加载中'
					})
					uni.login({
						provider: "weixin",
						success: async loginRes => {
							let code = loginRes.code // 获取开发code
							handleFsUserWx({
									code: code,
									appId: this.appid,
									userId: data.userId
								})
								.then(res => {
									if (res.code == 200) {
										console.log(res)
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: "登录成功",
										});
										this.userinfos = uni.getStorageSync('userinfos')
										uni.getStorageSync('TOKEN_WEXIN');
										this.userInfo = uni.getStorageSync('userInfo');
										this.isLogin = true
										this.getH5CourseVideoDetails()
										// setTimeout(()=>{
										// 	this.getIsAddKf()
										// },200)
									} else if (res.code == 406) {
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: '该用户已成为其他销售会员',
										});
									} else {
										uni.hideLoading();
										uni.showToast({
											icon: 'none',
											title: res.msg,
										});
									}

								})
						},
					})
				} else {
					uni.navigateTo({
						url: '/pages_course/webview?H5course=' + uni.getStorageSync('H5course')
					})
				}

			},
			shouquan() {
				if (this.userinfos.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: "请先授权微信昵称",
					});
				}
			},
			confimrname() {
				if (this.userinfos.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: "请授权微信昵称",
					});
					return
				}
				if (this.userinfos.avatar == '') {
					uni.showToast({
						icon: 'none',
						title: "请授权微信头像",
					});
					return
				}
				uni.setStorageSync('userInfos', this.userinfos)
				this.editUserA()
				this.userlogo = false
			},
			onChooseAvatar(e) {
				this.userinfos.avatar = e.detail.avatarUrl
				uni.uploadFile({
					url: uni.getStorageSync('requestPath') + '/app/common/uploadOSS', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					formData: {
						'user': 'test' // 上传附带参数
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes)
						// 根据接口具体返回格式   赋值具体对应url
						var data = JSON.parse(uploadFileRes.data)
						this.headImg = uni.getStorageSync('requestPath') + data.fileName
						this.userinfos.avatar = data.url
					}
				});
			},
			onNickNameInput(e) {
				console.log(e)
				this.userinfos.nickname = e.detail.value
			},
			kefpop() {
				if (this.appToken) {
					this.kfPopup == false
				}
			},
			tosales() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			closepop() {
				this.answerPopup = false
			},
			open() {

			},
			userInfologin(e) {
				console.log(e)
				this.userdisabled = true
				uni.showLoading({
					title: "处理中..."
				});
				if (e.mp.detail.errMsg == 'getUserInfo:ok') {
					this.utils.getProvider()
						.then(provider => {
							if (!provider) {
								this.userdisabled = false
								reject()
							}
							// uni登录
							uni.login({
								provider: provider,
								success: async loginRes => {
									console.log(loginRes)
									console.log(e)
									let code = loginRes.code // 获取开发code
									this.userinfos = uni.getStorageSync('userInfos') ? uni.getStorageSync(
										'userInfos') : this.userinfos
									loginByMiniApp({
											encryptedData: e.mp.detail.encryptedData,
											iv: e.mp.detail.iv,
											code: code,
											companyId: this.companyId || '',
											companyUserId: this.companyUserId || 0,
											nickname: this.userinfos.nickname || '',
											avatar: this.userinfos.avatar || '',
											authType: this.authType,
											appId: this.appid,
											projectId: this.projectId
										})
										.then(res => {
											this.userdisabled = false
											if (res.code == 200) {
												console.log(res)
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: "登录成功",
												});
												uni.setStorageSync('TOKEN_WEXIN', res.token);
												uni.setStorageSync('userInfo', JSON.stringify(res
													.user));
												this.userInfo = res.user;
												uni.hideLoading()
												// this.checkUserInfoA()
												// this.isLogin = true

											} else if (res.code == 406) {
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: '该用户已成为其他销售会员',
												});
											} else {
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: res.msg,
												});
											}

										})
										.catch(res => {
											this.userdisabled = false
										})
								},
								fail() {
									this.userdisabled = false
								}
							})
						})
						.catch(err => {
							this.userdisabled = false
							uni.showToast({
								icon: 'none',
								title: err,
							});
						})

				} else {
					this.userdisabled = false
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			phoneLogin(e) {
				console.log(e)
				this.userdisabled = false
				uni.showLoading({
					title: "处理中..."
				});
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					this.utils.getProvider()
						.then(provider => {
							if (!provider) {
								this.userdisabled = false
								reject()
							}
							// uni登录
							uni.login({
								provider: provider,
								success: async loginRes => {
									this.userdisabled = false
									console.log(loginRes)
									console.log(e)
									let code = loginRes.code // 获取开发code
									this.userinfos = uni.getStorageSync('userInfos') ? uni.getStorageSync(
										'userInfos') : this.userinfos
									loginByMiniApp({
											encryptedData: e.mp.detail.encryptedData,
											iv: e.mp.detail.iv,
											code: code,
											companyId: this.companyId || '',
											companyUserId: this.companyUserId || 0,
											nickname: this.userinfos.nickname || '',
											avatar: this.userinfos.avatar || "",
											authType: this.authType,
											appId: this.appid,
											projectId: this.projectId
										})
										.then(res => {
											this.userdisabled = false
											if (res.code == 200) {
												console.log(res)
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: "登录成功",
												});
												uni.setStorageSync('TOKEN_WEXIN', res.token);
												uni.setStorageSync('userInfo', JSON.stringify(res
													.user));
												this.userInfo = res.user;
												uni.hideLoading()
												this.checkUserInfoA()
												// this.isLogin = true
												// setTimeout(()=>{
												// 	this.getIsAddKf()
												// },200)
											} else if (res.code == 406) {
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: '该用户已成为其他销售会员',
												});
											} else {
												uni.hideLoading();
												uni.showToast({
													icon: 'none',
													title: res.msg,
												});
											}

										})
										.catch(res => {
											this.userdisabled = false
										})
								},
								fail() {
									this.userdisabled = false
								}
							})

						})
						.catch(err => {
							this.userdisabled = false
							uni.showToast({
								icon: 'none',
								title: err,
							});
						})

				} else {
					this.userdisabled = false
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}

			},
			getMenuButton() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonLeft = menuButtonInfo.left
				this.menuButtonH = menuButtonInfo.height
			},
			//播放时间更新事件方法
			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 {
					// console.log(this.isFinish)
					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);
					}

					if (Math.floor(e.detail.currentTime) != this.flagTime) {
						this.flagTime = Math.floor(e.detail.currentTime)
						// 中途弹窗逻辑
						if (!this.tipsOpen && this.tipsTime && this.playTime == this.tipsTime) {
							this.timepath = '33%'
							this.openTipsPop()
						}
						if (!this.tipsOpen && this.tipsTime2 && this.playTime == this.tipsTime2) {
							this.timepath = '66%'
							this.openTipsPop()
						}
					}
					this.playTime = currentTime

				}
			},
			changeTime(that, e) {
				that.playDurationSeek = 0
			},
			videoErrorCallback(e) {
				this.clearIntegral()
				this.errorCount++
				if (this.errorCount > 3) return
				console.log(e)
				this.getErrMsg(e.target.errMsg)
				this.getH5CourseVideoDetails('error')
			},
			// 当开始/继续播放时触发play事件
			getPlay() {
				this.errorCount = 0
				// this.judgeDuration()
			},
			getPause() {
				this.clearIntegral()
			},
			getEnded() {
				this.clearIntegral()
				this.isEnded = true
				this.isFinish = 1
				this.getFinishCourseVideo()
			},
			getIP() {
				uni.request({
					url: 'https://ipinfo.io/json', //仅为示例，并非真实接口地址。
					method: 'GET',
					success: (res) => {
						this.ip = res.data.ip
					}
				});
			},
			getHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select("#title-content")
						.boundingClientRect((data) => {
							this.height =
								`calc(100vh - ${data.height}px - 420rpx - ${this.statusBarHeight}px - 120rpx )`
						})
						.exec();
				})
			},
			getDescHeight() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select("#descbox-desc")
						.boundingClientRect((data) => {
							this.textHeight = data.height
						})
						.exec();
				})
			},
			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
				}
			},
			// 展开简介
			handleExpand() {
				this.isExpand = !this.isExpand
			},
			getH5CourseByVideo() {
				this.loading = true
				getH5CourseByVideoId({
					videoId: this.videoId
				}).then(res => {
						this.loading = false
						if (res.code == 200) {
							this.viewload = false
							this.courseInfo = res.data
							uni.setNavigationBarTitle({
								title: this.courseInfo && this.courseInfo.title ? this.courseInfo.title : ''
							});
						}
						this.getHeight()
						this.getDescHeight()
					},
					rej => {
						this.loading = false
					}
				).catch(() => {
					this.loading = false
				})
			},
			getH5CourseVideoDetails(type) {
				uni.showLoading({
					title: '加载中'
				})
				console.log(this.userInfo)
				const data = {
					videoId: this.videoId,
					fsUserId: this.userInfo.userId,
					courseId: this.courseId,
					companyUserId: this.companyUserId,
					periodId: this.periodId,
					id: this.timeid
				}
				getH5CourseVideoDetails(data).then(res => {
						if (res.code == 200) {
							this.config = res.data.courseConfig || {}
							this.isFinish = res.data.isFinish || 0
							this.duration = res.data.courseVideoDetails &&
								res.data.courseVideoDetails.duration ? res.data.courseVideoDetails.duration : 0
							this.courseLogo = this.config && JSON.stringify(this.config) != '{}' ? this.config
								.courseLogo : ''
							this.playDuration = res.data.playDuration || 0
							this.playDurationSeek = res.data.playDuration || 0
							// this.tipsTime =  38
							this.tipsTime = res.data.tipsTime || 0
							this.tipsTime2 = res.data.tipsTime2 || 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
							if (!this.player || type == 'error') {
								uni.hideLoading();
								this.lineIndex = this.config.defaultLine
								this.videoUrl = res.data.courseVideoDetails.videoUrl
								this.poster = res.data.courseVideoDetails &&
									res.data.courseVideoDetails.thumbnail ? res.data.courseVideoDetails.thumbnail : ''
								this.videocont = res.data
								// this.options.sources = [{
								// 	src: this.videoUrl
								// }]
								// this.options.poster = res.course && res.course.imgUrl ? res.course.imgUrl : ''
								// this.initVideo()
								this.playTime = this.playDuration >= this.duration ? 0 : this.playDuration
								if (this.videocont.rang) {
									setTimeout(() => {
										this.player = uni.createVideoContext('video-content-box');
										this.player.seek(this.playTime)
										this.player.play();
									}, 500);
									this.timepop = false
								} else {
									this.timepop = true
								}

							} 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.playTime = this.playTime > this.playDuration ? this.playTime : this
									.playDuration >= this.duration ? 0 : this.playDuration
								this.player.seek(this.playTime)
								this.player.play();
							}
							this.updateTime();
							if (res.data.courseVideoDetails.questionBankList.length == 0) {
								this.isquestion = true
							} else {
								this.isquestion = false
							}
							console.log('题目', res.data.courseVideoDetails.questionBankList)
							this.quesList = res.data.courseVideoDetails.questionBankList &&
								res.data.courseVideoDetails.questionBankList.length > 0 ? res.data.courseVideoDetails
								.questionBankList : [],
								this.quesList = this.quesList.map(item => ({
									...item,
									questionOption: JSON.parse(item.question),
									answer: ''
								}))
						}
						this.getHeight()
						this.getDescHeight()
					},
					rej => {}
				)
			},
			handleAnswer(item, option, idx) {
				let time = this.playTime
				if (this.isEnded || this.isFinish == 1) {
					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.isExpire) {
					uni.showToast({
						title: '课程已过期或链接无效',
						icon: 'none'
					});
					return
				}
				// 登录
				this.$isLoginCourse().then(
					res => {
						console.log(res)
						if (res) {
							console.log(res)
							if (this.isAddKf == 1) {
								// 答题
								// 您已提交过答案，请领取红包
								console.log(1223)
								this.courseAnswer()
							} else {
								// 添加客服
								if (this.videoId && this.isLogin) {
									console.log(12223131)
									this.getIsAddKf()
								} else if (this.iskftype == 1) {
									uni.showToast({
										title: this.iskftypemsg,
										icon: 'none'
									})
								} else {
									// this.kfPopup=true
									uni.removeStorageSync('TOKEN_WEXIN')
									uni.showToast({
										title: '已清除缓存，请重新进入页面！',
										icon: 'none'
									})
								}
							}
						} else {
							this.goLogin()
						}
					},
					rej => {}
				);

			},
			nvtored() {
				const packageInfo = uni.getStorageSync('receive_package', packageInfo)
				const mchId = uni.getStorageSync('mchId', res.mchId)
				uni.navigateToMiniProgram({
					appId: 'wxc89db69a69a79011',
					path: '/pages_course/reward?mchId=' + mchId + '&packageInfo=' + packageInfo,
					success(res) {
						this.answerPopup = false
						// this.$refs.appPopup.close()
					}
				})
			},
			// 答题
			courseAnswer() {
				let time = this.playTime
				if (this.isEnded || this.isFinish == 1) {
					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,
					userId: this.userInfo.userId,
					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.answerPopup = true
									this.errTitle = "很遗憾答错了"
									this.errDesc = `<span style="color:#FF5C03">还有${res.remain}次机会，继续加油</span>`
									// this.$refs.answerPopup.open("center")
									// this.answerPopup=true
								}
							} else {
								// 答题成功
								this.errTitle = "恭喜你，回答正确"
								// this.errDesc = `请选择奖励`
								// this.$refs.answerPopup.open("center")
								// this.answerPopup=true
								if (res.msg == '答题成功') {
									uni.login({
										provider: 'weixin',
										success: async loginRes => {
											console.log(loginRes)
											var code = loginRes
											this.closeAnswerPopup(loginRes.code)
										}
									})
								}
							}
						} else {
							if (res.msg == "该课题到达答错次数限制") {
								this.errTitle = "答题次数超过限制"
								this.errDesc = "以后的课程要认真学习哦"
								// this.$refs.answerPopup.open("center")
								this.answerPopup = true
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						}
					},
					rej => {}
				)
			},
			// 选择
			rewardChange(e) {
				this.currentReward = e.detail.value
			},
			closeAnswerPopup() {
				// this.$refs.answerPopup.close()
				uni.showLoading({
					title: "加载中..."
				})
				if (this.errTitle == '恭喜你，回答正确') {
					const param = {
						...this.urlOption,
						userId: this.userInfo.userId,
						// rewardType: Number(this.currentReward),
						source: 2, // 小程序
						appId: this.appid
					}
					sendReward(param).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							console.log('红包', res)
							if (res.isNew && res.isNew == 1) {
								console.log('红包配置', res)
								const packageInfo = res.data.packageInfo || ''
								if (packageInfo) {
									this.answerPopup = true
									uni.setStorageSync('receive_package', packageInfo)
									uni.setStorageSync('mchId', res.mchId)
									uni.navigateTo({
										url: '/pages_course/reward'
									})
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
						// if(res.code == 200) {
						// 	//重构 发红包，后台通过OPENID发零钱到 账
						// 	//this.initWXConfig(res.package)
						// }else {
						// 	uni.showToast({
						// 		title: res.msg,
						// 		icon: 'none'
						// 	})
						// }
					})
				} else {
					uni.hideLoading()
					this.answerPopup = !this.answerPopup
				}
			},
			// 线路
			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.tipsPopup = true
				// 暂停视频
				this.videoContext.pause()
				// this.tipsOpen = true
				// this.pause()
			},
			closeTipsPop() {
				// this.$refs.tipsPopup.close()
				this.videoContext.play()
				this.tipsPopup = !this.tipsPopup
			},
			// 客服
			getIsAddKf() {
				this.qrcode = ''
				this.qrcodeMsg = ''
				this.isAddKf = 0
				const data = {
					videoId: this.videoId,
					userId: this.userInfo.userId,
					companyUserId: this.companyUserId,
					companyId: this.companyId,
					courseId: this.courseId,
					periodId: this.periodId,
					projectId: this.projectId
				}
				// {videoId: this.videoId,qwUserId: this.qwUserId,corpId: this.corpId}
				getIsAddKf(data).then(res => {
						if (res.code == 200) {
							this.isLogin = true
							if (res.data) {
								this.isAddKf = 1
								if (this.userInfo.userId) {
									this.getH5CourseVideoDetails()
									console.log(123223)
								}

							}
							// else{
							// 	uni.showToast({
							// 		title: '请联系管理员，注册为会员！',
							// 		icon: 'none'
							// 	});
							// }
						} else if (res.code == 1002) {
							this.isAddKf = 0
							this.qrcode = res.ext
							this.kfPopup = true
							uni.showToast({
								title: "请添加管理员微信，成为会员！",
								icon: 'none'
							});
						} else if (res.code == 505) {
							this.isAddKf = 0
							this.qrcode = res.ext
							this.kfPopup = true
							uni.showToast({
								title: "管理员开启了会员审核，请等待审核!",
								icon: 'none'
							});
						} else if (res.code == 406) {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '该用户已成为其他销售会员',
							});
						} else if (res.code == 504) {
							this.isAddKf = 0
							this.iskftype = 1
							this.iskftypemsg = res.msg
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						} else {
							this.isAddKf = 0
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					err => {}
				);
			},
			closeKFPop() {
				// this.$refs.kfPopup.close()
				// this.kfPopup=!this.kfPopup
			},
			getFinishCourseVideo() {
				if (!this.playTime) return
				// {videoId: this.videoId,duration:this.playTime}
				const param = {
					duration: this.playTime,
					videoId: this.videoId,
					userId: this.userInfo.userId,
					companyUserId: this.companyUserId
				}
				getFinishCourseVideo(param)
			},
			// 每十分钟获得积分
			getIntegralByH5Video() {
				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)
				// console.log('缓冲结果',this.bufferRate)
				// console.log('缓冲',this.playTime,this.duration)
			},
			// 缓冲
			getInternetTraffic() {
				const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
				// console.log('播放百分比',playVideoTime)
				if (this.bufferRate == 0 || this.bufferRate < playVideoTime) {
					this.bufferRate = playVideoTime
					console.log(this.bufferRate)
				}
				if (this.bufferRate == 0 || Number(this.bufferRate.toFixed(2)) == 0) return
				
				const param = {
					uuId: dayjs().format('YYYYMMDD') + this.uuId,
					duration: this.playTime,
					bufferRate: Number(this.bufferRate.toFixed(2)),
					userId: this.userId,
					periodId: this.periodId,
					...this.urlOption
				}
				getInternetTraffic(param)
			},
			getErrMsg(err) {
				let msgerr = {
					videoUrl: this.videoUrl,
					lineIndex: this.lineIndex,
					errTime: new Date(),
					// ip: this.ip,
					errMsg: err
				}
				getErrMsg({
					msg: JSON.stringify(msgerr)
				})
			},
			getLink() {
				this.goLogin()
				return
				let that = this;
				this.msg = ''
				getRealLink({
					sortLink: this.sortLink
				}).then(res => {
					if (res.code == 200) {
						this.isExpire = false
						// 如果响应中包含真实链接，则跳转到真实链接
						// window.location.href = res.realLink +"&sortLink="+this.sortLink+"&code="+this.code+"&time="+new Date().getTime()
						if (this.isLogin && this.isAddKf == 1) {
							this.getH5CourseVideoDetails()
						}
						if (this.videoId && this.isAddKf != 1) {
							this.$isLoginCourse().then(
								isLogin => {
									this.isLogin = isLogin
									if (isLogin) {
										this.getIsAddKf()
									} else {
										this.goLogin()
									}
								},
								rej => {}
							);
						}
					} 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)
				}
			}
		}
	}
</script>

<style scoped>
	.full-width-popup {
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.subname {
		background-color: #00aa00;
		color: #fff;
	}

	.subavt {
		background-color: #fff;
		border: 2rpx #0a0 solid;
		color: #00aa00;
	}

	.boxweixin {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 34rpx;
		color: #0a0;
	}

	.boxnosel {
		border: #757575 4rpx solid;
	}

	.boxsel {
		border: #0a0 4rpx solid;
	}

	.button-container {
		position: relative;
		width: 240rpx;
	}

	.hidden-input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 2;
	}

	.custom-button {
		position: relative;
		z-index: 1;
		/* 其他样式 */
		width: 100%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		padding: 10rpx 20rpx;
	}

	.submitname {
		width: 90%;

		margin: 0 auto;
		text-align: center;
		padding: 30rpx;
		margin-top: 40rpx;
	}

	.sub {
		background-color: #f0f0f0;
		color: #0a0;
	}

	.subact {
		background-color: #0a0;
		color: #fff;
	}

	.userlogo {
		height: 760rpx;
	}

	.getlogo {
		width: 240rpx;
		background-color: #fff;
		// padding: 10rpx 20rpx;
	}

	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.footer-tips {
		position: fixed;
		width: 100%;
		bottom: 144rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 12px;
		color: #bbb;
		transform: scale(0.8);
	}

	.btns {
		position: relative;
		width: 100%;
		height: 80rpx;

		.author-btn {
			z-index: 100;
			position: absolute;
			width: 100%;
			height: 80rpx;
			background: #ff5c03;
			border-radius: 40rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			line-height: 80rpx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.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;
	}

	.header-nav {
		height: 88rpx;
		@include u-flex(row, center, flex-start);
		overflow: hidden;
		background-color: #fff;
		box-sizing: border-box;

		.header-title {
			text-align: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 0 10rpx 0 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #000;
			box-sizing: border-box;
		}
	}

	.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: 420rpx;
		overflow: hidden;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		background: rgba(0, 0, 0, 0.2);

		.video-play {
			height: 72rpx;
			width: 72rpx;
			position: absolute;
			top: 50%;
			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;
	}

	.timepopbox {
		width: 560rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.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) + 100rpx);

		.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: 40rpx;
			color: #222222;
		}

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

		.title-content {
			padding: 0 32rpx;
			background-color: #fff;
			font-size: 28rpx;
			line-height: 1.6;

			.title {
				font-size: 36rpx;
				font-weight: 500;
				color: #414858;
			}

			.time-or-subtitle {
				margin-top: 12rpx;
				color: #666666;
			}
		}

		.descbox {
			padding: 36rpx 32rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			line-height: 42rpx;
			word-break: break-word;

			&-title {
				margin-bottom: 24rpx;
				font-weight: 500;
				font-size: 32rpx;
			}

			&-info {
				margin-bottom: 24rpx;
				@include u-flex(row, center, space-between);
				font-size: 26rpx;
				color: #757575;

				&-l {
					flex: 1;
					@include u-flex(row, center, flex-start);
				}

				&-time {
					margin-left: 18rpx;
					padding-left: 18rpx;
					position: relative;

					&::after {
						content: "";
						width: 4rpx;
						height: 4rpx;
						background: #999999;
						border-radius: 50%;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				&-r {
					background: transparent;
				}
			}

			&-desc {
				overflow: hidden;
				position: relative;
			}
		}

		.expand {
			flex-shrink: 0;
			@include u-flex(row, center, flex-end);
			color: #FF5C03;
			font-weight: 400;
			font-size: 24rpx;

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

		.expand-ab {
			position: absolute;
			top: 0;
			right: 0;
			box-shadow: -50rpx 0 20rpx 8rpx #FFFFFF;
			background-color: #fff;
		}

		.ques-content {
			background-color: #fff;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}

		.ques-content-tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.ques-title {
			margin: 48rpx 0 34rpx 0;
			font-weight: 500;
			font-size: 32rpx;
			white-space: normal;
		}

		.ques-type {
			flex-shrink: 0;
			min-width: 72rpx;
			min-height: 40rpx;
			padding: 0 12rpx;
			margin: 0 12rpx;
			box-sizing: border-box;
			background: #FF5C03;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			line-height: 40rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			display: inline-block;
		}

		.ques-option {
			min-height: 88rpx;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			background: #F5F7FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;

			&-active {
				color: #FF5C03 !important;
				background: #FCF0E7 !important;
			}
		}

		.video-line {
			min-width: 140rpx;
			max-width: 200rpx;
			height: 60rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 50rpx 0 0 50rpx;
			overflow: hidden;
			background-color: #fff;
			text-align: center;
			color: #888;
			font-size: 28rpx;
			line-height: 60rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			right: 0;
			z-index: 9;
			bottom: calc(var(--window-bottom) + 280rpx);
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, .12);

			image {
				flex-shrink: 0;
				height: 30rpx;
				width: 30rpx;
				margin-right: 6rpx;
			}
		}

		.footer {
			border-top: 1rpx solid #ededef;
			background: #fff;
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 32rpx;
			// padding-bottom: calc(var(--window-bottom) + 14rpx);
			box-sizing: border-box;
			z-index: 0;

			&-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;
	}

	.nocourse {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 88rpx;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #757575;
		line-height: 48rpx;
		text-align: center;

		image {
			width: 328rpx;
			height: auto;
			margin-bottom: 30rpx;
		}
	}

	.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;
	}
</style>