exam/exam-06173-uni/pages/course/detail.vue

<template>
	<view class="content" v-if="courseData!=null && courseData.id!=null">

		<view class="uni-form-item uni-column">
			<view class="tt1">{{courseData.title}}</view>
		</view>

		<view class="uni-form-item uni-column" v-if="courseData.catId_dictText">
			<view class="tt2 desc">类型：{{courseData.catId_dictText}}</view>
		</view>
		<view class="uni-form-item uni-column">
			<view class="tt2 desc">课时：{{courseData.periods}}</view>
		</view>
		
		
		<view v-if="courseData.state===1" class="empty">
			课程已禁用，请联系管理员！
		</view>
		
		<view v-else-if="courseData.state===2" class="empty">
			课程学习暂未开始，请持续关注！
		</view>
		
		<view v-else-if="courseData.state===3" class="empty">
			来晚了，课程学习已截止！
		</view>
		
		<view v-else-if="courseData.state===4" class="empty">
			当前不在可学习时间段，可学习时间段为：{{courseData.dayRule}}
		</view>
		
		<view v-else-if="courseData.state===5" class="empty">
			每天限制最多学习{{courseData.dayLimit}}分钟，明天再来吧！
		</view>
		
		
	
		
	
		<view v-else style="margin-top: 20px;">
		
		
			<view style="background: #f5f5f5">
				<uni-segmented-control :current="current" :values="tabs" @clickItem="changeTab" styleType="text"
					activeColor="#007aff">
				</uni-segmented-control>
			</view>
			
			<scroll-view style="margin-top: 20px;">

				<view v-if="courseData.liveList!=null && courseData.liveList.length>0">
					<view v-if="current === 0">
						<course-live v-model="courseData.liveList" 
						:courseId="courseData.id" 
						:drag="courseData.videoDrag">
						</course-live>
					</view>
					
					<view v-if="current === 1">
						<course-file v-model="courseData.dirList" 
						:courseId="courseData.id"  
						:checkOn="courseData.checkOn"
						:checkSec="courseData.checkSec"
						:drag="courseData.videoDrag"/>			
					</view>
					
					<view v-if="current === 2">
						 <u-parse :content="courseData.content | formatRichText" @preview="preview" @navigate="navigate" ></u-parse>
					</view>
				</view>
				
				
				<view v-else>
					<view v-if="current === 0">
						
						<course-file v-model="courseData.dirList"
						:courseId="courseData.id"  
						:checkOn="courseData.checkOn"
						:checkSec="courseData.checkSec"
						:drag="courseData.videoDrag"/>		
							
					</view>
					
					<view v-if="current === 1">
						<!-- <rich-text :nodes="courseData.content | formatRichText"></rich-text> -->
						<u-parse :content="courseData.content | formatRichText" @preview="preview" @navigate="navigate" ></u-parse>
					</view>
				</view>
				
				

			</scroll-view>

		</view>
		
		


	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import CourseLive from "./components/CourseLive.vue"
	import CourseFile from "./components/CourseFile.vue"
	import {
		fetchDetail,
		fetchLearnList,
	} from '@/api/course.js'
	
	export default {
		components: {
			cmdProgress,
			CourseLive,
			CourseFile
		},
		data() {
			return {
				courseId: null,
				courseData: {},
				current: 0,
				tabs: ['课件列表', '课程详情']
			}
		},
		
		onShow:function(){
			
			// 返回重新获取进度
			if(this.courseId){
				this.fetchData()
			}
		},
		onLoad: function(option) {

			// 课程ID
			const id = option.id;

			if (typeof id !== 'undefined') {
				this.courseId = id
				this.fetchData()
			}
			
			// 支付成功刷新页面
			uni.$on('paySuccess', () => {
				this.fetchData()
			});

		},
		methods: {
			
			fetchData() {
				
				uni.showLoading({
				    title: '加载中...'
				});
				
				fetchDetail(this.courseId).then(res => {
					this.courseData = res
					uni.hideLoading()
					
					if(res.liveList!==null && res.liveList.length>0){
						this.tabs = ['直播列表','课件列表', '课程详情']
					}
				})
			},

		

			changeTab(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			
	
			
			preview(src, e) {
			      // do something
			},
			navigate(href, e) {
			  // do something
			  // window.location = href
			  console.log('跳转...')
			  // location.href = href
			  
			  uni.navigateTo({
			  	url: '/pages/webview/webview?url='+encodeURIComponent(href)
			  })
			}
		},
		onUnload() {
			uni.$off('paySuccess');
		}
		
		
	}
</script>

<style scoped>
	.content {
		padding: 32rpx;
		font-size: 16px;
	}

	.uni-form-item {
		line-height: 54rpx;
	}
	
	/deep/
	.a {
		color: #007AFF;
		font-weight: 700;
	}
</style>