fbySrcm_uniapp/pages/courseManage/course/learning.vue

<template>
	<view class="content" v-show="!loading">
		<view class="video-box">
			<!-- <image v-if="!isLogin || isAddKf!=1" class="video-poster" :src="courseInfo.imgUrl" mode="aspectFill"></image> -->
			<video :style="{'--progress': progress + '%'}" id="myVideo" :src="videoUrl" :show-center-play-btn="false"
				:show-progress="true" :auto-pause-if-navigate="true" :auto-pause-if-open-native="true"
				@timeupdate="videoTimeupdate" @error="videoErrorCallback" @play="getPlay" @pause="getPause"
				@ended="getEnded" @fullscreenchange="fullscreenchange" @progress="progressChange"
				:controls="!showPlay"></video>
			<cover-view class="video-controls-box" @click="clickVideo" v-if="showPlay">
				<cover-image class="video-play" src="@/static/image/video_icon.png" @click="play()"></cover-image>
			</cover-view>
		</view>

		<view class="title-content" id="title-content">
			<!-- 答题时展示小节课程名，其他展示课程名 -->
			<!-- 课程名字 -->
			<view class="miantitlebox">
				{{courseInfo.title}} {{courseInfo.courseName}}
			</view>
		</view>
		<scroll-view class="scroll-view" :style="{height: height}" :scroll-top="scrollTop" scroll-y="true">
			<!-- 介绍 -->
			<view class="descbox">
				<template>
					<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.duration}}
							</view>
						</view>
					</view>
				</template>
				<view class="descbox-desc" id="descbox-desc" :style="{height: isExpand ? 'auto': '42rpx'}">
					<text>{{courseInfo.description}}</text>
					<view :class="isExpand ? 'expand': 'expand expand-ab'" v-if="textHeight > 21">
						<text @click="handleExpand">{{isExpand ? '收起简介' : '展开简介'}}</text>
						<image src="@/static/image/course_arrow_up_icon.png" v-show="isExpand"></image>
						<image src="@/static/image/course_arrow_down_icon.png" v-show="!isExpand"></image>
					</view>
				</view>
			</view>
			<!-- 问题 -->
			<view class="ques-content">
				<view class="ques-content-tit">问答题</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>{{item.title}}</text>
					</view>
					<view
						:class="item.answer.indexOf(option.name) !== -1 ?'ques-option ques-option-active':'ques-option'"
						v-for="(option,idx) in item.questionOption" :key="idx" @click="handleAnswer(item,option)">
						<view>
							{{numberToLetter(idx)}}.
						</view>
						<view>{{option.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 线路 -->
		<!-- <view class="video-line" @click="openPop" v-if="isLogin&&isAddKf==1">
			<image src="@/static/image/changePlayer-icon.png"></image>
			<text>线路{{lineIndex + 1 | numberToChinese}}</text>
		</view> -->
		<!-- 线路弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupbox">
				<view class="popupbox-head">
					<text>线路选择</text>
					<image class="close-icon" src="@/static/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>
		<!-- 温馨提示弹窗 -->
		<uni-popup ref="tipsPopup" type="center" :is-mask-click="false">
			<view class="tipsPopup-mask">
				<image class="red_envelope_top" src="@/static/image/red_envelope_img.png" mode="aspectFill"></image>
				<view class="tipsPopup">
					<image class="tipsPopup-close" src="@/static/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="@/static/image/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>
		<!-- 答题弹窗 -->
		<uni-popup ref="answerPopup" type="center">
			<view :class="errTitle == '恭喜你，回答正确' ? 'answerPopup-box bg':'answerPopup-box'">
				<!-- 正确 -->
				<image class="tipimg" v-if="errTitle == '恭喜你，回答正确'" src="@/static/image/course_answer_img.png"
					mode="aspectFill"></image>
				<!-- 错误 -->
				<image class="tipimg" v-else src="@/static/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="reward-list">
					<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">
					<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>
		<!-- 客服二维码弹窗 -->
		<uni-popup ref="kfPopup" type="center" :mask-click="false">
			<view class="kfqrcode-box">
				<image class="kfqrcode" :src="qrcode"></image>
				<view>长按识别二维码添加客服，立即看课</view>
				<image class="kfqrcode-close" src="@/static/image/course_close_white_icon.png" mode="aspectFill"
					@click="closeKFPop"></image>
			</view>
		</uni-popup>
		<!-- 判断是否限制权限-->
		<u-popup :show="showvip" @close="close" @open="open" mode='center' round='20'>
			<view class="VIPvie">
				<image src="@/static/image/safe.png" class="w400 h400"></image>
				<view class="mt90 pt90">
					<view class="fs50 center mb20">{{answermsg}}</view>
					<view class="fs32 base-color-6 center">联系群管解除限制!</view>
				</view>
			</view>
		</u-popup>
		<!-- 判断是否是会员，不是会员申请成为会员-->
		<u-popup :show="showbecome" @close="close" @open="open" mode='center' round='20' overlayStyle="height:100%">
			<view class="centerV h800 w600 base-bg-f radius20">
				<image src="@/static/image/becomevip.png" class="h193 w193 mb40"></image>
				<view class="bold">是否申请成为会员</view>
				<view class="justify-center w100 mt40 mb40">
					<view class="quxiao" @click="">取消</view>
					<view class="sure" @click="surevip">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- footer -->
		<view class="footer">
			<view class="justify-between" v-if="isvip==1">
				<!-- <view  class="justify-between" v-if="isvip==1"> -->
				<view class="copybtn flex-1 mr40" @click="buildimg">生成海报</view>
				<view class="copybtn flex-1" @click="setTimeShow=!setTimeShow">复制链接</view>
			</view>
			<view class='footer-btn footer-btn-border' @click="submit" v-else>
				<image class="footer-btn-img" v-show="isLogin" src="@/static/image/red_envelope_btnimg.png"
					mode="aspectFill"></image>
				<text>提交答案领取红包</text>
			</view>

		</view>
		<u-modal :show="setTimeShow" content='content' class="model" @confirm="confirmTime" :closeOnClickOverlay='true'
			@close="closetext">
			<view class="setTimebox">
				<view class="timetip">不传默认以系统参数为准</view>
				<view class="x-f">
					<text style="margin-right: 20px;">链接有效时长(分钟)</text>
					<u-input fontSize="14px" placeholder="链接有效时长" border="none" v-model="time" maxlength="5"></u-input>
				</view>
			</view>
		</u-modal>
		<u-popup :show="setImg" @close="closeimg" :round="12" style="z-index: 999;">
			<view class="w100 h500">
				<image :src="codeLink.url" class="codeimg w660" mode="widthFix"></image>
			</view>
			<view class="justify-around mtb40">
				<view class="column justify-center align-center" @click="shareimg">
					<image src='@/static/image/wechat.png' class="w80 h80"></image>
					<view class="mt10">微信好友</view>
				</view>
				<view class="column justify-center align-center" @click="downimg">
					<image src='@/static/image/downicon.png' class="w80 h80"></image>
					<view class="mt10">长按海报保存</view>
				</view>
			</view>
		</u-popup>
		<u-overlay :show="showzhidao" @click="showzhidao = false" style="z-index: 9999;">
			<view class="point-box">
				<view class="imgshe">
					<image src='@/static/image/point.png' class="w300 h300"></image>
				</view>
				<view class="column colorf fs32 xu-box fs40
				align-center justify-center">
					<view class="justify-center">点击右上角
						<image src="../../../static/image/wxmore.png" class="w50 h50 mlr10"></image>
					</view>
					<view class="mt20">选择 “转发给朋友”</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		throttle
	} from "@/utils/throttle.js"
	import {
		loginByMp
	} from '@/api/user'
	import {
		generateRandomString
	} from "@/utils/common.js"
	import {
		numberToLetter
	} from "@/utils/tools.js"
	import {
		getH5CourseByVideoId,
		getH5CourseVideoDetails, //下次不要同名
		courseAnswer,
		getFinishCourseVideo,
		// getIsAddKf,
		// getInternetTraffic,
		idlookCourse,
		buildCode,
		sharecourselink,
		getaddcourseLog,
		clickCourse,
		sendReward,
		getSDK
	} from "@/api/courseManage.js"
	//       视频id       视频详情       课程答题      课程完成  获取客服     视频缓冲
	import html2canvas from 'html2canvas'
	import wx from 'weixin-js-sdk'
	import {
		isDayjs
	} from "dayjs"
	// import code from "../../../uni_modules/uview-ui/libs/config/props/code"
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}

	export default {
		data() {
			return {
				setImg: false,
				showbecome: false,
				showvip: false,
				time: '',
				isvip: 1,
				showzhidao: false,
				showShare: false,
				setTimeShow: false,
				// 1 红包 2 积分
				rewardType: [{
					name: '红包奖励',
					value: 1
				}, {
					name: '积分奖励',
					value: 2
				}],
				currentReward: 1,
				loading: true,
				progress: 0,
				code: null,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				scrollTop: 0,
				height: '0px',
				isLogin: true,
				videoContext: null,
				videoUrl: "",
				videoId: "",
				//现在的时长
				playTime: 0,
				//总时长
				duration: 0,
				playDuration: 0,
				// 温馨提醒时间节点，
				tipsTime: 0,
				tipsOpen: false,
				config: {},
				courseInfo: {},
				quesList: [],
				lineList: [],
				// 错题
				errQues: [],
				// 答题机会
				remain: 0,
				errTitle: "",
				errDesc: "",
				showPlay: true,
				showControls: false,
				playStatus: "",
				isFullscreen: false,
				isAddKf: 0,
				lineIndex: 0,
				// 是否展开
				isExpand: true,
				textHeight: 0, //文本高度
				qwUserId: "",
				qrcode: "",
				corpId: "",
				urlOption: {},
				bufferRate: 0, // 缓冲时间
				uuId: "",
				codeLink: [],
				copylink: '',
				linkId: '',
				companyId: '',
				companyUserId: '',
				userId: '',
				codeState: '',
				answermsg: '',
				courselink: '',
				type: 1,
				isUservip: 1
			}
		},
		filters: {
			numberToChinese(number) {
				const chineseNumber = ['一', '二', '三', '四', '五', '六', '七', '八', '九'];
				return chineseNumber[number - 1];
			},
		},
		onLoad(option) {
			this.urlOption = option.course ? JSON.parse(option.course) : {},
				// console.log(this.urlOption)
				this.code = option.code
			this.isvip = option.isvip
			this.videoId = this.urlOption.videoId
			this.companyId = this.urlOption.companyId
			this.companyUserId = this.urlOption.companyUserId
			this.linkId = this.urlOption.id
			if (this.isvip == 1) {
				this.isUservip = 0
				this.urlOption = {
					...this.urlOption,
					isUser: this.isUservip
				}
			} else {
				this.isUservip = 1
				this.urlOption = {
					...this.urlOption,
					isUser: this.isUservip
				}
			}
			console.log(this.urlOption, 111)
			//获取到code和token和id直接自动登录
			this.qwUserId = this.urlOption.qwUserId || ''
			this.corpId = this.urlOption.corpId || ''
			// 进入页面有code 就loginByMp
			if (this.linkId != null && this.isvip != 1) {
				if (!uni.getStorageSync('UserAppToken')) {
					if (this.code) {
						this.loginByMp()
					} else {
						this.getWechatCode()
					}
				}
			}
		},
		onShow() {
			console.log("onShow=====")
			this.tipsOpen = false
			this.isExpand = true
			this.isLogin = this.utils.isLogin() //登录判断
			this.uuId = generateRandomString(16)
			this.users = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : {}
			this.userId = this.users.userId
			console.log('===========');
			console.log(uni.getStorageInfoSync());
			console.log('UserAppToken:' + uni.getStorageSync('UserAppToken'));
			console.log('AppToken:' + uni
				.getStorageSync('AppToken'));
			console.log('===========');
			if (this.isvip == 1 || uni.getStorageSync('UserAppToken')) {
				this.getH5CourseVideoDetailsM()
				//就是这个地方，没有执行
			}
			if (this.videoId) {
				this.getH5CourseByVideo()
			}
		},
		mounted() {
			this.getjssdklist()
			this.getHeight()
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
		},
		// onHide() {
		// 	// 页面隐藏 如果登录就执行
		// 	if (this.utils.isLogin()) {
		// 		console.log("==onHide===")
		// 		this.getFinishCourseVideo()
		// 		this.getInternetTraffic()
		// 	}
		// },
		// onUnload() {
		// 	// 页面卸载  和隐藏执行一样的
		// 	if (this.utils.isLogin()) {
		// 		console.log("==onUnload===")
		// 		this.getFinishCourseVideo()
		// 		this.getInternetTraffic()
		// 	}
		// },
		methods: {
			// 获取jssdk
			getjssdklist() {
				const param = {
					url: window.location.href
				}
				getSDK(param).then(res => {
					wx.config({
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ["updateAppMessageShareData"] // 必填，需要使用的JS接口列表
					});
				})
			},
			shareimg() {
				let self = this
				//分享好友
				// 配置--你到时候把配置全局 --就是这些东西  调接口拿
				wx.ready(function() { //需在用户可能点击分享按钮前就先调用
					wx.updateAppMessageShareData({
						title: self.courseInfo.courseName + self.courseInfo.title, // 分享标题
						desc: self.courseInfo.title, // 分享描述
						link: self.copylink,
						// 分享链接，该链接域名或路径必须与当前页面对应的公众 号JS安全域名一致
						imgUrl: self.courseInfo.thumbnail, // 分享图标
						success: function(res) {
							// console.log(self.copylink,'456');
							self.showzhidao = true
							self.setImg = false
							self.showShare = false
							// 设置成功
							uni.showToast({
								title: '海报已生成',
								icon: 'none',
								duration: 1000
							});
						},
						fail: function(err) {
							uni.showToast({
								title: '海报生成失败，请重试',
								icon: 'none',
								duration: 2000
							})
						}
					})
				});
			},
			closeimg() {
				this.setImg = false
			},
			closetext() {
				this.setTimeShow = false
			},
			//是否可以看课
			isLOOK() {
				if (this.isvip == 1) {
					return
				}
				const param = {
					companyId: this.companyId,
					companyUserId: this.companyUserId,
					linkId: this.linkId,
					userId: this.userId,
					videoId: this.videoId,
					code: this.code,
					createTime: ''
				}
				idlookCourse(param).then(res => {
					if (res.code == 200) {

					} else if (res.code == 501) {
						uni.showToast({
							icon: 'none',
							title: '链接已过期'
						})
						this.showvip = true
						this.answermsg = res.data
					} else if (res.code == 502) {
						uni.showToast({
							icon: 'none',
							title: '请先成为会员'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/courseManage/course/becomeVip?
								userId=${this.userId}&companyId=${this.companyId}&companyUserId=${this.companyUserId}&code=${this.code}`
							})
						}, 500)
					} else if (res.code == 503) {
						this.showvip = true
						this.answermsg = res.data
					} else if (res.code == 504) {
						uni.showToast({
							icon: 'none',
							title: '请看课成为会员'
						})
					}
				})
			},
			open() {

			},
			close() {

			},
			buildimg() {
				this.buildimgAcode()
				// console.log(this.urlOption.videoId)
			},
			//生成海报和二维码
			buildimgAcode() {
				uni.showLoading({
					title: '正在生成中...'
				})
				buildCode({
					videoId: this.urlOption.videoId
				}).then(res => {
					if (res.code == 200) {
						this.codeLink = res.data
						this.setImg = true
						this.getlink()
						// console.log(res)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getlink() {
				const params = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					courseId: this.courseInfo.courseId,
					time: this.time,
					type: this.type,
					videoId: this.courseInfo.videoId,
				}
				sharecourselink(params).then(res => {
					if (res.code == 200) {
						this.copylink = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			confirmTime() {
				this.setTimeShow = !this.setTimeShow
				this.showShare = !this.showShare
				const params = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					courseId: this.courseInfo.courseId,
					time: this.time,
					type: this.type,
					videoId: this.courseInfo.videoId,
				}
				sharecourselink(params).then(res => {
					if (res.code == 200) {
						this.copylink = res.data
						// console.log(res.data)
						setTimeout(() => {
							uni.setClipboardData({
								data: this.copylink,
								success: () => {
									uni.showToast({
										title: '链接已复制',
										icon: 'success',
										duration: 2000
									});
								},
								fail: () => {
									uni.showToast({
										title: '复制失败',
										icon: 'none'
									});
								}
							});
						}, 100)

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 建立选择
			rewardChange(e) {
				this.currentReward = e.detail.value
			},
			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 - 164rpx)`
						})
						.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;
			},
			videoTimeupdate(e) {
				if (this.isvip == 1) {

				} else {
					let currentTime = Math.round(e.detail.currentTime)
					// 禁止拖动进度条快进
					if (!this.playDuration) {
						if (currentTime - this.playTime > 2) {
							uni.showToast({
								title: '不能快进哦',
								icon: 'none',
							});
							if (!this.videoContext) {
								this.videoContext = uni.createVideoContext('myVideo');
							}
							this.videoContext.seek(this.playTime);
						}
						if (this.playTime - currentTime > 1) {
							this.tipsOpen = false
						}
					} else {
						this.$nextTick(() => {
							this.playDuration = 0
						})
					}
					this.progress = (currentTime / Math.round(e.detail.duration)) * 100
					this.playTime = currentTime
					if (!this.tipsOpen && this.tipsTime && this.playTime == this.tipsTime) {
						this.openTipsPop()
					}
					if (this.playTime > 0) {
						throttle(this.throttleFun, 10000, false)
					}
				}

			},
			throttleFun() {
				this.getFinishCourseVideo()
				this.getInternetTraffic()
			},
			videoErrorCallback(e) {
				// console.log(e.target.errMsg)
			},
			clickVideo() {
				this.showControls = !this.showControls
				if (this.showControls) {
					setTimeout(() => {
						this.showControls = this.playStatus == "pause"
					}, 3000)
				}
				// console.log(this.userId)
				const param = {
					code: this.code,
					companyId: this.companyId,
					companyUserId: this.companyUserId,
					linkId: this.linkId,
					userId: this.userId,
					videoId: this.videoId
				}
				clickCourse(param).then(res => {
					console.log(res)
				})
			},
			play(initialTime) {
				if (!this.videoContext) {
					this.videoContext = uni.createVideoContext('myVideo')
				}
				this.$nextTick(() => {
					if (initialTime) {
						this.videoContext.seek(initialTime);
					}
					this.videoContext.play()
				})
				setTimeout(() => {
					this.showControls = false
				}, 3000)
			},
			pause() {
				if (!this.videoContext) {
					this.videoContext = uni.createVideoContext('myVideo')
				}
				this.videoContext.pause()
			},
			handleFullScreen() {
				if (!this.videoContext) {
					this.videoContext = uni.createVideoContext('myVideo')
				}
				if (this.isFullscreen) {
					this.videoContext.exitFullScreen()
				} else {
					this.videoContext.requestFullScreen()
				}
				setTimeout(() => {
					this.showControls = false
				}, 3000)
			},
			// 当开始/继续播放时触发play事件
			getPlay() {
				this.showPlay = false
				this.playStatus = "play"
			},
			// 暂停
			getPause() {
				this.playStatus = "pause"
			},
			// 结束
			getEnded() {
				this.playStatus = "end"
			},
			// 全屏
			fullscreenchange(e) {
				this.isFullscreen = e.detail.fullScreen
			},
			// 视频进度条更改
			progressChange(e) {
				this.bufferRate = Math.ceil(e.detail.buffered)
			},
			// 展开简介
			handleExpand() {
				this.isExpand = !this.isExpand
			},
			getH5CourseByVideo() {
				this.loading = true
				getH5CourseByVideoId({
					videoId: this.videoId
				}).then(res => {
						this.loading = false
						if (res.code == 200) {
							// console.log(res)
							this.courseInfo = res.data
							uni.setNavigationBarTitle({
								title: this.courseInfo && this.courseInfo.title ? this.courseInfo
									.title : ''
							});
							this.$nextTick(() => {
								this.playStatus = "start"
								this.videoContext = uni.createVideoContext('myVideo')
							})
						}
						this.getHeight()
						this.getDescHeight()
					},
					rej => {
						this.loading = false
					}
				).catch(() => {
					this.loading = false
				})
			},
			getH5CourseVideoDetailsM() {
				console.log(1433223);
				// 不要同名  方法名字喝接口名字不能这样搞
				// {videoId: this.videoId}
				console.log(this.isvip == 1)
				getH5CourseVideoDetails(this.urlOption).then(res => {
						console.log(res);
						if (res.code == 200) {
							// console.log(res.course.videoUrl)
							this.videoUrl = res.course.videoUrl
							// this.videoUrl = res.course && res.course.lineOne ? res.course.lineOne : ""
							this.config = res.config || {}
							this.duration = res.course && res.course.duration ? res.course.duration : 0
							this.playDuration = res.playDuration || 0
							let videoContext = uni.createVideoContext('myVideo');
							videoContext.seek(this.playDuration);

							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.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.getDescHeight()
					},
					rej => {}
				)
			},
			handleAnswer(item, option, idx) {
				const rate = (Number(this.playTime || 0) / Number(this.duration || 0)).toFixed(2)
				if (Number(this.duration || 0) == 0 || rate * 100 < Number(this.config.answerRate || 0)) {
					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() {
				// 登录
				this.courseAnswer()
			},
			// 答题
			courseAnswer() {
				const rate = (this.playTime / this.duration).toFixed(2)
				if (Number(this.duration || 0) == 0 || rate * 100 < Number(this.config.answerRate || 0)) {
					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 = {
					questions: questions,
					videoId: this.videoId,
					userId: this.userId,
					...this.urlOption
				}
				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 = `将发送奖励至您的微信账户`
								this.$refs.answerPopup.open("center")
							}
						} else {
							if (res.msg == "该课题到达答错次数限制") {
								this.errTitle = "答题次数超过限制"
								this.errDesc = "以后的课程要认真学习哦"
								this.$refs.answerPopup.open("center")
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						}
					},
					rej => {}
				)
			},
			closeAnswerPopup() {
				this.$refs.answerPopup.close()
				if (this.errTitle == '恭喜你，回答正确') {
					const param = {
						...this.urlOption,
						rewardType: Number(this.currentReward),
						userId: this.userId
					}
					console.log(param)
					sendReward(param).then(res => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					})
				}
			},
			// 线路
			openPop() {
				this.$refs.popup.open('bottom')
			},
			close() {
				this.$refs.popup.close()
			},
			handleLine(index) {
				this.lineIndex = index
				this.videoUrl = this.lineList[index]
				this.$nextTick(() => {
					this.tipsOpen = false
					this.videoContext = null

					this.play(this.playTime)
				})
				this.close()
			},
			// 温馨提示
			openTipsPop() {
				this.$refs.tipsPopup.open()
				this.tipsOpen = true
				this.pause()
			},
			closeTipsPop() {
				this.$refs.tipsPopup.close()
				this.$nextTick(() => {
					if (!this.videoContext) {
						this.videoContext = uni.createVideoContext('myVideo')
					}
					this.videoContext.play()
				})
			},
			closeKFPop() {
				this.$refs.kfPopup.close()
			},
			// 获取code 
			getWechatCode() {
				// 没有code
				if (isWechat) {
					let appid = "wx93ce67750e3cfba3"; //微信APPid
					let code = this.getUrlCode().code; //是否存在code
					// 换成本地就不行
					let local = window.location.href; //这个是获取浏览器当前地址 有参数都会一起获取
					if (code == null || code === "") {
						let urlPaths = local.split("/courseh5");
						uni.setStorageSync('beforLoginPage', urlPaths[1]);

						//不存在就打开上面的地址进行授权 
						// 跳转授权  redirect_uri：local是当前地址  当发布到线上就是线上那个地址  也就是用户打开浏览器的地址 
						// 开发的时候是本地的地址8081  
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
							appid +
							"&redirect_uri=" +
							encodeURIComponent(local) +
							"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
						// 后面的就是授权 snsapi_userinfo弹出授权弹窗     授权成功后  返回redirect_uri给的页面 
						// 当前页面  在授权成功微信已经给了code了   由于替换成 http://h5.wxcourse.cdwjyyh.com 地址 所以跳转到线上  而不是本地  线上地址
					} else {
						this.code = code;
						this.loginByMp()
					}
				}
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				return theRequest;
			},
			loginByMp() {
				if (this.code == null) {
					return;
				}
				uni.showLoading({
					title: "处理中..."
				});
				let that = this;
				var data = {
					code: this.code
				}
				loginByMp(data).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							// 登录后存token和用户信息
							uni.setStorageSync('UserAppToken', res.token);
							uni.setStorageSync('userInfo', JSON.stringify(res.user));
							console.log(uni.getStorageSync('userInfo', JSON.stringify(res.user)))
							this.users = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync(
								"userInfo")) : {}
							this.userId = res.user.userId
							let beforLoginUrl = uni.getStorageSync('beforLoginPage');
							// console.log("beforLoginUrl:"+beforLoginUrl);
							// console.log(`登录成功后跳转${beforLoginUrl}`);
							uni.reLaunch({
								url: beforLoginUrl
							});
							this.isLOOK()
							window.location.href = window.location.href
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					},
					err => {}
				);
			},
			getFinishCourseVideo() {
				// {videoId: this.videoId,duration:this.playTime}
				const param = {
					duration: this.playTime,
					userId: this.userId,
					...this.urlOption
				}
				getFinishCourseVideo(param)
			},
			getInternetTraffic() {
				const playVideoTime = Math.ceil(this.playTime / this.duration * 100) // 播放百分比
				if (this.bufferRate == 0 || this.bufferRate < playVideoTime) {
					this.bufferRate = playVideoTime
				}
				if (this.bufferRate == 0) return
				const param = {
					uuId: this.uuId,
					duration: this.playTime,
					bufferRate: Number(this.bufferRate.toFixed(2)),
					...this.urlOption
				}
				// this.getInternetTraffic(param)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.imgshe {
		display: flex;
		flex-direction: row-reverse
	}

	.point-box {
		height: 100%;
		width: 100%;

		.xu-box {
			border: #f5f5f5 4rpx dashed;
			padding: 20rpx 20rpx;
		}
	}

	.uni-popup {
		top: 10%;
		left: 12%;
	}

	.quxiao {
		width: 30%;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border: 2rpx solid #ccc;
		border-radius: 8rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.sure {
		width: 30%;
		background-color: #1777ff;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 8rpx;
		color: #fff;
		margin-left: 10rpx;
	}

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

	::v-deep {
		.uni-video-bar {
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
			;
		}

		.uni-video-progress-buffered {
			width: var(--progress) !important;
			background-color: #FF5C03;
		}

		.uni-video-inner {
			background-color: #FF5C03;
		}
	}

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

	.err {
		color: #f56c6c !important;
	}

	.kfqrcode-box {
		background-color: #fff;
		border-radius: 16rpx;
		max-width: 560rpx;
		padding: 80rpx 32rpx;
		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: 30rpx;
		color: #222;
		position: relative;

		.kfqrcode {
			height: 320rpx;
			width: 320rpx;
			margin-bottom: 40rpx;
		}
	}

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

	.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 {
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx 32rpx;
		position: relative;

		&-head {
			height: 60rpx;
			margin-bottom: 30rpx;
			text-align: center;
			overflow-y: auto;
			color: #414858;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;

			.close-icon {
				position: absolute;
				right: 0;
				top: 0;
				height: 40rpx;
				width: 40rpx;
			}
		}

		&-content {
			height: 20vh;
			overflow-y: auto;
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 32rpx;

			.line-item {
				display: inline-block;
				min-width: 200rpx;
				height: 60rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				border-radius: 50rpx;
				overflow: hidden;
				background-color: #f7f7f7;
				text-align: center;
				color: #414858;
				font-size: 28rpx;
				line-height: 60rpx;
			}

			.line-active {
				color: #f56c6c !important;
				background-color: #fef0f0 !important;
			}
		}
	}

	.content {
		padding-bottom: calc(var(--window-bottom) + 164rpx);

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

			.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;
			ont-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;
			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: 24rpx 32rpx;
			// padding-bottom: calc(var(--window-bottom) + 32rpx);
			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;
				}
			}
		}
	}

	.copybtn {
		background: #FF5C03;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		border-radius: 80rpx;
		padding: 20rpx 0;
	}

	.VIPvie {
		width: 580rpx;
		background: linear-gradient(to bottom, #c3dbfe 2%, #f6fbfe 50%);
		border-radius: 20rpx;
		height: 600rpx;
		position: relative;

		image {
			position: absolute;
			top: -220rpx;
			left: 16%;
		}
	}

	.codeimg {
		position: absolute;
		z-index: 9999;
		left: 40rpx;
		top: 40rpx;
	}

	#codeurl {
		position: relative;
	}
</style>