jxtxkj/jxtxkj/pages/index/course/detail.vue

<template>
	<view class="web_box">
		<!-- <u-navbar height="44" leftIcon="arrow-left" leftIconColor="#000" leftText="课程详情" @leftClick="leftClick" :autoBack="true" bgColor="#fff">
		</u-navbar> -->
		<view class="banner">
			<image v-if="!show" :src="course.img" mode="widthFix" style="width:750rpx"></image>
			<video v-else id="popup_video" :src="courseClassDetail.video" object-fit="contain" :show-center-play-btn="false" :controls="true" @fullscreenchange="fullscreenchange"
				@timeupdate="timeupdate" @ended="ended" :enable-progress-gesture="user.is_kj?true:false" :initial-time="initial_time"></video>
		</view>
		<u-tabs :list="tabs" @click="changeTabs" :scrollable="false"
			:inactiveStyle="{
				color: '#333333'
			}"
			:activeStyle="{
				color: '#2988FE'
			}"
		></u-tabs>
		<view class="content" v-if="active == 0">
			<view class="box1">
				<view class="hflex acenter jbetween">
					<view class="title" style="font-size: 36rpx;">{{course.name}}</view>
					<u-icon v-if="course.is_collection == 1" name="star-fill" color="#FA6400" size="28" @click="collect"></u-icon>
					<u-icon v-else name="star" color="#FA6400" size="28" @click="collect"></u-icon>
				</view>
				<view class="hflex acenter" style="padding: 14rpx 0 30rpx;">
					<view class="text_style1" style="padding-right: 40rpx;" v-if="!course.is_buy == 1">
						总学时：{{course.period?course.period:''}}
					</view>
					<view class="text_style1">
						讲师：{{course.lecturer?course.lecturer:''}}
					</view>
				</view>
				<view class="vflex" v-if="course.is_buy == 1">
					<view class="text_style1">
						进度：{{course.study_class_count}}/{{course.period }}时
					</view>
					<view class="progress">
						<u-line-progress class="line_progress" :percentage="progress" :showText="false" height="8" activeColor="#2988FE"></u-line-progress>
					</view>
				</view>
				<view class="hflex acenter jbetween" v-else>
					<!-- <view class="price">
						￥{{course.price}}
					</view> -->
					<view class="price" v-if="!course.buy&&course.type == 1">
						￥{{course.price}}
					</view>
					<view class="price hflex acenter" v-if="!course.buy&&course.type == 2">
						<image src="/static/images/integral/integral.png" mode="widthFix" style="width: 44rpx;"></image>
						<view class="price">{{course.price}}</view>
					</view>
					<view></view>
					<view class="text_style1">
						已有{{course.collection_count?course.collection_count:'0'}}人收藏
					</view>
				</view>
			</view>
			<view class="box2" v-if="study.length>0">
				<view class="title">
					最近学习
				</view>
				<scroll-view scroll-x="true" class="hflex acenter scroll-view_H" @scroll="scroll">
					<view v-for="(item,index) in study" :key="index" class="study_item">
						<view class="hflex acenter">
							<u-avatar :src="item.headimg"></u-avatar>
							<view class="vflex" style="padding-left: 12rpx;">
								<view class="name">
									{{item.user_name}}
								</view>
								<view class="name">
									已学习{{item.is_accomplish}}课
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="box1">
				<view class="title">
					课程概述
				</view>
				<u-parse :content="course.content"></u-parse>
				<!-- <image :src="course.img" mode="widthFix" style="width: 100%;"></image> -->
			</view>
		</view>
		<view class="content" v-else-if="active == 1">
			<u-checkbox-group shape="circle" placement="column">
				<block v-for="(item,index) in catalog" :key="index">
					<view class="box3 hflex jbetween" @click="startLearn(index)">
						<view class="hflex">
							<view class="" v-if="course.is_buy == 1">
								<!-- <u-checkbox :checked="item.selected"></u-checkbox> -->
							</view>
							<view class="text_style2" style="margin-right: 15rpx;">
								{{index+1}}:
							</view>
							<view class="text_style2">
								{{item.name}}
							</view>
						</view>
						<view class="text_style3">
							({{item.playtime}})
						</view>
					</view>
				</block>
				<view class="box3 hflex acenter jbetween text_style2" v-if="course.is_questions == 1"  @click="openExam">
					在线考试
				</view>
			</u-checkbox-group>
		</view>
		<view class="content" v-else-if="active == 2">
			<block v-for="(item,index) in commentList" :key="index">
				<view class="box4 hflex">
					<u-avatar :src="item.headimg"></u-avatar>
					<view class="vflex box4_right">
						<view class="hflex acenter jbetween">
							<view class="box4_name">
								{{item.user_name}}
							</view>
							<view class="box4_date">
								{{item.create_at}}
							</view>
						</view>
						<view class="box4_content hflex fwrap">
							{{item.content}}
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="bottom hflex acenter jcenter">
			<u-button v-if="course.is_buy == 0" @click="buyCourse">立即参加</u-button>
			<view class="hflex acenter" v-else-if="active == 2">
				<u-input placeholder="说点什么吧" v-model="commentValue" :adjustPosition="false">
					<template slot="suffix">
						<image src="/static/images/index/commentIcon.png" mode="widthFix" style="width: 44rpx;padding-top: 10rpx;"></image>
					</template>
				</u-input>
				<view class="btn" @click="sendComment">发送</view>
			</view>
			<view class="" v-else-if="active == 0">
				<u-button v-if="course.study_class_count == course.period && course.is_questions == 1" @click="openExam">开始考试</u-button>
				<!-- <u-button v-else-if="course.study_class_count !== 0">继续学习</u-button> -->
				<u-button v-else-if="course.is_buy == 1" @click="startStudy(catalog[0].id)">开始学习</u-button>
			</view>
		</view>
		<!-- 考试须知 -->
		<u-modal :show="exam.show" title="考试须知" confirmText="开始考试" @confirm="startExam" :closeOnClickOverlay="true" @close="close">
			<view class="slot-content">
				<rich-text :nodes="exam.content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				show: false,
				course: {},
				progress: '',
				tabs: [
					{
						name: '课程详情'
					},
					{
						name: '课程目录'
					},
					{
						name: '学生评价'
					}
				],
				active: 0,
				study: [],
				catalog: [],
				class_id: 1,
				courseClassDetail: [],
				videoContext: '',
				commentList: [],
				commentValue: '',
				exam: {
					show: false,
					content: '考试须知。'
				},
				currentTime: 0,
				page: 1,
				limit: 10,
				user: {},
				initial_time: 0
			}
		},
		onLoad(e) {
			var id = e.id
			this.getUser()
			this.getData(id)
			this.getClass(id)
			this.getCommit(id)
			this.getStudy(id)
			
		},
		onHide() {
			this.submitTime(this.currentTime)
		},
		onshow() {
			this.getData(id)
		},
		onUnload() {
			this.submitTime(this.currentTime)
		},
		methods: {
			// 获取用户信息
			getUser() {
				var that = this
				$api.req({
					url: '/api/User/userinfo'
				}, function(res) {
					console.log(res);
					if (res.code == 1) {
						that.user = res.data
					}
				})
			},
			// 根据id获取课程信息
			getData(id) {
				var that = this
				$api.req({
					url: '/api/Index/courseDetail',
					data: {
						id: id
					}
				}, function(res) {
					console.log("课程信息=",res);
					if (res.code === 1) {
						that.course = res.data
						that.totalProgress()
					}
				})
			},
			// 根据id获取课程目录信息
			getClass(id) {
				var that = this
				$api.req({
					url: '/api/Index/courseClassList',
					data: {
						id: id
					}
				}, function(res) {
					console.log("课程目录=",res);
					if (res.code === 1) {
						that.catalog = res.data.list
					}
				})
			},
			// 根据id获取课程评论信息
			getCommit(id) {
				var that = this
				$api.req({
					url: '/api/Index/courseCommentsList',
					data: {
						id: id
					}
				}, function(res) {
					console.log(res);
					if(res.code == 1) {
						that.commentList = res.data.list
					}
				})
			},
			// 获取学院榜样
			getStudy(id) {
				var that = this
				$api.req({
					url: '/api/Index/studentsDynamic',
					data: {
						page: that.page,
						limit: that.limit,
						id: id
					}
				}, function(res) {
					console.log(res);
					if (res.code == 1) {
						that.study = res.data.list
					}
				})
			},
			// 计算进度条
			totalProgress() {
				var course = this.course
				var progress = course.study_class_count / (course.period )* 100
				this.progress = progress
				console.log(this.course)
			},
			// 切换tabs
			changeTabs(e) {
				var that = this
				that.active = e.index
			},
			// 购买课程
			buyCourse() {
				var that = this
				var order_no = ''
				console.log(that.course.type)
				if (that.course.type == 1) {
					$api.req({
						url: '/api/Index/createOrder',
						data: {
							id: that.course.id
						}
					}, function(res) {
						console.log(res);
						if (res.code == 1) {
							order_no = res.data.order_no
							var order_id = res.data.id
							$api.jump('/pages/index/course/buy?order_no=' + order_no + '&id=' + that.course.id + '&order_id=' + order_id)
						} else {
							$api.info(res.msg)
						}
					})
				} else {
					$api.req({
						url: '/api/Index/createIntergalOrder',
						data: {
							id: that.course.id
						}
					}, function(res) {
						console.log(res);
						if(res.code == 1) {
							order_no = res.data.order_no
							$api.jump('/pages/index/course/buy?order_no=' + order_no + '&id=' + that.course.id)
						} else {
							$api.info(res.msg)
						}
						
					})
				}
				// $api.jump('/pages/index/course/buy?id=' + this.course.id)
			},
			// 收藏
			collect() {
				var that = this
				if (that.course.is_collection == 0) {
					that.course.is_collection = 1
				} else {
					that.course.is_collection = 0
				}
				$api.req({
					url: '/api/Index/collectionCancelCourse',
					data: {
						id: that.course.id,
						type: that.course.is_collection
					}
				}, function(res) {
					console.log("收藏=",res);
					if (res.code == 1) {
						$api.info(res.msg)
					}
				})
			},
			scroll(e) {
							
			},
			// 开始学习
			startStudy(id) {
				var that = this
				that.class_id = id
				$api.req({
					url: '/api/Index/courseClassDetail',
					data: {
						id: that.course.id,
						class_id: that.class_id
					}
				}, function(res) {
					if (res.code == 1) {
						that.courseClassDetail = res.data
						that.show = true
						that.videoContext = uni.createVideoContext('popup_video', that);
						// that.videoContext.requestFullScreen();
					}
				})
			},
			// 退出全屏的时候暂停视频
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
				}
			},
			// 播放进度发生改变
			timeupdate(e) {
				let that = this
				// this.submitTime(this.currentTime)
				var currentTime1 = parseInt(e.detail.currentTime)
				console.log("播放进度",currentTime1)
				var isReady = that.user.is_kj
				if (!isReady) {
					if (currentTime1 > that.initial_time && currentTime1 - that.initial_time > 2) {
						let videoContext = uni.createVideoContext('popup_video');
						videoContext.seek(that.initial_time);
						uni.showToast({
							title: '抱歉，您不能快进',
							icon: 'none',
							duration: 2000
						});
					}
					that.initial_time = currentTime1
				}
				this.currentTime = e.detail.currentTime

			},
			// 视频播放完成
			ended() {
				var that = this
				const index = uni.getStorageSync('index')
				$api.req({
					url: '/api/Index/endStudy',
					data: {
						id: that.course.id,
						class_id: that.class_id
					}
				}, function(res) {
					console.log(res)
					if(res.code == 1) {
						that.catalog[index].selected = true
						that.getData(that.course.id)
					}
				})
			},			
			// 学习
			startLearn(index) {
				// this.catalog[index].selected = true
				uni.setStorageSync('index',index)
				var that = this
				that.class_id = that.catalog[index].id
				$api.req({
					url: '/api/Index/startStudy',
					data: {
						id: that.course.id,
						class_id: that.class_id
					}
				}, function(res) {
					if (res.code == 1) {
						that.startStudy(that.class_id)
					} 
				})
				
			},
			// 发送评论
			sendComment() {
				var that = this
				$api.req({
					url: '/api/Index/submitComments',
					data: {
						id: that.course.id,
						class_id: that.class_id,
						content: that.commentValue
					}
				},function(res) {
					console.log("评论：",res);
					that.commentValue = ""
					that.getCommit(that.course.id)
				})
			},
			// 开始考试
			startExam() {
				if (this.progress == 100) {
					if (this.course.can_test == 1) {
						if (this.course.pass_history) {
							$api.info('您已经考试及格了，无需再参加考试了')
						}else {
							$api.jump('/pages/index/exam/exam?id=' + this.course.id)
							this.exam.show = false
						}
						
					} else {
						$api.info('未到时间')
					}
				} else {
					$api.info("请先学习所有课程")
				}
				
				
				/* var that = this
				$api.req({
					url: '/api/User/startQuestions',
					data: {
						id: that.course.id
					}
				}, function(res) {
					console.log(res);
					if (res.code == 1) {
						
					}
				}) */
			},
			// 提交观看时间
			submitTime(time) {
				var that = this
				$api.req({
					url: '/api/Index/nowTime',
					data: {
						id: that.course.id,
						class_id: that.class_id,
						now: time
					}
				}, function(res) {
					console.log(res)
				})
			},
			// 打开考试须知
			openExam() {
				var that = this
				if(that.course.is_buy == 1) {
					$api.req({
						url: '/api/Publics/config_info'
					}, function(res) {
						that.exam.show = true
						that.exam.content = res.data.test_instructions 
					})
				} else {
					$api.info('请先购买课程')
				}
				
			},
			// 关闭
			close() {
				this.exam.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		position: relative;
		
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 36px 16px 0 0;
		}
		.banner {
			width: 100%;
			// margin-top: 63rpx;
		}
		video {
			width: 100%;
		}
		.content {
			width: 100%;
			margin: 20rpx 0 130rpx;
		}
		.box1 {
			width: 690rpx;
			box-sizing: border-box;
			padding: 16rpx 26rpx;
			background-color: #fff;
			margin: 0 auto;
		}
		.box2 {
			width: auto;
			height: 200rpx;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			background-color: #fff;
			margin: 20rpx 0;
			overflow: auto;
		}
		.box3 {
			width: 690rpx;
			box-sizing: border-box;
			padding: 14rpx 24rpx;
			background-color: #fff;
			margin: 10rpx auto;
		}
		.box4 {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 4px;
			box-sizing: border-box;
			margin: 4rpx auto;
			padding: 34rpx 36rpx;
		}
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			line-height: 25px;
		}
		.text_style1 {
			font-size: 11px;
			font-weight: 500;
			color: #999999;
			line-height: 16px;
		}
		.progress {
			width: 100%;
			height: 28rpx;
			padding: 16rpx 0 28rpx;
		}
		.line_progress {
			width: 100% !important;
			height: 16rpx !important;
		}
		.price {
			font-size: 24px;
			font-weight: 600;
			color: #FA6400;
			line-height: 33px;
		}
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
			margin-top: 14rpx;
		}
		.study_item {
			display: inline-block;
			width: 252rpx;
			box-sizing: border-box;
			padding: 10rpx 14rpx;
			background: #FCF3E4;
			box-shadow: 1px 1px 4px 0px rgba(170,170,170,0.5);
			border-radius: 8px;
			margin-right: 40rpx;
		}
		.name {
			font-size: 11px;
			font-weight: 400;
			color: #333333;
			line-height: 16px;
		}
		.text_style2 {
			font-size: 15px;
			font-weight: 500;
			color: #333333;
			line-height: 21px;
		}
		.text_style3 {
			font-size: 15px;
			font-weight: 400;
			color: #333333;
			line-height: 21px;
		}
		.box4_right {
			width: calc(100% - 80rpx);
			padding-left: 28rpx;
		}
		.box4_name {
			font-size: 14px;
			font-weight: 600;
			color: #333333;
			line-height: 20px;
		}
		.box4_date {
			font-size: 14px;
			font-weight: 400;
			color: #999999;
			line-height: 20px;
		}
		.box4_content {
			padding-top: 16rpx;
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}
		.bottom {
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			background: #fff;
		}
		.u-button {
			width: 506rpx;
			height: 70rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 20px;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
		.u-checkbox__icon-wrap--disabled--checked {
			background-color: #2988FE !important;
			border-color: #2988FE !important;
		}
		
		.u-input {
			width: 574rpx;
			height: 29rpx;
			background: #EEEEEE;
			border-radius: 9px;
		}

		.btn {
			width: 100rpx;
			height: 48rpx;
			background: #2988FE;
			border-radius: 10px;
			margin-left: 12rpx;
			font-size: 12px;
			font-weight: 500;
			text-align: center;
			color: #FFFFFF;
			line-height: 48rpx;
		}
	}
</style>