ss_dc_wechat_mini_program/pages/parent/in-out.vue

<!-- 出入记录 -->
<template>
  <view class="list">

    <view class="list-item" v-for="(item, index) in list" :key="index">
      <view class="list-item-left" :class="item.status === 1 ? 'in' : 'out'">
        {{ item.status === 1 ? '进' : '出' }}
        <!-- <image :src="item.status === 1 ? '/static/icon/in.png' : '/static/icon/out.png'" mode="widthFix"></image> -->
      </view>
      <view class="list-item-right">
        <text>校门</text>
        <text>{{ formatTime(item.createTime, 'MM月dd日 HH:mm:ss') }}</text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>
    
    <!-- 没有更多数据 -->
    <view class="no-more" v-if="finished && list.length">
      <text>没有更多数据了</text>
    </view>
    
    <!-- 空状态 -->
    <view class="empty" v-if="!loading && !list.length">
      <text>暂无数据</text>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue'
import { formatTime } from '@/utils/util.js'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { userApi } from '@/api/user'
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 10
const studentId = ref(0)
// 获取进出记录
async function fetchData() {
    if (loading.value || finished.value) return
    
    loading.value = true
    
    try {
        const res = await userApi.getStudentRecordLog({
            studentId: studentId.value,
            index: page.value,
            size: pageSize
        })
        
        list.value = [...list.value, ...res.list]
        
        // 判断是否加载完所有数据
        if (list.value.length >= res.total) {
            finished.value = true
        }
        
        page.value++
        
    } catch (error) {
        console.error('获取进出记录失败：', error)
        uni.showToast({
            title: '获取数据失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}
// 下拉刷新
async function onRefresh() {
    // 重置状态
    page.value = 1
    list.value = []
    total.value = 0
    finished.value = false
    await fetchData()
    
    // 结束下拉刷新
    uni.stopPullDownRefresh()
}
// 初始加载
onLoad((options) => {
  if (options && options.studentId) {
    studentId.value = options.studentId
  }
  fetchData()
})

// 定义下拉刷新
onPullDownRefresh(() => {
    onRefresh()
})

// 触底加载更多
onReachBottom(() => {
    fetchData()
})
</script>

<style scoped lang="less">
.list {
  .list-item {
    display: flex;
    justify-content:flex-start;
    width: 90%;
    margin: 30rpx auto;
    
    border: 2rpx solid #dcdcdc;
    background: #eeeeee;
    border-radius: 10rpx;
    align-items: center;
    .list-item-left {
      font-size: 48rpx;
      color: #999;
      width: 120rpx;
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      image {
        width: 60rpx;
        height: 60rpx;
      }
    }
    .list-item-left.in {
      background: #ddf7d6;
      border-radius: 10rpx 0 0 10rpx;
    }
    .list-item-left.out {
      background: #f5f7d6;
      border-radius: 10rpx 0 0 10rpx;
    }
    .list-item-right {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 30rpx;
      color: #333333;
      line-height: 45rpx;
    }
  }
}
.loading, .no-more, .empty {
    text-align: center;
    padding: 0  30rpx 30rpx ;
    color: #999;
}
.empty{
  margin-top: 100rpx;
}
</style>