cfc/cfc-frontend/pages/growth/sleep-checkin.vue

<template>
  <view class="page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="nav-icon">‹</text>
        <text class="nav-title">睡眠打卡</text>
      </view>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- 睡眠时间 -->
      <view class="card">
        <view class="card-header">
          <text class="card-icon">🌙</text>
          <text class="card-title">睡眠时间</text>
        </view>
        <view class="card-body">
          <view class="form-group">
            <text class="form-label">入睡时间 *</text>
            <picker mode="time" :value="form.sleepTime" @change="function(e){form.sleepTime=e.detail.value}">
              <view class="picker-display">{{ form.sleepTime || '选择入睡时间' }}</view>
            </picker>
          </view>
          <view class="form-group">
            <text class="form-label">醒来时间 *</text>
            <picker mode="time" :value="form.wakeTime" @change="function(e){form.wakeTime=e.detail.value}">
              <view class="picker-display">{{ form.wakeTime || '选择醒来时间' }}</view>
            </picker>
          </view>
        </view>
      </view>

      <!-- 睡眠质量 & 备注 -->
      <view class="card">
        <view class="card-header">
          <text class="card-icon">⭐</text>
          <text class="card-title">睡眠质量</text>
        </view>
        <view class="card-body">
          <view class="form-group">
            <text class="form-label">睡眠质量（1-10）</text>
            <view class="slider-row">
              <text class="slider-min">差</text>
              <slider min="1" max="10" :value="form.qualityScore" @change="function(e){form.qualityScore=e.detail.value}" block-size="20" activeColor="#FF8C42" />
              <text class="slider-val">{{ form.qualityScore }}</text>
              <text class="slider-max">好</text>
            </view>
          </view>
          <view class="form-group">
            <text class="form-label">备注（选填）</text>
            <input class="form-input" v-model="form.remark" placeholder="睡眠感受..." />
          </view>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-wrap">
        <view class="submit-btn" :class="{ 'submitting': submitting }" @tap="doCheckin">
          <text>{{ submitting ? '提交中...' : '✓ 完成打卡' }}</text>
        </view>
      </view>

      <!-- 历史记录 -->
      <view class="card" v-if="history.length > 0">
        <view class="card-header">
          <text class="card-icon">📜</text>
          <text class="card-title">近期睡眠</text>
        </view>
        <view class="card-body">
          <view class="history-list">
            <view class="history-item" v-for="item in history" :key="item.id">
              <view class="history-left">
                <text class="history-type">{{ item.sleepTime }} - {{ item.wakeTime }}</text>
                <text class="history-content">{{ item.durationMinutes }}分钟 · 质量{{ item.qualityScore }}分</text>
              </view>
              <view class="history-right">
                <text class="history-date">{{ formatDate(item.createdAt) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部留白 -->
      <view class="bottom-spacer"></view>
    </scroll-view>
  </view>
</template>

<script>
import config from '../../config'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      memberId: null,
      submitting: false,
      history: [],
      form: {
        sleepTime: '21:00',
        wakeTime: '07:00',
        qualityScore: 7,
        remark: ''
      }
    }
  },
  onLoad: function() {
    var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    if (role !== 'child') {
      this.memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId') || null
    }
    this.loadHistory()
  },
  methods: {
    goBack: function() { uni.navigateBack() },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return dateStr
      var m2 = (d.getMonth() + 1).toString().padStart(2, '0')
      var day = d.getDate().toString().padStart(2, '0')
      return m2 + '-' + day
    },
    loadHistory: function() {
      var self = this
      var token = uni.getStorageSync('token')
      if (!token || !self.memberId) return
      uni.request({
        url: config.API_BASE_URL + '/api/health/sleep/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, 5)
          }
        }
      })
    },
    async doCheckin() {
      var self = this
      if (!self.form.sleepTime) { uni.showToast({ title: '请选择入睡时间', icon: 'none' }); return }
      if (!self.form.wakeTime) { uni.showToast({ title: '请选择醒来时间', icon: 'none' }); return }
      if (!self.memberId) { uni.showToast({ title: '孩子ID无效', icon: 'none' }); return }
      self.submitting = true
      try {
        var sleepParts = self.form.sleepTime.split(':')
        var wakeParts = self.form.wakeTime.split(':')
        var sleepMin = parseInt(sleepParts[0]) * 60 + parseInt(sleepParts[1])
        var wakeMin = parseInt(wakeParts[0]) * 60 + parseInt(wakeParts[1])
        var duration = wakeMin > sleepMin ? wakeMin - sleepMin : (24 * 60 - sleepMin + wakeMin)
        var token = uni.getStorageSync('token')
        uni.request({
          url: config.API_BASE_URL + '/api/health/sleep/create',
          method: 'POST',
          data: {
            memberId: self.memberId,
            sleepTime: self.form.sleepTime,
            wakeTime: self.form.wakeTime,
            durationMinutes: duration,
            qualityScore: self.form.qualityScore,
            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' })
                setTimeout(function() {
                  uni.navigateBack()
                }, 800)
              } else {
                uni.showToast({ title: (res.data && res.data.message) || '打卡失败', icon: 'none' })
              }
            },
          fail: function() {
            self.submitting = false
            uni.showToast({ title: '网络错误', icon: 'none' })
          }
        })
      } catch (e) {
        self.submitting = false
        uni.showToast({ title: '提交失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
/* ===== 页面基础 ===== */
.page { min-height: 100vh; background: #FFF7ED; }
.nav-bar { height: 88rpx; padding: 24rpx 24rpx 0; display: flex; align-items: flex-end; }
.nav-left { display: flex; align-items: center; gap: 10rpx; }
.nav-icon { font-size: 48rpx; color: #333; line-height: 1; }
.nav-title { font-size: 34rpx; font-weight: 600; color: #333; }
.content { padding-bottom: 40rpx; }

/* ===== 卡片通用 ===== */
.card { margin: 16rpx 20rpx; background: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05); }
.card-header { display: flex; align-items: center; gap: 10rpx; padding: 20rpx 24rpx 8rpx; border-bottom: 1rpx solid #f5f5f5; background: linear-gradient(90deg, #FFFAF0, #fff); }
.card-icon { font-size: 32rpx; }
.card-title { font-size: 30rpx; font-weight: 600; color: #333; }
.card-body { padding: 20rpx 24rpx 24rpx; }

/* ===== 表单 ===== */
.form-group { margin-bottom: 20rpx; }
.form-label { font-size: 26rpx; color: #333; font-weight: 500; margin-bottom: 10rpx; display: block; }
.picker-display { border: 1rpx solid #e8e8e8; border-radius: 14rpx; padding: 18rpx; font-size: 26rpx; background: #FAFAFA; color: #333; min-height: 40rpx; }
.slider-row { display: flex; align-items: center; gap: 10rpx; }
.slider-min { font-size: 22rpx; color: #999; flex-shrink: 0; }
.slider-val { font-size: 26rpx; color: #FF8C42; font-weight: 600; width: 36rpx; text-align: center; }
.slider-max { font-size: 22rpx; color: #999; flex-shrink: 0; }
.form-input { width: 100%; height: 76rpx; border: 1rpx solid #e8e8e8; border-radius: 14rpx; padding: 0 16rpx; font-size: 26rpx; background: #FAFAFA; box-sizing: border-box; }

/* ===== 提交按钮 ===== */
.submit-wrap { padding: 24rpx 20rpx 32rpx; }
.submit-btn { background: linear-gradient(135deg, #FF8C42, #F97316); color: #fff; text-align: center; padding: 22rpx 0; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 6rpx 20rpx rgba(249,115,22,0.3); transition: all 0.2s ease; }
.submit-btn:active { transform: scale(0.98); }
.submitting { opacity: 0.6; }

/* ===== 历史记录 ===== */
.history-list { display: flex; flex-direction: column; gap: 12rpx; }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 14rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.history-left { flex: 1; min-width: 0; }
.history-type { font-size: 26rpx; font-weight: 500; color: #333; display: block; }
.history-content { font-size: 24rpx; color: #888; display: block; margin-top: 4rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-right { text-align: right; margin-left: 16rpx; flex-shrink: 0; }
.history-date { font-size: 22rpx; color: #999; }

/* ===== 底部留白 ===== */
.bottom-spacer { height: 40rpx; }
</style>