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

<template>
  <view class="preferences-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>
      <!-- 硬性要求 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">硬性要求（必填）</text>
          
          <view class="form-group">
            <text class="form-label">过敏原 *</text>
            <view class="tag-group">
              <view class="tag-btn" v-for="(tag, index) in allergies" :key="index" @tap="removeTag('allergies', index)">
                <text>{{ tag }}</text>
                <text class="tag-remove">×</text>
              </view>
            </view>
            <view class="tag-input-row">
              <input class="tag-input" placeholder="输入后回车添加" v-model="tagInput" @confirm="addTag('allergies')" />
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">绝对忌口 *</text>
            <view class="tag-group">
              <view class="tag-btn" v-for="(tag, index) in absoluteAvoid" :key="index" @tap="removeTag('absoluteAvoid', index)">
                <text>{{ tag }}</text>
                <text class="tag-remove">×</text>
              </view>
            </view>
            <view class="tag-input-row">
              <input class="tag-input" placeholder="输入后回车添加" v-model="tagInput" @confirm="addTag('absoluteAvoid')" />
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">宗教饮食</text>
            <view class="radio-group">
              <view class="radio-item" :class="{'radio-active': religiousDiet === 'none'}" @tap="religiousDiet = 'none'">
                <text>无限制</text>
              </view>
              <view class="radio-item" :class="{'radio-active': religiousDiet === 'halal'}" @tap="religiousDiet = 'halal'">
                <text>清真</text>
              </view>
              <view class="radio-item" :class="{'radio-active': religiousDiet === 'vegetarian'}" @tap="religiousDiet = 'vegetarian'">
                <text>素食</text>
              </view>
              <view class="radio-item" :class="{'radio-active': religiousDiet === 'vegan'}" @tap="religiousDiet = 'vegan'">
                <text>纯素</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 软性偏好 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">软性偏好（可选）</text>
          
          <view class="form-group">
            <text class="form-label">辣度偏好</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="form-group">
            <text class="form-label">口味偏好</text>
            <view class="tag-group">
              <view class="tag-btn" v-for="(tag, index) in flavorPref" :key="index" @tap="removeTag('flavorPref', index)">
                <text>{{ tag }}</text>
                <text class="tag-remove">×</text>
              </view>
            </view>
            <view class="tag-input-row">
              <input class="tag-input" placeholder="酸/甜/咸/鲜/苦" v-model="tagInput" @confirm="addTag('flavorPref')" />
            </view>
          </view>

          <view class="form-group">
            <text class="form-label">菜系偏好</text>
            <view class="tag-group">
              <view class="tag-btn" v-for="(tag, index) in cuisinePref" :key="index" @tap="removeTag('cuisinePref', index)">
                <text>{{ tag }}</text>
                <text class="tag-remove">×</text>
              </view>
            </view>
            <view class="tag-input-row">
              <input class="tag-input" placeholder="川/粤/淮扬/日料/西餐" v-model="tagInput" @confirm="addTag('cuisinePref')" />
            </view>
          </view>
        </view>
      </view>

      <!-- 健康目标 -->
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">健康目标</text>
          <text class="hint-text" v-if="systemGoals.length > 0">系统推荐目标（基于健康报告）：</text>
          <view class="tag-group" v-if="systemGoals.length > 0">
            <view class="tag-btn system-tag" v-for="(goal, index) in systemGoals" :key="index">
              <text>{{ goal }}</text>
            </view>
          </view>
          <view class="form-group" style="margin-top: 20rpx;">
            <text class="form-label">自定义目标</text>
            <view class="tag-group">
              <view class="tag-btn" v-for="(tag, index) in healthGoals" :key="index" @tap="removeTag('healthGoals', index)">
                <text>{{ tag }}</text>
                <text class="tag-remove">×</text>
              </view>
            </view>
            <view class="tag-input-row">
              <input class="tag-input" placeholder="减脂/增肌/控糖/肠道调理" v-model="tagInput" @confirm="addTag('healthGoals')" />
            </view>
          </view>
          <view class="confirm-btn" @tap="confirmGoals">
            <text>确认目标</text>
          </view>
        </view>
      </view>

      <view class="submit-area">
        <view class="submit-btn" @tap="savePreferences">
          <text>{{ submitting ? '提交中...' : '保存偏好' }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

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

export default {
  data() {
    return {
      familyMemberId: null,
      allergies: [],
      absoluteAvoid: [],
      religiousDiet: 'none',
      spiceLevel: 0,
      flavorPref: [],
      cuisinePref: [],
      healthGoals: [],
      systemGoals: [],
      tagInput: '',
      submitting: false
    }
  },
  onLoad() {
    this.familyMemberId = uni.getStorageSync('currentMemberId')
    this.loadPreferences()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    loadPreferences() {
      var self = this
      getDietPreferences().then(function(res) {
        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.healthGoals = res.healthGoals || []
          self.systemGoals = res.systemGoals || []
        }
      })
    },
    addTag(field) {
      var value = this.tagInput.trim()
      if (value) {
        this[field].push(value)
        this.tagInput = ''
      }
    },
    removeTag(field, index) {
      this[field].splice(index, 1)
    },
    confirmGoals() {
      this.savePreferences()
    },
    savePreferences() {
      var self = this
      if (this.allergies.length === 0 && this.absoluteAvoid.length === 0) {
        uni.showToast({ title: '请填写过敏原或忌口', icon: 'none' })
        return
      }
      this.submitting = true
      saveDietPreferences({
        allergies: this.allergies,
        absoluteAvoid: this.absoluteAvoid,
        religiousDiet: this.religiousDiet,
        spiceLevel: this.spiceLevel,
        flavorPref: this.flavorPref,
        cuisinePref: this.cuisinePref,
        healthGoals: this.healthGoals.concat(this.systemGoals),
        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: #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;
}
.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: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}
.form-group {
  margin-bottom: 24rpx;
}
.form-label {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  display: block;
}
.hint-text {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 12rpx;
  display: block;
}
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 12rpx;
}
.tag-btn {
  padding: 12rpx 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #FAFAFA;
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.tag-btn.system-tag {
  background-color: #FFF5EB;
  border-color: #FF8C42;
  color: #FF8C42;
}
.tag-remove {
  font-size: 28rpx;
  color: #999;
  line-height: 1;
}
.tag-input-row {
  margin-top: 12rpx;
}
.tag-input {
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  padding: 12rpx 20rpx;
  font-size: 26rpx;
  background-color: #FAFAFA;
}
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.radio-item {
  padding: 12rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #666;
  background-color: #FAFAFA;
}
.radio-active {
  border-color: #FF8C42;
  color: #FF8C42;
  background-color: #FFF5EB;
}
.slider-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.slider-label {
  font-size: 24rpx;
  color: #666;
  width: 60rpx;
}
.slider {
  flex: 1;
}
.confirm-btn {
  background-color: #E8F5E9;
  color: #4CAF50;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 12rpx;
  font-size: 26rpx;
  margin-top: 20rpx;
}
.submit-area {
  padding: 40rpx 30rpx;
}
.submit-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
  text-align: center;
  padding: 28rpx 0;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
}
</style>