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、Step 3 在此追加（任务 2） -->
    </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-color: #FFF7ED;
  display: flex;
  flex-direction: column;
}

/* 进度条 */
.progress-bar {
  padding: 24rpx 30rpx 0;
  background-color: #FFF7ED;
}
.progress-track {
  height: 12rpx;
  background-color: #E8E8E8;
  border-radius: 6rpx;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background-color: #F97316;
  border-radius: 6rpx;
  transition: width 0.3s ease;
}
.progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;
  padding-bottom: 20rpx;
}
.progress-label {
  font-size: 22rpx;
  color: #BBB;
  flex: 1;
  text-align: center;
}
.progress-label-active {
  color: #F97316;
  font-weight: 600;
}

/* 内容区 */
.content {
  flex: 1;
  padding: 20rpx 30rpx 120rpx;
}

/* 步骤标题 */
.step-head {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;
}
.step-icon {
  font-size: 48rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.step-head-text {
  flex: 1;
}
.step-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}
.step-sub {
  font-size: 24rpx;
  color: #999;
  display: block;
}

/* 卡片 */
.card {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

/* chips */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 16rpx;
}
.chip {
  padding: 12rpx 24rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #FAFAFA;
}
.chip-active {
  border-color: #F97316;
  color: #F97316;
  background-color: #FFF5EB;
}

/* 自定义输入 */
.custom-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}
.custom-input {
  flex: 1;
  height: 64rpx;
  padding: 0 24rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 30rpx;
  font-size: 26rpx;
  background-color: #FAFAFA;
}
.custom-confirm {
  padding: 12rpx 28rpx;
  background-color: #F97316;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #fff;
}
.custom-add {
  font-size: 24rpx;
  color: #F97316;
  padding: 8rpx 0;
}

/* 底栏 */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
  background-color: #FFFFFF;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
  gap: 20rpx;
}
.footer-btn {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
}
.footer-btn-ghost {
  background-color: #F5F5F5;
  color: #999;
}
.footer-btn-primary {
  background-color: #F97316;
  color: #FFFFFF;
}
</style>