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="https://cdn.uviewui.com/uview/swiper/3.jpg" 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">2020年二级建造师教育选修</view></u-col>
					<u-col span="3"><view class="video_t1">共60课时</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">
								共60节课
								<u-icon name="arrow-right" size="28"></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 list" :key="index" style="margin-right: 20rpx;display:inline-block"><view class="r_t2">二级建造师市政..</view></view>
						</scroll-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">这是一段课程介绍文本，课程介绍内容可在后台设置编辑，以富 文本形式呈现，常见的由图片和文本组成。</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="/static/avatar1.png" class="teacher_img"></image></view>
							<view class="teacher_t">
								建工学院名誉院长，建造师建筑资深导师，北京工业大学教授，建造师考试大纲编委会编委。参与过国家一级注册建造师考试大纲、考试辅导书、习题集等书的编写。
							</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 list" :key="index">
						<image src="http://192.168.0.222:8080/img/banner1.png" style="width: 320rpx;height: 160rpx;"></image>
						<view style="font-size: 24rpx;color: #666666;d">2020年二级建造师继续教...</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;">￥499</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;">
					<image src="/static/sc.png" class="sc"></image>
					<view class="sc_t">收藏</view>
				</view>
				<view style="text-align: center;margin-left: 30rpx;">
					<view class="price_t1">￥699</view>
					<view class="price_t2">￥699</view>
				</view>
				<view class="buy" @click="jumpBuy">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '课程目录'
				},
				{
					name: '课程介绍'
				},
				{
					name: '出题名师'
				},
				{
					name: '相关推荐'
				}
			],
			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
			sign: '',
			ts: '',
			startStatus: false
		};
	},
	onShow() {
		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;
				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;
				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();
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
	},
	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: {
		startVideo() {
			uni.getStorageSync('union_id');
			if (!uni.getStorageSync('union_id')) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				this.$api
					.polyvVideoSign(this.vid)
					.then(res => {
						console.log(res);
						this.startStatus = true;
						// this.sign = res.data.data.sign;
						// this.ts = res.data.data.ts;
					})
					.catch(err => {
						console.log('报错');
					});
			}
		},
		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;
		},
		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) {
			// 继续操作
			self.$api.getInfo().then(result => {
				console.log(result);
			});
			},
			fail: function(err) {
				//重新登入
				self.$navTo.togo('/pages/login/login', {});
			}
			});
		}
	}
};
</script>
<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
</style>
<style scope>
.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;
}

page {
	background: #ffffff;
}
</style>