cfc/xiaofat-miniprogram/pages/exercise/create.vue

<template>
  <view class="create-page">
    <view class="form">
      <view class="form-item">
        <text class="label">运动类型</text>
        <input class="input" v-model="form.exerciseType" placeholder="如：跑步、瑜伽等" />
      </view>
      <view class="form-item">
        <text class="label">时长（分钟）</text>
        <input class="input" type="number" v-model="form.durationMin" placeholder="请输入时长" />
      </view>
      <view class="form-item">
        <text class="label">消耗热量（kcal）</text>
        <input class="input" type="number" v-model="form.caloriesBurned" placeholder="请输入消耗热量" />
      </view>
      <view class="form-item">
        <text class="label">运动日期</text>
        <picker mode="date" :value="form.exerciseDate" @change="onDateChange">
          <view class="picker">{{ form.exerciseDate }}</view>
        </picker>
      </view>
    </view>

    <button class="submit-btn" @click="submit">保存</button>
  </view>
</template>

<script>
import { createExerciseRecord } from '../../utils/api.js'
import { today } from '../../utils/format.js'
export default {
  data() {
    return {
      form: {
        exerciseType: '',
        durationMin: '',
        caloriesBurned: '',
        exerciseDate: today()
      }
    }
  },
  methods: {
    onDateChange(e) {
      this.form.exerciseDate = e.detail.value
    },
    submit() {
      if (!this.form.exerciseType) {
        uni.showToast({ title: '请输入运动类型', icon: 'none' })
        return
      }
      if (!this.form.durationMin) {
        uni.showToast({ title: '请输入时长', icon: 'none' })
        return
      }
      var data = {
        exerciseType: this.form.exerciseType,
        durationMin: parseInt(this.form.durationMin),
        caloriesBurned: this.form.caloriesBurned ? parseInt(this.form.caloriesBurned) : 0,
        exerciseDate: this.form.exerciseDate
      }
      createExerciseRecord(data).then(() => {
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      })
    }
  }
}
</script>

<style>
.create-page { padding: 30rpx; }
.form { background: #fff; border-radius: 16rpx; padding: 0 30rpx; margin-bottom: 60rpx; }
.form-item { display: flex; align-items: center; padding: 30rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.label { width: 220rpx; color: #333; }
.input { flex: 1; text-align: right; }
.picker { flex: 1; text-align: right; color: #333; }
.submit-btn { background: #F97316; color: #fff; border-radius: 40rpx; }
</style>