peixue-dev/peidu/uniapp/user-package/pages/user/student.vue

<template>
  <view class="student-page">
    <!-- 学生列表 -->
    <scroll-view scroll-y class="student-list">
      <view class="student-item" v-for="student in studentList" :key="student.id" @click="goDetail(student.id)">
        <view class="student-avatar">
          <text class="avatar-emoji">{{ student.gender === 1 ? '👦' : '👧' }}</text>
        </view>
        <view class="student-info">
          <view class="student-name">{{ student.name }}</view>
          <view class="student-detail">
            <text class="detail-item">{{ student.grade }}</text>
            <text class="detail-item">{{ student.school }}</text>
          </view>
        </view>
        <view class="student-actions">
          <text class="default-tag" v-if="student.isDefault">默认</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <view class="empty-state" v-if="studentList.length === 0">
        <text class="empty-icon">👨‍🎓</text>
        <text class="empty-text">还没有添加学生信息</text>
      </view>
    </scroll-view>

    <!-- 添加按钮 -->
    <view class="bottom-bar">
      <button class="btn-add" @click="addStudent">
        <text class="btn-icon">➕</text>
        <text>添加学生</text>
      </button>
    </view>
  </view>
</template>

<script>
import { studentApi } from '@/api/index.js'

export default {
  data() {
    return {
      studentList: []
    }
  },
  
  onShow() {
    this.loadStudentList()
  },
  
  methods: {
    async loadStudentList() {
      try {
        uni.showLoading({ title: '加载中...' })
        const res = await studentApi.getStudentList()
        if (res && res.code === 200 && res.data) {
          this.studentList = res.data
        }
      } catch (e) {
        console.error('加载学生列表失败', e)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    goDetail(id) {
      uni.navigateTo({
        url: `/user-package/pages/student/detail?id=${id}`
      })
    },
    
    addStudent() {
      uni.navigateTo({
        url: '/user-package/pages/student/add'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$primary-green: #5fc9ba;
$white: #fff;
$black: #333;
$gray: #999;
$light-gray: #f5f5f5;

.student-page {
  min-height: 100vh;
  background: $light-gray;
  display: flex;
  flex-direction: column;
}

.student-list {
  flex: 1;
  padding: 20rpx 30rpx 140rpx;
}

.student-item {
  background: $white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .student-avatar {
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #5fc9ba 0%, #7dd9ca 100%);
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    .avatar-emoji {
      font-size: 48rpx;
    }
  }
  
  .student-info {
    flex: 1;
    
    .student-name {
      font-size: 32rpx;
      font-weight: bold;
      color: $black;
      margin-bottom: 12rpx;
    }
    
    .student-detail {
      display: flex;
      gap: 20rpx;
      
      .detail-item {
        font-size: 24rpx;
        color: $gray;
      }
    }
  }
  
  .student-actions {
    display: flex;
    align-items: center;
    gap: 12rpx;
    
    .default-tag {
      padding: 6rpx 16rpx;
      background: rgba(95, 201, 186, 0.1);
      color: $primary-green;
      border-radius: 20rpx;
      font-size: 22rpx;
    }
    
    .arrow {
      font-size: 32rpx;
      color: #ddd;
    }
  }
}

.empty-state {
  text-align: center;
  padding: 120rpx 0;
  
  .empty-icon {
    display: block;
    font-size: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.3;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: $gray;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $white;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .btn-add {
    width: 100%;
    height: 88rpx;
    background: $primary-green;
    color: $white;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    
    .btn-icon {
      font-size: 32rpx;
    }
  }
}
</style>