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

<template>
  <view class="exercise-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="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>

    <view class="section-card">
      <view class="section-title">记录运动</view>
      <view class="exercise-types">
        <view class="ex-type-item" v-for="et in exerciseTypes" :key="et.value"
          :class="{ 'ex-type-active': selectedType === et.value }"
          @click="selectedType = et.value">
          <text class="ex-type-icon">{{ et.icon }}</text>
          <text class="ex-type-label">{{ et.label }}</text>
        </view>
      </view>

      <view class="input-row">
        <text class="input-label">时长(分钟)</text>
        <input class="input-field" v-model="duration" type="number" placeholder="输入运动时长" />
      </view>
      <view class="input-row">
        <text class="input-label">强度</text>
        <view class="intensity-options">
          <text class="intensity-item" v-for="v in ['低','中','高']" :key="v"
            :class="{ 'intensity-active': intensity === v }" @click="intensity = v">{{ v }}</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="submitExercise">保存记录</view>
    </view>

    <view class="section-card">
      <view class="section-title">今日运动摘要</view>
      <view class="today-summary">
        <text class="summary-stat">总时长：<text class="stat-value">{{ todayTotalMinutes }} 分钟</text></text>
        <text class="summary-stat">消耗：<text class="stat-value">{{ todayCalories }} kcal</text></text>
      </view>
    </view>

    <view class="section-card">
      <view class="section-title">历史记录</view>
      <view class="history-list">
        <view class="history-item" v-for="item in exerciseHistory" :key="item.id">
          <text class="history-icon">{{ getTypeIcon(item.exerciseType) }}</text>
          <view class="history-info">
            <text class="history-name">{{ item.exerciseType }}</text>
            <text class="history-meta">{{ item.durationMinutes }}分钟 · {{ item.intensity || '中' }}强度</text>
          </view>
          <text class="history-time">{{ item.createdAt ? item.createdAt.substring(5,16) : '' }}</text>
        </view>
        <view class="history-empty" v-if="exerciseHistory.length === 0"><text>暂无记录</text></view>
      </view>
    </view>

    <view class="bottom-spacer"></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: [],
      selectedType: 'running',
      duration: '',
      intensity: '中',
      remark: '',
      exerciseHistory: [],
      exerciseTypes: [
        { icon: '🏃', label: '跑步', value: 'running' },
        { icon: '🚴', label: '骑行', value: 'cycling' },
        { icon: '🏊', label: '游泳', value: 'swimming' },
        { icon: '🤸', label: '跳绳', value: 'jumping_rope' },
        { icon: '⚽', label: '球类', value: 'ball_games' },
        { icon: '🧘', label: '拉伸', value: 'stretching' }
      ]
    }
  },
  computed: {
    todayTotalMinutes: function() { return 0 },
    todayCalories: function() { return 0 }
  },
  onLoad: function(options) {
    this.childId = options.childId ? parseInt(options.childId) : null
    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()
    },
    submitExercise: function() {
      if (!this.duration || parseInt(this.duration) <= 0) {
        uni.showToast({ title: '请输入有效时长', icon: 'none' })
        return
      }
      var data = {
        exerciseType: this.selectedType,
        durationMinutes: parseInt(this.duration),
        intensity: this.intensity,
        remark: this.remark
      }
      if (this.childId) {
        data.childId = this.childId
        data.memberId = this.childId
      }
      uni.showLoading({ title: '保存中...' })
      healthRequest('/api/health/exercise/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/exercise/list', params).then(function(res) {
        if (res.data) self.exerciseHistory = res.data
      }).catch(function() { self.exerciseHistory = [] })
    },
    getTypeIcon: function(type) {
      var map = { running: '🏃', cycling: '🚴', swimming: '🏊', jumping_rope: '🤸', ball_games: '⚽', stretching: '🧘' }
      return map[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>
.exercise-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; }
.member-selector-card { margin: 20rpx 30rpx; 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; }
.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; }
.exercise-types { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 20rpx; }
.ex-type-item { display: flex; flex-direction: column; align-items: center; padding: 16rpx 24rpx; border-radius: 16rpx; background: #f0f0f0; margin: 0 12rpx 12rpx 0; min-width: 100rpx; }
.ex-type-active { background: #E8F5E9; border: 2rpx solid #4CAF50; }
.ex-type-icon { font-size: 36rpx; }
.ex-type-label { font-size: 22rpx; color: #666; margin-top: 6rpx; }
.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; }
.intensity-options { display: flex; flex-direction: row; }
.intensity-item { padding: 8rpx 24rpx; border-radius: 12rpx; background: #f0f0f0; font-size: 26rpx; color: #666; margin-right: 12rpx; }
.intensity-active { background: #FFF3E0; color: #E65100; }
.submit-btn { background: linear-gradient(135deg, #4CAF50, #66BB6A); color: #fff; font-size: 32rpx; font-weight: bold; text-align: center; padding: 22rpx; border-radius: 40rpx; margin-top: 16rpx; }
.today-summary { display: flex; flex-direction: row; justify-content: space-around; }
.summary-stat { font-size: 26rpx; color: #666; }
.stat-value { font-size: 32rpx; color: #4CAF50; font-weight: bold; }
.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-icon { font-size: 32rpx; margin-right: 16rpx; }
.history-info { flex: 1; }
.history-name { font-size: 28rpx; color: #333; }
.history-meta { font-size: 22rpx; color: #999; }
.history-time { font-size: 22rpx; color: #999; }
.history-empty { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; }
.bottom-spacer { height: 60rpx; }
</style>