cfc/cfc-frontend/pages/diet/meal-config.vue

<template>
  <view class="meal-config-page">

    <scroll-view class="content" scroll-y>
      <!-- 日期切换：两段式胶囊 tabs -->
      <view class="date-tabs">
        <view class="tab-item" :class="{'tab-active': dateType === 'today'}" @tap="switchDateType('today')">
          <text class="tab-text">今天</text>
        </view>
        <view class="tab-item" :class="{'tab-active': dateType === 'weekday'}" @tap="switchDateType('weekday')">
          <text class="tab-text">工作日</text>
        </view>
        <view class="tab-item" :class="{'tab-active': dateType === 'weekend'}" @tap="switchDateType('weekend')">
          <text class="tab-text">周末</text>
        </view>
      </view>

      <!-- 添加共餐人入口 -->
      <view class="add-member-entry" @tap="goManageMembers">
        <text class="add-member-entry-icon">＋</text>
        <text class="add-member-entry-text">添加共餐人</text>
        <text class="add-member-entry-arrow">›</text>
      </view>

      <!-- 餐次配置 -->
      <view class="meal-section" v-for="meal in mealGroups" :key="meal.value">
        <view class="meal-header">
          <view class="meal-icon-wrap" :class="'meal-icon-' + meal.value"><text class="meal-icon">{{ meal.icon }}</text></view>
          <text class="meal-name">{{ meal.label }}</text>
          <text class="meal-count" v-if="meal.selectedCount > 0">已选 {{ meal.selectedCount }} 人</text>
        </view>
        <view class="member-list">
          <view class="member-item" v-for="member in meal.members" :key="member.id"
            :class="{'member-selected': member.selected}"
            @tap="toggleMember(meal.value, member.id)">
            <view class="member-check" v-if="member.selected">✓</view>
            <view class="member-info">
              <text class="member-avatar" :class="member._avatarCls">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
              <text class="member-name">{{ member.nickname || '未知' }}</text>
            </view>
          </view>
          <view class="member-empty" v-if="meal.members.length === 0">
            <text class="member-empty-text">暂无可选的共餐人</text>
          </view>
        </view>
      </view>

      <!-- 提示条 -->
      <view class="tip-card">
        <text class="tip-text">{{ tipText }}</text>
      </view>

      <!-- 保存按钮 -->
      <view class="save-area">
        <view class="save-btn" @tap="saveConfig">
          <text>{{ saving ? '保存中...' : '保存配置' }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import config from '@/config.js'
import { getMealConfig, saveMealConfig } from '@/utils/api.js'

export default {
  data() {
    return {
      dateType: 'weekday',
      familyMembers: [],
      mealTypes: [
        { label: '早餐', value: 'breakfast', icon: '🌅' },
        { label: '午餐', value: 'lunch', icon: '☀️' },
        { label: '晚餐', value: 'dinner', icon: '🌙' }
      ],
      mealConfigs: {},
      saving: false
    }
  },
  computed: {
    // 将「餐次 × 成员」组装为可直接渲染的列表，成员带 selected 标记（避免模板内方法调用）
    mealGroups: function() {
      var self = this
      return this.mealTypes.map(function(meal) {
        var config = self.mealConfigs[meal.value]
        var ids = []
        if (config && config.participantMemberIds) {
          try {
            ids = JSON.parse(config.participantMemberIds)
          } catch (e) {
            ids = []
          }
        }
        var members = self.familyMembers.map(function(m) {
          return {
            id: m.id,
            nickname: m.nickname,
            selected: ids.indexOf(m.id) >= 0,
            _avatarCls: m.gender === 'male' ? 'member-avatar-male' : (m.gender === 'female' ? 'member-avatar-female' : 'member-avatar-unknown')
          }
        })
        return {
          value: meal.value,
          label: meal.label,
          icon: meal.icon,
          members: members,
          selectedCount: ids.length
        }
      })
    }
  },
  onLoad: function(options) {
    if (options && options.date_type === 'today') {
      this.dateType = 'today'
    }
    this.loadMembers()
    this.loadConfigs()
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    },
    loadMembers: function() {
      var self = this
      var token = uni.getStorageSync('token')
      if (!token) return
      
      uni.request({
        url: this.getApiUrl('/api/family/member/list'),
        method: 'POST',
        data: {},
        header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        success: function(res) {
          if (res.data && res.data.code === 200 && res.data.data) {
            self.familyMembers = res.data.data
          }
        }
      })
    },
    loadConfigs: function() {
      var self = this
      this.mealTypes.forEach(function(meal) {
        getMealConfig({ date_type: self.dateType, meal_type: meal.value }).then(function(config) {
          if (config) {
            self.$set(self.mealConfigs, meal.value, config)
          }
        })
      })
    },
    tipText: function() {
      var dt = this.dateType
      var label = dt === 'today' ? '今天' : (dt === 'weekday' ? '工作日' : '周末')
      return '💡 提示：选择与您在' + label + '共餐的家庭成员'
    },
    toggleMember: function(mealType, memberId) {
      var config = this.mealConfigs[mealType] || {}
      var ids = []
      if (config.participantMemberIds) {
        try {
          ids = JSON.parse(config.participantMemberIds)
        } catch (e) {}
      }
      
      var index = ids.indexOf(memberId)
      if (index >= 0) {
        ids.splice(index, 1)
      } else {
        ids.push(memberId)
      }
      
      this.mealConfigs[mealType] = Object.assign({}, config, { participantMemberIds: JSON.stringify(ids) })
    },
    goManageMembers: function() {
      uni.navigateTo({ url: '/pages/profile-extra/family-members' })
    },
    saveConfig: function() {
      var self = this
      this.saving = true
      
      var configs = {}
      this.mealTypes.forEach(function(meal) {
        var config = self.mealConfigs[meal.value] || {}
        configs[meal.value] = config.participantMemberIds || '[]'
      })
      
      saveMealConfig({
        date_type: self.dateType,
        configs: configs
      }).then(function() {
        self.saving = false
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(function() {
          uni.navigateBack()
        }, 1000)
      }).catch(function() {
        self.saving = false
        uni.showToast({ title: '保存失败', icon: 'none' })
      })
    },
    getApiUrl: function(path) {
      return config.api(path)
    }
  }
}
</script>

<style scoped>
/* ===== 页面令牌（品牌蓝·专业信任） ===== */
.meal-config-page {
  box-sizing: border-box;
  min-height: 100vh;
  background: #F5F9FC;
  overflow: hidden;
}
.content {
  padding: 30rpx;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.date-tabs {
  display: flex; background: #E2E8F0; border-radius: 999rpx;
  padding: 6rpx; margin-bottom: 30rpx;
}
.tab-item {
  flex: 1; text-align: center; padding: 18rpx 0;
  border-radius: 999rpx; font-size: 28rpx; color: #64748B;
  transition: all 0.2s ease;
}
.tab-active {
  background: linear-gradient(135deg, #5B9BD5, #8FC5E8);
  color: #FFFFFF; font-weight: 600;
  box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.3);
}
.meal-section {
  background-color: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
}
.meal-header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #E2E8F0;
}
.meal-icon-wrap { width: 72rpx; height: 72rpx; border-radius: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
.meal-icon-breakfast { background: linear-gradient(135deg, #8FC5E8, #D6EAF8); }
.meal-icon-lunch     { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
.meal-icon-dinner    { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
.meal-count { font-size: 24rpx; color: #5B9BD5; margin-left: auto; }
.meal-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 24rpx 30rpx;
}
.member-item {
  box-sizing: border-box; position: relative;
  display: flex; align-items: center;
  padding: 16rpx 24rpx; border: 2rpx solid #E2E8F0; border-radius: 20rpx;
  background: #FFFFFF; min-width: 160rpx;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.member-info {
  display: flex; align-items: center; gap: 12rpx;
}
.member-selected {
  border-color: #5B9BD5;
  background: #5B9BD5;
  box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.3);
  transform: translateY(-2rpx);
}
.member-check {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #5B9BD5;
  font-size: 20rpx;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}
.member-avatar {
  width: 48rpx; height: 48rpx; border-radius: 50%;
  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  font-size: 24rpx; font-weight: 600;
}
.member-avatar-male   { background: linear-gradient(135deg, #5B9BD5, #8FC5E8); }
.member-avatar-female { background: linear-gradient(135deg, #F472B6, #F9A8D4); }
.member-avatar-unknown{ background: linear-gradient(135deg, #CBD5E1, #E2E8F0); }
.member-name {
  font-size: 24rpx;
  color: #64748B;
  max-width: 80rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-selected .member-name {
  color: #FFFFFF;
  font-weight: 600;
}
.member-selected .member-avatar {
  border: 2rpx solid #FFFFFF;
}
.member-empty {
  width: 100%;
  padding: 20rpx 0;
  text-align: center;
}
.member-empty-text {
  font-size: 24rpx;
  color: #94A3B8;
}
.add-member-entry {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 2rpx dashed #5B9BD5;
  border-radius: 20rpx;
  padding: 24rpx 30rpx;
  margin-bottom: 30rpx;
  transition: all 0.2s ease;
}
.add-member-entry:active {
  background-color: #F0F7FF;
}
.add-member-entry-icon {
  font-size: 30rpx;
  color: #5B9BD5;
  margin-right: 12rpx;
}
.add-member-entry-text {
  font-size: 28rpx;
  color: #5B9BD5;
  font-weight: 600;
}
.add-member-entry-arrow {
  font-size: 30rpx;
  color: #5B9BD5;
  margin-left: 8rpx;
}
.tip-card { 
  background: #D6EAF8; 
  border-radius: 16rpx; 
  padding: 24rpx 30rpx; 
  margin-bottom: 30rpx; 
}
.tip-text { 
  font-size: 24rpx; 
  color: #3A7CC4; 
  line-height: 1.6; 
}
.save-area {
  padding: 40rpx 30rpx;
}
.save-btn {
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
  font-size: 30rpx; font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(91, 155, 213, 0.3);
  transition: all 0.2s ease;
}
.save-btn:active {
  opacity: 0.9;
  transform: scale(0.98);
}
</style>