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

<template>
  <view class="meal-config-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="date-tabs">
        <view class="tab-item" :class="{'tab-active': dateType === 'weekday'}" @tap="switchDateType('weekday')">
          <text>工作日</text>
        </view>
        <view class="tab-item" :class="{'tab-active': dateType === 'weekend'}" @tap="switchDateType('weekend')">
          <text>周末</text>
        </view>
      </view>

      <!-- 餐次配置 -->
      <view class="meal-section" v-for="meal in mealTypes" :key="meal.value">
        <view class="meal-header">
          <text class="meal-icon">{{ meal.icon }}</text>
          <text class="meal-name">{{ meal.label }}</text>
        </view>
        <view class="member-list">
          <view class="member-item" v-for="member in familyMembers" :key="member.id"
            :class="{'member-selected': isMemberSelected(meal.value, member.id)}"
            @tap="toggleMember(meal.value, member.id)">
            <text class="member-avatar">{{ member.nickname ? member.nickname.substring(0, 1) : '?' }}</text>
            <text class="member-name">{{ member.nickname || '未知' }}</text>
          </view>
          <view class="add-member-btn" @tap="addMember(meal.value)">
            <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
    }
  },
  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()
    },
    isMemberSelected: function(mealType, memberId) {
      var config = this.mealConfigs[mealType]
      if (!config || !config.participantMemberIds) return false
      try {
        var ids = JSON.parse(config.participantMemberIds)
        return ids.indexOf(memberId) >= 0
      } catch (e) {
        return false
      }
    },
    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) })
    },
    addMember: function(mealType) {
      // 简化的添加成员逻辑
      this.toggleMember(mealType, this.familyMembers[0] && this.familyMembers[0].id)
    },
    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-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;
}
.date-tabs {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}
.tab-item {
  flex: 1;
  padding: 20rpx 0;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  text-align: center;
  font-size: 26rpx;
  color: #666;
  background-color: #FFFFFF;
}
.tab-active {
  border-color: #FF8C42;
  color: #FF8C42;
  background-color: #FFF5EB;
  font-weight: 600;
}
.meal-section {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}
.meal-header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.meal-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}
.meal-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}
.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 24rpx 30rpx;
}
.member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 24rpx;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  background-color: #FAFAFA;
}
.member-selected {
  border-color: #FF8C42;
  background-color: #FFF5EB;
}
.member-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #FF8C42;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
}
.member-name {
  font-size: 22rpx;
  color: #666;
}
.add-member-btn {
  width: 80rpx;
  height: 80rpx;
  border: 2rpx dashed #ddd;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #999;
}
.tip-card {
  background-color: #E3F2FD;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  margin-bottom: 30rpx;
}
.tip-text {
  font-size: 24rpx;
  color: #1976D2;
  line-height: 1.6;
}
.save-area {
  padding: 40rpx 30rpx;
}
.save-btn {
  background-color: #FF8C42;
  color: #FFFFFF;
  text-align: center;
  padding: 28rpx 0;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 600;
}
</style>