cfc/cfc-frontend/pages/body/sleep-record.vue

<template>
  <view class="sleep-container">
    <view class="nav-bar">
      <text class="nav-back" @click="goBack">‹ 返回</text>
      <text class="nav-title">作息记录</text>
      <view class="nav-placeholder"></view>
    </view>

    <view class="section-card">
      <view class="section-title">记录睡眠</view>
      <view class="input-row">
        <text class="input-label">入睡时间</text>
        <picker mode="time" :value="sleepTime" @change="onSleepTimeChange">
          <view class="picker-display">{{ sleepTime || '选择时间' }}</view>
        </picker>
      </view>
      <view class="input-row">
        <text class="input-label">起床时间</text>
        <picker mode="time" :value="wakeTime" @change="onWakeTimeChange">
          <view class="picker-display">{{ wakeTime || '选择时间' }}</view>
        </picker>
      </view>
      <view class="input-row">
        <text class="input-label">睡眠质量</text>
        <view class="quality-options">
          <text class="quality-item" v-for="q in qualityOptions" :key="q.value"
            :class="{ 'quality-active': quality === q.value }" @click="quality = q.value">
            <text class="quality-emoji">{{ q.emoji }}</text>
            <text class="quality-label">{{ q.label }}</text>
          </text>
        </view>
      </view>
      <view class="input-row">
        <text class="input-label">备注</text>
        <input class="input-field" v-model="remark" placeholder="可选" />
      </view>
      <view class="submit-btn" @click="submitSleep">保存记录</view>
    </view>

    <view class="section-card">
      <view class="section-title">本周睡眠概况</view>
      <view class="sleep-stats">
        <view class="stat-item">
          <text class="stat-value">{{ avgDuration || '--' }}</text>
          <text class="stat-label">平均时长(h)</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ avgQuality || '--' }}</text>
          <text class="stat-label">平均评分</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ totalRecords || 0 }}</text>
          <text class="stat-label">记录天数</text>
        </view>
      </view>
    </view>

    <view class="section-card">
      <view class="section-title">历史记录</view>
      <view class="history-list">
        <view class="history-item" v-for="item in sleepHistory" :key="item.id">
          <view class="history-info">
            <text class="history-date">{{ item.createdAt ? item.createdAt.substring(0,10) : '' }}</text>
            <text class="history-detail">{{ item.sleepTime ? item.sleepTime.substring(11,16) : '--' }} → {{ item.wakeTime ? item.wakeTime.substring(11,16) : '--' }}</text>
          </view>
          <view class="history-quality">
            <text>{{ getQualityEmoji(item.qualityScore) }}</text>
            <text class="quality-num" v-if="item.durationMinutes">{{ Math.round(item.durationMinutes/60) }}h</text>
          </view>
        </view>
        <view class="history-empty" v-if="sleepHistory.length === 0"><text>暂无记录</text></view>
      </view>
    </view>

    <view class="bottom-spacer"></view>
  </view>
</template>

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

export default {
  data() {
    return {
      childId: null,
      sleepTime: '',
      wakeTime: '',
      quality: '',
      remark: '',
      sleepHistory: [],
      avgDuration: null,
      avgQuality: null,
      totalRecords: 0,
      qualityOptions: [
        { label: '很好', value: 'excellent', emoji: '😴' },
        { label: '还行', value: 'good', emoji: '🙂' },
        { label: '一般', value: 'fair', emoji: '😐' },
        { label: '很差', value: 'poor', emoji: '😫' }
      ]
    }
  },
  onLoad: function(options) {
    this.childId = options.childId ? parseInt(options.childId) : null
    if (this.childId) this.loadHistory()
  },
  methods: {
    onSleepTimeChange: function(e) { this.sleepTime = e.detail.value },
    onWakeTimeChange: function(e) { this.wakeTime = e.detail.value },
    getQualityEmoji: function(score) {
      if (!score) return '🙂'
      if (score >= 8) return '😴'
      if (score >= 6) return '🙂'
      if (score >= 4) return '😐'
      return '😫'
    },
    submitSleep: function() {
      if (!this.sleepTime || !this.wakeTime) {
        uni.showToast({ title: '请选择睡眠时间', icon: 'none' })
        return
      }
      uni.showLoading({ title: '保存中...' })
      healthRequest('/api/health/sleep/create', {
        childId: this.childId,
        memberId: this.childId,
        sleepTime: this.sleepTime,
        wakeTime: this.wakeTime,
        qualityScore: this.quality ? { excellent: 9, good: 7, fair: 5, poor: 2 }[this.quality] : null,
        remark: this.remark
      }).then(function() {
        uni.hideLoading()
        uni.showToast({ title: '保存成功', icon: 'success' })
        this.sleepTime = ''
        this.wakeTime = ''
        this.quality = ''
        this.remark = ''
        this.loadHistory()
      }.bind(this)).catch(function() {
        uni.hideLoading()
        uni.showToast({ title: '保存失败', icon: 'none' })
      })
    },
    loadHistory: function() {
      var self = this
      healthRequest('/api/health/sleep/list', { childId: this.childId }).then(function(res) {
        if (res.data) {
          self.sleepHistory = res.data.list || res.data
          self.avgDuration = res.data.avgDuration || null
          self.avgQuality = res.data.avgQuality || null
          self.totalRecords = res.data.totalRecords || self.sleepHistory.length
        }
      }).catch(function() {})
    },
    goBack: function() { uni.navigateBack() }
  }
}

function healthRequest(url, data) {
  var token = uni.getStorageSync('token')
  return new Promise(function(resolve, reject) {
    uni.request({
      url: config.API_BASE_URL + url,
      method: 'POST',
      data: data,
      header: { 'Content-Type': 'application/json', 'Authorization': token ? 'Bearer ' + token : '' },
      success: function(res) { if (res.data.code === 200) resolve(res.data); else reject(res.data) },
      fail: function(err) { reject(err) }
    })
  })
}
</script>

<style scoped>
.sleep-container { min-height: 100vh; background: #f5f7fa; padding-bottom: 60rpx; }
.nav-bar { position: sticky; top: 0; background: #fff; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06); z-index: 100; }
.nav-back { font-size: 32rpx; color: #5B9BD5; }
.nav-title { font-size: 32rpx; font-weight: bold; color: #333; }
.nav-placeholder { width: 80rpx; }
.section-card { margin: 20rpx 30rpx; background: #fff; border-radius: 20rpx; padding: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.section-title { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; }
.input-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 16rpx; }
.input-label { font-size: 26rpx; color: #666; width: 140rpx; flex-shrink: 0; }
.input-field { flex: 1; background: #f5f7fa; border-radius: 12rpx; padding: 14rpx 16rpx; font-size: 28rpx; }
.picker-display { background: #f5f7fa; border-radius: 12rpx; padding: 14rpx 16rpx; font-size: 28rpx; color: #333; min-width: 200rpx; }
.quality-options { display: flex; flex-direction: row; }
.quality-item { display: flex; flex-direction: column; align-items: center; padding: 12rpx 20rpx; border-radius: 12rpx; background: #f0f0f0; margin-right: 12rpx; }
.quality-active { background: #E3F2FD; border: 2rpx solid #5B9BD5; }
.quality-emoji { font-size: 32rpx; }
.quality-label { font-size: 20rpx; color: #666; margin-top: 4rpx; }
.submit-btn { background: linear-gradient(135deg, #5B9BD5, #7EB8E0); color: #fff; font-size: 32rpx; font-weight: bold; text-align: center; padding: 22rpx; border-radius: 40rpx; margin-top: 16rpx; }
.sleep-stats { display: flex; flex-direction: row; justify-content: space-around; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: 40rpx; font-weight: bold; color: #5B9BD5; }
.stat-label { font-size: 22rpx; color: #999; }
.history-list { display: flex; flex-direction: column; }
.history-item { display: flex; flex-direction: row; align-items: center; padding: 14rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.history-info { flex: 1; }
.history-date { font-size: 24rpx; color: #999; display: block; }
.history-detail { font-size: 28rpx; color: #333; }
.history-quality { display: flex; flex-direction: column; align-items: center; }
.history-quality text { font-size: 28rpx; }
.quality-num { font-size: 22rpx; color: #999; }
.history-empty { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; }
.bottom-spacer { height: 60rpx; }
</style>