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

<template>
  <view class="create-page">
    <view class="form">
      <view class="form-item">
        <text class="label">体重（kg）</text>
        <input class="input" type="digit" v-model="form.weight" placeholder="请输入体重" />
      </view>
      <view class="form-item">
        <text class="label">体脂率（%）</text>
        <input class="input" type="digit" v-model="form.bodyFatPercent" placeholder="选填" />
      </view>
      <view class="form-item">
        <text class="label">腰围（cm）</text>
        <input class="input" type="digit" v-model="form.waistCircumference" placeholder="选填" />
      </view>
      <view class="form-item">
        <text class="label">测量日期</text>
        <picker mode="date" :value="form.measureDate" @change="onDateChange">
          <view class="picker">{{ form.measureDate }}</view>
        </picker>
      </view>
    </view>

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

<script>
import { createWeightRecord } from '../../utils/api.js'
import { today } from '../../utils/format.js'
export default {
  data() {
    return {
      form: {
        weight: '',
        bodyFatPercent: '',
        waistCircumference: '',
        measureDate: today()
      }
    }
  },
  methods: {
    onDateChange(e) {
      this.form.measureDate = e.detail.value
    },
    submit() {
      if (!this.form.weight) {
        uni.showToast({ title: '请输入体重', icon: 'none' })
        return
      }
      var data = {
        weight: this.form.weight,
        measureDate: this.form.measureDate
      }
      if (this.form.bodyFatPercent) data.bodyFatPercent = this.form.bodyFatPercent
      if (this.form.waistCircumference) data.waistCircumference = this.form.waistCircumference
      createWeightRecord(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>