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)" @tap.stop="handleZhangClick(zhang)"
			:open="zhang.open">
			<myCollapseCardVue v-for="jie in zhang.jieList" :title="jie.name" @click.stop="handleJieClick(jie, zhang)" @tap.stop="handleJieClick(jie, zhang)"
				:open="jie.open">
				<view :class="{'kejian-active': activeKjId == item.kjId,'kejian-item':true }" v-for="item in jie.kejianList" @tap.stop="handleKejianClick(item)" @click.stop="handleKejianClick(item)">
					<icon class="kejian-item-icon" 
					:style="{
					      backgroundImage: `url(${activeKjId == item.kjId 
					        ? iconsArr.playIconA 
					        : iconsArr.playIcon})`
					    }"
						></icon>
					<text class="kejian-item-name">{{item.name}}</text>
				<!-- 	<text v-if="isHasProgress">
						<text v-if="item.maxProcess < 100">{{item.maxProcess >= item.curProcess ? item.maxProcess: item.curProcess}}%</text>
						<text v-else>{{item.maxProcess}}%</text>
					</text> -->
				</view>
			</myCollapseCardVue>
		</myCollapseCardVue>
	</view>
</template>

<script setup>
	import cacheManager from '@/utils/cacheManager.js';
	import myCollapseCardVue from '../myCollapseCard/myCollapseCard.vue';
	import {ref,reactive,onMounted} from 'vue';
	const props = defineProps({
		chapterArr: {
			type: Array
		},
		isHasProgress: {
			type: Boolean
		},
		activeKjId: {
			type: [Number,String]
		}
	})
	const iconsArr = reactive({
			playIcon: '',
			playIconA: '',
	})

	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)
	}
	onMounted(() => {
		iconsArr.playIcon = cacheManager.get('projectImg').play_icon;
		iconsArr.playIconA = cacheManager.get('projectImg').play_icon_a;
	});
</script>