uniProject/components/catalogue/catalogue.vue

<template>
	<uni-popup ref="popupRef" :mask-background-color="popup_background_color">
		<uni-card :is-shadow="false" class="card-container">
			<template #title>
				<!-- 章节目录区域 -->
				<view class="catalogue-custom-title">
					<!-- 自定义标题区域 -->
					<text></text>
					<uni-icons type="closeempty" size="16" @click="handleClose"></uni-icons>
				</view>
			</template>
			<!-- 目录区域 -->
			<uni-collapse v-model="activeCollapse" class="collapse-container" accordion>
				<uni-collapse-item title-border="none" :border="false" :name="index" v-for="(item,index) in list">
					<template v-slot:title>
						<view class="title-layout">
							<view @click.stop="handleSelectZhang(item)" class="text-container">
								<uni-badge class="uni-badge-left-margin" :text="index+1" type="primary" />
								<!-- 章名 -->
								<text class="text-white">{{item.zhangName}}</text>
							</view>
							<!-- 三角图标 双色激活不同图标 -->
							<uni-icons v-if="activeCollapse === index" type="right" size="16" style="justify-self: flex-end;"></uni-icons>
							<uni-icons v-else type="right" size="16" style="justify-self: flex-end;"></uni-icons>
							<!-- 三角图标完结 -->
							<uni-icons :class="['right-icon']" @click="handleExpand" type="locked-filled" size="16" style="justify-self: flex-end;"></uni-icons>
						</view>
					</template>
					<view class="content">
						<view v-for="(jie,cindex) in item.jieList">
							<text class="jie-index">{{`${index+1}.${cindex+1}`}}</text>
							<text class="text">{{jie.jieName}}</text>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
	</uni-popup>
</template>

<script setup>
	import {
		useCatalogue
	} from './useCatalogue';
	import {
		ref
	} from "vue";
	import {toast} from "@/utils/common.js"
	
	const $emit = defineEmits(['change-zhang'])
	
	
	const {
		getCatalogue,
	} = useCatalogue();
	const popupRef = ref(null); // 索引
	const list = ref([]); // 章节
	const activeCollapse = ref('');
	
	const popup_background_color = `rgba(0,0,0,0.2)`; // 【弹出框模态层背景颜色】


	/**
	 * @summary 展示弹窗 暴露函数
	 */
	async function showPopup() {
		const  [err, data] = await getCatalogue();
		console.log('ddd',data);
		if (err) {
			toast("章节目录数据获取失败");
			return;
		}
		refreshCatalogue(data);
		handleShow();
	}
	
	/**
	 * @param([]) 章节赋值
	 */
	function refreshCatalogue(data) {
		list.value = data;
	}
	
	/**
	 * @summary 展示目录弹窗
	 */
	function handleShow() {
		popupRef.value.open('center');
	}

	/**
	 * @summary 关闭目录弹窗
	 */
	function handleClose() {
		popupRef.value.close();
	}
	function getNextZhangData(data) {
		const index = list.value.findIndex(item => item.zhangId === data.zhangId);
		console.log(index);
		if (index === list.value.length -1) {
			return {}
		} else {
			return list.value[index+1]
		}
	}
	/**
	 * @summary 选中
	 * @param({zhangId:string}) data
	 */ 
	function handleSelectZhang(data) {
		const nextZhang = getNextZhangData(data);
		console.log('nextZhang',nextZhang)
		$emit('change-zhang', Object.assign({},data, {nextZhang}));
		handleClose();
	}

	function handleExpand() {
		console.log('zhankai')
	}

	defineExpose({
		showPopup
	})
</script>

<style lang="scss" scoped>
	.title-layout {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px
	}

	.child-item {
		padding: 10px;
	}

	// 章节目录Card
	.card-container {
		background-color: rgba(0, 0, 0, 0.2); // 【弹出框 背景颜色】
		min-width: 300px;
	}

	// 目录区域 
	::v-deep .uni-card__content {
		padding: 0 !important;
		margin: 10px 0;
		background-color: rgba(0, 0, 0, 0.5);  // 【弹出框 内容区域背景颜色】
		border-radius: 4px;
	}
	// 目录文字 颜色调整
	.text-white {
		color: #fff; // 【课件 章文字颜色】
	}

	// 章节目录区域 标题
	.catalogue-custom-title {
		display: flex;
		justify-content: space-between;
		height: 40px;
		line-height: 40px;
		margin-top: 10px;
		background-color: #fff; // 【弹出 框 标题背景 待替换成背景图】

		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	
	// 章文本区域
	.text-container {
		width: 100%;
	}
	
	.collapse-container {
		background-color: transparent;  // 【弹出框 内容区域背景颜色】
	}
	
	::v-deep .uni-collapse-item__wrap {
		background-color: transparent;  // 【弹出框 内容区域背景颜色】
	}
	
	::v-deep .uni-collapse-item__wrap-content {
		color: #fff; // 【课件 章文字颜色】
		line-height: 1.5;
		padding: 5px 10px;
	}
	
	.jie-index {
		margin-right: 5px;
	}
	
	.active {
		rotate: 90deg;
		color: red;
	}
</style>