cfc/cfc-frontend/pages/diet/record-detail.vue

<template>
  <view class="record-detail-page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">记录详情</text>
      <view class="nav-placeholder"></view>
    </view>

    <scroll-view class="content" scroll-y v-if="record">
      <!-- 照片 -->
      <view class="photo-section" v-if="record.imageUrl">
        <image :src="record.imageUrl" mode="aspectFill" class="detail-photo" @tap="previewPhoto" />
      </view>

      <!-- 基本信息 -->
      <view class="card info-card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">基本信息</text>
          <view class="info-row">
            <text class="info-label">餐次</text>
            <text class="info-value">{{ record.mealType }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">记录方式</text>
            <text class="info-value">{{ record.recordMethod === 'photo' ? '📷 拍照识别' : '✏️ 手动记录' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">记录时间</text>
            <text class="info-value">{{ formatTime(record.createdAt) }}</text>
          </view>
          <view class="info-row" v-if="record.notes">
            <text class="info-label">备注</text>
            <text class="info-value">{{ record.notes }}</text>
          </view>
        </view>
      </view>

      <!-- AI识别结果 -->
      <view class="card ai-card" v-if="record.aiRecognizedFoods">
        <view class="card-accent" style="background-color: #2196F3;"></view>
        <view class="card-body">
          <text class="card-title">AI 识别结果</text>
          <view class="ai-item" v-for="(item, index) in aiFoods" :key="index">
            <text class="ai-name">{{ item.name }}</text>
            <view class="ai-confidence">
              <text class="confidence-bar" :style="'width:' + (item.confidence * 100) + '%'"></text>
              <text class="confidence-text">{{ (item.confidence * 100).toFixed(0) }}%</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 用户确认食材 -->
      <view class="card foods-card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">确认食材</text>
          <view class="food-tags">
            <view class="food-tag" v-for="(food, index) in confirmedFoods" :key="index">
              <text class="food-name">{{ food.name }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-area">
        <view class="btn-secondary" @tap="editRecord">编辑记录</view>
        <view class="btn-delete" @tap="deleteRecord">删除记录</view>
      </view>
    </scroll-view>

    <view class="empty-state" v-else>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
import { getDietDailyRecords } from '@/utils/api.js'

export default {
  data() {
    return {
      recordId: null,
      record: null,
      aiFoods: [],
      confirmedFoods: []
    }
  },
  onLoad: function(options) {
    if (options.id) {
      this.recordId = parseInt(options.id)
      this.loadRecord()
    }
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    loadRecord: function() {
      var self = this
      var memberId = uni.getStorageSync('currentMemberId')
      var today = self.formatDate(new Date())
      
      getDietDailyRecords({ memberId: memberId, date: today }).then(function(res) {
        if (res && res.records) {
          var record = res.records.find(function(r) { return r.id === self.recordId })
          if (record) {
            self.record = record
            self.parseAIFoods(record.aiRecognizedFoods)
            self.parseConfirmedFoods(record.userConfirmedFoods)
          }
        }
      })
    },
    parseAIFoods: function(json) {
      try {
        this.aiFoods = JSON.parse(json || '[]')
      } catch (e) {
        this.aiFoods = []
      }
    },
    parseConfirmedFoods: function(json) {
      try {
        this.confirmedFoods = JSON.parse(json || '[]')
      } catch (e) {
        this.confirmedFoods = []
      }
    },
    formatTime: function(timeStr) {
      if (!timeStr) return ''
      var d = new Date(timeStr)
      if (isNaN(d.getTime())) return timeStr
      var h = d.getHours().toString().padStart(2, '0')
      var m = d.getMinutes().toString().padStart(2, '0')
      return h + ':' + m
    },
    formatDate: function(date) {
      var d = date
      var m = (d.getMonth() + 1).toString().padStart(2, '0')
      var day = d.getDate().toString().padStart(2, '0')
      return d.getFullYear() + '-' + m + '-' + day
    },
    previewPhoto: function() {
      if (!this.record || !this.record.imageUrl) return
      uni.previewImage({
        urls: [this.record.imageUrl],
        current: this.record.imageUrl
      })
    },
    editRecord: function() {
      uni.showToast({ title: '编辑功能开发中', icon: 'none' })
    },
    deleteRecord: function() {
      var self = this
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条饮食记录吗？',
        success: function(res) {
          if (res.confirm) {
            uni.showToast({ title: '已删除', icon: 'success' })
            setTimeout(function() {
              uni.navigateBack()
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.record-detail-page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding-top: env(safe-area-inset-top);
  background-color: #FFFFFF;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
}
.nav-back {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
}
.back-text {
  font-size: 28rpx;
  color: #333;
}
.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.nav-placeholder {
  width: 80rpx;
}
.content {
  flex: 1;
  padding: 30rpx;
}
.photo-section {
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
}
.detail-photo {
  width: 100%;
  height: 400rpx;
  background-color: #f0f0f0;
}
.card {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.card-accent {
  width: 8rpx;
  background-color: #FF8C42;
  flex-shrink: 0;
}
.card-body {
  flex: 1;
  padding: 30rpx;
}
.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.info-row:last-child {
  border-bottom: none;
}
.info-label {
  font-size: 26rpx;
  color: #666;
}
.info-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}
.ai-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.ai-item:last-child {
  border-bottom: none;
}
.ai-name {
  font-size: 26rpx;
  color: #333;
}
.ai-confidence {
  display: flex;
  align-items: center;
  gap: 12rpx;
  width: 200rpx;
}
.confidence-bar {
  height: 8rpx;
  background-color: #2196F3;
  border-radius: 4rpx;
  flex: 1;
}
.confidence-text {
  font-size: 22rpx;
  color: #2196F3;
  white-space: nowrap;
}
.food-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.food-tag {
  padding: 12rpx 24rpx;
  background-color: #FFF5EB;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #FF8C42;
}
.action-area {
  display: flex;
  gap: 20rpx;
  padding: 40rpx 30rpx;
}
.btn-secondary {
  flex: 1;
  padding: 28rpx 0;
  background-color: #FFFFFF;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}
.btn-delete {
  flex: 1;
  padding: 28rpx 0;
  background-color: #FFF3E0;
  border-radius: 16rpx;
  text-align: center;
  font-size: 28rpx;
  color: #FF5722;
}
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #999;
}
</style>