uniProject/components/catalogue/catalogue.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(255, 255, 255, 0.6);" :is-shadow="false">
		<view class="ezy-catalogue-dialog">
			<uni-icons @click="handleClose" class="catalogue-close-btn"></uni-icons>
			<!-- 目录区域 -->
			<uni-collapse v-model="activeCollapse" class="ezy-catalogue-collapse" accordion>
				<uni-collapse-item title-border="none" :border="false" :name="index" v-for="(item,index) in list" 
				class="collapse-item-box" :class="{ 'collapse-active': activeCollapse === index}">
					<template v-slot:title>
							<view @click.stop="handleSelectZhang(item,index)" class="collapse-title">
								<view class="collapse-num-box">{{index+1}}</view>
								<!-- 章名 -->
								<text>{{item.zhangName}}</text>
							</view>
							<!-- 锁 -->
							<view class="collapse-lock" v-if="index!=0"></view>
					</template>
					<view class="collapse-content-box">
						<view v-for="(jie,cindex) in item.jieList" class="collapse-content-item">
							<text class="jie-index">{{`${index+1}.${cindex+1}`}}</text>
							<text class="text">{{jie.jieName}}</text>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</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 props = defineProps({
		nianji: {
			type: [String, Number],
		},
		xueqi: {
			type: [String, Number],
		}
	})

	const {
		getCatalogue,
	} = useCatalogue(props);

	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();
		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();
	}
	/**
	 * @summary 选中
	 * @param({zhangId:string}) data
	 */
	function handleSelectZhang(data,index) {
		if(index!=0){
			toast("付费章节");
			return;
		}
		$emit('change-zhang', Object.assign({}, data));
		handleClose();
	}

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

	defineExpose({
		showPopup
	})
</script>