cfc/cfc-frontend/pages/mind/emotion-trend.vue

<template>
  <view class="trend-container">
    <!-- 统计概览卡片 -->
    <view class="stats-overview">
      <view class="stat-item">
        <text class="stat-value">{{ stats.totalCheckins || 0 }}</text>
        <text class="stat-label">总打卡</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.currentStreak || 0 }}</text>
        <text class="stat-label">连续天数</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.thisMonthCheckins || 0 }}</text>
        <text class="stat-label">本月打卡</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.totalEnergy || 0 }}</text>
        <text class="stat-label">心能量</text>
      </view>
    </view>

    <!-- 周期切换 -->
    <view class="period-tabs">
      <view
        :class="['period-tab', period === 'week' ? 'period-active' : '']"
        @click="switchPeriod('week')">
        <text>周</text>
      </view>
      <view
        :class="['period-tab', period === 'month' ? 'period-active' : '']"
        @click="switchPeriod('month')">
        <text>月</text>
      </view>
    </view>

    <!-- 情绪日历 -->
    <view class="calendar-card">
      <text class="card-title">情绪日历</text>
      <view class="calendar-grid">
        <view class="calendar-weekday" v-for="wd in weekdays" :key="wd">
          <text>{{ wd }}</text>
        </view>
        <view
          v-for="(day, idx) in calendarDays"
          :key="idx"
          :class="['calendar-day', 'weather-' + (day.weather || 'none'), day.isToday ? 'is-today' : '']">
          <text class="day-num">{{ day.dayNum }}</text>
          <text v-if="day.weather" class="day-emoji">{{ weatherEmoji(day.weather) }}</text>
        </view>
      </view>
    </view>

    <!-- 情绪分布 -->
    <view class="distribution-card">
      <text class="card-title">情绪分布</text>
      <view class="distribution-list">
        <view class="dist-item" v-for="dist in distributionData" :key="dist.weather">
          <text class="dist-emoji">{{ dist.icon }}</text>
          <text class="dist-label">{{ dist.label }}</text>
          <view class="dist-bar-track">
            <view class="dist-bar-fill" :style="{ width: dist.percent + '%', background: dist.color }"></view>
          </view>
          <text class="dist-count">{{ dist.count }}次</text>
        </view>
      </view>
    </view>

    <!-- 按天详情 -->
    <view class="daily-list-card" v-if="dailyData.length > 0">
      <text class="card-title">每日记录</text>
      <view class="daily-item" v-for="(day, idx) in dailyData" :key="idx">
        <text class="daily-date">{{ formatDate(day.date) }}</text>
        <text class="daily-emoji">{{ weatherEmoji(day.weather) }}</text>
        <text class="daily-weather">{{ weatherLabel(day.weather) }}</text>
      </view>
    </view>

    <view class="empty-state" v-if="!stats || stats.totalCheckins === 0">
      <text class="empty-icon">&#x1F4AD;</text>
      <text class="empty-text">还没有情绪打卡记录</text>
      <button class="empty-btn" @click="goCheckin">去打卡</button>
    </view>
  </view>
</template>

<script>
import config from '../../config'

export default {
  data() {
    return {
      period: 'week',
      stats: null,
      trend: null,
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      weatherConfig: {
        sunny: { icon: '\u2600\uFE0F', label: '心情很好', color: '#FFB347' },
        cloudy: { icon: '\u26C5', label: '一般般', color: '#A0A0A0' },
        rainy: { icon: '\uD83C\uDF27\uFE0F', label: '有点难过', color: '#6B9BD2' },
        stormy: { icon: '\u26A1', label: '很烦躁', color: '#8B5CF6' },
        rainbow: { icon: '\uD83C\uDF08', label: '特别开心', color: '#FF6B9D' }
      }
    }
  },

  computed: {
    calendarDays() {
      const days = []
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth()
      const firstDay = new Date(year, month, 1).getDay()
      const daysInMonth = new Date(year, month + 1, 0).getDate()
      const today = now.getDate()

      // Build weather map from daily data
      const weatherMap = {}
      if (this.trend && this.trend.dailyData) {
        for (const d of this.trend.dailyData) {
          if (d.date) {
            const dateObj = new Date(d.date)
            weatherMap[dateObj.getDate()] = d.weather
          }
        }
      }

      // Empty leading cells
      for (let i = 0; i < firstDay; i++) {
        days.push({ dayNum: '', weather: null, isToday: false })
      }

      for (let d = 1; d <= daysInMonth; d++) {
        days.push({
          dayNum: d,
          weather: weatherMap[d] || null,
          isToday: d === today
        })
      }

      return days
    },

    distributionData() {
      const dist = this.trend && this.trend.weatherDistribution
      if (!dist) return []
      const total = Object.values(dist).reduce((a, b) => a + b, 0)
      if (total === 0) return []

      return Object.keys(dist).map(w => {
        const cfg = this.weatherConfig[w] || { icon: '?', label: w, color: '#ccc' }
        return {
          weather: w,
          icon: cfg.icon,
          label: cfg.label,
          color: cfg.color,
          count: dist[w],
          percent: Math.round(dist[w] / total * 100)
        }
      })
    },

    dailyData() {
      return this.trend && this.trend.dailyData || []
    }
  },

  onLoad() {
    this.loadData()
  },

  methods: {
    loadData() {
      const app = getApp()
      const childId = app.globalData.currentChildId
      if (!childId) return

      uni.request({
        url: config.API_BASE_URL + '/api/mind/checkin/stats',
        method: 'POST',
        data: { childId },
        success: (res) => {
          if (res.data && res.data.code === 200) {
            this.stats = res.data.data
          }
        }
      })

      uni.request({
        url: config.API_BASE_URL + '/api/mind/checkin/trend',
        method: 'POST',
        data: { childId, period: this.period },
        success: (res) => {
          if (res.data && res.data.code === 200) {
            this.trend = res.data.data
          }
        }
      })
    },

    switchPeriod(p) {
      this.period = p
      this.loadData()
    },

    weatherEmoji(weather) {
      const cfg = this.weatherConfig[weather]
      return cfg ? cfg.icon : ''
    },

    weatherLabel(weather) {
      const cfg = this.weatherConfig[weather]
      return cfg ? cfg.label : weather
    },

    formatDate(dateStr) {
      if (!dateStr) return ''
      const d = new Date(dateStr)
      return (d.getMonth() + 1) + '/' + d.getDate()
    },

    goCheckin() {
      uni.navigateTo({ url: '/pages/mind/emotion-checkin' })
    }
  }
}
</script>

<style scoped>
.trend-container {
  min-height: 100vh;
  background: #F8F8F8;
  padding-bottom: 40rpx;
}

.stats-overview {
  display: flex;
  margin: 24rpx 32rpx;
  background: linear-gradient(135deg, #FF6B9D, #FF8CB3);
  border-radius: 20rpx;
  padding: 28rpx 16rpx;
}

.stat-item {
  flex: 1;
  text-align: center;
}

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

.stat-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6rpx;
  display: block;
}

.period-tabs {
  display: flex;
  margin: 0 32rpx;
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.period-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 26rpx;
  color: #666;
}

.period-active {
  background: #FF6B9D;
  color: #fff;
  font-weight: 600;
}

.calendar-card,
.distribution-card,
.daily-list-card {
  margin: 24rpx 32rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.calendar-grid {
  display: flex;
  flex-wrap: wrap;
}

.calendar-weekday {
  width: 14.28%;
  text-align: center;
  font-size: 22rpx;
  color: #999;
  padding: 10rpx 0;
}

.calendar-day {
  width: 14.28%;
  text-align: center;
  padding: 8rpx 0;
  min-height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.is-today {
  background: #FFF0F5;
  border-radius: 12rpx;
}

.day-num {
  font-size: 26rpx;
  color: #333;
}

.day-emoji {
  font-size: 24rpx;
  margin-top: 4rpx;
}

.weather-sunny { background: #FFF8E1; border-radius: 8rpx; }
.weather-cloudy { background: #F5F5F5; border-radius: 8rpx; }
.weather-rainy { background: #E3F2FD; border-radius: 8rpx; }
.weather-stormy { background: #EDE7F6; border-radius: 8rpx; }
.weather-rainbow { background: #FCE4EC; border-radius: 8rpx; }

.distribution-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.dist-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.dist-emoji {
  font-size: 32rpx;
  width: 48rpx;
  text-align: center;
}

.dist-label {
  font-size: 24rpx;
  color: #666;
  width: 120rpx;
}

.dist-bar-track {
  flex: 1;
  height: 20rpx;
  background: #F0F0F0;
  border-radius: 10rpx;
  overflow: hidden;
}

.dist-bar-fill {
  height: 100%;
  border-radius: 10rpx;
  transition: width 0.3s;
}

.dist-count {
  font-size: 24rpx;
  color: #999;
  width: 60rpx;
  text-align: right;
}

.daily-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 2rpx solid #F5F5F5;
  gap: 16rpx;
}

.daily-date {
  font-size: 24rpx;
  color: #999;
  width: 100rpx;
}

.daily-emoji {
  font-size: 32rpx;
}

.daily-weather {
  font-size: 26rpx;
  color: #666;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 32rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.empty-btn {
  background: #FF6B9D;
  color: #fff;
  padding: 16rpx 60rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>