zc_saas_h5/components/course/courseModule.vue

<template>
<!-- style="margin: 20rpx 0;" -->
	<view>
		<view class="title" @click="openModule(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 class="title_name" style="margin-left: 10rpx;">{{menuItem.name}}</text>
			<view>
				<image src="/static/icon/up.png" class="icon_up" v-if="down"></image>
				<image src="/static/icon/down.png" class="icon_up" v-if="!down"></image>
			</view>
		</view>
		<view v-show="!down">
			<view v-for="(itemM,indexM) in list" :key="indexM">
				<courseChapter :orderGoodsId="orderGoodsId"
						:isLive="isLive" :preItem="list[indexM - 1] || preItem" :sectionMaxNum="sectionMaxNum" :needOpen="needOpen" @playEnd="playEnd($event)" @toDo="toDo($event)" :courseId="courseId" :learningOrder="learningOrder" :goodsId="goodsId" :isBuy="isBuy" :gradeId="gradeId" :isRebuild="isRebuild"  :menuItem="itemM" :levelId="levelId+'-'+itemM.chapterId"></courseChapter>
				<u-line v-if="indexM<list.length-1"></u-line>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
import courseChapter from "@/components/course/courseChapter.vue";
export default {
	name: 'courseModule',
	props: {
		isLive:false,
		orderGoodsId:{
			default:0
		},
		preItem:{
			default:undefined
		},
		learningOrder:{ //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
			type:Number,
			defaule:0
		},
		needOpen:{ //是否默认展开
			type:Boolean,
			default:false,
		},
		menuItem: {
			type: Object,
			default: {}
		},
		goodsId: {
			type: Number,
			default: 0
		},
		courseId: {
			type: Number,
			default: 0
		},
		isBuy: { //是否是已购买商品
			type: Boolean,
			default: false
		},
		levelId: {
			type: String,
			default: ""
		},
		isRebuild: {  //是否重修目录
			type: Boolean,
			default: false
		},
		gradeId: {  //重修需要班级ID
			type: Number,
			default: 0
		},
		sectionMaxNum:{
			default:undefined
		}
	},
	components: {
		courseChapter
	},
	data() {
		return {
			 down:true,
			 list:[],
		};
	},
	onLoad() {},
	created() {
		
	},
	watch: {
    	courseId(newV, oldV) {
			console.log('监听---模块---》', newV, oldV)
		}
	},
	mounted() {
		if(this.needOpen && this.chapterOpen) {
			this.openModule(this.menuItem)
		}
	},
	methods: {
		playEnd(isRebuild) {
			this.$emit('playEnd',{isRebuild:isRebuild.isRebuild})
		},
		toDo(item) {
			this.$emit('toDo',item)
		},
		openModule(item){
			this.down = !this.down
			if(!this.down&&this.list.length==0){
				if(this.isBuy){
					if(this.isRebuild){
						this.getReChapterList(item.id,item.courseId)
					}else{
						this.getBuyChapterList(item.id,item.courseId) //已购买目录
					}
				}else{
					this.getChapterList(item.id) //未购买目录
				}
				
			}
		},
			getChapterList(moduleId) {
					let self = this
                    // url: '/app/common/course/chapterList/'+data,
					this.$api.chapterList(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.chapterId
								item.menuType = 2;
							}
							self.list = res.data.data
						}
					});
				},
		getReChapterList(moduleId,courseId) {
			let self = this
			this.$api.reChapterList({moduleId:moduleId,gradeId:this.gradeId,courseId:courseId,rebuild:1}).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.chapterId
						
					}
					self.list = res.data.data
				}
			});
		},
		getBuyChapterList(moduleId,courseId) {
			let self = this
			this.$api.reChapterList({moduleId:moduleId,gradeId:this.gradeId,courseId:courseId}).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.chapterId
						item.menuType = 2;
					}
					self.list = res.data.data
				}
			});
		},
	},computed: { ...mapGetters(['chapterOpen']) },
};
</script>

<style lang="scss" scoped>
	
.title{
	height: 70rpx;
	font-family: PingFang SC;
	// margin-bottom:30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #EEEEEE;
	.title_name {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
}
</style>