cfc/cfc-frontend/pages/diet/preferences.vue

<template>
  <view class="preferences-page">
    <!-- 顶部进度条 -->
    <view class="progress-bar">
      <view class="progress-track">
        <view class="progress-fill" :style="'width:' + progressPercent + '%'"></view>
      </view>
      <view class="progress-labels">
        <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 1 }">忌口·过敏</text>
        <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 2 }">口味·偏好</text>
        <text class="progress-label" :class="{ 'progress-label-active': currentStep >= 3 }">健康目标</text>
      </view>
    </view>

    <!-- 步骤内容 -->
    <scroll-view class="content" scroll-y>
      <!-- ===== Step 1 忌口与过敏 ===== -->
      <view v-if="currentStep === 1">
        <view class="step-head">
          <text class="step-icon">🚫</text>
          <view class="step-head-text">
            <text class="step-title">哪些食物绝对不能碰？</text>
            <text class="step-sub">为了家人的安全，过敏原和忌口请务必填写</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">过敏原 *</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetAllergies" :key="getChipKey('a', i)"
              :class="{ 'chip-active': allergies.indexOf(item) >= 0 }"
              @tap="toggleChip('allergies', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'allergies'">
            <input class="custom-input" placeholder="输入其他过敏原" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('allergies')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">绝对忌口 *</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetAvoid" :key="getChipKey('v', i)"
              :class="{ 'chip-active': absoluteAvoid.indexOf(item) >= 0 }"
              @tap="toggleChip('absoluteAvoid', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'absoluteAvoid'">
            <input class="custom-input" placeholder="输入其他忌口" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('absoluteAvoid')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">宗教饮食</text>
          <view class="chip-group">
            <view class="chip" v-for="(opt, i) in religiousOptions" :key="getChipKey('r', i)"
              :class="{ 'chip-active': religiousDiet === opt.value }"
              @tap="religiousDiet = opt.value">
              <text>{{ opt.label }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- /Step 1 -->

      <!-- ===== Step 2 口味与偏好（4 卡片完整代码） ===== -->
      <view v-if="currentStep === 2">
        <view class="step-head">
          <text class="step-icon">😋</text>
          <view class="step-head-text">
            <text class="step-title">口味和做法，说说看？</text>
            <text class="step-sub">选得越细，推荐食谱越合家人口味</text>
          </view>
        </view>

        <!-- 辣度 -->
        <view class="card">
          <text class="card-title">辣度偏好</text>
          <view class="slider-row">
            <text class="slider-label">不辣</text>
            <slider class="slider" min="0" max="5" :value="spiceLevel" @change="spiceLevel = $event.detail.value" show-value />
            <text class="slider-label">特辣</text>
          </view>
        </view>

        <!-- 口味 -->
        <view class="card">
          <text class="card-title">口味偏好</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetFlavor" :key="getChipKey('f', i)"
              :class="{ 'chip-active': flavorPref.indexOf(item) >= 0 }"
              @tap="toggleChip('flavorPref', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'flavorPref'">
            <input class="custom-input" placeholder="输入其他口味" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('flavorPref')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <!-- 菜系 -->
        <view class="card">
          <text class="card-title">菜系偏好</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetCuisine" :key="getChipKey('c', i)"
              :class="{ 'chip-active': cuisinePref.indexOf(item) >= 0 }"
              @tap="toggleChip('cuisinePref', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'cuisinePref'">
            <input class="custom-input" placeholder="输入其他菜系" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('cuisinePref')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <!-- 烹饪方式 -->
        <view class="card">
          <text class="card-title">烹饪方式</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetCooking" :key="getChipKey('k', i)"
              :class="{ 'chip-active': cookingMethods.indexOf(item) >= 0 }"
              @tap="toggleChip('cookingMethods', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'cookingMethods'">
            <input class="custom-input" placeholder="输入其他做法" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('cookingMethods')">
            <text>＋ 自定义添加</text>
          </view>
        </view>
      </view>
      <!-- /Step 2 -->

      <!-- ===== Step 3 健康目标 ===== -->
      <view v-if="currentStep === 3">
        <view class="step-head">
          <text class="step-icon">🎯</text>
          <view class="step-head-text">
            <text class="step-title">想优先改善哪方面？</text>
            <text class="step-sub">没想好可以跳过，之后随时能改</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">必吃食物</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetMustEat" :key="getChipKey('m', i)"
              :class="{ 'chip-active': mustEat.indexOf(item) >= 0 }"
              @tap="toggleChip('mustEat', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'mustEat'">
            <input class="custom-input" placeholder="输入其他必吃" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('mustEat')">
            <text>＋ 自定义添加</text>
          </view>
        </view>

        <view class="card">
          <text class="card-title">健康目标</text>
          <view class="chip-group">
            <view class="chip" v-for="(item, i) in presetGoals" :key="getChipKey('g', i)"
              :class="{ 'chip-active': healthGoals.indexOf(item) >= 0 }"
              @tap="toggleChip('healthGoals', item)">
              <text>{{ item }}</text>
            </view>
          </view>
          <view class="custom-row" v-if="customField === 'healthGoals'">
            <input class="custom-input" placeholder="输入其他目标" v-model="customInput"
              confirm-type="done" @confirm="addCustom" />
            <view class="custom-confirm" @tap="addCustom"><text>添加</text></view>
          </view>
          <view class="custom-add" v-else @tap="openCustom('healthGoals')">
            <text>＋ 自定义添加</text>
          </view>
        </view>
      </view>
      <!-- /Step 3 -->
    </scroll-view>

    <!-- 底部按钮栏 -->
    <view class="footer-bar">
      <view class="footer-btn footer-btn-ghost" v-if="currentStep > 1" @tap="goPrev">
        <text>上一步</text>
      </view>
      <view class="footer-btn footer-btn-primary" @tap="goNext">
        <text>{{ submitting ? '提交中...' : (isLastStep ? '完成' : '下一步') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getDietPreferences, saveDietPreferences } from '@/utils/api.js'

// 预设选项（常量，非响应式）
const PRESET_ALLERGIES = ['海鲜', '花生', '乳糖', '鸡蛋', '牛奶', '豆类', '麸质', '坚果', '芒果', '其他']
const PRESET_AVOID = ['牛肉', '羊肉', '猪肉', '内脏', '油腻', '辛辣', '生冷', '腌制']
const PRESET_FLAVOR = ['酸', '甜', '咸', '鲜', '苦', '清淡', '浓郁']
const PRESET_CUISINE = ['川', '粤', '鲁', '淮扬', '日料', '西餐', '东南亚', '韩餐']
const PRESET_COOKING = ['蒸', '煮', '炒', '烤', '炖', '凉拌', '煎', '炸']
const PRESET_MUSTEAT = ['蔬菜', '水果', '粗粮', '鱼类', '鸡蛋', '豆制品', '菌菇']
const PRESET_GOALS = ['减脂', '增肌', '控糖', '肠道调理', '增强免疫']

export default {
  data() {
    return {
      familyMemberId: null,
      currentStep: 1,
      // 数据字段（与后端 DTO 对齐）
      allergies: [],
      absoluteAvoid: [],
      religiousDiet: 'none',
      spiceLevel: 0,
      flavorPref: [],
      cuisinePref: [],
      cookingMethods: [],
      healthGoals: [],
      mustEat: [],
      goalConfirmed: 0,
      // 自定义输入
      customInput: '',
      customField: null,
      // UI 状态
      submitting: false,
      loading: true
    }
  },
  computed: {
    // 预设选项映射（供模板 v-for）
    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: '纯素' }
      ]
    },
    // 进度条百分比
    progressPercent: function() {
      var total = 3
      var done = this.currentStep - 1
      if (this.currentStep === 3) done = 3
      return Math.round((done / total) * 100)
    },
    isLastStep: function() { return this.currentStep === 3 }
  },
  onLoad: function() {
    this.familyMemberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId')
    this.loadPreferences()
  },
  methods: {
    loadPreferences: function() {
      var self = this
      getDietPreferences({ memberId: self.familyMemberId }).then(function(res) {
        self.loading = false
        if (res) {
          self.allergies = res.allergies || []
          self.absoluteAvoid = res.absoluteAvoid || []
          self.religiousDiet = res.religiousDiet || 'none'
          self.spiceLevel = res.spiceLevel || 0
          self.flavorPref = res.flavorPref || []
          self.cuisinePref = res.cuisinePref || []
          self.cookingMethods = res.cookingMethods || []
          self.healthGoals = res.healthGoals || []
          self.mustEat = res.mustEat || []
          self.goalConfirmed = res.goalConfirmed || 0
        }
      }).catch(function() {
        self.loading = false
      })
    },
    // ——— chip 选中态（模板用内联 indexOf，方法供 toggle 用） ———
    getChipKey: function(prefix, index) {
      return prefix + '-' + index
    },
    toggleChip: function(field, value) {
      var idx = this[field].indexOf(value)
      if (idx >= 0) {
        this[field].splice(idx, 1)
      } else {
        this[field].push(value)
      }
    },
    // ——— 自定义输入追加（@confirm 触发） ———
    openCustom: function(field) {
      this.customField = field
      this.customInput = ''
    },
    addCustom: function() {
      var value = (this.customInput || '').trim()
      if (!value) return
      if (this[this.customField].indexOf(value) < 0) {
        this[this.customField].push(value)
      }
      this.customInput = ''
      this.customField = null
    },
    // ——— 步骤导航 ———
    goNext: function() {
      if (this.currentStep === 1) {
        if (this.allergies.length === 0 && this.absoluteAvoid.length === 0) {
          uni.showToast({ title: '请至少填写一项过敏原或忌口', icon: 'none' })
          return
        }
      }
      if (this.currentStep < 3) {
        this.currentStep += 1
      } else {
        this.savePreferences()
      }
    },
    goPrev: function() {
      if (this.currentStep > 1) {
        this.currentStep -= 1
      }
    },
    // ——— 提交 ———
    savePreferences: function() {
      var self = this
      this.submitting = true
      saveDietPreferences({
        allergies: this.allergies,
        absoluteAvoid: this.absoluteAvoid,
        religiousDiet: this.religiousDiet,
        spiceLevel: this.spiceLevel,
        flavorPref: this.flavorPref,
        cuisinePref: this.cuisinePref,
        cookingMethods: this.cookingMethods,
        healthGoals: this.healthGoals,
        mustEat: this.mustEat,
        goalConfirmed: 1
      }).then(function(res) {
        self.submitting = false
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(function() {
          uni.navigateBack()
        }, 1000)
      }).catch(function() {
        self.submitting = false
        uni.showToast({ title: '保存失败', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.preferences-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
  display: flex;
  flex-direction: column;
}

/* ===== 进度条 ===== */
.progress-bar { padding: 30rpx 32rpx 10rpx; }
.progress-track {
  height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
}
.progress-fill {
  height: 100%; background: linear-gradient(90deg, #FF8C42, #FFB366);
  border-radius: 6rpx; transition: width 0.3s ease;
}
.progress-labels { display: flex; justify-content: space-between; margin-top: 12rpx; }
.progress-label { font-size: 22rpx; color: #C2A78A; }
.progress-label-active { color: #FF8C42; font-weight: 600; }

/* ===== 内容 ===== */
.content { flex: 1; padding: 10rpx 32rpx 30rpx; box-sizing: border-box; }
.step-head { display: flex; align-items: center; margin: 20rpx 0 24rpx; }
.step-icon { font-size: 52rpx; margin-right: 20rpx; }
.step-head-text { display: flex; flex-direction: column; }
.step-title { font-size: 34rpx; font-weight: 700; color: #4A2E1A; }
.step-sub { font-size: 24rpx; color: #A08B72; margin-top: 6rpx; }

/* ===== 卡片 ===== */
.card {
  background: #FFFFFF; border-radius: 24rpx; padding: 28rpx;
  margin-bottom: 24rpx; box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
}
.card-title { font-size: 28rpx; font-weight: 600; color: #4A2E1A; margin-bottom: 20rpx; display: block; }

/* ===== chip ===== */
.chip-group { display: flex; flex-wrap: wrap; }
.chip {
  padding: 14rpx 28rpx; border-radius: 999rpx; background: #F5F0EA;
  font-size: 26rpx; color: #6B5340; margin: 0 16rpx 16rpx 0;
  border: 2rpx solid transparent;
}
.chip-active {
  background: #FF8C42; color: #FFFFFF; font-weight: 600;
  border-color: #E8732A;
}

/* ===== 自定义添加 ===== */
.custom-add {
  padding: 14rpx 0; font-size: 26rpx; color: #FF8C42; font-weight: 500;
}
.custom-row { display: flex; align-items: center; margin-top: 8rpx; }
.custom-input {
  flex: 1; border: 2rpx solid #FFD9B8; border-radius: 999rpx;
  padding: 14rpx 24rpx; font-size: 26rpx; background: #FFF9F2;
}
.custom-confirm {
  background: #FF8C42; color: #fff; font-size: 26rpx; font-weight: 600;
  padding: 14rpx 32rpx; border-radius: 999rpx; margin-left: 16rpx;
}

/* ===== 滑块 ===== */
.slider-row { display: flex; align-items: center; }
.slider-label { font-size: 24rpx; color: #A08B72; width: 72rpx; }
.slider { flex: 1; }

/* ===== 底栏 ===== */
.footer-bar {
  display: flex; padding: 20rpx 32rpx 30rpx; background: #FFFDF8;
  border-top: 2rpx solid #FFE9D4;
}
.footer-btn {
  flex: 1; text-align: center; padding: 24rpx 0; border-radius: 999rpx;
  font-size: 30rpx; font-weight: 600;
}
.footer-btn-ghost {
  background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
}
.footer-btn-primary {
  background: linear-gradient(135deg, #FF8C42, #FFB366); color: #FFFFFF;
}
</style>