cfc/cfc-frontend/pages/health/sleep-index.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>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">3-5 岁（学龄前）</text>
              <text class="info-desc">每天推荐 10-13 小时睡眠（含午睡），养成固定作息，促进大脑和身体发育。</text>
            </view>
            <view class="info-item">
              <text class="info-age">6-12 岁（学龄期）</text>
              <text class="info-desc">每天推荐 9-11 小时睡眠，保证充足休息，提升学习注意力和记忆力。</text>
            </view>
            <view class="info-item">
              <text class="info-age">13-18 岁（青少年）</text>
              <text class="info-desc">每天推荐 8-10 小时睡眠，帮助身体恢复和激素调节，维持良好精神状态。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">优质睡眠习惯</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">固定作息时间</text>
              <text class="info-desc">每天同一时间上床和起床，包括周末，帮助身体建立稳定的生物钟。</text>
            </view>
            <view class="info-item">
              <text class="info-age">睡前放松仪式</text>
              <text class="info-desc">睡前三十分钟进行安静活动，如阅读、听轻音乐、深呼吸，让身心逐渐放松。</text>
            </view>
            <view class="info-item">
              <text class="info-age">减少屏幕时间</text>
              <text class="info-desc">睡前 1 小时停止使用电子设备，蓝光会抑制褪黑素分泌，影响入睡。</text>
            </view>
            <view class="info-item">
              <text class="info-age">舒适睡眠环境</text>
              <text class="info-desc">保持卧室安静、黑暗、凉爽，选择舒适的床垫和枕头，营造良好的睡眠氛围。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">作息规律建议</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">合理作息框架</text>
              <text class="info-desc">以 21:00-7:00 为参考睡眠时段，根据年龄调整，保证上学日与节假日作息一致。</text>
            </view>
            <view class="info-item">
              <text class="info-age">午睡要适度</text>
              <text class="info-desc">学龄前儿童可午睡 1-2 小时，学龄期如有需要控制在 30 分钟内，避免影响夜间睡眠。</text>
            </view>
            <view class="info-item">
              <text class="info-age">过渡期调整</text>
              <text class="info-desc">节假日前后逐渐调整作息，每次调整 15-30 分钟，让孩子平稳过渡，避免睡眠紊乱。</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 记录睡眠表单 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">记录睡眠</text>
          <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 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>
            </view>
          </view>
          <view class="form-group">
            <text class="form-label">深睡时长（分钟，选填）</text>
            <input class="form-input" type="number" v-model="form.deepSleepMinutes" placeholder="深睡大约多少分钟" />
          </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">{{ item.durationMinutes || '-' }}分钟</text>
                <text class="history-duration">质量评分: {{ item.qualityScore || '-' }}</text>
              </view>
              <view class="history-right">
                <text class="history-date">{{ formatDate(item.createdAt) }}</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'
import { parseDate } from '../../utils/format.js'

export default {
  data() {
    return {
      memberId: null,
      submitting: false,
      history: [],
      form: {
        sleepTime: '21:00',
        wakeTime: '07:00',
        qualityScore: 7,
        deepSleepMinutes: '',
        remark: ''
      }
    }
  },
  onLoad: function() {
    this.memberId = uni.getStorageSync('currentChildId') || null
    this.loadHistory()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    formatDate: function(dateStr) {
      if (!dateStr) return ''
      var d = parseDate(dateStr)
      if (!d) return ''
      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/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, 10)
          }
        }
      })
    },
    doCheckin: function() {
      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
      var token = uni.getStorageSync('token')
      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)
      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,
          deepSleepMinutes: self.form.deepSleepMinutes ? parseInt(self.form.deepSleepMinutes) : null,
          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.qualityScore = 7
            self.form.deepSleepMinutes = ''
            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: 24rpx;
  display: block;
}
.info-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}
.info-age {
  font-size: 26rpx;
  font-weight: 500;
  color: #FF8C42;
  display: block;
}
.info-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
.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;
}
.picker-display {
  border: 1rpx solid #ddd;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 26rpx;
  background-color: #FAFAFA;
  color: #333;
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.slider-min {
  font-size: 22rpx;
  color: #999;
  flex-shrink: 0;
}
.slider-val {
  font-size: 24rpx;
  color: #FF8C42;
  font-weight: 500;
  width: 40rpx;
  text-align: center;
}
.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;
}
.history-date {
  font-size: 22rpx;
  color: #999;
}
.empty-state {
  text-align: center;
  padding: 40rpx 0;
  font-size: 26rpx;
  color: #999;
}
</style>