JCSS / jcss-miniprogram

<template>
  <view class="attendance-page">
    <!-- 顶部统计卡片 -->
    <view class="stat-card">
      <view class="stat-item">
        <view class="stat-label">本月打卡</view>
        <view class="stat-value">{{ statData.checkInDays }}</view>
      </view>
      <view class="stat-item">
        <view class="stat-label">正常天数</view>
        <view class="stat-value">{{ statData.normalDays }}</view>
      </view>
      <view class="stat-item">
        <view class="stat-label">异常天数</view>
        <view class="stat-value">{{ statData.errorDays }}</view>
      </view>
    </view>
    <!-- 手写内联日历，无弹窗 -->
    <view class="calendar-wrap">
      <view class="calendar-header">
        <!-- 左右横向排列：上一月 | 年月标题 | 下一月 -->
        <view class="calendar-btn" @click="prevMonth">上一月</view>
        <view class="calendar-title">{{ currentYear }}年{{ currentMonth }}月</view>
        <!-- 当前是最新月份时，隐藏下个月按钮 -->
        <view v-if="canNext" class="calendar-btn" @click="nextMonth">下一月</view>
        <view v-else class="calendar-btn empty-btn"></view>
      </view>
      <!-- 星期头部 -->
      <view class="week-row">
        <view class="week-item" v-for="w in weekList" :key="w">{{ w }}</view>
      </view>
      <!-- 日期网格 -->
      <view class="day-row" v-for="(row, rIdx) in dayRows" :key="rIdx">
        <view class="day-item" v-for="(day, dIdx) in row" :key="dIdx" :class="{
          'day-item--other': day.otherMonth,
          'day-item--active': day.dateStr === selectDate,
        }" @click="onDayClick(day)">
          <view class="day-text">{{ day.day }}</view>
          <view v-if="day.dot" class="day-dot" :style="{ backgroundColor: day.dotColor }"></view>
        </view>
      </view>
    </view>
    <!-- 打卡详情区域 -->
    <view class="detail-card">
      <view v-if="!currentAttendance">
        <view class="empty-text">暂无考勤记录</view>
      </view>
      <view v-else>
        <view class="detail-row">
          <view class="detail-title">上班打卡时间：</view>
          <view class="detail-text">{{ currentAttendance.onDutyTime || '缺少打卡记录' }}</view>
        </view>
        <view class="detail-row">
          <view class="detail-title">上班打卡地点：</view>
          <view class="detail-text">{{ currentAttendance.onDutyAddress || '-' }}</view>
        </view>
        <view class="divider"></view>
        <view class="detail-row">
          <view class="detail-title">下班打卡时间：</view>
          <view class="detail-text">{{ currentAttendance.offDutyTime || '缺少打卡记录' }}</view>
        </view>
        <view class="detail-row">
          <view class="detail-title">下班打卡地点：</view>
          <view class="detail-text">{{ currentAttendance.offDutyAddress || '-' }}</view>
        </view>
        <!-- 可选：展示异常原因 -->
        <view v-if="currentAttendance.abnormalReason" class="detail-row">
          <view class="detail-title">异常原因：</view>
          <view class="detail-text" style="color:#f56c6c">{{ currentAttendance.abnormalReason }}</view>
        </view>
      </view>
    </view>
    </view>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { attendanceDaily, dayDetail } from '@/api/user'
const weekList = ['日', '一', '二', '三', '四', '五', '六'];
const today = new Date();
const todayTs = today.getTime();
// 当前显示月份
const currentYear = ref(today.getFullYear());
const currentMonth = ref(today.getMonth() + 1);
const selectDate = ref('');
const dayRows = ref<any[]>([]);
// 是否允许点击下一月：判断当前展示月份是否小于本月
const canNext = computed(() => {
  const showMonthDate = new Date(currentYear.value, currentMonth.value - 1, 1);
  const nowMonthDate = new Date(today.getFullYear(), today.getMonth(), 1);
  return showMonthDate < nowMonthDate;
});

// 统计数据
const statData = ref({
  checkInDays: 0,
  normalDays: 0,
  errorDays: 0
});
// 当月考勤打点字典 {dateStr: {dot:string, abnormalReason:string}}
const monthDayMap = ref<Record<string, { dot: string | null, abnormalReason: string | null }>>({});

// 选中日期详情
const currentAttendance = ref<any>(null);

// 拉取月度考勤汇总（stat + 当月日期打点）
const getMonthAttendance = async () => {
  try {
    const month = `${currentYear.value}-${String(currentMonth.value).padStart(2, '0')}`;
    const res = await attendanceDaily({ month });
    // 赋值顶部统计
    statData.value.checkInDays = res.stat.clockDays;
    statData.value.normalDays = res.stat.normalDays;
    statData.value.errorDays = res.stat.abnormalDays;
    // 构建日期映射字典
    const map: Record<string, { dot: string | null, abnormalReason: string | null }> = {};
    res.days.forEach((item: any) => {
      map[item.date] = {
        dot: item.dot,
        abnormalReason: item.abnormalReason
      };
    })
    monthDayMap.value = map;
    // 重新渲染日历
    renderMonth();
  } catch (err) {
    console.error('获取月度考勤失败', err);
    uni.showToast({ title: '加载月度考勤失败', icon: 'none' });
  }
};

// 生成月份日期网格
const renderMonth = () => {
  const year = currentYear.value;
  const month = currentMonth.value;
  // 当月第一天
  const firstDay = new Date(year, month - 1, 1);
  // 当月最后一天
  const lastDay = new Date(year, month, 0);
  // 上个月最后一天
  const prevLastDay = new Date(year, month - 1, 0).getDate();
  // 当月第一天星期 0周日~6周六
  const firstWeek = firstDay.getDay();
  const rows: any[] = [];
  let row: any[] = [];
  // 填充上月尾部
  for (let i = 0; i < firstWeek; i++) {
    const dayNum = prevLastDay - firstWeek + i + 1;
    row.push({
      day: dayNum,
      otherMonth: true,
      dateStr: `${year}-${String(month - 1).padStart(2, '0')}-${String(dayNum).padStart(2, '0')}`
    })
  }
  // 填充当月日期
  for (let d = 1; d <= lastDay.getDate(); d++) {
    const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
    const mark = monthDayMap.value[dateStr];
    const item: any = {
      day: d,
      otherMonth: false,
      dateStr,
      dot: false,
      dotColor: ''
    };
    if (mark?.dot) {
      item.dot = true;
      if (mark.dot === 'abnormal') {
        item.dotColor = '#f56c6c';
      } else if (mark.dot === 'partial') {
        item.dotColor = '#cccccc';
      }
    }
    row.push(item);
    if (row.length === 7) {
      rows.push(row);
      row = [];
    }
  }
  // 填充下月开头
  let nextDay = 1;
  while (row.length < 7) {
    row.push({
      day: nextDay,
      otherMonth: true,
      dateStr: `${year}-${String(month + 1).padStart(2, '0')}-${String(nextDay).padStart(2, '0')}`
    })
    nextDay++;
  }
  rows.push(row);
  dayRows.value = rows;
};

// 上一月
const prevMonth = () => {
  if (currentMonth.value === 1) {
    currentYear.value--;
    currentMonth.value = 12;
  } else {
    currentMonth.value--;
  }
  getMonthAttendance();
};
// 下一月
const nextMonth = () => {
  let nextY = currentYear.value;
  let nextM = currentMonth.value + 1;
  if (nextM > 12) {
    nextY++;
    nextM = 1;
  }
  currentYear.value = nextY;
  currentMonth.value = nextM;
  getMonthAttendance();
};

// 点击日期：获取当日详情
const onDayClick = async (day: any) => {
  // 禁止点击其他月份
  if (day.otherMonth) return;
  const selectDay = new Date(day.dateStr);
  if (selectDay > today) {
    currentAttendance.value = null;
    selectDate.value = day.dateStr;
    return;
  }
  selectDate.value = day.dateStr;
  try {
    const res = await dayDetail({ date: day.dateStr });
    // 取第一条记录，大多数场景单条记录
    const record = res.records?.[0] ?? null;
    if (record) {
      currentAttendance.value = {
        ...record,
        abnormalReason: res.abnormalReason
      };
    } else {
      currentAttendance.value = null;
    }
  } catch (err) {
    console.error('获取当日考勤详情失败', err);
    uni.showToast({ title: '加载当日考勤失败', icon: 'none' });
    currentAttendance.value = null;
  }
};

// 页面初始化
onMounted(async () => {
  const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
  selectDate.value = todayStr;
  await getMonthAttendance();
  // 默认选中今天，加载当日详情
  await onDayClick({ dateStr: todayStr, otherMonth: false });
});
</script>
<style scoped lang="scss">
.attendance-page {
  padding: 20rpx;
  background-color: #f5f5f7;
  min-height: 100vh;
}

.stat-card {
  display: flex;
  background-color: #3c9cff;
  border-radius: 16rpx;
  padding: 30rpx 0;
  margin-bottom: 20rpx;

  .stat-item {
    flex: 1;
    text-align: center;
    color: #fff;

    .stat-label {
      font-size: 28rpx;
      opacity: 0.9;
    }

    .stat-value {
      font-size: 36rpx;
      margin-top: 10rpx;
      font-weight: bold;
    }
  }
}

.calendar-wrap {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.calendar-title {
  font-size: 32rpx;
  font-weight: bold;
}

.calendar-btn {
  padding: 8rpx 16rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.empty-btn {
  border-color: transparent;
  color: transparent;
}

.week-row {
  display: flex;

  .week-item {
    flex: 1;
    text-align: center;
    font-size: 26rpx;
    color: #666;
    padding: 10rpx 0;
  }
}

.day-row {
  display: flex;

  .day-item {
    flex: 1;
    min-height: 70rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8rpx 0;
    position: relative;

    .day-text {
      font-size: 28rpx;
    }

    .day-dot {
      position: absolute;
      bottom: 8rpx;
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
    }
  }

  .day-item--other {
    color: #ccc;
  }

  .day-item--active {
    color: #f00;
  }
}

.detail-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;

  .empty-text {
    text-align: center;
    color: #999;
    font-size: 30rpx;
    padding: 40rpx 0;
  }

  .detail-row {
    margin-bottom: 20rpx;
    display: flex;

    .detail-title {
      font-size: 30rpx;
      color: #333;
      width: 220rpx;
    }

    .detail-text {
      flex: 1;
      font-size: 30rpx;
      color: #666;
    }
  }

  .divider {
    height: 1px;
    background: #eee;
    margin: 30rpx 0;
  }
}
</style>