cfc/cfc-frontend/pages/health/meditation-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>

    <!-- 成员选择 -->
    <view class="member-selector-card">
      <text class="member-label">记录人</text>
      <picker mode="selector" :range="memberOptions" :value="selectedMemberIndex" @change="onMemberChange">
        <view class="picker-display">{{ memberOptions[selectedMemberIndex] }}</view>
      </picker>
    </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="form-item">
            <text class="form-label">冥想类型</text>
            <view class="type-options">
              <view class="type-chip" v-for="t in meditationTypes" :key="t.value"
                :class="{ 'type-active': meditationType === t.value }"
                @click="meditationType = t.value">{{ t.label }}</view>
            </view>
          </view>
          <view class="form-item">
            <text class="form-label">时长（分钟）</text>
            <input class="form-input" v-model="duration" type="number" placeholder="输入冥想时长" />
          </view>
          <view class="form-item">
            <text class="form-label">感受备注</text>
            <textarea class="form-textarea" v-model="remark" placeholder="记录当下的感受（可选）" maxlength="200" />
          </view>
          <view class="submit-btn" @click="submitMeditation">保存记录</view>
        </view>
      </view>

      <!-- 历史记录 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">历史记录</text>
          <view class="history-list">
            <view class="history-item" v-for="item in history" :key="item.id">
              <text class="history-type">{{ getTypeLabel(item.meditationType) }}</text>
              <text class="history-duration">{{ item.durationMinutes }} 分钟</text>
              <text class="history-date">{{ item.createdAt ? item.createdAt.substring(0,10) : '' }}</text>
            </view>
            <view class="history-empty" v-if="history.length === 0"><text>暂无冥想记录</text></view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getChildren } from '@/utils/api.js'

export default {
  data() {
    return {
      childId: null,
      selectedMemberIndex: 0,
      memberOptions: ['我自己'],
      memberIds: [],
      meditationType: 'breathing',
      duration: '',
      remark: '',
      history: [],
      meditationTypes: [
        { label: '呼吸觉察', value: 'breathing' },
        { label: '身体扫描', value: 'body_scan' },
        { label: '慈心冥想', value: 'loving_kindness' },
        { label: '行走冥想', value: 'walking' },
        { label: '正念观察', value: 'mindful_observing' }
      ]
    }
  },
  onLoad: function() {
    this.loadChildren()
    this.loadHistory()
  },
  methods: {
    loadChildren: function() {
      var self = this
      getChildren().then(function(res) {
        if (res.code === 200 && res.data && res.data.length > 0) {
          self.memberIds = res.data.map(function(c) { return c.childId })
          self.memberOptions = ['我自己'].concat(res.data.map(function(c) { return c.name || c.nickname || '孩子' }))
        }
      }).catch(function() {})
    },
    onMemberChange: function(e) {
      this.selectedMemberIndex = parseInt(e.detail.value)
      if (this.selectedMemberIndex === 0) {
        this.childId = null
      } else {
        this.childId = this.memberIds[this.selectedMemberIndex - 1]
      }
      this.loadHistory()
    },
    submitMeditation: function() {
      if (!this.duration || parseInt(this.duration) <= 0) {
        uni.showToast({ title: '请输入有效时长', icon: 'none' })
        return
      }
      var data = {
        meditationType: this.meditationType,
        durationMinutes: parseInt(this.duration),
        remark: this.remark
      }
      if (this.childId) {
        data.childId = this.childId
        data.memberId = this.childId
      }
      uni.showLoading({ title: '保存中...' })
      healthRequest('/api/health/meditation/create', data).then(function() {
        uni.hideLoading()
        uni.showToast({ title: '保存成功', icon: 'success' })
        this.duration = ''
        this.remark = ''
        this.loadHistory()
      }.bind(this)).catch(function() {
        uni.hideLoading()
        uni.showToast({ title: '保存失败', icon: 'none' })
      })
    },
    loadHistory: function() {
      var self = this
      var params = {}
      if (this.childId) params.childId = this.childId
      healthRequest('/api/health/meditation/list', params).then(function(res) {
        if (res.data) self.history = res.data
      }).catch(function() { self.history = [] })
    },
    getTypeLabel: function(type) {
      var map = { breathing: '呼吸觉察', body_scan: '身体扫描', loving_kindness: '慈心冥想', walking: '行走冥想', mindful_observing: '正念观察' }
      return map[type] || type
    },
    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>
.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;
}
.member-selector-card {
  margin: 0 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.member-label {
  font-size: 28rpx;
  color: #666;
}
.picker-display {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
.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: #6366F1;
  flex-shrink: 0;
}
.card-body {
  flex: 1;
  padding: 30rpx;
}
.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}
.form-item {
  margin-bottom: 20rpx;
}
.form-label {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 12rpx;
}
.type-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.type-chip {
  padding: 10rpx 24rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: #666;
  background: #f0f0f0;
  margin-right: 16rpx;
  margin-bottom: 12rpx;
}
.type-active {
  background: #EDE9FE;
  color: #6366F1;
  font-weight: 500;
}
.form-input {
  width: 100%;
  box-sizing: border-box;
  height: 80rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: #fafafa;
}
.form-textarea {
  width: 100%;
  box-sizing: border-box;
  height: 160rpx;
  padding: 16rpx 24rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: #fafafa;
  resize: none;
}
.submit-btn {
  background: linear-gradient(135deg, #6366F1, #818CF8);
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  padding: 22rpx;
  border-radius: 40rpx;
  margin-top: 16rpx;
}
.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-type {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}
.history-duration {
  font-size: 24rpx;
  color: #6366F1;
  margin-right: 16rpx;
}
.history-date {
  font-size: 22rpx;
  color: #999;
}
.history-empty {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
}
</style>