wanzai_school_app/pages/grade/grade.vue

<template>
	<view class="container">
		<!-- 背景图片区域 -->
		<img class="img_bg" src="../../static/images/center-bg.png" />
		<!-- input组件区域 -->
		<headerInput @changeInputValue="changeInputValue" />
		<!-- 学校年级班级区域 -->
		<view class="school">万载三中/{{ gradeName }}/{{ className }}</view>

		<!-- 学生列表区域 -->
		<listView :list="list" :appType="appType" />
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import headerInput from '@/components/headerInput.vue'
import listView from '@/components/listView.vue'
import { myRequest } from '@/utils/api.js'

// 学生列表数组
const list = ref([])
// 年级信息
const gradeName = ref('')
// 班级信息
const className = ref('')

const appType = ref('')

onLoad((options) => {
	appType.value = options.type || ''
	getData()
})

// 输入框组件自定义事件
const changeInputValue = (value) => {
	if (value.trim()) {
		let temList = []
		list.value.forEach((ele) => {
			if (ele.name.indexOf(value.trim()) != -1) {
				temList.push(ele)
			}
		})
		list.value = temList
	} else {
		getData()
	}
}

const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/queryPhoneBook',
		data: {
			id: uni.getStorageSync('userInfo').id
		}
	})
	// console.log(res.data)

	res.data.forEach((ele) => {
		let temlist
		ele.classBookList.forEach((item, index, arr) => {
			if (item.bookUserList.length) {
				// 所在年级学生的数据
				list.value = item.bookUserList
				// 班级信息
				className.value = arr[index].className
				temlist = arr
			}
		})
		if (ele.classBookList == temlist) {
			gradeName.value = ele.gradeName
		}
	})
	uni.setNavigationBarTitle({
		title: gradeName.value + className.value
	})
}
</script>

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

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

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