xlx_teacher_app/src/pages/student/list.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'

interface Student {
  id: string
  name: string
  studentId: string
  className: string
  status: string
  avatar?: string
}

const searchQuery = ref('')
const students = ref<Student[]>([])

// 模拟学生数据
const mockStudents: Student[] = [
  {
    id: '1',
    name: '张三',
    studentId: '20230001',
    className: '一年级1班',
    status: '在校',
  },
  {
    id: '2',
    name: '李四',
    studentId: '20230002',
    className: '一年级1班',
    status: '在校',
  },
  {
    id: '3',
    name: '王五',
    studentId: '20230003',
    className: '一年级1班',
    status: '请假',
  },
  {
    id: '4',
    name: '赵六',
    studentId: '20230004',
    className: '一年级2班',
    status: '在校',
  },
  {
    id: '5',
    name: '孙七',
    studentId: '20230005',
    className: '一年级2班',
    status: '在校',
  },
]

// 过滤后的学生列表
const filteredStudents = computed(() => {
  if (!searchQuery.value) {
    return students.value
  }

  const query = searchQuery.value.toLowerCase()
  return students.value.filter(student =>
    student.name.toLowerCase().includes(query)
    || student.studentId.toLowerCase().includes(query),
  )
})

// 搜索处理
function handleSearch() {
  // 这里可以添加防抖逻辑
}

// 跳转到学生详情
function goToStudentDetail(student: Student) {
  uni.navigateTo({
    url: `/pages/student/detail?id=${student.id}`,
  })
}

// 加载学生数据
async function loadStudents() {
  try {
    // 这里可以调用实际的API
    students.value = mockStudents
  }
  catch (error) {
    console.error('加载学生数据失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'error',
    })
  }
}

onMounted(() => {
  loadStudents()
})
</script>

<template>
  <view>
    <!-- 头部 -->
    <view class="border-b border-gray-100 bg-white px-4 py-3">
      <text class="text-lg text-gray-800 font-semibold">学生名单</text>
    </view>

    <!-- 搜索栏 -->
    <view class="border-b border-gray-100 bg-white px-4 py-3">
      <view class="relative">
        <input
          v-model="searchQuery"
          class="h-10 w-full rounded-full bg-gray-100 pl-10 pr-4 text-sm placeholder-gray-500"
          placeholder="搜索学生姓名或学号"
          @input="handleSearch"
        >
        <uni-icons
          type="search"
          size="18"
          color="#9CA3AF"
          class="absolute left-3 top-1/2 -translate-y-1/2"
        />
      </view>
    </view>

    <!-- 学生列表 -->
    <view class="flex-1 p-4">
      <view
        v-for="student in filteredStudents"
        :key="student.id"
        class="mb-3 flex items-center border border-gray-100 rounded-xl bg-white p-4 shadow-sm"
        @tap="goToStudentDetail(student)"
      >
        <!-- 头像 -->
        <view class="mr-3 h-12 w-12 flex items-center justify-center rounded-full bg-blue-100">
          <text class="text-base text-blue-600 font-semibold">{{ student.name.slice(-2) }}</text>
        </view>

        <!-- 学生信息 -->
        <view class="flex-1">
          <view class="mb-1 flex items-center justify-between">
            <text class="text-base text-gray-800 font-semibold">{{ student.name }}</text>
            <text class="text-xs text-gray-500">{{ student.status }}</text>
          </view>
          <view class="flex items-center text-sm text-gray-600">
            <text class="mr-4">学号：{{ student.studentId }}</text>
            <text>班级：{{ student.className }}</text>
          </view>
        </view>

        <!-- 右箭头 -->
        <uni-icons type="right" size="16" color="#D1D5DB" />
      </view>

      <!-- 空状态 -->
      <view v-if="filteredStudents.length === 0" class="flex flex-col items-center justify-center py-20">
        <uni-icons type="info" size="48" color="#D1D5DB" />
        <text class="mt-2 text-gray-500">暂无学生数据</text>
      </view>
    </view>
  </view>
</template>

<route lang="jsonc" type="home">
    {
      "layout": "tabbar",
      "style": {
        // 'custom' 表示开启自定义导航栏，默认 'default'
        "navigationStyle": "custom",
        "navigationBarTitleText": "学生名单"
      }
    }
</route>