uniProject/components/kecheng-mulu/kecheng-mulu.vue

<template>
	<view class="kecheng-mulu-box">
		<myCollapseCardVue v-for="zhang in chapterArr" :title="zhang.name" @click.stop="handleZhangClick(zhang)"
			:open="zhang.open">
			<myCollapseCardVue v-for="jie in zhang.jieList" :title="jie.name" @click.stop="handleJieClick(jie, zhang)"
				:open="jie.open">
				<view :class="{'kejian-active': activeKjId == item.kjId,'kejian-item':true }" v-for="item in jie.kejianList" @click.stop="handleKejianClick(item)">
					<icon class="kejian-item-icon"></icon>
					<text>{{item.name}}</text>
					<text v-if="isHasProgress">
						进度
						<text v-if="item.maxProcess < 100" v-text="item.maxProcess >= item.curProcess ? item.maxProcess: item.curProcess"></text>
						<text v-else v-text="item.maxProcess"></text>
					</text>
				</view>
			</myCollapseCardVue>
		</myCollapseCardVue>
	</view>
</template>

<script setup>
	import myCollapseCardVue from '../myCollapseCard/myCollapseCard.vue';
	import {
		ref
	} from 'vue';
	const props = defineProps({
		chapterArr: {
			type: Array
		},
		isHasProgress: {
			type: Boolean
		},
		activeKjId: {
			type: [Number,String]
		}
	})

	const emits = defineEmits(['play'])

	function handleZhangClick(item) {

		if (item.open) {
			// 展开 -》 关闭
			props.chapterArr.forEach(zhang => {
				zhang.open = false;
				zhang.jieList.forEach(jie => {
					jie.open = false;
				})
			})
		} else {
			// 关闭 -》 展开
			props.chapterArr.forEach(zhang => {
				zhang.open = false;
				zhang.jieList.forEach(jie => {
					jie.open = false;
				})
			})
			item.open = true;
		}
	}

	function handleJieClick(item, zhang) {
		if (item.open) {
			// 展开 -》 关闭
			zhang.jieList.forEach(jie => {
				jie.open = false;
			})
		} else {
			// 关闭 -》 展开
			zhang.jieList.forEach(jie => {
				jie.open = false;
			})
			item.open = true;
		}
	}

	function handleKejianClick(item) {
		emits('play', item)
	}
</script>