cfc/cfc-frontend/pages/health/daily-checkin.vue

<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">健康打卡</text>
    </view>

    <scroll-view class="content" scroll-y>
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">今日综合打卡</text>
          <text class="card-subtitle">为你的一天各项健康指标打分吧</text>

          <view class="score-group">
            <text class="score-label">饮食评分</text>
            <view class="score-row">
              <text class="score-min">差</text>
              <slider min="1" max="10" :value="form.dietScore" @change="function(e){form.dietScore=e.detail.value}" block-size="20" activeColor="#FF8C42" />
              <text class="score-val">{{ form.dietScore }}</text>
            </view>
          </view>

          <view class="score-group">
            <text class="score-label">运动评分</text>
            <view class="score-row">
              <text class="score-min">差</text>
              <slider min="1" max="10" :value="form.exerciseScore" @change="function(e){form.exerciseScore=e.detail.value}" block-size="20" activeColor="#FF8C42" />
              <text class="score-val">{{ form.exerciseScore }}</text>
            </view>
          </view>

          <view class="score-group">
            <text class="score-label">睡眠评分</text>
            <view class="score-row">
              <text class="score-min">差</text>
              <slider min="1" max="10" :value="form.sleepScore" @change="function(e){form.sleepScore=e.detail.value}" block-size="20" activeColor="#FF8C42" />
              <text class="score-val">{{ form.sleepScore }}</text>
            </view>
          </view>

          <view class="score-group">
            <text class="score-label">饮水评分</text>
            <view class="score-row">
              <text class="score-min">差</text>
              <slider min="1" max="10" :value="form.waterScore" @change="function(e){form.waterScore=e.detail.value}" block-size="20" activeColor="#FF8C42" />
              <text class="score-val">{{ form.waterScore }}</text>
            </view>
          </view>

          <view class="score-group">
            <text class="score-label">心情评分</text>
            <view class="score-row">
              <text class="score-min">差</text>
              <slider min="1" max="10" :value="form.moodScore" @change="function(e){form.moodScore=e.detail.value}" block-size="20" activeColor="#FF8C42" />
              <text class="score-val">{{ form.moodScore }}</text>
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">备注（选填）</text>
            <input class="form-input" v-model="form.remark" placeholder="今天的感受..." />
          </view>

          <view class="submit-btn" @tap="doCheckin">
            <text>{{ submitting ? '提交中...' : '提交打卡' }}</text>
          </view>
        </view>
      </view>

      <!-- 历史记录 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">打卡记录</text>
          <view class="history-list" v-if="history.length > 0">
            <view class="history-item" v-for="item in history" :key="item.id">
              <view class="history-left">
                <text class="history-type">{{ formatDate(item.checkinDate || item.createdAt) }}</text>
                <text class="history-duration">
                  饮食{{ item.dietScore || '-' }} 运动{{ item.exerciseScore || '-' }}
                  睡眠{{ item.sleepScore || '-' }} 饮水{{ item.waterIntake || '-' }}
                  心情{{ item.moodScore || '-' }}
                </text>
              </view>
              <view class="history-right">
                <text class="history-date">{{ item.remark || '' }}</text>
              </view>
            </view>
          </view>
          <view class="empty-state" v-else>
            <text>还没有打卡记录</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

export default {
  data() {
    return {
      memberId: null,
      submitting: false,
      history: [],
      form: {
        dietScore: 7,
        exerciseScore: 7,
        sleepScore: 7,
        waterScore: 7,
        moodScore: 7,
        remark: ''
      }
    }
  },
  onLoad: function() {
    this.memberId = uni.getStorageSync('currentChildId') || null
    this.loadHistory()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = new Date(dateStr)
      var m = (d.getMonth() + 1).toString().padStart(2, '0')
      var day = d.getDate().toString().padStart(2, '0')
      return m + '-' + day
    },
    loadHistory: function() {
      var self = this
      var token = uni.getStorageSync('token')
      if (!token || !self.memberId) return
      uni.request({
        url: config.API_BASE_URL + '/api/daily/checkin/list',
        method: 'POST',
        data: { memberId: self.memberId },
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            self.history = res.data.data.slice(0, 10)
          }
        }
      })
    },
    doCheckin: function() {
      var self = this
      if (!self.memberId) {
        uni.showToast({ title: '孩子ID无效', icon: 'none' })
        return
      }
      self.submitting = true
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/daily/checkin/create',
        method: 'POST',
        data: {
          memberId: self.memberId,
          dietScore: self.form.dietScore,
          exerciseScore: self.form.exerciseScore,
          sleepScore: self.form.sleepScore,
          waterIntake: self.form.waterScore,
          moodScore: self.form.moodScore,
          remark: self.form.remark || ''
        },
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          self.submitting = false
          if (res.data && res.data.code === 200) {
            uni.showToast({ title: '打卡成功', icon: 'success' })
            self.form.remark = ''
            self.loadHistory()
          } else {
            var msg = (res.data && res.data.message) || '打卡失败'
            uni.showToast({ title: msg, icon: 'none' })
          }
        },
        fail: function() {
          self.submitting = false
          uni.showToast({ title: '网络错误', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding-top: var(--status-bar-height, 0);
  background-color: #FFFFFF;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-back { position: absolute; left: 30rpx; top: 50%; transform: translateY(-50%); padding: 10rpx; }
.back-text { font-size: 28rpx; color: #333; }
.nav-title { font-size: 32rpx; font-weight: 600; color: #333; }
.content { flex: 1; padding: 30rpx; }
.card {
  display: flex; background-color: #FFFFFF; border-radius: 20rpx; margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06); overflow: hidden;
}
.card-accent { width: 8rpx; background-color: #FF8C42; flex-shrink: 0; }
.card-body { flex: 1; padding: 30rpx; }
.card-title { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 8rpx; display: block; }
.card-subtitle { font-size: 24rpx; color: #999; margin-bottom: 30rpx; display: block; }
.score-group { margin-bottom: 20rpx; }
.score-label { font-size: 26rpx; color: #333; font-weight: 500; margin-bottom: 8rpx; display: block; }
.score-row { display: flex; align-items: center; gap: 16rpx; }
.score-min { font-size: 22rpx; color: #999; flex-shrink: 0; }
.score-val { font-size: 24rpx; color: #FF8C42; font-weight: 500; width: 40rpx; text-align: center; }
.form-group { margin-bottom: 24rpx; }
.form-label { font-size: 26rpx; color: #333; font-weight: 500; margin-bottom: 12rpx; display: block; }
.form-input {
  border: 1rpx solid #ddd; border-radius: 12rpx; padding: 16rpx 20rpx;
  font-size: 26rpx; background-color: #FAFAFA; width: auto;
}
.submit-btn {
  background-color: #FF8C42; color: #FFFFFF; text-align: center; padding: 22rpx 0;
  border-radius: 16rpx; font-size: 28rpx; font-weight: 500; margin-top: 10rpx;
}
.history-list { display: flex; flex-direction: column; gap: 16rpx; }
.history-item {
  display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.history-left { display: flex; flex-direction: column; gap: 4rpx; }
.history-type { font-size: 26rpx; font-weight: 500; color: #333; }
.history-duration { font-size: 22rpx; color: #999; }
.history-right { text-align: right; max-width: 40%; }
.history-date { font-size: 22rpx; color: #999; }
.empty-state { text-align: center; padding: 40rpx 0; font-size: 26rpx; color: #999; }
</style>