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.clockInTime || '缺少打卡记录' }}</view>
      </view>
      <view class="detail-row">
        <view class="detail-title">上班打卡地点：</view>
        <view class="detail-text">{{ currentAttendance.clockInAddress || '-' }}</view>
      </view>
      <view class="divider"></view>
      <view class="detail-row">
        <view class="detail-title">下班打卡时间：</view>
        <view class="detail-text">{{ currentAttendance.clockOutTime || '缺少打卡记录' }}</view>
      </view>
      <view class="detail-row">
        <view class="detail-title">下班打卡地点：</view>
        <view class="detail-text">{{ currentAttendance.clockOutAddress || '-' }}</view>
      </view>
    </view>
  </view>
</view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';

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: 28,
  normalDays: 25,
  errorDays: 3
});

// ========== 写死日历标记：红点error异常，灰点normal正常 ==========
const markMap = ref<Record<string, {type:'error'|'normal'}>>({
  '2026-10-02': { type: 'error' },
  '2026-10-10': { type: 'error' },
  '2026-10-16': { type: 'error' },
  '2026-10-05': { type: 'normal' },
  '2026-10-12': { type: 'normal' },
});

// ========== 写死每日考勤详情数据 ==========
const dayAttendanceMap = ref<Record<string, any>>({
  '2026-10-02': {
    clockInTime: '2026-10-02 08:02:10',
    clockInAddress: '月坛南街安华大厦',
    clockOutTime: '',
    clockOutAddress: ''
  },
  '2026-10-13': {
    clockInTime: '2026-10-13 07:58:25',
    clockInAddress: '月坛南街安华大厦',
    clockOutTime: '',
    clockOutAddress: '南礼士地铁站'
  },
  '2026-10-05': {
    clockInTime: '2026-10-05 08:00:00',
    clockInAddress: '月坛南街安华大厦',
    clockOutTime: '2026-10-05 18:00:00',
    clockOutAddress: '月坛南街安华大厦'
  },
  '2026-10-10': null,
  '2026-10-12': {
    clockInTime: '2026-10-12 07:55:10',
    clockInAddress: '月坛南街安华大厦',
    clockOutTime: '2026-10-12 17:50:30',
    clockOutAddress: '月坛南街安华大厦'
  },
  '2026-10-16': {
    clockInTime: '2026-10-16 07:59:22',
    clockInAddress: '月坛南街安华大厦',
    clockOutTime: '',
    clockOutAddress: ''
  }
});
const currentAttendance = ref<any>(null);

// 生成月份日期网格
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 = markMap.value[dateStr];
    const item:any = {
      day: d,
      otherMonth: false,
      dateStr,
      dot: false,
      dotColor: ''
    };
    if(mark){
      item.dot = true;
      item.dotColor = mark.type === 'error' ? '#f56c6c' : '#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--;
  }
  renderMonth();
};
// 下一月
const nextMonth = () => {
  let nextY = currentYear.value;
  let nextM = currentMonth.value + 1;
  if(nextM > 12){
    nextY++;
    nextM =1;
  }
  currentYear.value = nextY;
  currentMonth.value = nextM;
  renderMonth();
};

// 点击日期
const onDayClick = (day:any) => {
  // 禁止点击其他月份
  if(day.otherMonth) return;
  const selectDay = new Date(day.dateStr);
  if(selectDay > today){
    currentAttendance.value = null;
    return;
  }
  selectDate.value = day.dateStr;
  const data = dayAttendanceMap.value[day.dateStr];
  currentAttendance.value = data ?? null;
};

onMounted(() => {
  const todayStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
  selectDate.value = todayStr;
  fetchDayAttendance(todayStr);
  renderMonth();
});

const fetchDayAttendance = (date:string) => {
  const selectDay = new Date(date);
  if(selectDay > today){
    currentAttendance.value = null;
    return;
  }
  const data = dayAttendanceMap.value[date];
  currentAttendance.value = data ?? null;
};
</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{
      width:10rpx;
      height:10rpx;
      border-radius:50%;
      margin-top:4rpx;
    }
  }
  .day-item--other{
    color:#ccc;
  }
  .day-item--active{
    background:#3c9cff;
    color:#fff;
    border-radius:50%;
  }
}
.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>