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

<!-- DEPRECATED: 已由 ComprehensiveSurvey.vue 替代，待确认无引用后清理（2026-10-16 标记） -->
<template>
  <view class="diet-step">
    <view class="step-title-row">
      <text class="step-title">饮食习惯</text>
      <text class="step-sub">忌口与偏好，选得越细，方案越贴合</text>
    </view>

    <!-- 无特殊偏好：一键清空本节并直接进入确认步 -->
    <view class="pref-none-row">
      <button
        class="pref-none-btn"
        :class="{ 'pref-none-btn-active': inner.noPreference }"
        @click="setNoPreference"
      >{{ inner.noPreference ? '已选：无特殊偏好' : '无特殊偏好，直接下一步' }}</button>
    </view>

    <!-- 饮食结构现状：蔬果量/乳制品/含糖饮料频率 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">饮食结构现状</text>
        <text class="card-hint">单选</text>
      </view>
      <view class="struct-row">
        <text class="struct-label">每日蔬果量</text>
        <view class="tag-wrap">
          <view v-for="opt in vegFruitOptions" :key="opt" class="tag-item"
                :class="{ 'tag-active': inner.vegetableFruit === opt }" @click="setSingle('vegetableFruit', opt)">
            <text>{{ opt }}</text>
          </view>
        </view>
      </view>
      <view class="struct-row">
        <text class="struct-label">乳制品</text>
        <view class="tag-wrap">
          <view v-for="opt in dairyOptions" :key="opt" class="tag-item"
                :class="{ 'tag-active': inner.dairy === opt }" @click="setSingle('dairy', opt)">
            <text>{{ opt }}</text>
          </view>
        </view>
      </view>
      <view class="struct-row">
        <text class="struct-label">含糖饮料频率</text>
        <view class="tag-wrap">
          <view v-for="opt in sugaryDrinkOptions" :key="opt" class="tag-item"
                :class="{ 'tag-active': inner.sugaryDrinks === opt }" @click="setSingle('sugaryDrinks', opt)">
            <text>{{ opt }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 过敏原 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">过敏原</text>
        <text class="card-hint">多选</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(item, i) in presetAllergies"
          :key="item"
          class="tag-item"
          :class="{ 'tag-active': inner.allergies.indexOf(item) >= 0 }"
          @click="toggleChip('allergies', item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
      <view class="custom-row">
        <input class="custom-input" type="text" v-model="customInput" placeholder="输入其他过敏原"
               confirm-type="done" @confirm="addCustom('allergies')" />
        <text class="add-link" @click="addCustom('allergies')">添加</text>
      </view>
    </view>

    <!-- 绝对忌口 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">绝对忌口</text>
        <text class="card-hint">多选</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(item, i) in presetAvoid"
          :key="item"
          class="tag-item"
          :class="{ 'tag-active': inner.absoluteAvoid.indexOf(item) >= 0 }"
          @click="toggleChip('absoluteAvoid', item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
      <view class="custom-row">
        <input class="custom-input" type="text" v-model="customInput" placeholder="输入其他忌口"
               confirm-type="done" @confirm="addCustom('absoluteAvoid')" />
        <text class="add-link" @click="addCustom('absoluteAvoid')">添加</text>
      </view>
    </view>

    <!-- 必吃 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">必吃食物</text>
        <text class="card-hint">多选</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(item, i) in presetMustEat"
          :key="item"
          class="tag-item"
          :class="{ 'tag-active': inner.mustEat.indexOf(item) >= 0 }"
          @click="toggleChip('mustEat', item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 宗教饮食 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">宗教饮食</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(opt, i) in religiousOptions"
          :key="opt.value"
          class="tag-item"
          :class="{ 'tag-active': inner.religiousDiet === opt.value }"
          @click="setReligious(opt.value)"
        >
          <text>{{ opt.label }}</text>
        </view>
      </view>
    </view>

    <!-- 辣度 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">辣度偏好</text>
      </view>
      <view class="slider-row">
        <text class="slider-label">不辣</text>
        <slider class="slider" min="0" max="5" :value="inner.spiceLevel || 0"
                @change="onSpiceChange" show-value />
        <text class="slider-label">特辣</text>
      </view>
      <text class="spice-label">当前：{{ spiceLabels[inner.spiceLevel] || '不辣' }}</text>
    </view>

    <!-- 口味 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">口味偏好</text>
        <text class="card-hint">多选</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(item, i) in presetFlavor"
          :key="item"
          class="tag-item"
          :class="{ 'tag-active': inner.flavorPref.indexOf(item) >= 0 }"
          @click="toggleChip('flavorPref', item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 菜系 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">菜系偏好</text>
        <text class="card-hint">多选</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(item, i) in presetCuisine"
          :key="item"
          class="tag-item"
          :class="{ 'tag-active': inner.cuisinePref.indexOf(item) >= 0 }"
          @click="toggleChip('cuisinePref', item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 烹饪方式 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">烹饪方式</text>
        <text class="card-hint">多选</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(item, i) in presetCooking"
          :key="item"
          class="tag-item"
          :class="{ 'tag-active': inner.cookingMethods.indexOf(item) >= 0 }"
          @click="toggleChip('cookingMethods', item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 健康目标 -->
    <view class="form-card">
      <view class="card-head">
        <text class="card-title">健康目标</text>
        <text class="card-hint">多选</text>
      </view>
      <view class="tag-wrap">
        <view
          v-for="(item, i) in presetGoals"
          :key="item"
          class="tag-item"
          :class="{ 'tag-active': inner.healthGoals.indexOf(item) >= 0 }"
          @click="toggleChip('healthGoals', item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 预设选项（与 pages/diet/preferences.vue 保持一致，后端 diet_preferences 表字段对齐）
var PRESET_ALLERGIES = ['海鲜', '花生', '乳糖', '鸡蛋', '牛奶', '豆类', '麸质', '坚果', '芒果', '其他']
var PRESET_AVOID = ['牛肉', '羊肉', '猪肉', '内脏', '油腻', '辛辣', '生冷', '腌制']
var PRESET_FLAVOR = ['酸', '甜', '咸', '鲜', '苦', '清淡', '浓郁']
var PRESET_CUISINE = ['川', '粤', '鲁', '淮扬', '日料', '西餐', '东南亚', '韩餐']
var PRESET_COOKING = ['蒸', '煮', '炒', '烤', '炖', '凉拌', '煎', '炸']
var PRESET_MUSTEAT = ['蔬菜', '水果', '粗粮', '鱼类', '鸡蛋', '豆制品', '菌菇']
var PRESET_GOALS = ['减脂', '增肌', '控糖', '肠道调理', '增强免疫']

export default {
  name: 'DietHabitsStep',
  props: {
    value: {
      type: Object,
      default: function() { return {} }
    }
  },
  data() {
    return {
      inner: {
        allergies: [],
        absoluteAvoid: [],
        mustEat: [],
        religiousDiet: 'none',
        spiceLevel: 0,
        flavorPref: [],
        cuisinePref: [],
        cookingMethods: [],
        healthGoals: [],
        noPreference: false,
        vegetableFruit: '',
        dairy: '',
        sugaryDrinks: ''
      },
      customInput: '',
      spiceLabels: ['不辣', '微辣', '中辣', '偏辣', '很辣', '特辣']
    }
  },
  computed: {
    presetAllergies: function() { return PRESET_ALLERGIES },
    presetAvoid: function() { return PRESET_AVOID },
    presetFlavor: function() { return PRESET_FLAVOR },
    presetCuisine: function() { return PRESET_CUISINE },
    presetCooking: function() { return PRESET_COOKING },
    presetMustEat: function() { return PRESET_MUSTEAT },
    presetGoals: function() { return PRESET_GOALS },
    religiousOptions: function() {
      return [
        { value: 'none', label: '无限制' },
        { value: 'halal', label: '清真' },
        { value: 'vegetarian', label: '素食' },
        { value: 'vegan', label: '纯素' }
      ]
    },
    vegFruitOptions: function() { return ['<2份', '2-3份', '4份以上'] },
    dairyOptions: function() { return ['每天', '每周3-5次', '很少', '不喝'] },
    sugaryDrinkOptions: function() { return ['几乎不喝', '每周1-2次', '每周3-5次', '每天1次以上'] }
  },
  watch: {
    value: {
      deep: true,
      handler: function(val) {
        this.syncFromValue(val)
      }
    }
  },
  created: function() {
    this.syncFromValue(this.value)
  },
  methods: {
    syncFromValue: function(val) {
      if (!val) return
      var self = this
      var fields = ['allergies', 'absoluteAvoid', 'mustEat', 'flavorPref', 'cuisinePref', 'cookingMethods', 'healthGoals']
      fields.forEach(function(f) {
        self.inner[f] = Array.isArray(val[f]) ? val[f].slice() : []
      })
      self.inner.religiousDiet = val.religiousDiet || 'none'
      self.inner.spiceLevel = val.spiceLevel != null ? val.spiceLevel : 0
      self.inner.noPreference = !!val.noPreference
      self.inner.vegetableFruit = val.vegetableFruit || ''
      self.inner.dairy = val.dairy || ''
      self.inner.sugaryDrinks = val.sugaryDrinks || ''
    },
    emitInput: function() {
      this.$emit('input', {
        allergies: this.inner.allergies.slice(),
        absoluteAvoid: this.inner.absoluteAvoid.slice(),
        mustEat: this.inner.mustEat.slice(),
        religiousDiet: this.inner.religiousDiet,
        spiceLevel: this.inner.spiceLevel,
        flavorPref: this.inner.flavorPref.slice(),
        cuisinePref: this.inner.cuisinePref.slice(),
        cookingMethods: this.inner.cookingMethods.slice(),
        healthGoals: this.inner.healthGoals.slice(),
        noPreference: this.inner.noPreference,
        vegetableFruit: this.inner.vegetableFruit,
        dairy: this.inner.dairy,
        sugaryDrinks: this.inner.sugaryDrinks
      })
    },
    setSingle: function(field, value) {
      this.inner[field] = (this.inner[field] === value) ? '' : value
      this.emitInput()
    },
    toggleChip: function(field, value) {
      var list = this.inner[field]
      if (!list) return
      var idx = list.indexOf(value)
      if (idx >= 0) {
        this.inner[field] = list.slice(0, idx).concat(list.slice(idx + 1))
      } else {
        this.inner[field] = list.concat([value])
      }
      this.inner.noPreference = false
      this.emitInput()
    },
    addCustom: function(field) {
      var value = (this.customInput || '').trim()
      if (!value) return
      var list = this.inner[field] || []
      if (list.indexOf(value) < 0) {
        this.inner[field] = list.concat([value])
        this.inner.noPreference = false
        this.emitInput()
      }
      this.customInput = ''
    },
    setReligious: function(value) {
      this.inner.religiousDiet = value
      this.inner.noPreference = false
      this.emitInput()
    },
    onSpiceChange: function(e) {
      this.inner.spiceLevel = e.detail.value
      this.inner.noPreference = false
      this.emitInput()
    },
    // 「无特殊偏好」：清空本节并标记，随后通知父级直接进入确认步
    setNoPreference: function() {
      this.inner.allergies = []
      this.inner.absoluteAvoid = []
      this.inner.mustEat = []
      this.inner.religiousDiet = 'none'
      this.inner.spiceLevel = 0
      this.inner.flavorPref = []
      this.inner.cuisinePref = []
      this.inner.cookingMethods = []
      this.inner.healthGoals = []
      this.inner.vegetableFruit = ''
      this.inner.dairy = ''
      this.inner.sugaryDrinks = ''
      this.inner.noPreference = true
      this.emitInput()
      this.$emit('skip-no-preference')
    }
  }
}
</script>

<style scoped>
.diet-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;
}
.pref-none-row {
  margin-bottom: 20rpx;
}
.pref-none-btn {
  width: 100%;
  padding: 20rpx 0;
  border-radius: 16rpx;
  background: #FFF7ED;
  color: #F97316;
  font-size: 28rpx;
  font-weight: 600;
  border: 2rpx solid #FED7AA;
  line-height: 1.4;
}
.pref-none-btn-active {
  background: #F97316;
  color: #fff;
  border-color: #F97316;
}
.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;
}
.card-hint {
  font-size: 22rpx;
  color: #94A3B8;
}
.tag-wrap {
  display: flex;
  flex-wrap: wrap;
}
.tag-item {
  padding: 12rpx 24rpx;
  border-radius: 999rpx;
  background: #F1F5F9;
  font-size: 24rpx;
  color: #334155;
  margin: 0 14rpx 14rpx 0;
}
.tag-active {
  background: #FFF3E0;
  color: #F97316;
  font-weight: 600;
}
.custom-row {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
.custom-input {
  flex: 1;
  border: 2rpx solid #E2E8F0;
  border-radius: 12rpx;
  padding: 14rpx 20rpx;
  font-size: 26rpx;
  background: #F8FAFC;
}
.add-link {
  color: #F97316;
  font-size: 26rpx;
  font-weight: 600;
  padding: 14rpx 10rpx;
  margin-left: 10rpx;
}
.slider-row {
  display: flex;
  align-items: center;
}
.slider-label {
  font-size: 24rpx;
  color: #94A3B8;
  width: 72rpx;
}
.slider {
  flex: 1;
}
.spice-label {
  display: block;
  font-size: 24rpx;
  color: #F97316;
  text-align: center;
  margin-top: 8rpx;
}
</style>