WechatApp/pages/orderFood/index.vue

<template>
  <!-- 点餐页 -->
  <view class="content">
    <view class="top-info">桌号：{{ tableId || '—' }} &nbsp;&nbsp;就餐人数：{{ currentDiners }}人</view>
    <!-- 搜索 -->
    <input type="text" placeholder="请输入菜品名称" class="search-input" />

    <!-- 内容 -->
    <view class="content-box">
      <!-- 左侧分类列表 -->
      <scroll-view class="category-list" scroll-y>
        <view v-for="(category, index) in categories" :key="index" class="category-item"
          :class="{ active: currentCategoryIndex === index }" @click="selectCategory(index)">
          {{ category.categoryName }}
        </view>
      </scroll-view>

      <!-- 右侧菜品列表 -->
      <scroll-view class="food-list" scroll-y>
        <FoodCard v-for="(food, index) in currentFoodList" :key="food.id || index" :food="food"
          @increase="handleIncrease" @decrease="handleDecrease"/>
      </scroll-view>
    </view>

    <!-- 底部下单 -->
    <BottomActionBar :cart-list="cartList" @coupon-click="handleCouponClick" @cart-click="handleCartClick"
      @order-click="handleOrderClick" />

    <!-- 领取优惠券弹窗 -->
    <CouponModal v-model:open="couponModalOpen" :coupon-list="couponList" @receive="handleCouponReceive"
      @close="handleCouponClose" />

    <!-- 购物车弹窗 -->
    <CartModal v-model:open="cartModalOpen" :cart-list="cartList" :discount-amount="discountAmount"
      @increase="handleIncrease" @decrease="handleDecrease" @clear="handleCartClear"
      @coupon-click="handleSelectCouponClick" @order-click="handleOrderClick" @close="handleCartClose" />

    <!-- 选择优惠券弹窗 -->
    <SelectCouponModal v-model:open="selectCouponModalOpen" :coupon-list="availableCoupons"
      :selected-coupon-id="selectedCouponId" @select="handleCouponSelect" @close="handleSelectCouponClose" />
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import FoodCard from "./components/FoodCard.vue";
import BottomActionBar from "./components/BottomActionBar.vue";
import CouponModal from "./components/CouponModal.vue";
import CartModal from "./components/CartModal.vue";
import SelectCouponModal from "./components/SelectCouponModal.vue";
import { go } from "@/utils/utils.js";
import { DiningOrderFood, GetStoreCategories, GetStoreCuisines } from "@/api/dining.js";

const tableId = ref(''); // 桌号，来自上一页 url 参数 tableid
const currentDiners = ref(uni.getStorageSync('currentDiners') || '');
const currentCategoryIndex = ref(0);
const couponModalOpen = ref(false);
const cartModalOpen = ref(false);
const selectCouponModalOpen = ref(false);
const discountAmount = ref(12); // 优惠金额，示例数据
const selectedCouponId = ref(null); // 选中的优惠券ID

// 分类列表（由接口 /store/info/categories 返回后赋值）
const categories = ref([]);

// 菜品列表（由接口 /store/info/cuisines 按分类拉取并合并，每项含 quantity、categoryId）
const foodList = ref([]);

// 当前分类的菜品列表（按当前选中的分类 id 过滤）
const currentFoodList = computed(() => {
  const cat = categories.value[currentCategoryIndex.value];
  if (!cat) return [];
  const categoryId = cat.id ?? cat.categoryId;
  return foodList.value.filter((food) => String(food?.categoryId ?? '') === String(categoryId ?? ''));
});

// 购物车列表：只包含数量>0 的菜品，并按菜品 id 去重（同一菜品只算一条，避免金额叠加）
const cartList = computed(() => {
  const withQty = foodList.value.filter((food) => (food.quantity || 0) > 0);
  const seen = new Set();
  return withQty.filter((f) => {
    const id = String(f?.id ?? '');
    if (seen.has(id)) return false;
    seen.add(id);
    return true;
  });
});

// 优惠券列表（示例数据）
const couponList = ref([
  {
    id: 1,
    amount: 38,
    minAmount: 158,
    name: '优惠券名称',
    expireDate: '2024/07/28',
    isReceived: false
  },
  {
    id: 2,
    amount: 8,
    minAmount: 158,
    name: '优惠券名称',
    expireDate: '2024/07/28',
    isReceived: false
  },
  {
    id: 3,
    amount: 682,
    minAmount: 1580,
    name: '优惠券名称',
    expireDate: '2024/07/28',
    isReceived: true
  },
  {
    id: 4,
    amount: 1038,
    minAmount: 1580,
    name: '优惠券名称',
    expireDate: '2024/07/28',
    isReceived: true
  }
]);

// 可用的优惠券列表（已领取的优惠券）
const availableCoupons = computed(() => {
  return couponList.value.filter(coupon => coupon.isReceived);
});

// 分类 id 统一转字符串，避免 number/string 比较导致误判
const sameCategory = (a, b) => String(a ?? '') === String(b ?? '');

// 根据分类 id 拉取菜品并合并到 foodList，切换分类时保留其他分类已选菜品及本分类已选数量
const fetchCuisinesByCategoryId = async (categoryId) => {
  if (!categoryId) return;
  try {
    const res = await GetStoreCuisines({ categoryId });
    const list = res?.list ?? res?.data ?? (Array.isArray(res) ? res : []);
    const normalized = (Array.isArray(list) ? list : []).map(item => ({
      ...item,
      quantity: item.quantity ?? 0,
      categoryId: item.categoryId ?? categoryId
    }));
    // 其他分类的菜品原样保留（含已选数量）
    const rest = foodList.value.filter(f => !sameCategory(f.categoryId, categoryId));
    // 本分类：按菜品 id 从整份列表里取已选数量，id 一致则自动带上数量
    const merged = normalized.map((newItem) => {
      const existing = foodList.value.find(
        (e) => String(e?.id ?? '') === String(newItem?.id ?? '')
      );
      const quantity = existing ? existing.quantity : (newItem.quantity ?? 0);
      return { ...newItem, quantity };
    });
    foodList.value = [...rest, ...merged];
  } catch (err) {
    console.error('获取菜品失败:', err);
  }
};

// 选择分类：切换高亮并拉取该分类菜品
const selectCategory = async (index) => {
  currentCategoryIndex.value = index;
  const cat = categories.value[index];
  if (!cat) return;
  const categoryId = cat.id ?? cat.categoryId;
  await fetchCuisinesByCategoryId(categoryId);
};

// 更新菜品数量：菜品 id 一致则全部同步为同一数量，触发响应式使底部金额重新计算
const updateFoodQuantity = (food, delta) => {
  if (!food) return;
  const id = food.id;
  const nextQty = Math.max(0, (food.quantity || 0) + delta);
  const sameId = (item) =>
    String(item?.id ?? '') === String(id ?? '');
  foodList.value = foodList.value.map((item) =>
    sameId(item) ? { ...item, quantity: nextQty } : item
  );
};

// 增加数量
const handleIncrease = (food) => {
  updateFoodQuantity(food, 1);
};

// 减少数量
const handleDecrease = (food) => {
  updateFoodQuantity(food, -1);
};

// 优惠券点击（领取优惠券弹窗）
const handleCouponClick = () => {
  // 先关闭其他弹窗
  if (cartModalOpen.value) {
    cartModalOpen.value = false;
  }
  if (selectCouponModalOpen.value) {
    selectCouponModalOpen.value = false;
  }
  couponModalOpen.value = true;
};

// 选择优惠券点击（从购物车弹窗中点击）
const handleSelectCouponClick = () => {
  // 先关闭其他弹窗
  if (cartModalOpen.value) {
    cartModalOpen.value = false;
  }
  if (couponModalOpen.value) {
    couponModalOpen.value = false;
  }
  // 打开选择优惠券弹窗
  selectCouponModalOpen.value = true;
};

// 处理优惠券选择
const handleCouponSelect = ({ coupon, index, selectedId }) => {
  selectedCouponId.value = selectedId;
  // 根据选中的优惠券更新优惠金额
  if (selectedId) {
    discountAmount.value = coupon.amount;
  } else {
    discountAmount.value = 0;
  }
  // 选择后关闭选择优惠券弹窗，打开购物车弹窗
  selectCouponModalOpen.value = false;
  // 延迟打开购物车弹窗，确保选择优惠券弹窗完全关闭
  setTimeout(() => {
    cartModalOpen.value = true;
  }, 100);
};

// 选择优惠券弹窗关闭
const handleSelectCouponClose = () => {
  selectCouponModalOpen.value = false;
};

// 优惠券领取
const handleCouponReceive = ({ coupon, index }) => {
  console.log('领取优惠券:', coupon);
  // 更新优惠券状态
  couponList.value[index].isReceived = true;
  uni.showToast({
    title: '领取成功',
    icon: 'success'
  });
  // TODO: 调用接口领取优惠券
};

// 优惠券弹窗关闭
const handleCouponClose = () => {
  couponModalOpen.value = false;
};

// 购物车点击
const handleCartClick = () => {
  if (cartList.value.length === 0) {
    uni.showToast({
      title: '购物车为空',
      icon: 'none'
    });
    return;
  }
  // 先关闭其他弹窗
  if (couponModalOpen.value) {
    couponModalOpen.value = false;
  }
  if (selectCouponModalOpen.value) {
    selectCouponModalOpen.value = false;
  }
  cartModalOpen.value = true;
};

// 购物车弹窗关闭
const handleCartClose = () => {
  cartModalOpen.value = false;
};

// 清空购物车
const handleCartClear = () => {
  foodList.value.forEach(food => {
    food.quantity = 0;
  });
  cartModalOpen.value = false;
  uni.showToast({
    title: '已清空购物车',
    icon: 'success'
  });
};

// 下单点击
const handleOrderClick = (data) => {
  go('/pages/placeOrder/index');
};

onLoad(async (options) => {
  // 获取上一页（选择就餐人数页）传来的桌号和就餐人数
  const tableid = options.tableid || '';
  const diners = options.diners || '';
  tableId.value = tableid;
  currentDiners.value = diners;
  console.log('点餐页接收参数 - 桌号(tableid):', tableid, '就餐人数(diners):', diners);

  // 调用点餐页接口，入参 dinerCount、tableId
  if (tableid || diners) {
    try {
      const res = await DiningOrderFood({
        tableId: tableid,
        dinerCount: diners
      });
      console.log('点餐页接口返回:', res);

      // 成功后调接口获取菜品种类（storeId 取自点餐页接口返回，若无则需从别处获取）
      const storeId = res?.storeId ?? res?.data?.storeId ?? '';
      if (storeId) {
        try {
          const categoriesRes = await GetStoreCategories({ storeId });
          const list = categoriesRes?.list ?? categoriesRes?.data ?? categoriesRes;
          if (Array.isArray(list) && list.length) {
            categories.value = list;
            // 默认用第一项的分类 id 拉取菜品
            const firstCat = list[0];
            const firstCategoryId = firstCat.id ?? firstCat.categoryId;
            if (firstCategoryId) {
              const cuisinesRes = await GetStoreCuisines({ categoryId: firstCategoryId });
              const cuisinesList = cuisinesRes?.list ?? cuisinesRes?.data ?? (Array.isArray(cuisinesRes) ? cuisinesRes : []);
              foodList.value = (Array.isArray(cuisinesList) ? cuisinesList : []).map(item => ({
                ...item,
                quantity: item.quantity ?? 0,
                categoryId: item.categoryId ?? firstCategoryId
              }));
              console.log('默认分类菜品:', cuisinesRes);
            }
          }
          console.log('菜品种类:', categoriesRes);
        } catch (err) {
          console.error('获取菜品种类失败:', err);
        }
      }
    } catch (e) {
      console.error('点餐页接口失败:', e);
    }
  }
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f9fa;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}

.top-info {
  font-size: 28rpx;
  color: #888888;
  text-align: center;
  width: 100%;
  padding: 20rpx 0;
  background-color: #fff;
}

.search-input {
  width: 90%;
  margin-left: 5%;
  height: 80rpx;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 0 20rpx;
  margin-top: 20rpx;
  box-sizing: border-box;
  font-size: 28rpx;
  text-align: center;
}

.content-box {
  display: flex;
  flex: 1;
  overflow: hidden;
  margin-top: 20rpx;
}

// 左侧分类列表
.category-list {
  width: 180rpx;
  background-color: #fff;
  height: 100%;
}

.category-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #999;
  background-color: #fff;
  transition: all 0.3s;

  &.active {
    background-color: #fff4e6;
    color: #333;
    font-weight: 600;
  }
}

// 右侧菜品列表
.food-list {
  flex: 1;
  // background-color: #fff;
  // padding: 0 20rpx;
  margin: 0 20rpx;
}
</style>