zc_saas_h5/components/course/courseChapter.vue

<template>
	<view style="margin: 20rpx 0;">
		<view class="title" @click="openChapter(menuItem)">
		<image src="/static/icon/up1.png" class="icon_up" v-if="down"></image>
		<image src="/static/icon/down1.png" class="icon_up" v-if="!down"></image>
		<text style="margin-left: 30rpx;">{{menuItem.name}}</text>
		</view>
		<view v-if="!down">
			<view v-for="(itemM,indexM) in list" >
				<view v-if="itemM.type!=2">
					<courseSection :courseId="courseId"  :goodsId="goodsId" :isBuy="isBuy" :isRebuild="isRebuild" :gradeId="gradeId" :menuItem="itemM" :levelId="levelId+'-'+itemM.sectionId"></courseSection>
					<u-line v-if="indexM<list.length-1"></u-line>
				</view>
				<view v-if="itemM.type==2">
					<u-line ></u-line>
					<view class="examBox"  @click="toDo(itemM.typeId,goodsId,itemM.moduleId,itemM.chapterId)">
						<view class="exam">
							<view class="eTag">{{itemM.doType==1?'练习':'考试'}}</view>
							<view style="margin-left: 15rpx;">{{itemM.name}}</view>
						</view>
						<view v-if="isRebuild||itemM.rebuild>0" class="tagRe">待重修</view>
						<view v-else>
							<view v-if="itemM.learning==1" class="tagGreen">已做完</view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import courseSection from '@/components/course/courseSection.vue';
export default {
	name: 'courseChapter',
	props: {
		learningOrder:{ //是否设置学习顺序 1 设置 0不设置
			type:String,
			default:'0'
		},
		menuItem: {
			type: Object,
			default: {}
		},
		isBuy: {
			type: Boolean,
			default: false
		},
		levelId: {
			type: String,
			default: ""
		},
		goodsId: {
			type: Number,
			default: 0
		},
		courseId: {
			type: Number,
			default: 0
		},
		isRebuild: {
			type: Boolean,
			default: false
		},
		gradeId: {
			type: Number,
			default: 0
		}
	},
	components: {
		courseSection
	},
	data() {
		return {
			down:true,
			list:[],
			examList:{},
			canLearn:false, //是否全部视频看完可以练习、测试
	
		};
	},
	onLoad() {},
	created() {
		
	},
	mounted() {
	},
	methods: {
		/**
		 * 去做题
		 */
		async toDo(id,goodsId =0,moduleId = 0, chapterId = 0) {
			if(this.learningOrder == 1) {
				if(this.canLearn) {
					uni.navigateTo({
						url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
					})
				} else {
					uni.showToast({
						icon:'none',
						title:'请学完视频课程再进行练习和测试'
					})
				}
			} else {
				uni.navigateTo({
					url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
				})
			}
			
		},
		openChapter(item){
			this.down = !this.down
			if(!this.down&&this.list.length==0){
				console.log(item.id,69)
				if(this.isBuy){
					let moduleId = item.moduleId?item.moduleId:0
					if(this.isRebuild){
						this.getReSectionList(item.id,item.courseId,moduleId)
					}else{
						this.getBuySectionList(item.id,item.courseId,moduleId)
		//				this.getMenuExamList(item.id,item.courseId,moduleId)
					}
				}else{
					this.getSectionList(item.id)
				}
				
			}
		},
		getMenuExamList(chapterId,courseId,moduleId) {
			let self = this
			this.$api.menuExamList({chapterId:chapterId,courseId:courseId,moduleId:moduleId}).then(res => {
				if(res.data.code==200){
					self.examList = res.data.rows
				}
			});
		},
		getSectionList(chapterId) {
			let self = this
			this.$api.sectionList(chapterId).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.sectionId
						//判断是否试听
						item.tryListen = false
						if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
							item.tryListen = true
						}	
					}
					
					let newArr = res.data.data.filter(item => {
						console.log(item)
						return item.type != 2;
					})
					this.canLearn = newArr.every(item => {
						console.log(item)
						if(item.learning == 1) {
							return true;
						} else {
							return false;
						}
					})
					self.list = res.data.data
				}
			});
		},
		getReSectionList(chapterId,courseId,moduleId) {
			let self = this
			this.$api.reSectionList({chapterId:chapterId,gradeId:this.gradeId,courseId:courseId,rebuild:1,moduleId:moduleId}).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.sectionId
						//判断是否试听
						item.tryListen = false
						if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
							item.tryListen = true
						}	
					}
					let newArr = res.data.data.filter(item => {
						console.log(item)
						return item.type != 2;
					})
					this.canLearn = newArr.every(item => {
						console.log(item)
						if(item.learning == 1) {
							return true;
						} else {
							return false;
						}
					})
					self.list = res.data.data
				}
			});
		},
		getBuySectionList(chapterId,courseId,moduleId) {
			let self = this
			this.$api.reSectionList({chapterId:chapterId,gradeId:this.gradeId,courseId:courseId,moduleId:moduleId}).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.sectionId
						//判断是否试听
						item.tryListen = false
						if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
							item.tryListen = true
						}	
					}
					let newArr = res.data.data.filter(item => {
						console.log(item)
						return item.type != 2;
					})
					this.canLearn = newArr.every(item => {
						console.log(item)
						if(item.learning == 1) {
							return true;
						} else {
							return false;
						}
					})
					self.list = res.data.data
				}
			});
		},
	},computed: { ...mapGetters(['goodsAuditionConfigIdList']) },
};
</script>

<style scoped>

	.tagRe{
		width: 80rpx;
		height: 28rpx;
		background: #FF3B30;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tagGreen{
		width: 80rpx;
		height: 28rpx;
		background: #34C759;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.eTag{
		width: 56rpx;
		height: 28rpx;
		background: #007AFF;
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.examBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.exam{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
.title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis; 
}
</style>