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

<template>
  <view class="create-page">
    <view class="form">
      <view class="form-item">
        <text class="label">食物名称</text>
        <input class="input" v-model="form.foodName" placeholder="请输入食物名称" />
      </view>
      <view class="form-item">
        <text class="label">热量（kcal）</text>
        <input class="input" type="number" v-model="form.calories" placeholder="请输入热量" />
      </view>
      <view class="form-item">
        <text class="label">餐次</text>
        <picker :range="mealTypes" @change="onMealChange">
          <view class="picker">{{ form.mealType }}</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">进餐日期</text>
        <picker mode="date" :value="form.eatDate" @change="onDateChange">
          <view class="picker">{{ form.eatDate }}</view>
        </picker>
      </view>
    </view>

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

<script>
import { createDietRecord } from '../../utils/api.js'
import { today } from '../../utils/format.js'
export default {
  data() {
    return {
      mealTypes: ['早餐', '午餐', '晚餐', '加餐'],
      form: {
        foodName: '',
        calories: '',
        mealType: '早餐',
        eatDate: today()
      }
    }
  },
  methods: {
    onMealChange(e) {
      this.form.mealType = this.mealTypes[e.detail.value]
    },
    onDateChange(e) {
      this.form.eatDate = e.detail.value
    },
    submit() {
      if (!this.form.foodName) {
        uni.showToast({ title: '请输入食物名称', icon: 'none' })
        return
      }
      if (!this.form.calories) {
        uni.showToast({ title: '请输入热量', icon: 'none' })
        return
      }
      var data = {
        foodName: this.form.foodName,
        calories: parseInt(this.form.calories),
        mealType: this.form.mealType,
        eatDate: this.form.eatDate
      }
      createDietRecord(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: 200rpx; 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>