wanzai_school_app/pages/addressBook/addressBook.vue

<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />
		<!-- input组件区域 -->
		<headerInput @changeInputValue="changeInputValue" />
		<!-- 学校名称区域 -->
		<view class="school" v-if="!keyWord">万载三中</view>
		<!-- 年级树形展示区域 -->
		<template v-if="!keyWord">
			<view class="tree" v-for="(item, index) in list" :key="item.id" @click="handleClick(index)">
				<uni-collapse :ref="setItemRef">
					<uni-collapse-item titleBorder="show">
						<template v-slot:title>
							<view class="tree_item">{{ item.title }}</view>
						</template>
						<view class="tree_item border" v-for="ele in item.children" :key="ele.id" @click="goPage('/pages/grade/grade')">
							{{ ele.title }}
							<img class="item_img" src="../../static/images/right.png" />
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</template>

		<!-- 搜索结果展示区域 -->
		<listView :list="searchList" v-if="keyWord" />
	</view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import headerInput from '@/components/headerInput.vue'
import listView from '@/components/listView.vue'

// 搜索框关键词数据
const keyWord = ref('')

// 年级结构数据
const list = ref([
	{
		id: 1,
		title: '一年级(103)',
		children: [
			{
				id: '1-1',
				title: '1班(30)'
			},
			{
				id: '1-2',
				title: '2班(36)'
			},
			{
				id: '1-3',
				title: '3班(37)'
			}
		]
	},
	{
		id: 2,
		title: '二年级(110)',
		children: [
			{
				id: '2-1',
				title: '1班(37)'
			},
			{
				id: '2-2',
				title: '2班(36)'
			},
			{
				id: '2-3',
				title: '3班(37)'
			}
		]
	}
])

// 搜索结果列表
const searchList = ref([
	{
		id: 1,
		name: '李商隐',
		number: 6262662
	},
	{
		id: 2,
		name: '张三',
		number: 6266662
	},
	{
		id: 3,
		name: '李四',
		number: 6862662
	},
	{
		id: 4,
		name: '王五',
		number: 8262662
	}
])

// 折叠面板ref数组
const collapseRefs = ref([])

onLoad(() => {})

// 生成ref数组回调
const setItemRef = (el) => {
	collapseRefs.value.push(el)
}

// 点击每一个年级回调
const handleClick = (index) => {
	nextTick(() => {
		collapseRefs.value[index].resize()
	})
}

// 点击每一个班级回调
const goPage = (url) => {
	uni.navigateTo({
		url
	})
}

// 输入框组件自定义事件
const changeInputValue = (data) => {
	keyWord.value = data
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0 20rpx;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 背景图片区域样式
	.img_bg {
		position: absolute;
		top: -70rpx;
		right: -32rpx;
		width: 589rpx;
		height: 320rpx;
		pointer-events: none;
	}

	// 学校名称区域样式
	.school {
		margin-top: 38rpx;
		color: #808080;
		font-size: 28rpx;
	}

	// 年级树形展示区域样式
	.tree {
		margin-top: 20rpx;
		width: 710rpx;
		border-radius: 8rpx;
		background-color: #fff;
		z-index: 1;

		.tree_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx 0 30rpx;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
			font-weight: bold;

			.item_img {
				width: 31rpx;
				height: 31rpx;
			}
		}

		.border {
			font-weight: 400;
			border-bottom: 1rpx solid #e6e6e6;
		}
	}
}
</style>