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 === '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>
            <text class="member-avatar" :class="member._avatarCls">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
            <text class="member-name">{{ member.nickname || '未知' }}</text>
          </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">💡 提示：选择与您在{{ dateType === 'weekday' ? '工作日' : '周末' }}共餐的家庭成员</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() {
    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.mealConfigs[meal.value] = config
          }
        })
      })
    },
    switchDateType: function(type) {
      this.dateType = type
      this.loadConfigs()
    },
    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 promises = this.mealTypes.map(function(meal) {
        var config = self.mealConfigs[meal.value] || {}
        return saveMealConfig({
          date_type: self.dateType,
          meal_type: meal.value,
          participant_member_ids: JSON.stringify(config.participantMemberIds || '[]')
        })
      })
      
      Promise.all(promises).then(function() {
        self.saving = false
        uni.showToast({ title: '保存成功', icon: 'success' })
      }).catch(function() {
        self.saving = false
        uni.showToast({ title: '保存失败', icon: 'none' })
      })
    },
    getApiUrl: function(path) {
      return config.api(path)
    }
  }
}
</script>

<style scoped>
/* ===== 页面令牌（暖灶·家的味道） ===== */
.meal-config-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
  overflow: hidden;
}
.content {
  padding: 30rpx;
}
.date-tabs {
  display: flex; background: #FFF1E6; 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: #C2410C;
}
.tab-active {
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  color: #FFFFFF; font-weight: 600;
  box-shadow: 0 4rpx 12rpx rgba(255, 140, 66, 0.3);
}
.meal-section {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(255, 140, 66, 0.10);
}
.meal-header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #FDE8D0;
}
.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, #FFB366, #FFD48A); }
.meal-icon-lunch     { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
.meal-icon-dinner    { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
.meal-count { font-size: 24rpx; color: #C2410C; }
.meal-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 24rpx 30rpx;
}
.member-item {
  box-sizing: border-box; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16rpx 20rpx; border: 2rpx solid #E0E0E0; border-radius: 20rpx;
  background: #FAFAFA; min-width: 132rpx;
  transition: all 0.15s ease;
}
.member-selected {
  border-color: #FF8C42; border-width: 3rpx;
  background: #FFF5EB; box-shadow: 0 0 0 4rpx rgba(255, 140, 66, 0.18);
}
.member-check {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background-color: #FF8C42;
  color: #FFFFFF;
  font-size: 22rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.member-avatar {
  width: 60rpx; height: 60rpx; border-radius: 50%;
  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  font-size: 24rpx; font-weight: 600; margin-bottom: 8rpx;
}
.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, #FF8C42, #FFB366); }
.member-name {
  font-size: 22rpx;
  color: #666;
  max-width: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-selected .member-name {
  color: #FF8C42;
  font-weight: 600;
}
.member-empty {
  width: 100%;
  padding: 20rpx 0;
}
.member-empty-text {
  font-size: 24rpx;
  color: #999;
}
.add-member-entry {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  border: 2rpx dashed #FF8C42;
  border-radius: 20rpx;
  padding: 24rpx 30rpx;
  margin-bottom: 30rpx;
}
.add-member-entry-icon {
  font-size: 30rpx;
  color: #FF8C42;
  margin-right: 12rpx;
}
.add-member-entry-text {
  font-size: 28rpx;
  color: #FF8C42;
  font-weight: 600;
}
.add-member-entry-arrow {
  font-size: 30rpx;
  color: #FF8C42;
  margin-left: 8rpx;
}
.tip-card { background: #FFF1E6; border-radius: 16rpx; padding: 24rpx 30rpx; margin-bottom: 30rpx; }
.tip-text { font-size: 24rpx; color: #C2410C; line-height: 1.6; }
.save-area {
  padding: 40rpx 30rpx;
}
.save-btn {
  background: linear-gradient(135deg, #FF8C42, #FFB366);
  color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
  font-size: 30rpx; font-weight: 600;
  box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
}
</style>