saas_miniprogram/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" >
				<courseSection :isBuy="isBuy" :isRebuild="isRebuild" :menuItem="itemM" :levelId="levelId+'-'+itemM.sectionId"></courseSection>
				<u-line v-if="indexM<list.length-1"></u-line>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import courseSection from '@/components/course/courseSection.vue';
export default {
	name: 'courseChapter',
	props: {
		menuItem: {
			type: Object,
			default: {}
		},
		isBuy: {
			type: Boolean,
			default: false
		},
		levelId: {
			type: String,
			default: ""
		},
		isRebuild: {
			type: Boolean,
			default: false
		}
	},
	components: {
		courseSection
	},
	data() {
		return {
			down:true,
			list:[]
	
		};
	},
	onLoad() {},
	created() {
		
	},
	mounted() {
	},
	methods: {
		openChapter(item){
			this.down = !this.down
			if(!this.down&&this.list.length==0){
				this.getSectionList(item.id)
			}
		},
		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
						}	
					}
					self.list = res.data.data
				}
			});
		},
	},computed: { ...mapGetters(['goodsAuditionConfigIdList']) },
};
</script>

<style scoped>
	.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>