zhxy-jsd/src/pages/statistics/xs/studentList.vue

<!-- src/pages/statistics/xs/studentList.vue -->
<template>
  <view class="student-list-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">{{ pageTitle }}</text>
      <text class="refresh-btn" @click="refreshData">刷新</text>
    </view>

    <!-- 筛选信息 -->
    <view class="filter-info" v-if="njmc || bjmc">
      <text class="filter-text">{{ njmc }}{{ bjmc }}</text>
    </view>

    <!-- 学生列表 -->
    <view class="student-list">
      <view 
        class="student-item" 
        v-for="student in studentList" 
        :key="student.xsId"
        @click="viewStudentDetail(student)"
      >
        <view class="student-main-info">
          <text class="student-name">{{ student.xsxm }}</text>
          <text class="student-class">{{ student.njmc }}{{ student.bjmc }}</text>
        </view>
        <view class="student-status" v-if="statType === 'count'">
          <view class="status-tag" :class="getStatusClass(student)">
            {{ getStatusText(student) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="studentList.length === 0 && !isLoading">
      <text class="empty-text">暂无学生数据</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="isLoading">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getStudentListApi } from '@/api/statistics/studentScaleApi'
import { useDataStore } from '@/store/modules/data'

interface Student {
  xsId: string;
  xsxm: string;
  njmc: string;
  bjmc: string;
  jzxm?: string;
  [key: string]: any;
}

const pageTitle = ref('')
const statType = ref('')
const statCode = ref('')
const subType = ref('')
const njId = ref('')
const njmc = ref('')
const bjId = ref('')
const bjmc = ref('')
const studentList = ref<Student[]>([])
const isLoading = ref(false)

const { setXs } = useDataStore()

// 获取状态样式类
const getStatusClass = (student: Student) => {
  if (subType.value === 'followed') {
    return 'completed'
  } else if (subType.value === 'unfollowed') {
    return 'unfollowed'
  }
  return ''
}

// 获取状态文本
const getStatusText = (student: Student) => {
  if (subType.value === 'followed') {
    return '已关注'
  } else if (subType.value === 'unfollowed') {
    return '未关注'
  }
  return ''
}

// 刷新数据
const refreshData = async () => {
  await loadStudentData()
}

// 查看学生详情
const viewStudentDetail = (student: Student) => {
  setXs({
    xsId: student.xsId,
    id: student.xsId,
    xsxm: student.xsxm,
    xm: student.xsxm,
    njmc: student.njmc,
    njmcName: student.njmc,
    bjmc: student.bjmc,
    jzxm: student.jzxm
  })
  
  uni.navigateTo({
    url: '/pages/view/homeSchool/parentAddressBook/detail'
  })
}

// 加载学生数据
const loadStudentData = async () => {
  try {
    isLoading.value = true
    
    const params: any = {
      type: statType.value,
      code: statCode.value
    }
    
    if (subType.value) {
      params.subType = subType.value
    }
    
    if (njId.value) {
      params.njId = njId.value
    }
    
    if (bjId.value) {
      params.bjId = bjId.value
    }
    
    const result = await getStudentListApi(params)
    
    if (result.resultCode === 1 && result.result) {
      studentList.value = Array.isArray(result.result) ? result.result : []
    }
    
  } catch (error) {
    console.error('加载学生数据失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'error'
    })
  } finally {
    isLoading.value = false
  }
}

onLoad((options) => {
  if (options.type && options.code && options.title) {
    statType.value = options.type
    statCode.value = options.code
    pageTitle.value = decodeURIComponent(options.title)
    
    if (options.subType) {
      subType.value = options.subType
    }
    
    if (options.njId) {
      njId.value = options.njId
    }
    
    if (options.njmc) {
      njmc.value = decodeURIComponent(options.njmc)
    }
    
    if (options.bjId) {
      bjId.value = options.bjId
    }
    
    if (options.bjmc) {
      bjmc.value = decodeURIComponent(options.bjmc)
    }
    
    loadStudentData()
  }
})
</script>

<style scoped lang="scss">
.student-list-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 12px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.refresh-btn {
  font-size: 14px;
  color: #1890ff;
  padding: 4px 8px;
  border: 1px solid #1890ff;
  border-radius: 4px;
}

.filter-info {
  background-color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-text {
  font-size: 14px;
  color: #1890ff;
  font-weight: 500;
}

.student-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.student-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    background-color: #f0f8ff;
  }
}

.student-main-info {
  flex: 1;
}

.student-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4px;
}

.student-class {
  font-size: 14px;
  color: #666;
}

.student-status {
  flex-shrink: 0;
}

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  
  &.completed {
    background-color: #e1f3d8;
    color: #67c23a;
    border: 1px solid #b3e19d;
  }
  
  &.unfollowed {
    background-color: #fff7e6;
    color: #faad14;
    border: 1px solid #ffd591;
  }
}

.empty-state,
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-text,
.loading-text {
  font-size: 14px;
  color: #999;
}
</style>