cfc/cfc-frontend/pages/health/components/ConfirmStep.vue

<template>
  <view class="confirm-step">
    <view class="step-title-row">
      <text class="step-title">确认信息</text>
      <text class="step-sub">核对无误后保存并生成健康方案</text>
    </view>

    <!-- 基础体征 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">基础体征</text>
      </view>
      <view class="preview-row" v-if="healthStatus.heightCm">
        <text class="preview-label">身高</text>
        <text class="preview-value">{{ healthStatus.heightCm }} cm</text>
      </view>
      <view class="preview-row" v-if="healthStatus.weightKg">
        <text class="preview-label">体重</text>
        <text class="preview-value">{{ healthStatus.weightKg }} kg</text>
      </view>
      <view class="preview-row" v-if="healthStatus.bloodPressure">
        <text class="preview-label">血压</text>
        <text class="preview-value">{{ healthStatus.bloodPressure }}</text>
      </view>
      <view class="preview-row" v-if="healthStatus.bloodGlucose">
        <text class="preview-label">空腹血糖</text>
        <text class="preview-value">{{ healthStatus.bloodGlucose }} mmol/L</text>
      </view>
      <view class="preview-row" v-if="healthStatus.lipidCholesterol">
        <text class="preview-label">总胆固醇</text>
        <text class="preview-value">{{ healthStatus.lipidCholesterol }} mmol/L</text>
      </view>
    </view>

    <!-- 疾病史 -->
    <view class="form-card" v-if="healthStatus.selectedDiseases && healthStatus.selectedDiseases.length > 0">
      <view class="card-head">
        <text class="card-title">疾病史</text>
      </view>
      <view class="tag-wrap">
        <view v-for="(d, i) in healthStatus.selectedDiseases" :key="getKey(d.name, i)" class="tag-item">
          <text>{{ d.name }}</text>
          <text v-if="d.diagnosedAt" class="tag-date">{{ d.diagnosedAt }}</text>
        </view>
      </view>
    </view>

    <!-- 用药 -->
    <view class="form-card" v-if="hasMeds">
      <view class="card-head">
        <text class="card-title">在服药物/治疗</text>
      </view>
      <view v-for="(med, i) in medRows" :key="getKey(med.name, i)" class="med-line">
        <text class="med-name">{{ med.name }}</text>
        <text v-if="med.durationText" class="med-duration">{{ med.durationText }}</text>
      </view>
    </view>

    <!-- 饮食习惯 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">饮食习惯</text>
      </view>
      <view class="preview-row" v-if="dietPreferences.allergies && dietPreferences.allergies.length > 0">
        <text class="preview-label">过敏原</text>
        <text class="preview-value">{{ dietPreferences.allergies.join('、') }}</text>
      </view>
      <view class="preview-row" v-if="dietPreferences.absoluteAvoid && dietPreferences.absoluteAvoid.length > 0">
        <text class="preview-label">绝对忌口</text>
        <text class="preview-value">{{ dietPreferences.absoluteAvoid.join('、') }}</text>
      </view>
      <view class="preview-row" v-if="dietPreferences.mustEat && dietPreferences.mustEat.length > 0">
        <text class="preview-label">必吃</text>
        <text class="preview-value">{{ dietPreferences.mustEat.join('、') }}</text>
      </view>
      <view class="preview-row" v-if="dietPreferences.flavorPref && dietPreferences.flavorPref.length > 0">
        <text class="preview-label">口味</text>
        <text class="preview-value">{{ dietPreferences.flavorPref.join('、') }}</text>
      </view>
      <view class="preview-row" v-if="dietPreferences.cuisinePref && dietPreferences.cuisinePref.length > 0">
        <text class="preview-label">菜系</text>
        <text class="preview-value">{{ dietPreferences.cuisinePref.join('、') }}</text>
      </view>
      <view class="preview-row" v-if="dietPreferences.healthGoals && dietPreferences.healthGoals.length > 0">
        <text class="preview-label">健康目标</text>
        <text class="preview-value">{{ dietPreferences.healthGoals.join('、') }}</text>
      </view>
      <text class="empty-hint" v-if="!hasDiet && noPreference">无特殊偏好</text>
      <text class="empty-hint" v-else-if="!hasDiet">未填写饮食习惯</text>
    </view>

    <!-- 保存并生成 -->
    <view class="btn-pair">
      <button class="btn-prev" @click="goBack">上一步</button>
      <button class="btn-generate" :disabled="submitting" @click="onSubmit">
        {{ submitting ? '保存中...' : '保存并生成方案' }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ConfirmStep',
  props: {
    healthStatus: {
      type: Object,
      default: function() { return {} }
    },
    dietPreferences: {
      type: Object,
      default: function() { return {} }
    },
    submitting: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    medRows: function() {
      var rows = this.healthStatus.medRows || []
      return rows.filter(function(m) { return m && m.name })
    },
    hasMeds: function() {
      return this.medRows.length > 0
    },
    hasDiet: function() {
      var d = this.dietPreferences
      return !!(d &&
        ((d.allergies && d.allergies.length > 0) ||
        (d.absoluteAvoid && d.absoluteAvoid.length > 0) ||
        (d.mustEat && d.mustEat.length > 0) ||
        (d.flavorPref && d.flavorPref.length > 0) ||
        (d.healthGoals && d.healthGoals.length > 0)))
    },
    noPreference: function() {
      return !!(this.dietPreferences && this.dietPreferences.noPreference)
    }
  },
  methods: {
    getKey: function(name, i) {
      return 'k' + (name || '') + i
    },
    goBack: function() {
      this.$emit('back')
    },
    onSubmit: function() {
      this.$emit('submit', {
        healthStatus: this.healthStatus,
        dietPreferences: this.dietPreferences
      })
    }
  }
}
</script>

<style scoped>
.confirm-step {
  padding: 10rpx 0 30rpx;
}
.step-title-row {
  margin-bottom: 20rpx;
}
.step-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #333;
}
.step-sub {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}
.form-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 2rpx solid #F8FAFC;
}
.preview-label {
  font-size: 26rpx;
  color: #64748B;
}
.preview-value {
  font-size: 26rpx;
  color: #334155;
  font-weight: 500;
}
.tag-wrap {
  display: flex;
  flex-wrap: wrap;
}
.tag-item {
  padding: 10rpx 20rpx;
  border-radius: 999rpx;
  background: #F1F5F9;
  font-size: 24rpx;
  color: #334155;
  margin: 0 14rpx 14rpx 0;
}
.tag-date {
  color: #94A3B8;
  margin-left: 8rpx;
}
.med-line {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
}
.med-name {
  font-size: 26rpx;
  color: #334155;
}
.med-duration {
  font-size: 24rpx;
  color: #94A3B8;
}
.empty-hint {
  display: block;
  font-size: 24rpx;
  color: #94A3B8;
  padding: 10rpx 0;
}
.btn-pair {
  display: flex;
  padding: 20rpx 0;
}
.btn-prev,
.btn-generate {
  flex: 1;
  margin: 0 10rpx;
  border-radius: 999rpx;
  font-size: 30rpx;
  font-weight: 600;
}
.btn-prev {
  background: #F1F5F9;
  color: #334155;
}
.btn-generate {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
}
</style>