cfc/cfc-frontend/pages/wealth/checkin.vue

<template>
  <scroll-view class="container" scroll-y>
    <!-- 能量提示 -->
    <view class="energy-tip">
      <text class="energy-tip-text">⚡ 每次打卡可获得 5 能量值</text>
    </view>

    <!-- 快速打卡 -->
    <view class="quick-checkin">
      <view class="section-title">
        <text class="section-title-text">今日打卡</text>
      </view>
      <view class="checkin-types">
        <view
          v-for="(item, index) in checkinTypes"
          :key="index"
          class="checkin-btn"
          :class="{ disabled: todayTimer }"
          @click="doCheckin(item.type)">
          <text class="checkin-icon">{{ item.icon }}</text>
          <text class="checkin-label">{{ item.label }}</text>
        </view>
      </view>
      <view v-if="todayCount > 0" class="today-count">
        <text>今日已打卡 {{ todayCount }} 次</text>
      </view>
    </view>

    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-value">{{ stats.totalCheckins || 0 }}</text>
        <text class="stat-label">总打卡</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.totalEnergy || 0 }}</text>
        <text class="stat-label">总能量</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.dailyPlanCount || 0 }}</text>
        <text class="stat-label">计划</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.savingCount || 0 }}</text>
        <text class="stat-label">储蓄</text>
      </view>
    </view>

    <!-- 打卡记录 -->
    <view class="record-section">
      <view class="section-title">
        <text class="section-title-text">打卡记录</text>
      </view>
      <view v-if="checkins.length === 0" class="empty-state">
        <text>暂无打卡记录，开始打卡吧！</text>
      </view>
      <view
        v-for="(item, index) in checkins"
        :key="index"
        class="record-item"
        @longpress="confirmDelete(item)">
        <view class="record-left">
          <text class="record-icon">{{ getTypeIcon(item.checkinType) }}</text>
          <view class="record-info">
            <text class="record-type">{{ getTypeLabel(item.checkinType) }}</text>
            <text class="record-date">{{ formatDate(item.createdAt) }}</text>
          </view>
        </view>
        <view class="record-right">
          <text class="record-energy">+{{ item.earnedEnergy || 5 }}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { getCheckinList, getCheckinStats, createCheckin, deleteCheckin } from '../../utils/api'

export default {
  data() {
    return {
      checkinTypes: [
        { type: 'daily_plan', label: '记账规划', icon: '📋' },
        { type: 'saving', label: '储蓄记录', icon: '💰' },
        { type: 'expense', label: '消费记录', icon: '🛒' },
        { type: 'review', label: '财务回顾', icon: '📊' }
      ],
      checkins: [],
      stats: {},
      todayTimer: null,
      todayCount: 0
    }
  },

  onShow() {
    this.loadData()
  },

  methods: {
    async loadData() {
      try {
        const res = await getCheckinList({})
        if (res && res.code === 200) {
          this.checkins = res.data || []
        }
        const statsRes = await getCheckinStats({})
        if (statsRes && statsRes.code === 200) {
          this.stats = statsRes.data || {}
        }
        this.calcTodayCount()
      } catch (e) {
        console.error('加载打卡数据失败', e)
      }
    },

    calcTodayCount() {
      const today = new Date()
      const todayStr = today.toISOString().split('T')[0]
      this.todayCount = this.checkins.filter(function(c) {
        if (!c.createdAt) return false
        return c.createdAt.indexOf(todayStr) === 0
      }).length
    },

    async doCheckin(type) {
      if (this.todayTimer) {
        uni.showToast({ title: '操作太频繁，请稍后', icon: 'none' })
        return
      }
      try {
        const res = await createCheckin({
          checkinType: type,
          checkinDate: new Date().toISOString().split('T')[0],
          earnedEnergy: 5
        })
        if (res && res.code === 200) {
          uni.showToast({ title: '打卡成功！+5能量', icon: 'success' })
          this.loadData()
        } else {
          uni.showToast({ title: res && res.message || '打卡失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '网络错误', icon: 'none' })
      }
    },

    confirmDelete(item) {
      var self = this
      uni.showModal({
        title: '提示',
        content: '确定删除此打卡记录？',
        success: function(res) {
          if (res.confirm) {
            self.deleteRecord(item)
          }
        }
      })
    },

    async deleteRecord(item) {
      try {
        const res = await deleteCheckin(item.id)
        if (res && res.code === 200) {
          uni.showToast({ title: '已删除', icon: 'success' })
          this.loadData()
        }
      } catch (e) {
        console.error('删除失败', e)
      }
    },

    getTypeIcon(type) {
      const map = { daily_plan: '📋', saving: '💰', expense: '🛒', review: '📊' }
      return map[type] || '📌'
    },

    getTypeLabel(type) {
      const map = { daily_plan: '记账规划', saving: '储蓄记录', expense: '消费记录', review: '财务回顾' }
      return map[type] || type
    },

    formatDate(dateStr) {
      if (!dateStr) return ''
      return dateStr.substring(0, 16).replace('T', ' ')
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx 30rpx 120rpx;
}

.energy-tip {
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 16rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 24rpx;
}

.energy-tip-text {
  color: #fff;
  font-size: 26rpx;
  font-weight: 500;
}

.section-title {
  margin-bottom: 20rpx;
}

.section-title-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.quick-checkin {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.checkin-types {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.checkin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150rpx;
  height: 120rpx;
  background: #FFF7ED;
  border-radius: 16rpx;
  border: 2rpx solid #FED7AA;
}

.checkin-btn.disabled {
  opacity: 0.5;
}

.checkin-icon {
  font-size: 40rpx;
  margin-bottom: 8rpx;
}

.checkin-label {
  font-size: 24rpx;
  color: #666;
}

.today-count {
  text-align: center;
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #999;
}

.stats-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 24rpx;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  font-weight: 700;
  color: #F97316;
}

.stat-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}

.stat-divider {
  width: 2rpx;
  height: 60rpx;
  background: #eee;
}

.record-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
}

.empty-state {
  text-align: center;
  padding: 48rpx 0;
  color: #999;
  font-size: 26rpx;
}

.record-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
}

.record-item:last-child {
  border-bottom: none;
}

.record-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.record-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.record-info {
  display: flex;
  flex-direction: column;
}

.record-type {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.record-date {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}

.record-right {}

.record-energy {
  font-size: 28rpx;
  color: #F97316;
  font-weight: 600;
}
</style>