zz--front/pages2/course/detail.vue

<template>
	<view>
		<view style="position: fixed;width: 100%;z-index: 999;background: #FFFFFF;" id="top">
			<view class="video_box">
				<image
					v-if="!startStatus"
					:src="infoData.firstImage === null ? 'https://cdn.uviewui.com/uview/swiper/3.jpg' : infoData.firstImage"
					style="width: 100%;height: 460rpx;"
				></image>
				<image v-if="!startStatus" class="video_play" src="/static/play.png" @click="startVideo"></image>
				<polyv-player
					v-else
					id="playerVideo"
					playerId="playerVideo"
					height="460rpx"
					:vid="vid"
					:showSettingBtn="true"
					isAllowSeek="ifViewed"
					:showPlaybackRateBtn="false"
					:enablePlayGesture="true"
				></polyv-player>
			</view>
			<view>
				<u-row>
					<u-col span="8" offset="1">
						<view class="video_t1">{{ infoData.name || pageData.courseName }}</view>
					</u-col>
					<u-col span="3">
						<view class="video_t1">共{{ chapterList.length }}章节</view>
					</u-col>
				</u-row>
			</view>
			<view><u-tabs :list="list" font-size="24" bar-width="90" :current="current" @change="change" active-color="#32467B"></u-tabs></view>
			<u-line color="#D6D6DB" />
		</view>
		<view class="box" @touchmove="touchMove">
			<view id="modules1">
				<!-- 课程目录-->
				<view style="padding-top: 15rpx;">
					<u-row>
						<u-col span="9">
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								课程目录
							</view>
						</u-col>
						<u-col span="3" text-align="right">
							<view class="video_t2" @click="swipStatus">
								共{{ chapterList.length }}章节
								<u-icon name="arrow-right" size="28" style="transition: all 0.2s;margin-left:10rpx" :class="activeStatus ? 'rotoct' : ''"></u-icon>
							</view>
						</u-col>
					</u-row>
					<!-- <view class="scroll_box">
						<scroll-view class="r_sliper" scroll-x="true">
							<view v-for="(item, index) in chapterList" :key="index" style="margin-right: 20rpx;display:inline-block"><view class="r_t2">{{item.name}}</view></view>
						</scroll-view>
					</view> -->

					<view class="catalogBox" :class="activeStatus ? 'changeCatalogBox' : ''">
						<view
							class="catalogA"
							v-for="(item, index) in chapterList"
							:key="index"
							:class="activeStatusCata === item.chapterId ? 'activesq' : ''"
							@click="activeList(item, index)"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<view id="modules2">
				<!-- 课程介绍-->
				<view style="padding-top: 15rpx;">
					<u-row>
						<u-col span="8">
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								课程介绍
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="t2" v-html="pageData.introduction"></view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 出题名师-->
			<view id="modules3">
				<view style="padding: 15rpx 0;">
					<u-row>
						<u-col span="8">
							<view class="video_t2" style="display: flex;align-items: center;">
								<view class="top_line"></view>
								出题名师
							</view>
						</u-col>
					</u-row>
					<u-row>
						<view style="margin: 25rpx;display: flex;">
							<view><image :src="$method.splitImgHost(teacherInfo.avatar)" class="teacher_img"></image></view>
							<view class="teacher_t">
								<view>{{ teacherInfo.teacherName }}</view>
								<view>{{ teacherInfo.introduce }}</view>
							</view>
						</view>
					</u-row>
				</view>
				<u-line color="#D6D6DB" />
			</view>
			<!-- 相关推荐-->
			<view style="padding-top: 15rpx;" id="modules4" :style="'padding-bottom:' + modules4Bottom + 'px'">
				<u-row>
					<u-col span="8">
						<view class="video_t2" style="display: flex;align-items: center;">
							<view class="top_line"></view>
							相关推荐
						</view>
					</u-col>
				</u-row>
				<view style="margin: 10rpx;">
					<view class="tj_box" v-for="(item, index) in commendList" :key="index" @click="getNavTo(item)">
						<image :src="$method.splitImgHost(item.coverUrl)" style="width: 320rpx;height: 160rpx;"></image>
						<view style="font-size: 24rpx;color: #666666;text-align: left;">{{ item.courseName }}</view>
						<view>
							<u-row>
								<u-col span="6">
									<view style="margin-left: 20rpx;">
										<image src="/static/people.png" style="width: 20rpx;height: 20rpx;"></image>
										<text style="color: #999999;font-size: 20rpx;margin-left: 10rpx;">2023</text>
									</view>
								</u-col>
								<u-col span="6" text-align="right">
									<text style="color: #E91313;font-size: 16rpx;margin-left: 8rpx;">活动价</text>
									<text style="color: #E91313;font-size: 24rpx;font-weight: bold;">￥{{ item.price }}</text>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_tab" id="foot">
			<u-line color="#D6D6DB" />
			<view style="height: 100%;display: flex;align-items: center;position: relative;">
				<view style="text-align: center;margin-left: 30rpx;" @click="favorites">
					<image :src="collecStatus ? '/static/star.png' : '/static/sc.png'" class="sc"></image>
					<view class="sc_t">收藏</view>
				</view>
				<view style="text-align: center;margin-left: 30rpx;">
					<view class="price_t1">￥{{ pageData.price }}</view>
					<view class="price_t2">￥699</view>
				</view>
				<view class="buy" @click="jumpBuy">立即购买</view>
			</view>
		</view>
		<u-popup v-model="showBox" mode="bottom" border-radius="14">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view v-if="boxList.length > 0">
						<view
							v-for="(item, index) in boxList"
							:key="index"
							style="line-height: 60rpx;border-bottom: 1rpx solid #eee;display: flex;align-items: center;justify-content: space-between;padding: 15rpx 0;"
							:style="infoData.sectionId === item.sectionId ? 'color:#1677ff;' : ''"
							@click="getsec(item)"
						>
							<view>{{ item.name }}</view>
							<u-icon v-if="infoData.sectionId === item.sectionId" name="checkbox-mark"></u-icon>
						</view>
					</view>
					<view v-else>暂无内容</view>
				</scroll-view>
				<view class="confrim-btn" style="margin-top: 10rpx;"><u-button @click="showBox = false">取消</u-button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '课程目录'
				},
				{
					name: '课程介绍'
				},
				{
					name: '出题名师'
				},
				{
					name: '相关推荐'
				}
			],
			activeStatus: false, //课程目录下拉样式变化是否开启
			activeStatusCata: 0, //当前选中章节
			current: 0,
			h1: 0,
			h2: 0,
			h3: 0,
			h4: 0,
			hh1: 0,
			hh2: 0,
			hh3: 0,
			hh4: 0,
			foot_h: 0,
			top_h: 0,
			windowHeight: 0,
			modules4Bottom: 0,
			isClick: false,
			// vid: 'd5f6d309fe0b016d3844b194a8b32249_d', // 视频ID
			vid: '', // 视频ID
			sign: '',
			ts: '',
			startStatus: false,
			queryData: {}, //页面跳转内容
			pageData: {},
			infoData: {},
			chapterList: [], //章列表
			teacherInfo: {},
			faceGetState: true, //模拟今天是否人脸识别
			showBox: false,
			boxList: [], //章节弹窗列表
			payStatus: true, //是否购买该课程
			commendList: [], //推荐课程列表
			collecStatus: false, //收藏状态
			initH4: 0
		};
	},
	onLoad(option) {
		const Verify = require('@/wxcomponents/verify_mpsdk/main.js');
		Verify.init();
		this.$api.courseInfo(option.id).then(res => {
			this.queryData = res.data.data;
			this.getTeacher(res.data.data.teacherIds);
			this.getChapter(res.data.data.courseId);
			this.getcommendList(res.data.data.courseId);
		});
	},
	onShow() {
		if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
		} else {
			this.favoritesStatus();
		}
		let that = this;
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
		setTimeout(function() {
			that.getHeight();
		}, 1800);
	},
	onPageScroll: function(e) {
		//防止触发两次跳动
		if (this.isClick) {
			return;
		}
		if (e.scrollTop <= this.hh1) {
			this.current = 0;
		}
		if (e.scrollTop <= this.hh2 && e.scrollTop > this.hh1) {
			this.current = 1;
		}
		if (e.scrollTop <= this.hh3 && e.scrollTop > this.hh2) {
			this.current = 2;
		}
		if (e.scrollTop > this.hh3) {
			this.current = 3;
		}
	},
	methods: {
		getHeight() {
			let that = this;
		},
		swipStatus() {
			this.activeStatus = !this.activeStatus;
			let self = this;
			self.$nextTick(function() {
				self.getHeight();
			});
		},
		getHeight() {
			let that = this;
			const query = uni.createSelectorQuery().in(this);
			query
				.select('#modules1')
				.boundingClientRect(data => {
					that.h1 = data.height;
					that.countHeight(that);
				})
				.exec();
			query
				.select('#modules2')
				.boundingClientRect(data => {
					that.h2 = data.height;
					console.log(data.height, 66);
					that.countHeight(that);
				})
				.exec();
			query
				.select('#modules3')
				.boundingClientRect(data => {
					that.h3 = data.height;
					that.countHeight(that);
				})
				.exec();
			query
				.select('#modules4')
				.boundingClientRect(data => {
					that.h4 = data.height;
					console.log(data.height, 4444);
					//	that.h4 = data.height;
					if (that.h4 == 0) {
						that.h4 = data.height;
					}
					that.countHeight(that);
				})
				.exec();
			query
				.select('#foot')
				.boundingClientRect(data => {
					that.foot_h = data.height;
					that.countModelusPadding();
				})
				.exec();
			query
				.select('#top')
				.boundingClientRect(data => {
					that.top_h = data.height;
					that.countModelusPadding();
				})
				.exec();
		},
		favoritesStatus() {
			this.$api.coursecollectPD(this.queryData.courseId).then(result => {
				if (result.data.data === undefined) {
					this.collecStatus = false;
				} else {
					this.collecStatus = true;
				}
			});
		},
		favorites() {
			var self = this;
			if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				if (this.collecStatus) {
					this.$api.coursecollectPD(this.queryData.courseId).then(results => {
						self.$api.deletecoursecollect(results.data.data.collectCourseId).then(resz => {
							self.favoritesStatus();
						});
					});
				} else {
					var data = {
						userId: this.$store.state.userInfo.userId,
						courseId: this.queryData.courseId
					};
					this.$api.coursecollect(data).then(res => {
						self.favoritesStatus();
					});
				}
			}
		},
		getcommendList(v) {
			let self = this;
			var data = {
				courseId: v
			};
			this.$api.courseInforecommendList(data).then(res => {
				self.commendList = res.data.data;
				self.$nextTick(function() {
					self.getHeight();
				});
			});
		},
		activeList(item, index) {
			var self = this;
			var dataset = {
				chapterId: item.chapterId
			};
			this.$api.coursesectionlist(dataset).then(result => {
				self.boxList = result.data.rows;
			});
			this.showBox = true;
		},
		getsec(item) {
			this.startStatus = false;
			this.infoData = item;
			this.vid = this.infoData.vid;
			this.activeStatusCata = item.chapterId;
			this.showBox = false;
		},
		getChapter(v) {
			var self = this;
			var data = {
				courseId: v
			};
			this.$api.coursechapterlist(data).then(res => {
				var chaList = res.data.rows;
				if (chaList.length === 0) {
					uni.showToast({
						title: '暂无相关章节内容',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				var dataset = {
					chapterId: res.data.rows[0].chapterId
				};
				self.$api.coursesectionlist(dataset).then(result => {
					self.getsec(result.data.rows[0]);
				});
				this.chapterList = chaList;
			});
		},
		getTeacher(v) {
			let self = this;
			var data = {
				teacherIds: v
			};
			this.$api.teacherList(data).then(res => {
				self.teacherInfo = res.data.rows[0];
			});
		},
		startVideo() {
			if (!uni.getStorageSync('union_id') && this.$store.state.token === '') {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				//模拟今天是否人脸识别
				if (!this.faceGetState) {
					this.certification();
					return;
				}
				if (!this.payStatus) {
					uni.showToast({
						title: '暂未购买该课程',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.vid === null) {
					uni.showToast({
						title: '视频加载失败',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.$api
					.polyvVideoSign(this.vid)
					.then(res => {
						this.startStatus = true;
					})
					.catch(err => {
						console.log('报错');
					});
			}
		},
		async certification() {
			var self = this;
			const faceBiz = await self.$api.facecertificationPicBizToken();
			self.BizToken = faceBiz.data.data.bizToken;
			wx.startVerify({
				data: {
					token: self.BizToken
				},
				success: result => {
					setTimeout(() => {
						self.$api.facecertificationPicDetectInfo(self.BizToken).then(faceRec => {
							if (faceRec.data.data === 0) {
								uni.showToast({
									title: '识别成功',
									icon: 'none',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '识别失败',
									icon: 'none',
									duration: 2000
								});
								console.log('识别失败');
							}
						});
					}, 500);
				},
				fail: err => {
					setTimeout(() => {
						console.log('识别功能失败');
						uni.showModal({
							title: '提示',
							content: err,
							showCancel: false
						});
					}, 500);
				}
			});
		},
		touchMove(e) {
			this.isClick = false;
		},
		countModelusPadding() {
			let offsetHeight = this.windowHeight - this.foot_h - this.top_h;
			this.modules4Bottom = offsetHeight > this.h4 ? offsetHeight - this.h4 : 7;
		},
		countHeight(that) {
			this.hh1 = this.h1;
			this.hh2 = this.h1 + this.h2;
			this.hh3 = this.h1 + this.h2 + this.h3;
			this.hh4 = this.h1 + this.h2 + this.h3 + this.h4;
		},
		getNavTo(item) {
			this.$navTo.togo('/pages2/course/detail', {
				id: item.courseId
			});
		},
		change(index) {
			this.current = index;
			let that = this;
			this.isClick = true;
			if (index == 0) {
				uni.pageScrollTo({
					scrollTop: 0
				});
			}
			if (index == 1) {
				uni.pageScrollTo({
					scrollTop: that.h1 + 4
				});
			}
			if (index == 2) {
				uni.pageScrollTo({
					scrollTop: that.h1 + that.h2 + 4
				});
			}
			if (index == 3) {
				uni.pageScrollTo({
					scrollTop: that.h1 + that.h2 + that.h3 + 4
				});
			}
		},
		jumpBuy() {
			var self = this;
			uni.getStorage({
				key: 'union_id',
				success: function(res) {
					// 继续操作
				},
				fail: function(err) {
					//重新登入
					self.$navTo.togo('/pages/login/login', {});
				}
			});
		}
	}
};
</script>
<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
</style>
<style scope>
.content {
	padding: 24rpx;
	text-align: left;
}
.catalogBox {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	padding-left: 38rpx;
	max-height: 305rpx;
	overflow-y: auto;
	transition: all 0.4s;
}
.catalogBox > .catalogA {
	min-width: 200rpx;
	height: 48rpx;
	line-height: 48rpx;
	// text-align: center;
	border: 2rpx solid transparent;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
	border-radius: 10rpx;
	background: rgba(22, 119, 255, 0.05);
	padding-left: 19rpx;
	box-sizing: border-box;
	padding-right: 15rpx;
	margin-right: 16rpx;
	margin-bottom: 20rpx;
	margin-top: 15rpx;
	font-size: 24rpx;
	color: #666;
}
.catalogBox > .activesq {
	border-color: #1677ff;
}
.changeCatalogBox {
	display: block;
}
.catalogBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.box {
	position: relative;
	top: 600rpx;
	padding-bottom: 88rpx;
}
.price_t2 {
	font-size: 18rpx;
	font-family: PingFang SC;
	font-weight: 500;
	text-decoration: line-through;
	color: #999999;
}
.price_t1 {
	font-size: 33rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #e91313;
}
.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;
}
.footer_tab {
	position: fixed;
	bottom: 0;
	height: 96rpx;
	width: 100%;
	background-color: #ffffff;
}
.tj_box {
	width: 50%;
	display: inline-block;
	text-align: center;
	margin: 10rpx 0;
}
.teacher_t {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;
	margin-left: 15rpx;
}
.teacher_img {
	width: 87rpx;
	height: 129rpx;
}
.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_t1 {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
}
.video_play {
	position: absolute;
	width: 95rpx;
	height: 95rpx;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.video_box {
	position: relative;
}
.rotoct {
	transform: rotate(90deg);
}
page {
	background: #ffffff;
}
</style>