saas_miniprogram/pages3/polyv/detail.vue

<template>
	<view class="polyv_detail">
		<uni-nav-bar left-icon="back" :statusBar="true" fixed="true" :title="detail.courseName || '课程详情'"
			@clickLeft="clickLeft"></uni-nav-bar>
		<view id="top">
			<view class="video_box" v-if="!playVid">
				<image :src="$method.splitImgHost(goodsData.coverUrl)" mode="widthFix"
					style="width: 100%; height: 421rpx">
				</image>
			</view>
			<view v-else-if="playSource == 1">
				<my-player ref="player" :playVid="playVid" :autoplay="autoplay" :allowSeek="isAllowSeek"
					:playbackRate="playbackRate" :videoCurrentTime="videoCurrentTime || 0" @playing="playing"
					@pause="pause" @ended="ended" @loadedmetadata="loadedmetadata" @timeupdate="timeupdate"
					@playerError="playerError" @studyLog="studyLog"></my-player>
			</view>
			<view v-else>
				<!-- <my-player2 src="/pages3/tencent/detail?vid=xxx" vid="xxx"></my-player2> -->
				<my-player2 ref="player2" :playFileId="playVid" :autoplay="autoplay" :controlBar=true
					:playbackRate="playbackRate" :currentTime="videoCurrentTime || 0" @playing="playing" @isSeeking="isSeeking" @seeked="seeked" @pause="pause"
					@ended="ended" @loadedmetadata="loadedmetadata" @timeupdate="timeupdate" @playerError="playerError"
					@studyLog="studyLog"></my-player2>
			</view>
			<view class="course_name">
				<view class="course_titles">
					<view class="video_t1" :class="{ one: !goodsData.buyNote }">{{
            detail.courseName
          }}</view>
					<view class="notice_wrap" v-if="goodsData.buyNote">
						<view class="video_t1_t" @click="studyNotice"> 学员须知 </view>
					</view>
					<view class="toggle_course" v-if="goodsTeacher.length > 1" @click="changeCourses()">
						<image class="img" src="/pages3/static/imgs/toggle.png" mode="widthFix"></image>
						<view class="toggle_name">切换课程</view>
						<view class="numbers">共{{ goodsTeacher.length }}门</view>
					</view>
				</view>
			</view>
			<u-line color="#D6D6DB" />
			<view>
				<view>
					<u-tabs :item-width="itemWidth()" :list="list" font-size="32" bar-width="24" :current="current"
						@change="change" active-color="#007AFF"></u-tabs>
				</view>
			</view>
			<u-line color="#D6D6DB" />
		</view>
		<view class="box" :class="{ first_ml: current == 0 }">
			<scroll-view class="box_in" scroll-y="true">
				<!--目录 -->
				<view v-show="current == 0">
					<view class="top__header" v-if="livingItem" @click="goLive(livingItem)">
						<image class="img" src="/pages3/static/imgs/live.png" mode="widthFix"></image>
						<view class="note">正在直播中</view>
						<view class="title">{{ livingItem.sectionName }}</view>
					</view>
					<course-tree v-if="sectionItem.id || sectionItem.sectionId" :sectionMaxNum="goodsData.sectionMaxNum"
						:isRebuild="false" :isBuy="true" @isHaverebuild="isHaverebuild = true"></course-tree>
				</view>
				<!--讲义 -->
				<view v-if="current == 1">
					<handouts-box :handoutsId="goodsData.handoutsId"></handouts-box>
				</view>
				<!--笔记 -->
				<view v-if="current == 2">
					<note-Box @jumpNote="jumpNote"></note-Box>
				</view>
				<!--答疑 -->
				<view v-if="current == 3">
					<answer-box :userId="userInfo ? userInfo.userId : 0"></answer-box>
				</view>
				<!--重修目录 -->
				<view v-if="current == 4">
					<course-tree v-if="sectionItem.id || sectionItem.sectionId" :sectionMaxNum="goodsData.sectionMaxNum"
						:isRebuild="true" :isBuy="true"></course-tree>
				</view>
			</scroll-view>
		</view>
		<u-popup v-model="noticeShow" class="notice_modal" mode="center" border-radius="28" width="650rpx"
			height="622rpx" :mask-close-able="false">
			<view class="content">
				<view class="title">学员须知</view>
				<scroll-view scroll-y="true">
					<view class="text" v-html="
              goodsData.buyNote && goodsData.buyNote.replace(/\n|\r\n/g, '<br>')
            ">
					</view>
				</scroll-view>
				<view class="had_read" :class="{ gray: CountTo > 0 }" @click="noticeConfirm()">
					<text v-if="CountTo > 0">请阅读学员须知，{{ " " + CountTo + "s" }}后可关闭</text>
					<text v-else>我已阅读学员须知</text>
				</view>
			</view>
		</u-popup>
		<!-- 倒计时提交 -->
		<u-popup v-model="noticeShow1" class="notice_modal" mode="center" border-radius="28" width="650rpx"
			height="262rpx" :mask-close-able="false">
			<view class="content">
				<view class="title">提示</view>
				<view class="had_read">
					<text v-if="CountTo1 >= 0">视频学习时长不达标，请等待</text>
					<text v-if="CountTo1 >= 0">{{ " " + CountTo1 + "s" }}</text>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showMark" title="提示" @confirm="markConfirm" @cancel="toBack" confirm-text="复制学习网址"
			:show-cancel-button="true" cancel-text="关闭">
			<view class="slot-content">
				<view>您的学习账号已经开通，请按照步骤操作，进行学习。</view>
				<view>1.复制学习地址:{{ markContent }}</view>
				<view>2.在【浏览器中】打开复制的学习网址</view>
				<view>3.打开学习网址后，选择【个人用户】进行登录</view>
				<view>(1)账号：您个人的身份证号码</view>
				<view>(2)密码：身份证号码，再加111111</view>
			</view>
		</u-modal>

		<!-- 切换课程弹窗 -->
		<u-popup v-model="toggleCourseShow" mode="bottom" border-radius="40" :mask-close-able="false">
			<view class="popup_box">
				<view class="check_head">
					<view class="headers">
						<view class="grade">切换课程</view>
						<u-icon name="close" color="#9C9C9C" size="40" @click="closePop()"></u-icon>
					</view>
					<view class="coruse_num">共{{ goodsTeacher.length }}门</view>
					<view class="menuSel">
						<scroll-view class="sub_sliper" scroll-x="true">
							<view v-for="(item, index) in subList" :key="index"
								style="margin-right: 50rpx; display: inline-block">
								<view class="r_t1" :class="{ nactive: subIndex == index }" @click="cMenu(item, index)">
									{{ item.subjectName }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="check_con">
					<scroll-view scroll-y="true" style="height: 700rpx">
						<view v-for="(courseItem, gTindex) in goodsTeacher" :key="gTindex">
							<view v-for="(item, index) in courseItem.courseList" :key="index" v-show="
                  item.subjectId === newActiveSubjectId || !newActiveSubjectId
                ">
								<view class="course_items" v-if="item.show && item.show == 1">
									<view class="course_lefts">
										<view class="course_title">
											{{ item.courseName }}
										</view>
										<view v-if="courseItem.teaList && courseItem.teaList.length > 0"
											class="teacher_names">
											<view v-for="(tea, tindex) in courseItem.teaList" :key="tindex"
												class="names">{{ tea.aliasName }}
											</view>
										</view>
										<view class="course_pros">
											学习进度
											<text>
												{{ item.stuAllNum + item.recordNum }}/{{
                          item.secAllNum + item.examNum
                        }}</text>
										</view>
									</view>
									<view class="course_rights" @click="jump(item, gTindex, 'jump')">
										<view class="cicles">
											<u-icon name="arrow-right" color="#498AFE" size="20"></u-icon>
										</view>
										<view class="intoStudy">进入学习</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- 摄像头 -->
		<Popup-camera @submitPhoto="submitPhoto" :visible.sync="showCamera" ref="camera" />
	</view>
</template>

<script>
	import handoutsBox from "@/components/course/handoutsBox.vue";
	import courseTree from "@/components/course/courseTree.vue";
	import PopupCamera from "../../components/popup/camera.vue";
	import myPlayer from "@/components/myPlayer/polyvPlayer.vue";
	import myPlayer2 from "@/components/myPlayer2/tcPlayer.vue";
	import noteBox from "@/components/course/noteBox.vue";
	import answerBox from "@/components/course/answerBox.vue";
	import {
		mapGetters,
		mapMutations
	} from "vuex";
	import {
		lockAction
	} from "../../utils/lock";
	import {
		debounce,
		throttle,
		reload
	} from "../../utils/common";
	export default {
		components: {
			handoutsBox,
			myPlayer,
			myPlayer2,
			noteBox,
			answerBox,
			courseTree,
			PopupCamera,
		},
		data() {
			return {
				markContent: "http://admin.zhujianpeixun.com/",
				showMark: false,
				lockTimer: null,
				orderGoodsId: 0,
				noticeShow: false,
				showSet: false,
				courseId: 0,
				current: 0,
				vid: "",
				goodsId: 0,
				goodsData: {},
				showCamera: false,
				goodsPlayConfig: null,
				autoplay: false,
				isAllowSeek: "no",
				playbackRate: [1.0],
				timer: null,
				goodsPhotographConfig: null,
				playTime: 0, // 播放时刻
				avatarUrl: "",
				ossAvatarUrl: "",
				gradeId: 0,
				chapterId: 0,
				moduleId: 0,
				videoCurrentTime: 0,
				photoIndex: 0,
				photoNum: 0,
				photoList: [], //拍照的时间点
				photoConfig: false, //是否配置好拍照次数
				photoHistoryList: [], //已拍照历史的下标点
				sectionItem: {},
				// playSource: 2,
				isRebuild: false, //视频是否从重修目录点击
				livingItem: "",
				option: null,
				toggleCourseShow: false, // 切换课程弹窗
				courseList: [], // 课程列表
				subList: [],
				subIndex: 0,
				goodsTeacher: [],
				teacherList: [],
				teacherIndex: 0,
				newActiveSubjectId: "", //当前选中ID
				compareFaceData: 0, // 拍照匹配相似度
				prendreAutoCarme: false, // 是否发起授权相机
				CountTo: 0, // 倒计时
				CountTo1: 0,
				menuAllList: [],
				curPlayIndex: 0, // 正在播放的节的下标
				faceUrl: "",
				erJianErZao: false,
				jjShiGongYuan: false,
				pauseTime: 0,
				pauseTimer: null,
				isReach: false,
				noticeShow1: false,
				refPlv: null,
				isCache: false,
				isHaverebuild: false,
				isPlaying: false,
				beforeHideIsPlaying: false,
				isLeave: false,
				text: "",
				throttleFn: throttle(this.postStudyRecord, 15000),
				isSeekingIndex: false
			};
		},
		computed: {
			...mapGetters(["userInfo", "config"]),
			playSecIsLearn() {
				if (!this.playVid) {
					return false;
				}
				return this.sectionItem.learning != 1;
			},
			orderNum() {
				return this.goodsData.goodsLearningOrder;
			},
			list() {
				let list = [{
						name: "目录",
					},
					{
						name: "讲义",
					},
					{
						name: "笔记",
					},
					{
						name: "答疑",
					},
				];

				if (this.isHaverebuild) {
					list.push({
						name: "重修目录"
					});
				}
				return list;
			},
			params: function() {
				return (keys = ["orderGoodsId", "goodsId", "courseId"]) => {
					let params = {};
					for (const key of keys) {
						params[key] = this[key];
					}
					return params;
				};
			},
			detail() {
				if (!this.courseId || !this.courseList.length) {
					return {};
				}
				return this.courseList.find((e) => e.courseId == this.courseId);
			},
			sectionId() {
				return this.sectionItem.sectionId || this.sectionItem.id;
			},
			playVid() {
				return this.sectionItem.recordingUrl;
			},
			playSource() {
				return this.sectionItem.sectionId == 7969 ? 1 : 2;
			},
			isPlayRebuild() {
				return this.sectionItem.rebuild != 1;
			},
		},
		async onLoad(option) {
			if (option.obj) {
				console.log("检测option.obj", option)
				console.log("解析后的option.obj", JSON.parse(decodeURIComponent(option.obj)))
				option = JSON.parse(decodeURIComponent(option.obj));
			}
			if (option.isOther) {
				this.showMark = true;
				return;
			}
			this.option = option;
			let {
				skipPort,
				id,
				goodsId,
				orderGoodsId,
				gradeId,
				informId
			} = option;
			this.orderGoodsId = Number(orderGoodsId) || "";
			this.courseId = Number(id) || "";
			this.goodsId = Number(goodsId);
			this.gradeId = Number(gradeId);
			this.isLeave = false;
			uni.addInterceptor("navigateTo", {
				success: (e) => {
					this.isLeave = true;
					this.isCache = true;
				},
			});
			if (skipPort) {
				console.log("Jos")
				await this.$method.skipLogin(skipPort);
			}
			console.log('come in')
			if (this.$method.isGoLogin()) {
				return;
			}
			if (!this.lockTimer) {
				lockAction();
				this.lockTimer = setInterval(lockAction, 10000);
			}
			// 公众号模板消息的数据埋点
			informId && this.clickOfficial(informId);
			this.init();
		},
		async onShow() {
			if (!this.$method.isLogin()) {
				return;
			}
			if (this.isCache) {
				console.log("返回刷新数据");
				this.isCache = false;
				this.sectionItem = {};
				this.beforeHideIsPlaying = false;
				reload(this.option);
				return;
			}

			if (this.beforeHideIsPlaying) {
				console.log("显示重新播放");
				if (this.text) {
					this.refPlv.playPause();
					return;
				}
				this.refPlv.resumeVideo();
			}
		},
		onUnload() {
			console.log("onUnload");
			if (this.isPlaying) {
				this.postStudyRecord();
			}
			this.refPlv = null;
			uni.$off();
			this.clearPauseTimer();
			uni.removeInterceptor("navigateTo");
			if (this.lockTimer) {
				clearInterval(this.lockTimer);
				this.$api.lockDelLock({
					action: "jxjy",
					uuid: this.$method.getUuid(),
				});
			}
		},
		onHide() {
			console.log('隐藏页面')
			this.beforeHideIsPlaying = this.isPlaying;
			if (this.isPlaying) {
				this.refPlv.playPause();
			}
		},
		mounted() {},
		methods: {
			...mapMutations(["updateChapterOpen", "updateLiveLast"]),
			async init() {
				if (this.playSource == 2) {
					this.isAllowSeek = true;
				} else {
					// #ifdef MP-WEIXIN
					this.isAllowSeek = "no";
					// #endif
					// #ifdef H5
					this.isAllowSeek = "on";
					// #endif
				}
				this.photoList = [];
				this.courseList = [];
				this.photoConfig = false;
				await this.isCanLearn();
				this.courseCourseList();
			},
			// 七大员是否能进入学习
			async qCheckIsCanLearn() {
				let res = await this.$api.qCheckIsCanLearn(this.orderGoodsId);
				if (res.data.code !== 200) {
					uni.showModal({
						showCancel: false,
						title: "提示",
						content: res.data.msg,
						success: (resultst) => {
							uni.navigateBack();
						},
					});
					return Promise.reject();
				}
				let res1 = await this.$api.syncSevenPublicClass({
					orderGoodsId: this.orderGoodsId,
				});
				if (res1.data.code !== 200) {
					uni.showModal({
						showCancel: false,
						title: "提示",
						content: "无法进入学习！",
						success: (resultst) => {
							uni.navigateBack();
						},
					});
					return Promise.reject();
				}
			},
			// 新增微信公众号模板消息点击数据
			clickOfficial(informId) {
				this.$http({
					url: "/data/click",
					method: "post",
					data: {
						informId
					},
				});
			},
			// 点击课程目录
			cMenu(item, index) {
				this.subIndex = index;
				this.newActiveSubjectId = item.subjectId;
			},
			courseCourseList() {
				this.$api
					.courseCourseList({
						pageNum: 1,
						pageSize: 200,
						...this.params(["goodsId", "orderGoodsId", "gradeId"]),
					})
					.then((res) => {
						if (res.data.code == 200) {
							this.courseList = res.data.rows;
							if (res.data.total > 1) {
								// 科目
								this.subList = [{
									subjectId: 0,
									subjectName: "所有"
								}];
								this.courseList.forEach((item) => {
									if (!this.subList.find((e) => e.subjectId == item.subjectId)) {
										this.subList.push(item);
									}
								});
								this.getUserWatchLast();
							} else {
								this.originOnShow();
								this.originMounted();
							}
						}
					});
			},
			// 查询用户最后一次看的录播的信息
			getUserWatchLast() {
				this.$http({
					url: "/study/record/getUserWatchLast",
					method: "get",
					data: {
						orderGoodsId: this.orderGoodsId,
					},
				}).then((res) => {
					if (res.data.code == 200 && res.data.data) {
						this.courseId = res.data.data.courseId;
					}
					if (!this.courseId) {
						this.courseId = this.courseList[0].courseId;
					}
					this.originOnShow();
					this.originMounted();
					//获取商品双师资模板
					this.getCourseTeacher(this.courseList);
				});
			},
			getCourseTeacher(rows) {
				this.goodsTeacher = [];
				//获取商品双师资模板
				this.$api
					.courseTeacherList({
						goodsId: this.goodsId,
					})
					.then((res1) => {
						if (res1.data.data && res1.data.data.length > 0) {
							//课程老师模板
							let teacherTel = res1.data.data;
							//商品课程
							let courses = rows;
							teacherTel.forEach((tea) => {
								let dataList = [];
								let teacherList = [];
								courses.forEach((item) => {
									let data = tea.courseList.filter(
										(x) => x.courseId == item.courseId
									);
									if (data && data.length > 0) {
										dataList.push(item);
										teacherList = tea.courseList;
									}
								});
								let result = {
									teaList: teacherList,
									courseList: dataList,
								};
								this.goodsTeacher.push(result);
							});
							if (this.goodsTeacher && this.goodsTeacher.length > 0) {
								let courseIds = [];
								this.goodsTeacher.forEach((item) => {
									item.courseList.forEach((course) => {
										courseIds.push(course.courseId);
									});
								});
								if (courseIds.length > 0) {
									courses.forEach((item) => {
										if (!courseIds.includes(item.courseId)) {
											let data = {
												teaList: [],
												courseList: [],
											};
											data.courseList.push(item);
											this.goodsTeacher.push(data);
										}
									});
								}
								this.goodsTeacher.forEach((item) => {
									if (item.courseList && item.courseList.length > 0) {
										item.courseList[0].show = 1;
									}
								});
							}
						} else {
							//没有双师资模板
							rows.forEach((item) => {
								item.show = 1;
								let data = {
									teaList: [],
									courseList: [],
								};
								data.courseList.push(item);
								this.goodsTeacher.push(data);
							});
						}
						this.goodsTeacher.forEach((item) => {
							if (item.courseList.some((x) => x.courseId == this.courseId)) {
								this.teacherList = item.teaList;
							}
						});
					});
			},
			erJianErZaoPauseTip() {
				if (this.playSecIsLearn && this.erJianErZao && !this.isLeave) {
					if (this.pauseTimer) {
						return;
					}
					this.pauseTime = Date.now();
					this.pauseTimer = setInterval(() => {
						console.log("暂停时间", Date.now() - this.pauseTime, this.pauseTime);
						if (Date.now() - this.pauseTime > 5 * 60 * 1000) {
							// 5 * 60 * 1000
							this.refPlv.exitFullScreen();
							this.text = "暂停";
							if (this.showCamera) {
								this.text = "拍照停留";
								this.closeCamera();
							}
							uni.showModal({
								title: "提示",
								showCancel: false,
								content: `检测${this.text}时间过长，刷新当前页面`,
								cancelText: "取消",
								confirmText: "确定",
								success: (res) => {
									this.text = "";
									reload(this.option);
									// #ifdef MP-WEIXIN
									this.sectionItem = {};
									// #endif
								},
							});
							this.clearPauseTimer();
						}
					}, 5000);
				}
			},
			// 原来onshow里面的内容
			async originOnShow() {
				await this.studyRecordMenuAllList();
				// 消息过来 定位某个节
				if (this.option.noteSecond) {
					this.jumpNote({
						sectionType: 1,
						...this.option,
					});
					return;
				}
				this.studyRecordQueryLiveLast();
			},
			// 原来的mouted内容
			originMounted() {
				uni.$on(
					"getSection",
					debounce((item) => {
						if (this.playSource == 2) {
							if (!this.refPlv && this.playVid) {
								this.refPlv = this.$refs.player2;
							}
						} else {
							if (!this.refPlv && this.playVid) {
								this.refPlv = this.$refs.player;
							}
						}
						if (this.isPlaying) {
							this.refPlv.playPause();
						}
						this.photoConfig = false;
						this.photoList = [];
						this.moduleId = item.moduleId || 0;
						this.chapterId = item.chapterId || 0;
						this.sectionItem = item;
						this.playVideo(item);
						this.postStudyRecord(0);
					})
				);
				uni.$on("isRebuild", (item) => {
					this.isRebuild = item;
				});
				this.updateChapterOpen(true);
			},
			clearPauseTimer() {
				if (this.pauseTimer) {
					this.pauseTime = 0;
					clearInterval(this.pauseTimer);
					this.pauseTimer = null;
				}
			},
			changeCourses() {
				this.toggleCourseShow = true;
			},
			closePop() {
				this.toggleCourseShow = false;
			},
			async activeFunc(item, index) {
				this.teacherIndex = index;
				let findResult = "";
				this.goodsTeacher.forEach((citem, index) => {
					citem.courseList.forEach((e, e_index) => {
						if (e.courseId == item.courseId) {
							findResult = e;
						}
					});
				});

				this.jump(findResult, 1);
			},
			// 进入学习
			async jump(item, index, type) {
				if (this.courseId === item.courseId) {
					this.toggleCourseShow = false;
					return;
				}
				if (this.orderNum == 2 && index != 0) {
					let prevItem = this.courseList[index - 1];
					if (
						prevItem.stuAllNum + prevItem.recordNum <
						prevItem.secAllNum + prevItem.examNum
					) {
						uni.showToast({
							icon: "none",
							title: "请按顺序学完上一课再学习这一课",
						});
						return;
					}
				}
				// 打回 需重修
				if (item.rebuild === 0) {
					this.$navTo.togo("/pages2/learn/details", {
						id: item.courseId,
						...this.params(["goodsId", "orderGoodsId", "gradeId"]),
					});
					return;
				}
				if (type) {
					this.teacherIndex = 0;
					this.goodsTeacher.forEach((citem) => {
						if (citem.courseList.some((x) => x.courseId == item.courseId)) {
							this.teacherList = citem.teaList;
						}
					});
				}
				this.sectionItem = {};
				this.toggleCourseShow = false;
				this.courseId = item.courseId;
				this.originOnShow();
			},
			clickLeft() {
				uni.switchTab({
					url: "/pages/learn/index",
				});
			},
			toBack(delta = 1) {
				uni.navigateBack({
					delta,
				});
			},
			markConfirm() {
				uni.setClipboardData({
					data: this.markContent,
					success: () => {
						setTimeout(this.toBack, 1000);
					},
				});
			},
			noticeConfirm() {
				if (this.CountTo <= 0) {
					this.noticeShow = false;
					if (this.autoplay) {
						this.refPlv && this.refPlv.resumeVideo();
					}
					this.$api.baseHandoutTip({
						orderGoodsId: this.orderGoodsId,
					});
				}
			},
			baseHandoutTipList() {
				this.$api
					.baseHandoutTipList({
						orderGoodsId: this.orderGoodsId,
					})
					.then((res) => {
						if (res.data.rows.length == 0) {
							this.noticeShow = true;
							this.CountTo = 30;
							var timer = setInterval(() => {
								this.CountTo--;
								if (this.CountTo < 0) {
									clearInterval(timer);
								}
							}, 1000);
						}
					});
			},
			/**
			 * 获取上次观看的直播
			 */
			studyRecordGetLastLive() {
				this.$api
					.studyRecordGetLastLive({
						orderGoodsId: this.orderGoodsId,
						courseId: this.courseId,
					})
					.then((res) => {
						this.updateLiveLast(res.data.data);
					});
			},
			async initPlayVideo(sectionItem) {
				this.moduleId = sectionItem.moduleId || 0;
				this.chapterId = sectionItem.chapterId || 0;
				this.sectionItem = sectionItem;
				if (sectionItem.sectionType == 1) {
					//录播
					this.playVideo(sectionItem);
				} else if (sectionItem.sectionType == 2) {
					//直播
					this.studyRecordGetLastLive();
				} else if (sectionItem.sectionType == 3) {
					//回放
					this.playVideo(sectionItem);
				} else if (sectionItem.doType == 2) {
					uni.showModal({
						title: "温馨提示",
						content: "当前节视频已学完，是否进入考试？",
						success: (res) => {
							if (res.confirm) {
								this.toQuestionBank(sectionItem);
							}
						},
					});
					return;
				}
			},
			async submitPhoto(url, compareFaceData) {
				this.ossAvatarUrl = url;
				this.compareFaceData = compareFaceData;
				this.postCoursePhotoRecord()
					.then(async (res) => {
						console.log("showCamera1", this.showCamera)
						this.photoHistoryList[this.photoIndex] = true;
						await this.postStudyRecord();
						this.closeCamera();
						if (this.isReach) {
							console.log("showCamera2", this.showCamera)
							await this.postStudyRecord(1);
							this.nextSection();
							console.log("showCamera3", this.showCamera)
							return;
						}
						console.log("showCamera4", this.showCamera)
						this.refPlv.resumeVideo();

					})
					.catch((err) => {
						uni.showToast({
							title: "上传接口报错，请重新拍照上传" + err,
							icon: "none",
						});
						this.$refs["camera"].reTake();
					});
			},
			toQuestionBank(sectionItem) {
				// type 1模块 2章 3节 4章卷 5模块卷
				uni.navigateTo({
					url: "/pages2/class/questionBank?courseId=" +
						this.courseId +
						"&gradeId=" +
						this.gradeId +
						"&isFromVideo=1&id=" +
						sectionItem.id +
						"&goodsid=" +
						this.goodsId +
						"&moduleId=" +
						(sectionItem.moduleId || 0) +
						"&chapterId=" +
						(sectionItem.chapterId || 0) +
						"&orderGoodsId=" +
						this.orderGoodsId +
						"&type=" +
						(sectionItem.type == 4 ? 1 : 3) +
						"&learning=" +
						sectionItem.studyStatus +
						"&isBackVideo=" +
						1,
				});
			},
			studyRecordQueryLiveLast() {
				this.$api
					.studyRecordQueryLiveLast({
						gradeId: this.gradeId,
						orderGoodsId: this.orderGoodsId,
						courseId: this.courseId,
					})
					.then((res) => {
						let {
							data
						} = res.data;
						if (!data.sectionId) {
							data = this.menuAllList[0];
						}
						if (data.learning == 1 && this.orderNum == 2) {
							let next = this.menuAllList.find((e) => e.studyStatus != 1);
							next && (data = next);
						}
						this.initPlayVideo(data);
					});
			},
			goLive(item) {
				let moduleId = item.moduleId || 0;
				let chapterId = item.chapterId || 0;
				let sectionId = item.sectionId || item.menuId;
				let uuid = new Date().valueOf() + "";
				// buyCourse 是否购买课程：1是 0否
				let encode = encodeURIComponent(
					this.config.hostLive +
					"/pages/live/index?token=" +
					uni.getStorageSync("token") +
					"&userInfo=" +
					JSON.stringify(this.userInfo) +
					"&channelId=" +
					item.liveUrl +
					"&gradeId=" +
					this.gradeId +
					"&courseId=" +
					this.courseId +
					"&goodsId=" +
					this.goodsId +
					"&orderGoodsId=" +
					this.orderGoodsId +
					"&sectionId=" +
					sectionId +
					"&chapterId=" +
					chapterId +
					"&moduleId=" +
					moduleId +
					"&buyCourse=1" +
					"&ident=" +
					uuid
				);
				uni.navigateTo({
					url: `/pages5/webview/index?url=` + encode,
				});
			},
			studyRecordMenuAllList() {
				// study/record/menuAllList
				return this.$api
					.studMenuAllList({
						courseId: this.courseId,
						...this.params(["goodsId", "orderGoodsId", "gradeId"]),
					})
					.then((res) => {
						let nowTime = Number(new Date().getTime() / 1000).toFixed(0);
						if (res.data.data) {
							this.menuAllList = res.data.data.filter(
								(e) => e.doType != 1 || (e.doType == 2 && e.studyStatus == 1)
							);
							this.livingItem = res.data.data.find(
								(item) =>
								item.liveStartTime <= nowTime && item.liveEndTime > nowTime
							);
						}
						return Promise.resolve();
					});
			},
			async getbaseprofiletplists() {
				let {
					data: {
						code,
						rows
					},
				} = await this.$api.getbaseprofiletplists({
					goodsId: this.goodsId,
					orderGoodsId: this.orderGoodsId,
				});
				if (code === 200 && rows.length && rows[0].keyValue) {
					let baseRes = await this.$api.getbaseprofiletpId(this.goodsId);
					if (baseRes.data.code === 200 && baseRes.data.data) {
						let {
							data: {
								code,
								data
							},
						} = await this.$api.getbaseprofiletpgetInfo({
							goodsId: this.goodsId,
							orderGoodsId: this.orderGoodsId,
						});
						if (
							code === 200 &&
							(!data || (data.status === 3 && data.changeStatus === 1))
						) {
							uni.showModal({
								content: !data ?
									"请前往填写资料" : "资料审核不通过，请前往重新填写",
								cancelText: "返回",
								success: (resultst) => {
									if (resultst.confirm) {
										this.$navTo.togo("/pages2/verify/input", {
											id: this.goodsId,
											orderGoodsId: this.orderGoodsId,
										});
									}
									if (resultst.cancel) {
										uni.navigateBack();
									}
								},
							});
							return Promise.reject();
						} else if (data.status === 1 && JSON.parse(rows[0].keyValue2)[0]) {
							let {
								data: {
									code,
									data
								},
							} = await this.$api.getbaseprofileStampgetInfo({
								goodsId: this.goodsId,
								orderGoodsId: this.orderGoodsId,
							});
							if (
								code === 200 &&
								(!data || (data.status === 3 && data.changeStatus === 1))
							) {
								uni.showModal({
									content: !data ?
										"请前往填写盖章资料" : "资料盖章审核不通过，请前往重新填写",
									cancelText: "返回",
									success: (resultst) => {
										if (resultst.confirm) {
											this.$navTo.togo("/pages2/verify/input2", {
												id: this.goodsId,
												orderGoodsId: this.orderGoodsId,
											});
										}
										if (resultst.cancel) {
											uni.navigateBack();
										}
									},
								});
								return Promise.reject();
							}
						} else if (data.status !== 1 && baseRes.data.data.checkStatus == 1) {
							uni.showModal({
								content: "资料正在审核中，暂无法学习，请耐心等待！如需加急审核，请联系客服人员",
								cancelText: "返回",
								success: (resultst) => {
									if (resultst.confirm) {
										uni.navigateBack();
									}
									if (resultst.cancel) {
										uni.navigateBack();
									}
								},
							});
							return Promise.reject();
						}
					}
				}
				return Promise.resolve();
			},
			async isCanLearn() {
				this.option.isQ !== "" && (await this.qCheckIsCanLearn());
				await this.getGradeInfo();
				await this.getGoodsDetail();
			},
			/**
			 * 计算tabs宽度
			 */
			itemWidth() {
				return 100 / this.list.length + "%";
			},
			loadedmetadata(event) {
				if (this.playSource == 2) {
					this.refPlv = this.$refs.player2;
				} else {
					this.refPlv = this.$refs.player;
				}
			},
			getPhotoLastRecord() {
				let {
					chapterId,
					sectionId,
					moduleId
				} = this.sectionItem;
				let data = {
					...this.params(),
					sectionId: sectionId || 0,
					gradeId: this.gradeId,
					chapterId: chapterId || 0,
					moduleId: moduleId || 0,
				};
				this.$api.getPhotoLastRecord(data).then((res) => {
					if (res.data.code == 200) {
						//清空历史数据
						this.photoHistoryList = [];
						this.photoList = [];
						for (let i = 0; i < res.data.data.length; i++) {
							//-2存储随机拍照数组
							if (res.data.data[i].photoIndex == -2) {
								this.photoList =
									res.data.data[i].timeInterval &&
									res.data.data[i].timeInterval.split(",");
							} else {
								this.photoHistoryList.push(res.data.data[i].photoIndex);
							}
						}
					}
				});
			},
			//postTime 只提交随机时间
			postCoursePhotoRecord(postTime = false) {
				return new Promise((resolve, reject) => {
					let data = {
						...this.params(["orderGoodsId", "goodsId", "courseId", "gradeId"]),
						photo: this.ossAvatarUrl,
						sectionId: this.sectionId,
						photoTime: this.playTime || 0,
						photoIndex: postTime ? -2 : this.photoIndex, //从0算起,-2只提交随机时间
						photoNum: this.photoNum,
						chapterId: this.chapterId,
						moduleId: this.moduleId,
						timeInterval: postTime ? this.photoList.join(",") : "",
					};
					this.$api
						.coursePhotoRecord(data)
						.then((res) => {
							if (res.data.code == 200) {
								resolve();
							} else {
								reject();
							}
						})
						.catch((err) => {
							reject();
						});
				});
			},
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			},
			//配置随机拍照时间
			configPhoto(duration) {
				if ((this.photoConfig && this.photoList.length) || !this.isPlaying) {
					return;
				}
				let totalVideoTime = this.refPlv.getDuration();
				this.photoConfig = true;
				if (this.erJianErZao) {
					this.photoList = this.randomConfig(totalVideoTime, duration);
					console.log(this.photoList, "this.photoList");
					return;
				}
				//没有历史拍照间隔数据
				if (!this.photoList || this.photoList.length == 0) {
					// 46 * 60
					this.photoList = this.commonConfig(
						totalVideoTime,
						this.jjShiGongYuan ? (50 * 60) - 1 : undefined
					);
					this.postCoursePhotoRecord(true); //提交随机拍照时间数组
				}
				console.log(this.photoList, "this.photoList");
			},
			// 二建随机拍摄时间
			randomConfig(totalVideoTime, duration) {
				this.photoHistoryList = [];
				let photoList = [duration];
				let pre = duration;
				if (totalVideoTime > 300) {
					while (pre <= totalVideoTime) {
						pre += this.randomNum(780, 900);
						pre <= totalVideoTime && photoList.push(pre);
					}
					if (totalVideoTime - 300 > photoList.slice(-1)[0]) {
						photoList.push(this.randomNum(totalVideoTime - 180, totalVideoTime));
					}
				}
				return photoList;
			},
			// 随机前后五分钟
			commonConfig(totalVideoTime, fixS) {
				let photoList = [];
				// 固定间隔时间取
				if (fixS) {
					let num = Math.ceil(totalVideoTime / fixS);
					if (num == 1) {
						photoList.push(parseInt(totalVideoTime / 2));
					} else {
						for (let i = 0; i < num; i++) {
							photoList.push(parseInt(((totalVideoTime - 3) / num) * (i + 1)));
						}
					}
					this.photoNum = num;
				} else {
					photoList = [0];
					if (this.photoNum == 3) {
						if (totalVideoTime >= 900) {
							//大于15分钟
							let centerTime = Math.floor(totalVideoTime / 2); //获取中间时间
							let centerMinTime = centerTime - 300; //前后5分钟
							let centerMaxTime = centerTime + 300;
							let centerTakeTime = this.randomNum(centerMinTime, centerMaxTime);
							photoList.push(centerTakeTime); //中间拍一张
							let endMaxTime = totalVideoTime - 60;
							let endMinTime = totalVideoTime - 300;
							let endTakeTime = this.randomNum(endMinTime, endMaxTime);
							photoList.push(endTakeTime); //最后拍一张
						} else {
							//小于15分钟
							let centerTime = this.randomNum(
								(1 / 3) * totalVideoTime,
								(2 / 3) * totalVideoTime
							);
							photoList.push(centerTime);
							let endTakeTime = this.randomNum(
								(2 / 3) * totalVideoTime,
								totalVideoTime
							);
							photoList.push(endTakeTime);
						}
					}
				}
				return photoList;
			},
			studyNotice() {
				this.noticeShow = true;
			},
			//正常播放视频
			async playVideo(item) {
				let {
					learning,
					videoCurrentTime,
					recordingUrl
				} = item;
				this.videoCurrentTime =
					videoCurrentTime || (await this.getRecordLast(item));
				// 往前播3秒
				if (this.videoCurrentTime > 3) {
					this.videoCurrentTime -= 3;
				}

				this.sectionItem = item;
				// 查找拍照历史
				if ((this.photoNum > 0 || this.jjShiGongYuan || this.erJianErZao) && learning != 1) {
					await this.getPhotoLastRecord();
				}
				if (this.refPlv) {
					if (this.playSource == 2) {
						this.refPlv.changeFileId({
							fileId: recordingUrl,
							currentTime: this.videoCurrentTime,
						});
					} else {
						this.refPlv.changeVid({
							vid: recordingUrl,
							videoCurrentTime: this.videoCurrentTime,
						});
					}
				}
			},
			getRecordLast(sectionItem) {
				let {
					chapterId,
					sectionId,
					courseId,
					moduleId
				} = sectionItem;
				return new Promise((resolve) => {
					let data = {
						...this.params(),
						gradeId: this.gradeId || this.gradeId == 0 ? Number(this.gradeId) : null,
						sectionId: sectionId || 0,
						chapterId: chapterId || 0,
						moduleId: moduleId || 0,
					};
					this.$api.recordLast(data).then((res) => {
						resolve(res.data.data.videoCurrentTime);
					});
				});
			},

			jumpNote(item) {
				this.$u.toast("即将跳到笔记位置");
				if (this.sectionId != item.sectionId) {
					this.initPlayVideo({
						sectionType: 1,
						...item,
						videoCurrentTime: Number(item.noteSecond),
					});
				} else {
					this.refPlv.seekVideo(item.noteSecond);
				}
			},
			getGradeInfo() {
				// 即刻 1  待定2  日期3
				return this.$api.goodsGradeInfo(this.gradeId).then((res) => {
					if (res.data.code == 200) {
						let {
							data
						} = res.data;
						if (
							data.learningStatus == 2 ||
							(data.learningStatus == 3 &&
								Number(data.learningTimeStart) > Number(new Date() / 1000))
						) {
							uni.showModal({
								showCancel: false,
								confirmText: "确定",
								content: "当前课程正在申请中，正式开班后方可进行学习，请耐心等候！",
								success: function(resultst) {
									uni.navigateBack();
								},
							});
							return Promise.reject();
						}
					}
				});
			},
			postStudyRecord(status = 0, sectionId = this.sectionId) {
				if (!this.refPlv && this.playVid) {
					return;
				}
				let currentTime = this.refPlv.playCurrentTime();
				let PlayDuration = this.refPlv.playVideoTime();
				if (currentTime < 10 && !this.ossAvatarUrl) {
					if (status == 0) return;
					currentTime = this.playTime;
				}
				let self = this;
				let fromPlat = 1;
				// #ifdef H5
				fromPlat = 3;
				// #endif
				let data = {
					...this.params([
						"orderGoodsId",
						"goodsId",
						"courseId",
						"erJianErZao",
						"gradeId",
					]),
					fromPlat, //来源平台 1小程序 2网站
					photo: self.ossAvatarUrl,
					sectionId: sectionId || 0,
					studyDuration: parseInt(PlayDuration),
					chapterId: this.chapterId || 0,
					moduleId: this.moduleId || 0,
					videoCurrentTime: parseInt(currentTime),
				};
				if (this.ossAvatarUrl) {
					data.similarity = this.compareFaceData; // 相似度
				}
				if (status > 0) {
					data.status = status;
				}
				console.log(data, "记录参数");
				return new Promise((resolve, reject) => {
					this.$api
						.studyRecord(data)
						.then((res) => {
							console.log(res, "记录返回");
							let {
								code,
								msg
							} = res.data;
							if (code == 200) {
								if (status > 0) {
									// 刷新数据
									uni.$emit("playEnd");
									this.studyRecordMenuAllList();
								}
								self.ossAvatarUrl = "";
							} else if (code == 600) {
								uni.showModal({
									showCancel: false,
									title: "提示",
									content: msg,
									success: (resultst) => {
										uni.navigateBack();
									},
								});
								this.closeCamera();
								return
							} else if (code == 558) {
								this.CountTo1 = msg.split(",")[1];
								this.noticeShow1 = true;
								var timer = setInterval(() => {
									this.CountTo1--;
									if (this.CountTo1 < 0) {
										this.noticeShow1 = false;
										clearInterval(timer);
										this.postStudyRecord(1).then(this.nextSection);
									}
								}, 1000);
								this.closeCamera();
								return
							} else {
								uni.showToast({
									icon: "none",
									title: res.data.msg,
									duration: 2000,
								});
								if (code == 559) {
									this.isReach = true;
									this.openCamera()
								}
								return
							}
							resolve();
						})
						.catch((err) => {
							this.studyRecordMenuAllList();
						});
				});
			},
			timeEvent(time) {
				console.log(this.refPlv.getDuration(), 'getDurationgetDuration')
				this.clearPauseTimer();
				if (this.playSecIsLearn && (this.erJianErZao || this.jjShiGongYuan || this.photoNum > 0)) {
					this.configPhoto(time);
					this.isReach = false;
					const index = this.photoList.findIndex((e) => e < time && e > time - 8);
					if (index != -1 && !this.photoHistoryList[index] && this.photoHistoryList[index] != 0) {
						this.photoIndex = index;
						// 拍照
						this.openCamera();
					}
				}
			},
			// 新增用户视频学习日志
			studyLog() {
				this.$http({
					url: "/user/study/log",
					method: "post",
					data: {
						...this.params(),
						moduleId: this.moduleId || 0,
						chapterId: this.chapterId || 0,
						sectionId: this.sectionId || 0,
						fromPlat: 1, //来源平台 1小程序 2PC网站
						goodsType: 1, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
					},
				}).then((res) => {});
			},
			timeupdate(time) {
				// console.log("🚀 ~ file: detail.vue:1498 ~ timeupdate ~ time:");
				if (this.noticeShow) {
					this.refPlv.playPause();
					return;
				}
				this.playTime = time;
				this.throttleFn();
				this.timeEvent(time);
			},
			playing() {
				if(this.isSeekingIndex) return;
				//特殊设备跳过拍照停止学习
				if (this.showCamera) {
					this.refPlv.playPause();
					this.refPlv.exitFullScreen();
					return;
				}
				this.isPlaying = true;
				this.clearPauseTimer();
			},
			isSeeking(event) {
				console.log("搜寻进度条", event)
				this.isSeekingIndex = event;
			},
			openCamera() {
				if (this.showCamera) return;
				this.showCamera = true;
				this.refPlv.playPause();
				this.refPlv.exitFullScreen();
			},
			closeCamera() {
				console.log("关闭")
				this.showCamera = false;
			},
			pause() {
				if(this.isSeekingIndex) return;
				console.log("视频暂停");
				this.isPlaying = false;
				this.erJianErZaoPauseTip();
			},
			async ended() {
				if(this.isSeekingIndex) return;
				console.log("视频播放完毕");
				this.isPlaying = false;
				uni.showToast({
					icon: "none",
					title: "播放完毕",
				});
				this.clearPauseTimer();
				await this.postStudyRecord(1);
				this.nextSection();
			},
			playerError() {
				console.log("播放错误");
			},
			//播放下一节
			nextSection() {
				console.log("播放下一节");
				if (!this.menuAllList.length) {
					return;
				}
				this.curPlayIndex = this.menuAllList.findIndex((item) => {
					let i_sectionId = item.sectionId || 0;
					let i_chapterId = item.chapterId || 0;
					let i_moduleId = item.moduleId || 0;
					return (
						i_sectionId == this.sectionId &&
						i_chapterId == this.chapterId &&
						i_moduleId == this.moduleId
					);
				});
				let data = this.menuAllList[this.curPlayIndex + 1];
				data.learning = data.learning || data.studyStatus
				if (!data) {
					//第二个弹窗
					uni.showModal({
						title: "温馨提示",
						content: "恭喜您课程学习全部完成，教务会在1-3个工作日内完成学习初审，请耐心等待。",
						showCancel: !this.erJianErZao,
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: "/pages/learn/index",
								});
							}
						},
					});
				} else {
					if (data.doType == 2) {
						if (data.studyStatus == 1) {
							uni.showToast({
								title: "试卷已合格！",
								duration: 2000,
								icon: "none",
							});
							return;
						}
						uni.showModal({
							title: "温馨提示",
							content: "当前节视频已学完，是否进入考试？",
							success: (res) => {
								if (res.confirm) {
									this.toQuestionBank(data);
								}
							},
						});
						return;
					}
					uni.showModal({
						title: "温馨提示",
						content: "当前节视频已学完，继续学习下一节？",
						success: async (res) => {
							if (res.confirm) {
								this.moduleId = data.moduleId;
								this.chapterId = data.chapterId;
								this.sectionId = data.sectionId;
								if (data.sectionType == 1) {
									//录播
									this.photoConfig = false;
									this.sectionItem = data;
									this.playVideo(data);
								} else if (data.sectionType == 2) {
									//直播
									this.studyRecordGetLastLive();
								} else if (data.sectionType == 3) {
									//回放
									this.sectionItem = data;
									this.playVideo(data);
								}
								this.updateChapterOpen(true);
							}
						},
					});
				}
			},
			async userConfirmInfoDetail() {
				let info = await this.$api.userConfirmInfoDetail({
					orderGoodsId: this.orderGoodsId,
				});
				if (!info.data.data || info.data.data.pushInfo !== 1) {
					uni.showModal({
						showCancel: false,
						title: "提示",
						content: "开通信息推送不成功，无法进入学习！",
						success: (resultst) => {
							uni.navigateBack();
						},
					});
					return Promise.reject();
				}
			},
			checkFinishRequiredCourse() {
				return this.$api
					.checkFinishRequiredCourse({
						businessId: this.goodsData.businessId,
						goodsId: this.goodsId,
					})
					.then((res) => {
						if (res.data.data > 0) {
							uni.showModal({
								showCancel: false,
								confirmText: "确定",
								content: "该业务层次下有未学完的商品，无法学习新商品！",
								success: function(resultst) {
									uni.navigateBack();
								},
							});
							return Promise.reject();
						}
						return Promise.resolve();
					});
			},
			async getGoodsDetail() {
				let {
					data
				} = await this.$api.goodsDetail(this.goodsId);
				this.goodsData = data.data;
				if (data.data.firstChoiceStatus) {
					uni.redirectTo({
						url: `/pages3/polyv/preference?courseId=${this.courseId}&goodsId=${data.data.goodsId}&orderGoodsId=${this.orderGoodsId}&gradeId=${data.data.gradeId}&periodWaitTime=${this.option.periodWaitTime ? 1 : ""}&isQ=${this.option.isQ}&minClassHour=${data.data.minClassHour || 0}`,
					});
					return
				}
				await this.getbaseprofiletplists();
				this.erJianErZao = this.goodsData.erJianErZao;
				this.jjShiGongYuan = this.goodsData.jjShiGongYuan;
				if (this.erJianErZao || this.jjShiGongYuan) {
					await this.userConfirmInfoDetail();
				}
				if (this.erJianErZao) {
					this.option.periodWaitTime && (await this.checkFinishRequiredCourse());
				}
				this.goodsData.buyNote && this.baseHandoutTipList();
				!this.gradeId && (this.gradeId = this.goodsData.gradeId);
				if (this.goodsData.goodsPlayConfig) {
					this.goodsPlayConfig = JSON.parse(this.goodsData.goodsPlayConfig);
					if (this.goodsPlayConfig.autoPlay > 0) {
						this.autoplay = true;
					}
					if (this.goodsPlayConfig.drag > 0 && !this.erJianErZao) {
						if (this.playSource == 2) {
							this.isAllowSeek = false;
						} else {
							// #ifdef MP-WEIXIN
							this.isAllowSeek = "yes";
							// #endif
							// #ifdef H5
							this.isAllowSeek = "off";
							// #endif
						}
					}
					if (this.goodsPlayConfig.speed > 0) {
						this.playbackRate = [0.5, 0.8, 1.0, 1.25, 1.5, 2.0];
					}
				}
				if (this.goodsData.goodsPhotographConfig) {
					this.goodsPhotographConfig = JSON.parse(
						this.goodsData.goodsPhotographConfig
					);
					if (this.goodsPhotographConfig.photoNum > 0) {
						this.photoNum = this.goodsPhotographConfig.photoNum;
					}
				}
			},
			change(index) {
				this.current = index;
			},
			paramsFn(
				keys = ["orderGoodsId", "goodsId", "courseId", "gradeId", "sectionItem"]
			) {
				return this.params(keys);
			},
		},
		provide() {
			return {
				paramsFn: this.paramsFn,
			};
		},
	};
</script>

<style lang="scss" scope>
	@import "./css/detail.scss";

	.top {
		&__header {
			position: relative;
			width: 100%;
			height: 150rpx;
			padding: 24rpx 150rpx 24rpx 24rpx;

			.img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
			}

			.note {
				position: relative;
				z-index: 10;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #efdbff;
			}

			.title {
				position: relative;
				z-index: 10;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}

	#top {
		position: relative;
		z-index: 99;
	}

	.polyv_detail {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;

		.pops {
			position: absolute;
			top: 0;
			left: 0;
			background: #ccc;
			opacity: 0.5;
			width: 100%;
			height: 300rpx;
			z-index: 9999;
		}

		.box {
			flex: 1;
			overflow: hidden;
			margin: 16rpx 16rpx 100rpx 16rpx;

			.box_in {
				height: 100%;
			}
		}

		.first_ml {
			margin: 16rpx 16rpx 16rpx 16rpx;
		}
	}

	.title {
		font-size: 24rpx;
		color: #999999;
	}

	page {
		background: #eaeef1;
	}

	.ts {
		font-size: 24rpx;
		color: #999;
		margin: 14rpx 0rpx;
		padding-right: 29rpx;
		padding-left: 34rpx;
	}

	.content {
		padding: 24rpx;
		text-align: left;
	}

	.sc_t {
		font-size: 22rpx;
		color: #000000;
	}

	.sc {
		width: 29rpx;
		height: 29rpx;
	}

	.buy {
		width: 138rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #32467b;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 28rpx;
		text-align: center;
		vertical-align: middle;
		position: absolute;
		right: 30rpx;
	}

	.video_body {
		padding-bottom: 96rpx;
	}

	.tj_box {
		width: 50%;
		display: inline-block;
		text-align: center;
		margin: 10rpx 0;
	}

	.t2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #666666;
		line-height: 36rpx;
		margin: 15rpx;
	}

	.r_t2 {
		width: 201rpx;
		height: 49rpx;
		background: rgba(22, 119, 255, 0.05);
		border: 1rpx solid #32467b;
		border-radius: 16rpx;
		color: #666666;
		font-size: 23rpx;
		text-align: center;
		display: flex;
		align-items: center;
		padding: 5rpx;
	}

	.scroll_box {
		width: 100%;
		height: 60rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		white-space: nowrap;
		overflow: hidden;
		margin: 15rpx 0;
	}

	.r_sliper {
		padding: 0 20rpx;
	}

	.top_line {
		width: 6rpx;
		height: 22rpx;
		background: #32467b;
		margin-right: 10rpx;
	}

	.video_t2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.video_play {
		position: absolute;
		width: 95rpx;
		height: 95rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.video_box {
		position: relative;
	}

	.slot-content {
		padding: 0 20rpx;
	}

	.notice_modal {
		.content {
			width: 100%;
			height: 100%;
			padding: 56rpx 56rpx 56rpx 64rpx;

			.title {
				color: #222;
				line-height: 40rpx;
				font-size: 36rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 24rpx;
			}

			.text {
				height: 340rpx;
				line-height: 40rpx;
				text-indent: 2em;
				font-size: 32rpx;
				color: #222;
			}

			.had_read {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #3577e8;
				border-radius: 240rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
				margin-top: 20rpx;

				&.gray {
					background: #bbbec5;
				}
			}
		}
	}
</style>