uniProject/pages/xinshuxue/components/danyuanMulu.vue

<template>
	<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" :key="item.danyuanId">
					<text class="dy-num">{{item.danyuanName}}</text>
					<text class="dy-title">{{item.intro}}</text>
					<icon></icon>
				</view>
			</view>
		</view>
	</uni-popup>
</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>