yicangzongtai_app_240321/pages/learningClassroom/detail.vue

<template>
	<!-- TODO 列表应该覆盖视频一部分，是撇左上角可以显示标签，借助plus加载页面实现 -->
	<view class="main">
		<!-- <navbar :config="config" backColor="#999999"></navbar> -->
		<view style="position: relative;">
			<cover-view class="video-tag" v-if="detail.has_vip">会员专享</cover-view>
			<image v-if="!sectionDetail.studying_detail_content_url" class="class-video" :src="detail.study_url" mode="">
			</image>
			<video v-else id="myVideo" class="class-video" object-fit="cover" controls :src="sectionDetail.studying_detail_content_url"
				play-btn-position="center">
				<cover-view class="video-tag" v-if="detail.has_vip">会员专享</cover-view>
			</video>
		</view>
		
		<!-- <cover-image class="video-bar" :style="`top: calc(430rpx + 44px + ${statusBarHeight}px)`"></cover-image> -->
		<view class="content-box">
			<view class="detail">
				<view class="page-title">{{detail.study_name}}</view>
				<view class="explain">
					<text class="block">
						<text class="iconfont2">&#xe61a;</text>
						<text class="">{{detail.study_teacher}}</text>
					</text>
					<text class="block">
						<text class="iconfont2">&#xe709;</text>
						<text class="">{{detail.studying_click}}人次</text>
					</text>
					<text class="block">
						<text class="iconfont2">&#xe651;</text>
						<text class="">{{detail.studying_length}}分钟</text>
					</text>
				</view>
			</view>
			<view class="split"></view>
			<!-- <view class="tab-box" :style="`top: calc(${statusBarHeight}px + 44px)`"> -->
			<view class="tab-box" >
				<view class="tab" :class="tabActiveIndex == 0 ? 'active' : ''" @click="tabClick(0)">
					课程列表({{detail.studying_detail_count}})</view>
				<view class="tab" :class="tabActiveIndex == 1 ? 'active' : ''" @click="tabClick(1)">课程介绍</view>
			</view>
			<view v-show="tabActiveIndex==0" class="video-list">
				<view class="item" v-for="(item,index) in detail.studying_details" :key="index">
					<text class="iconfont2">&#xe60b;</text>
					<view class="right">
						<view class="title">
							{{item.studying_detail_name}}
						</view>
						<view class="desc">
							<view class="attr-box">
								<text class="attr">
									<text class="num">{{item.video_length}}</text>
									<text>分钟</text>
								</text>
								<text class="attr">
									<text>播放</text>
									<text class="num">{{item.video_click}}</text>
									<text>次</text>
								</text>
							</view>
							<button @click="getSectionDetail(item)">播放</button>
						</view>
					</view>
				</view>
				<view>
					<noData v-if="detail.studying_details&&detail.studying_details.length<=0"></noData>
					<u-loadmore v-else :status="status" />
				</view>
			</view>
			<view v-show="tabActiveIndex==1">
				<view class="htmlCls ql-editor-box" v-html="detail.study_content">
					<!-- <u-parse :html="detail.study_content"></u-parse> -->
				</view>
			</view>
		</view>
		
		<share v-if="showShare" ref="shares" :contentHeight="580"></share>
		<view class="seat"></view>
		<view class="bottom-box">
			<view @click="share()" class="share-text">
				<text class="iconfont2">&#xe684;</text>
				<text class="tip">分享</text>
			</view>
			<button class="btn" @click="goSystem">加入服务体系</button>
		</view>
		
		<u-modal v-model="show" content="你还不是服务体系成员，不能学习此视频" confirm-color="#0b844a" show-cancel-button confirm-text="加入服务体系" cancel-text="返回" @confirm="goSystem"></u-modal>
	</view>
</template>

<script>
	import noData from "@/components/noData/nodata.vue"
	import share from "@/pages/public/share";
	export default {
		components: {
			noData,
			share
		},
		data() {
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				config: {
					back: true,
					title: '课程详情',
					color: 'black',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: 'black'
				},
				tabActiveIndex: 0,
				tabList: [{
						text: '课程列表(7)'
					},
					{
						text: '课程介绍'
					}
				],
				videoTag: null,
				detail: {},
				sectionDetail: {},
				param: {
					page: 1,
					limit: 10
				},
				// list: [],
				totalCount: 0,
				status: "nomore", //加载前值为loadmore，加载中为loading，没有数据为nomore
				showShare: false,
				show:false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.param.studying = options.id;
				this.getDetails()
				// this.getSectionList()
			}
		},
		onReachBottom() {
			// if (this.status == 'loadmore') {
			// 	this.getSectionList()
			// }
		},
		methods: {
			tabClick(index) {
				let that = this;
				this.tabActiveIndex = index;
				this.$nextTick(function() {
					const query = uni.createSelectorQuery().in(that);
					query.select('.detail').boundingClientRect(data => {
						uni.pageScrollTo({
							scrollTop: data.height + uni.upx2px(425),
							duration: 300
						})
					}).exec();
				});
			},
			// 服务体系礼包
			goSystem(){
				uni.navigateTo({
					url:"/pages/entrepreneurshipZone/index"
				})
			},
			share() {
				let token = uni.getStorageSync("apiToken");
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index",
					});
				} else {
					let user = uni.getStorageSync("personal");
					this.showShare = true;
					this.$nextTick(() => {
						this.$refs.shares.shareInfo(
							"",
							this.detail.study_name,
							"",
							this.detail.study_url,
							true
						);
						this.showShare = false;
					});
				}
			},
			// 课程章节详情
			getSectionDetail(item) {
				this.$http.get(`/studyingDetail/${item.id}`).then(res => {
					if (res && res.code == 200) {
						this.sectionDetail = res.data;
						uni.pageScrollTo({
							scrollTop: 0
						})
						this.$nextTick(function(){
							let videoContext = uni.createVideoContext('myVideo');
							videoContext.play();
						})
					} else if (res.code == 403) {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: "你还不是服务体系成员，不能学习此视频",
						// 	duration: 1500
						// })
						this.show=true
					}
				})
			},
			//获取章节列表
			// getSectionList(reset) {
			// 	if (reset) this.param.page = 1;
			// 	this.status = 'loading';
			// 	this.$http.get('/studyingDetail/list', this.param).then(res => {
			// 		if (res && res.code == 200) {
			// 			this.list.push(...res.page.list);
			// 			this.totalCount = res.page.totalCount;
			// 			if (this.list.length < this.totalCount) this.status = 'loadmore';
			// 			else this.status = 'nomore';
			// 		}
			// 	})
			// },
			// 获取详情
			getDetails() {
				this.$http.get(`/studying/info/${this.param.studying}`).then(res => {
					if (res && res.code == 200) {
						this.detail = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		position: relative;
		.video-tag {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			background-color: #138E46;
			width: 114rpx;
			height: 40rpx;
			line-height: 30rpx;
			padding: 0 10rpx;
			font-size: 24rpx;
			color: white;
		}
		.class-video {
			width: 100%;
			height: 450rpx;
			background-color: black;
		}

		.video-bar {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 20;
			width: 100%;
			height: 25rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: white;
		}

		.content-box {
			// position: absolute;
			// top: 425rpx;
			width: 100%;
			background-color: white;
			border-radius: 20rpx 20rpx 0px 0px;
			padding: 0 0 30rpx 0;

			.detail {
				box-sizing: border-box;
				padding: 0 30rpx;

				.page-title {
					font-size: 35rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #1a1a1a;
					line-height: 50rpx;
					margin-bottom: 10rpx;
				}

				.explain {
					margin-bottom: 40rpx;

					.block {
						margin-right: 54rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;

						text {
							vertical-align: middle;
						}

						.iconfont2 {
							color: #25AB34;
							margin-right: 10rpx;
							font-size: 35rpx;
						}

						&:nth-child(2) {
							.iconfont2 {
								font-size: 40rpx;
							}
						}

						&:nth-child(3) {
							.iconfont2 {
								font-size: 30rpx;
							}
						}
					}
				}
			}

			.split {
				width: 100%;
				height: 8rpx;
				background: #f5f5f5;
			}

			.video-list {
				padding: 12rpx 30rpx;

				.item {
					padding: 40rpx 0;
					border-top: 1px solid #e6e6e6;

					&:nth-child(1) {
						border-top: none;
					}

					.iconfont2 {
						margin-right: 21rpx;
						vertical-align: top;
						font-size: 40rpx;
						color: #22A834;
					}

					.right {
						width: 620rpx;
						display: inline-block;

						.title {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #1a1a1a;
							line-height: 38rpx;
							margin-bottom: 10rpx;
						}

						.desc {
							width: 100%;

							.attr-box {
								display: inline-block;
								width: calc(100% - 130rpx);

								.attr {
									font-size: 24rpx;
									font-family: PingFang SC, PingFang SC-Regular;
									font-weight: 400;
									line-height: 38rpx;
									color: #999999;
									margin-right: 43rpx;

									.num {
										color: #2db62b;
									}
								}
							}
						}

						button {
							display: inline-block;
							vertical-align: top;
							margin-top: -18rpx;
							padding: 0 40rpx;
							height: 56rpx;
							line-height: 56rpx;
							background: #0b844a;
							border-radius: 28rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #ffffff;
						}
					}
				}
			}
		}

		.seat {
			height: 148rpx;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}

		.bottom-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 148rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			background: white;
			z-index: 100;
			border-top: 1px solid #f5f5f5;

			.share-text {
				text-align: center;
				width: 100rpx;

				.iconfont2 {
					font-size: 40rpx;
					display: block;
				}

				.tip {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #1a1a1a;
				}
			}

			.btn {
				// width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 170rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				background: #0b844a;
				border-radius: 40rpx;
			}
		}
	}

	.no-data-view {
		margin-top: 20rpx !important;
	}
	.tab-box{
		top: 88rpx;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
	}
	.htmlCls{
		padding:30rpx;
	}
</style>