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

<template>
  <view class="weight-page">
    <view class="header">
      <text class="title">体重记录</text>
      <button class="add-btn" size="mini" @click="goCreate">+ 记录</button>
    </view>

    <view class="list">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="left">
          <text class="date">{{ format(item.measureDate || item.createTime) }}</text>
        </view>
        <view class="right">
          <text class="weight">{{ item.weight }} kg</text>
        </view>
      </view>
    </view>

    <view class="empty" v-if="list.length === 0">
      <text>暂无体重记录</text>
    </view>
  </view>
</template>

<script>
import { getWeightList, deleteWeightRecord } from '../../utils/api.js'
import { formatDate } from '../../utils/format.js'
export default {
  data() {
    return {
      list: []
    }
  },
  onShow() {
    this.loadList()
  },
  methods: {
    loadList() {
      getWeightList().then(res => {
        if (res.data) this.list = res.data
      })
    },
    goCreate() {
      uni.navigateTo({ url: '/pages/weight/create' })
    },
    format(date) {
      return formatDate(date)
    },
    deleteItem(id) {
      uni.showModal({
        title: '提示',
        content: '确定删除该记录吗？',
        success: (res) => {
          if (res.confirm) {
            deleteWeightRecord(id).then(() => {
              this.loadList()
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.weight-page { padding: 30rpx; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx; }
.title { font-size: 36rpx; font-weight: 600; }
.add-btn { background: #F97316; color: #fff; border-radius: 40rpx; }
.list { background: #fff; border-radius: 16rpx; overflow: hidden; }
.item { display: flex; justify-content: space-between; padding: 30rpx; border-bottom: 1rpx solid #f5f5f5; }
.date { color: #666; }
.weight { font-size: 32rpx; font-weight: 600; color: #F97316; }
.empty { text-align: center; color: #999; padding: 60rpx; }
</style>