cfc/cfc-frontend/pages/health/exercise-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-6 岁（学龄前）</text>
              <text class="info-desc">每天至少 60 分钟中等强度运动，以游戏和趣味活动为主，如跑步、跳跃、球类游戏。</text>
            </view>
            <view class="info-item">
              <text class="info-age">6-12 岁（学龄期）</text>
              <text class="info-desc">每天 60 分钟以上中等强度运动，每周至少 3 次高强度有氧运动，如游泳、骑自行车、跳绳。</text>
            </view>
            <view class="info-item">
              <text class="info-age">12-18 岁（青少年）</text>
              <text class="info-desc">每天 60 分钟中高强度运动，每周 3 次力量训练，培养终身运动习惯。</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">改善身体灵活性，预防运动损伤。推荐：拉伸、瑜伽、舞蹈、体操。</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">运动前进行 5-10 分钟动态热身，如慢跑、关节活动，预防肌肉拉伤。</text>
            </view>
            <view class="info-item">
              <text class="info-age">补充水分</text>
              <text class="info-desc">运动前中后适量饮水，每 15-20 分钟补充 100-150ml 水，避免脱水。</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="form-group">
            <text class="form-label">运动类型 *</text>
            <view class="tag-row">
              <view class="tag-btn" v-for="t in exerciseTypes" :key="t.value"
                :class="form.exerciseType === t.value ? 'tag-active' : ''"
                @tap="form.exerciseType = t.value">
                <text>{{ t.label }}</text>
              </view>
            </view>
          </view>
          <view class="form-group">
            <text class="form-label">时长（分钟）*</text>
            <input class="form-input" type="number" v-model="form.durationMinutes" placeholder="请输入运动时长" />
          </view>
          <view class="form-group">
            <text class="form-label">强度</text>
            <view class="tag-row">
              <view class="tag-btn" v-for="s in intensityOptions" :key="s.value"
                :class="form.intensity === s.value ? 'tag-active' : ''"
                @tap="form.intensity = s.value">
                <text>{{ s.label }}</text>
              </view>
            </view>
          </view>
          <view class="form-group">
            <text class="form-label">消耗卡路里（选填）</text>
            <input class="form-input" type="number" v-model="form.caloriesBurned" 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.exerciseType }}</text>
                <text class="history-duration">{{ item.durationMinutes }}分钟</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: [],
      exerciseTypes: [
        { label: '跑步', value: 'running' },
        { label: '游泳', value: 'swimming' },
        { label: '骑行', value: 'cycling' },
        { label: '跳绳', value: 'jump_rope' },
        { label: '球类', value: 'ball_game' },
        { label: '力量训练', value: 'strength' },
        { label: '其他', value: 'other' }
      ],
      intensityOptions: [
        { label: '低强度', value: 'low' },
        { label: '中等', value: 'medium' },
        { label: '高强度', value: 'high' }
      ],
      form: {
        exerciseType: '',
        durationMinutes: '',
        intensity: 'medium',
        caloriesBurned: '',
        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 dateStr
      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/exercise/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.exerciseType) {
        uni.showToast({ title: '请选择运动类型', icon: 'none' })
        return
      }
      if (!self.form.durationMinutes || parseInt(self.form.durationMinutes) <= 0) {
        uni.showToast({ title: '请输入有效时长', icon: 'none' })
        return
      }
      if (!self.memberId) {
        uni.showToast({ title: '孩子ID无效', icon: 'none' })
        return
      }
      self.submitting = true
      var token = uni.getStorageSync('token')
      uni.request({
        url: config.API_BASE_URL + '/api/health/exercise/create',
        method: 'POST',
        data: {
          memberId: self.memberId,
          exerciseType: self.form.exerciseType,
          durationMinutes: parseInt(self.form.durationMinutes),
          intensity: self.form.intensity,
          caloriesBurned: self.form.caloriesBurned ? parseInt(self.form.caloriesBurned) : 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.exerciseType = ''
            self.form.durationMinutes = ''
            self.form.intensity = 'medium'
            self.form.caloriesBurned = ''
            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;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.tag-btn {
  padding: 12rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #FAFAFA;
}
.tag-active {
  border-color: #FF8C42;
  color: #FF8C42;
  background-color: #FFF5EB;
}
.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>