zc_saas_h5/pages2/components/course/courseModule.vue

<template>
	<view style="margin: 20rpx 0;">
		<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 style="margin-left: 10rpx;">{{menuItem.name}}</text>
		</view>
		<view v-if="!down">
			<view v-for="(itemM,indexM) in list" >
				<courseChapter  :menuItem="itemM"></courseChapter>
				<u-line v-if="indexM<list.length-1"></u-line>
			</view>
		</view>
	</view>
</template>

<script>
import courseChapter from '@/pages2/components/course/courseChapter.vue';
export default {
	name: 'courseModule',
	props: {
		menuItem: {
			type: Object,
			default: {}
		}
	},
	components: {
		courseChapter
	},
	data() {
		return {
			 down:true,
			 list:[]
		};
	},
	onLoad() {},
	created() {
		
	},
	mounted() {
		
	},
	methods: {
		openModule(item){
			this.down = !this.down
			if(!this.down&&this.list.length==0){
				this.getChapterList(item.id)
			}
		},
		getChapterList(moduleId) {
			let self = this
			this.$api.chapterList({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.chapterId
						
					}
					self.list = res.data.data
				}
			});
		},
	}
};
</script>

<style scoped>
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
.title{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis; 
}
</style>