yuto-water-h5/src/views/fxgl/groupsClockList.vue

<script setup lang="ts">
/**
 * 班组人员打卡列表 — 防汛值班打卡记录
 *
 * 展示防汛值班人员的打卡记录，支持按班组切换和下拉刷新。
 * DESIGN: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
 */
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// ── 状态 ──
const activeTab = ref(0)
const loading = ref(false)
const refreshing = ref(false)

// ── 映射 ──
interface ClockRecord {
  id: number
  name: string
  team: string
  time: string
  status: 'clocked' | 'late' | 'missing'
  location: string
  avatar?: string
}

const statusMap: Record<ClockRecord['status'], string> = {
  clocked: '已打卡',
  late: '迟到',
  missing: '缺卡',
}

const statusColorMap: Record<ClockRecord['status'], 'success' | 'warning' | 'danger'> = {
  clocked: 'success',
  late: 'warning',
  missing: 'danger',
}

const teamTabs = ['全部', 'A组', 'B组', 'C组']

// ── 数据 ──
const records = ref<ClockRecord[]>([])

const mockRecords: ClockRecord[] = [
  { id: 1, name: '张建国', team: 'A组', time: '08:25', status: 'clocked', location: '泵站1号' },
  { id: 2, name: '李明辉', team: 'A组', time: '08:32', status: 'late', location: '泵站1号' },
  { id: 3, name: '王强', team: 'B组', time: '08:15', status: 'clocked', location: '闸门3号' },
  { id: 4, name: '赵勇', team: 'B组', time: '--:--', status: 'missing', location: '闸门3号' },
  { id: 5, name: '陈志远', team: 'A组', time: '08:20', status: 'clocked', location: '河道巡查点' },
  { id: 6, name: '周文博', team: 'C组', time: '08:10', status: 'clocked', location: '泵站2号' },
  { id: 7, name: '刘大伟', team: 'C组', time: '08:45', status: 'late', location: '泵站2号' },
  { id: 8, name: '孙志强', team: 'B组', time: '08:18', status: 'clocked', location: '河道巡查点' },
]

// ── 计算属性 ──
const filteredList = computed(() => {
  if (activeTab.value === 0) return records.value
  const team = teamTabs[activeTab.value]
  return records.value.filter(r => r.team === team)
})

// ── 方法 ──
async function fetchData() {
  loading.value = true
  // 模拟异步请求
  await new Promise(resolve => setTimeout(resolve, 400))
  records.value = mockRecords
  loading.value = false
}

async function onRefresh() {
  refreshing.value = true
  await new Promise(resolve => setTimeout(resolve, 600))
  records.value = [...mockRecords].reverse()
  refreshing.value = false
  showToast('刷新成功')
}

function goTeamList() {
  router.push('/teamList')
}

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

<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar title="打卡记录" left-arrow fixed placeholder @click-left="router.back()">
      <template #right>
        <van-icon name="user-o" size="20" @click="goTeamList" />
      </template>
    </van-nav-bar>

    <!-- 标签页 -->
    <van-tabs v-model:active="activeTab" sticky :swipeable="false" color="var(--color-primary)">
      <van-tab v-for="name in teamTabs" :key="name" :title="name" />
    </van-tabs>

    <!-- 下拉刷新 + 列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="pull-refresh-wrap">
      <!-- 加载骨架 -->
      <div v-if="loading" class="skeleton-wrap">
        <div v-for="i in 4" :key="i" class="skeleton-card">
          <van-skeleton title avatar :row="1" />
        </div>
      </div>

      <!-- 空状态 -->
      <van-empty v-else-if="filteredList.length === 0" description="暂无打卡记录">
        <van-button type="primary" size="small" @click="onRefresh">重新加载</van-button>
      </van-empty>

      <!-- 打卡卡片列表 -->
      <div v-else class="card-list">
        <div
          v-for="item in filteredList"
          :key="item.id"
          class="clock-card"
        >
          <div class="card-hd">
            <span class="card-name">{{ item.name }}</span>
            <van-tag :type="statusColorMap[item.status]" size="medium">
              {{ statusMap[item.status] }}
            </van-tag>
          </div>
          <div class="card-bd">
            <div class="card-info">
              <van-icon name="location-o" size="14" />
              <span>{{ item.location }}</span>
            </div>
            <div class="card-info">
              <van-icon name="clock-o" size="14" />
              <span>打卡时间: {{ item.time }}</span>
            </div>
          </div>
          <div class="card-ft">
            <span class="card-team">{{ item.team }}</span>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: var(--color-bg-page);

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.pull-refresh-wrap {
  min-height: calc(100vh - 90px);
}

// ── 骨架屏 ──
.skeleton-wrap {
  padding: 8px 16px;
}
.skeleton-card {
  padding: 16px;
  margin-bottom: 8px;
  background: var(--color-bg-card);
  border-radius: 10px;
}

// ── 卡片列表 ──
.card-list {
  padding: 8px 12px;
}

.clock-card {
  background: var(--color-bg-card);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

  .card-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .card-bd {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
  }

  .card-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
  }

  .card-ft {
    padding-top: 8px;
    border-top: 1px solid var(--color-border-light);
  }

  .card-team {
    font-size: 12px;
    color: var(--color-text-placeholder);
    background: var(--color-primary-bg);
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: 4px;
  }
}

// ── 空状态 ──
:deep(.van-empty) {
  padding: 60px 0;
}
</style>