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

<template>
  <view class="chart-page">
    <view class="title">体重趋势</view>
    <view class="empty" v-if="list.length === 0">
      <text>暂无数据，先去记录体重吧</text>
    </view>
    <view class="tip" v-else>体重变化趋势（最近记录）</view>
    <view class="list">
      <view class="item" v-for="item in sortedList" :key="item.id">
        <text class="date">{{ format(item.measureDate || item.createTime) }}</text>
        <text class="weight">{{ item.weight }} kg</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getWeightList } from '../../utils/api.js'
import { formatDate } from '../../utils/format.js'
export default {
  data() {
    return {
      list: []
    }
  },
  computed: {
    sortedList() {
      return [...this.list].sort((a,b) => {
        var ta = new Date(a.measureDate || a.createTime).getTime()
        var tb = new Date(b.measureDate || b.createTime).getTime()
        return ta - tb
      })
    }
  },
  onShow() {
    this.load()
  },
  methods: {
    load() {
      getWeightList().then(res => {
        if (res.data) this.list = res.data
      })
    },
    format(date) {
      return formatDate(date)
    }
  }
}
</script>

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