mz/pages/course/curriculum.vue

<template>
	<view class="container">
		<view class="top">
			<video class="course-video"  :src="url"  @play="Onplay" controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" x-webkit-airplay="allow" preload="auto"></video>
		</view>
	   <view class="list-box">
		   <view class="title">{{list.title}}</view>
		   <view class="play_count">已播放{{list.play_count}}次</view>
	   </view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<!-- 详情 -->
		<view class="course-details" v-if="tabCurrentIndex == 0">
			<view class="details-intro">
				<rich-text class="detail-centent" :nodes="list.content"></rich-text>
			</view>
		</view>
		<!-- 课程目录 -->
		<view class="course-catalogue" v-if="tabCurrentIndex == 1">
			<view class="course-menu flex_item" v-for="(ls, index) in courseList" :key="index" @click="ToCourseDetail(ls)">
				<image :src="ls.image"></image>
				<view class="menu-info">
					<view class="title">{{ls.title}}</view>
					<view class="tip"><text>直播回放</text></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { task_info,course,GetTask,PlayNum } from '@/api/course.js';
export default {
	data() {
		return {
			id:'',//课程详情id
			specialId:'',//专题id
			list:'',//详情数据
			url:'',
			tabCurrentIndex:0,
			navList: [
				{
					state: 0,
					text: '详情',
				},
				{
					state: 1,
					text: '课程目录',
				}
			],
			courseList: [],
			play:false,
		};
	},
	onLoad(option) {
		this.id = option.id;//课程详情id
		this.specialId = option.specialId;//专题id
		this.loadData();
		this.course();
	},
	methods: {
		//加载专题详情
		loadData() {
			let obj = this;
			task_info({
				id:obj.id,
				specialId:obj.specialId
			})
				.then(data => {
					obj.list = data.data.taskInfo;
					obj.url = obj.list.link;
				})
				.catch(e => {
					if(e.message == '您未购买课程'){
						uni.showModal({
						    title: '提示',
						    content: '您未购买课程?是否购买该专题',
						    success: function (res) {
						        if (res.confirm) {
						           uni.navigateTo({
						           	url:"/pages/course/detail?id="+obj.specialId
						           })
						        } else if (res.cancel) {
									uni.navigateTo({
										url:"/pages/course/detail?id="+obj.specialId
									})
						        }
						    }
						});
					}
				});
		},
		//课程目录列表
		course(){
			let obj = this;
			course({
				special_id:obj.specialId,
				limit:10,
				page:1,
			})
				.then(data => {
					this.courseList = data.data.list;
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//监听播放按钮
		Onplay(){
			let obj = this;
			if(obj.play == false){
				obj.play = true;
				obj.isPlay();
			}else{
				console.log("不是第一次播放")
			}
		},
		//判断视频是否可播放
		isPlay(){
			let obj = this;
			GetTask({
				task_id:obj.id,
			})
				.then(data => {
					obj.PlayNum();
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//播放数量加1
		PlayNum(){
			let obj = this;
			PlayNum({
				task_id:obj.id,
			})
				.then(data => {
					obj.loadData();
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		// 课程详情
		ToCourseDetail(ls){
			// console.log(ls)
			let obj = this;
			// if(ls.is_pay == 1){
			// 	if(obj.isPay == false){
			// 		this.$api.msg('清先购买该课程！');
			// 	}else{
			// 		uni.navigateTo({
			// 			url:'/pages/course/curriculum?id='+ls.id+'&specialId='+obj.specialId
			// 		});
			// 	}
			// 	this.$api.msg('清先购买该课程！');
			// }else{
			// 	uni.navigateTo({
			// 		url:'/pages/course/curriculum?id='+ls.id+'&specialId='+obj.specialId
			// 	});
			// }
			uni.navigateTo({
				url:'/pages/course/curriculum?id='+ls.id+'&specialId='+obj.specialId
			});
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
	}
};
</script>

<style lang="scss">
.container {
	
}

//视频
.top {
	width: 100%;
	height: 500rpx;
	.course-video {
		width: 100%;
		height: 100%;
	}
}
.list-box{
	background-color: #FFFFFF;
	padding: 25rpx 25rpx;
	font-size: 36rpx;
	color: #333333;
	margin-bottom: 20rpx;
	.play_count{
		color: #999999;
		font-size: 24rpx;
		padding-top: 20rpx;
	}
}
.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 30rpx;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
		}
	}
}

// 详情
.course-details {
	padding: 20rpx;
	.details-content {
		background: #ffffff;
		border-radius: 10rpx;
		text-align: center;
		.details-title {
			padding: 30rpx 0;
			border-bottom: 1px solid #f0f0f0;
			font-size: $font-base;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
		.details-num {
			display: flex;
			padding: 30rpx 0;
			font-size: $font-sm + 2rpx;
			font-weight: bold;
			color: rgba(102, 102, 102, 1);
			text {
				flex: 1;
			}
			.interval {
				width: 2px;
				background-color: #eeeeee;
			}
		}
	}

	.details-intro {
		padding: 40rpx 20rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		.intro-title {
			width: 100%;
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.intro-text {
			color: #5dcafa;
			font-size: $font-base;
			line-height: 40rpx;
		}
		.intro-img {
			width: 100%;
			height: 400rpx;
			margin-top: 40rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
}

// 课程目录
.course-catalogue {
	padding: 20rpx;
	.no-data{
		width: 100%;
		text-align: center;
		font-size: 26rpx;
	}
	.course-menu {
		background: #ffffff;
		border-bottom: 1px solid #f0f0f0;
		padding: 20rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		image{
			width: 250rpx;
			height: 135rpx;
			border-radius: 15rpx;
		}
		.menu-info{
			padding-left: 25rpx;
			color: #333333;
			.title{
				font-size: 28rpx;
			}
			.tip{
				margin: 15rpx 0rpx;
				text{
					padding: 5rpx 10rpx;
					background-color:rgba(43,121,245,0.18);
					color: #6786FB;
				}
			}
			.price{
				color: #E73932;
			}
			.red{
				color:#6786FB !important;
			}
			.free{
				background:rgba(253,248,234,1);
				border-radius:19px;
				color:rgba(241,174,39,1);
				padding: 2rpx 10rpx;
			}
		}
	}
}
</style>