uniProject/pages/xinshuxue/components/danyuanMulu.vue

<template>
	<view>
		<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
			mask-background-color="rgba(255, 255, 255, 0.1);" type="bottom">
			<view class="xuexi-dyml-page">
				<!-- 头部 -->
				<view class="dyml-title">
					<text>单元目录</text>
					<icon @click="goUpPage"></icon>
				</view>
				<!-- 目录 -->
				<view class="xuexi-dyml-body">
					<view class="dyml-item-box" v-for="item in list" @click="handleSelect(item)" :key="item.danyuanId">
						<text class="dy-num">{{item.danyuanName}}</text>
						<text class="dy-title">{{item.intro}}</text>
						<icon></icon>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const list = ref([]);
	const popupRef = ref(null)
	const emits = defineEmits(['close', 'select'])
	import * as httpApi from "@/api/chanpinShuxue.js";

	function goUpPage() {
		popupRef.value.close();
		emits('close')
	}

	function showPopup(banbenId) {
		list.value = [];
		httpApi.getShuxueChanpinDanyuanMulu({
			banbenId
		}).then(res => {
			list.value = res.data;
			popupRef.value.open();
		})
	}

	function closePopup() {
		popupRef.value.close();
	}

	function handleSelect(item) {
		emits('select', item)
		closePopup();
	}

	defineExpose({
		showPopup
	})
</script>

<style>
</style>