From 4e141ff951fa2f1a7c19de8103206d4ef94d5a2f Mon Sep 17 00:00:00 2001
From: Echo <1711788888@qq.com>
Date: Tue, 19 Aug 2025 16:26:01 +0800
Subject: [PATCH] =?UTF-8?q?:art:=20=E5=AE=8C=E5=96=84=E7=82=B9=E9=A4=90?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js            |   35 +-
 src/pages/home/home.vue     |    2 +-
 src/pages/order/confirm.vue |  127 +++++
 src/pages/order/order.vue   | 1021 +++++++++++++++++++----------------
 src/pages/order/result.vue  |   30 +
 5 files changed, 743 insertions(+), 472 deletions(-)
 create mode 100644 src/pages/order/confirm.vue
 create mode 100644 src/pages/order/result.vue

diff --git a/src/api/index.js b/src/api/index.js
index e3bcf06..b8b84c8 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -7,20 +7,35 @@ const API = {
 	 用户相关
 	 */
     login: data => net.post('/user/login', data, false), // 登录
-    getUserInfo: () => net.get('/user/info', {}, false), // 获取用户信息
-    updateUserInfo: data => net.put('/user/update', data, false), // 更新用户信息
-    upload: data => net.post('/user/upload', data, false), // 上传头像
-    getUserInfoById: (id) => net.get(`/user/info/${id}`, {}, false), // 根据ID获取用户信息
-    getLoverInfo: () => net.get('/user/lover', {}, false), // 获取情侣关系信息（包含 startDate 与 loverId）
+    getUserInfo: () => net.get('/user/info', {}, true), // 获取用户信息
+    updateUserInfo: data => net.put('/user/update', data, true), // 更新用户信息
+    upload: data => net.post('/user/upload', data, true), // 上传头像
+    getUserInfoById: (id) => net.get(`/user/info/${id}`, {}, true), // 根据ID获取用户信息
+    getLoverInfo: () => net.get('/user/lover', {}, true), // 获取情侣关系信息（包含 startDate 与 loverId）
 	
     /* 
     纪念日相关
     */
-    getMemorialDay: (id) => net.get(`/anniversary/${id}`, {}, false), // 获取纪念日详情
-    getMemorialDayList: () => net.get('/anniversary/list', {}, false), // 获取纪念日列表
-    addMemorialDay: data => net.post('/anniversary', data, false), // 添加纪念日
-    updateMemorialDay: data => net.put('/anniversary', data, false), // 更新纪念日
-    deleteMemorialDay: data => net.delete('/anniversary', data, false) // 删除纪念日
+    getMemorialDay: (id) => net.get(`/anniversary/${id}`, {}, true), // 获取纪念日详情
+    getMemorialDayList: () => net.get('/anniversary/list', {}, true), // 获取纪念日列表
+    addMemorialDay: data => net.post('/anniversary', data, true), // 添加纪念日
+    updateMemorialDay: data => net.put('/anniversary', data, true), // 更新纪念日
+    deleteMemorialDay: data => net.delete('/anniversary', data, true), // 删除纪念日
+
+    /* 
+       菜品菜谱相关接口
+    */
+   getFoodList: (params = {}) => net.get('/food/list', params, true), // 获取菜品菜谱列表（支持 page/pageSize）
+   getFoodDetail: (id) => net.get(`/food/${id}`, {}, true), // 获取菜品菜谱详情
+   addFood: data => net.post('/food', data, true), // 添加菜品菜谱
+   updateFood: data => net.put('/food', data, true), // 更新菜品菜谱
+   deleteFood: data => net.delete('/food', data, true), // 删除菜品菜谱
+   createOrder: data => net.post('/order', data, true), // 创建订单
+    // 菜品分类相关接口
+    getFoodCategoryList: (params = {}) => net.get('/food/category/list', params, true), // 获取菜品分类列表（支持 page/pageSize）
+    addFoodCategory: data => net.post('/food/category', data, true), // 添加菜品分类
+    updateFoodCategory: data => net.put('/food/category', data, true), // 更新菜品分类
+    deleteFoodCategory: data => net.delete('/food/category', data, true) // 删除菜品分类
 
 };
 
diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index 2b5b963..e0b24dc 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -297,7 +297,7 @@ const goToDiary = () => {
 }
 
 const goToOrder = () => {
-  uni.navigateTo({ url: '/pages/order/order' })
+  uni.switchTab({ url: '/pages/order/order' })
 }
 
 const addAnniversary = () => {
diff --git a/src/pages/order/confirm.vue b/src/pages/order/confirm.vue
new file mode 100644
index 0000000..56be6f3
--- /dev/null
+++ b/src/pages/order/confirm.vue
@@ -0,0 +1,127 @@
+<template>
+  <view class="confirm-container">
+    <view class="card">
+      <view class="card-title">已选菜品</view>
+      <view v-for="item in items" :key="item.id" class="row">
+        <image :src="item.img" class="thumb" mode="aspectFill" />
+        <view class="meta">
+          <text class="name">{{ item.name }}</text>
+          <text class="price">¥{{ item.price || 0 }}</text>
+        </view>
+        <text class="qty">×{{ item.qty }}</text>
+      </view>
+      <view class="total">合计：<text class="price">¥{{ totalPrice }}</text></view>
+    </view>
+
+    <view class="card">
+      <view class="card-title">留言</view>
+      <uni-easyinput v-model="remark" placeholder="请输入备注（可选）"></uni-easyinput>
+    </view>
+
+    <view class="submit-bar">
+      <text class="sum">合计：<text class="price">¥{{ totalPrice }}</text></text>
+      <button class="submit" :loading="submitting" @click="create">提交订单</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import api from '@/api'
+
+const items = ref([])
+const ids = ref('')
+const userId = ref(null)
+const remark = ref('')
+const submitting = ref(false)
+
+onMounted(() => {
+  const channel = getCurrentPages().pop()?.getOpenerEventChannel?.()
+  channel?.on('initData', (payload) => {
+    items.value = payload.items || []
+    ids.value = payload.ids || ''
+    userId.value = payload.userId || null
+  })
+})
+
+const totalPrice = computed(() => items.value.reduce((s, it) => s + (it.price || 0) * it.qty, 0))
+
+const create = async () => {
+  if (!ids.value) {
+    uni.showToast({ title: '未选择菜品', icon: 'none' })
+    return
+  }
+  try {
+    submitting.value = true
+    const payload = {
+      food_ids: ids.value,
+      user_id: userId.value,
+      remark: remark.value
+    }
+    const res = await api.createOrder(payload)
+    if (res?.code === 0) {
+      uni.showToast({ title: '下单成功', icon: 'success' })
+      setTimeout(() => {
+        uni.redirectTo({ url: `/pages/order/result?id=${res.data?.ID || ''}` })
+      }, 600)
+    } else {
+      uni.showToast({ title: res?.msg || '下单失败', icon: 'none' })
+    }
+  } catch (e) {
+    console.error('create order failed', e)
+    uni.showToast({ title: '下单失败', icon: 'none' })
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.confirm-container {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding-bottom: 140rpx;
+}
+
+.card {
+  background: #fff;
+  margin: 20rpx;
+  padding: 20rpx;
+  border-radius: 16rpx;
+
+  .card-title {
+    font-size: 28rpx;
+    font-weight: 600;
+    margin-bottom: 16rpx;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 0;
+    border-bottom: 1rpx solid #f5f5f5;
+
+    &:last-child { border-bottom: none; }
+
+    .thumb { width: 120rpx; height: 120rpx; border-radius: 12rpx; margin-right: 16rpx; }
+    .meta { flex: 1; .name { display:block; font-size: 28rpx; } .price { color:#FF6B9D; margin-top: 6rpx; display:block; } }
+    .qty { color: #666; }
+  }
+
+  .total { text-align: right; margin-top: 10rpx; .price{ color:#FF6B9D; font-weight: 700; } }
+}
+
+.submit-bar {
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20rpx;
+  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.06);
+
+  .sum { font-size: 28rpx; .price{ color:#FF6B9D; font-weight:700; }}
+  .submit { background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%); color:#fff; border:none; border-radius: 30rpx; padding: 16rpx 28rpx; font-size: 28rpx; }
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/order/order.vue b/src/pages/order/order.vue
index d2d50da..babd17f 100644
--- a/src/pages/order/order.vue
+++ b/src/pages/order/order.vue
@@ -1,572 +1,671 @@
 <template>
   <view class="order-container">
-    <!-- 搜索栏 -->
+    <!-- 顶部搜索 -->
     <view class="search-section">
-      <uni-easyinput
-        v-model="searchText"
-        placeholder="搜索菜品..."
-        prefixIcon="search"
-        trim="both"
-      ></uni-easyinput>
-    </view>
-
-    <!-- 菜品列表 -->
-    <view class="menu-list">
-      <view 
-        v-for="(dish, index) in menuList" 
-        :key="index" 
-        class="menu-item"
-      >
-        <view class="dish-image">
-          <image
-            :src="dish.image"
-            mode="aspectFill"
-            class="image"
-          ></image>
+      <view class="search-bar">
+        <uni-easyinput
+          v-model="searchText"
+          placeholder="搜索菜品名称"
+          prefixIcon="search"
+          trim="both"
+          @confirm="doSearch"
+        ></uni-easyinput>
+        <view class="search-btn" @click="doSearch">
+          <text>搜索</text>
         </view>
-        <view class="dish-info">
-          <text class="dish-name">{{ dish.name }}</text>
-          <text class="dish-description">{{ dish.description }}</text>
-          <view class="dish-meta">
-            <view class="meta-item">
-              <uni-icons type="clock" size="14" color="#999"></uni-icons>
-              <text class="meta-text">{{ dish.cookTime }}</text>
-            </view>
-            <view class="meta-item">
-              <uni-icons type="star" size="14" color="#FFD700"></uni-icons>
-              <text class="meta-text">{{ dish.rating }}</text>
-            </view>
-          </view>
-          <view class="dish-price">
-            <text class="price">¥{{ dish.price }}</text>
-          </view>
-        </view>
-        <view class="dish-actions">
-          <view class="quantity-control" v-if="dish.quantity > 0">
-            <view class="btn-minus" @click="decreaseQuantity(dish)">
-              <uni-icons type="minus" size="16" color="#FF6B9D"></uni-icons>
-            </view>
-            <text class="quantity">{{ dish.quantity }}</text>
-            <view class="btn-plus" @click="increaseQuantity(dish)">
-              <uni-icons type="plus" size="16" color="#fff"></uni-icons>
-            </view>
-          </view>
-          <view v-else class="add-btn" @click="addToCart(dish)">
-            <text class="add-text">添加</text>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 空状态 -->
-      <view v-if="menuList.length === 0" class="empty-state">
-        <uni-icons type="folder-add" size="80" color="#ccc"></uni-icons>
-        <text class="empty-text">暂无菜品</text>
-        <text class="empty-desc">菜品正在准备中</text>
       </view>
     </view>
 
-    <!-- 购物车 -->
-    <view v-if="cartItems.length > 0" class="cart-section">
-      <view class="cart-header">
+    <!-- 主体：左侧分类 + 右侧菜品列表 -->
+    <view class="content">
+      <scroll-view class="category-pane" scroll-y>
+        <view :class="['category-item', { active: selectedCategoryId === 0 }]" @click="selectCategory(0)">
+          <text class="name">全部</text>
+        </view>
+        <view
+          v-for="cat in categoryList"
+          :key="cat.ID"
+          :class="['category-item', { active: selectedCategoryId === cat.ID }]"
+          @click="selectCategory(cat.ID)"
+        >
+          <text class="name">{{ cat.name }}</text>
+        </view>
+        <view class="category-manage">
+          <uni-icons type="gear" size="16" color="#999"></uni-icons>
+          <text class="manage-text">分类管理</text>
+        </view>
+      </scroll-view>
+
+      <scroll-view class="food-pane" scroll-y @scrolltolower="loadMore">
+        <view v-if="filteredFoodList.length === 0" class="empty-holder">
+          <uni-icons type="folder-add" size="80" color="#ccc"></uni-icons>
+          <text class="empty-text">这里空空如也~</text>
+        </view>
+
+        <view v-for="item in filteredFoodList" :key="item.ID" class="food-card">
+          <image :src="item.img" mode="aspectFill" class="cover"></image>
+          <view class="info">
+            <text class="title">{{ item.name }}</text>
+            <text class="desc">{{ item.desc || '美味等你来尝~' }}</text>
+            <view class="actions">
+              <view v-if="getQty(item.ID) > 0" class="qty">
+                <view class="btn minus" @click="decrease(item)">
+                  <uni-icons type="minus" size="24" color="#FF6B9D"></uni-icons>
+                </view>
+                <text class="num">{{ getQty(item.ID) }}</text>
+                <view class="btn plus" @click="increase(item)">
+                  <uni-icons type="plus" size="24" color="#fff"></uni-icons>
+                </view>
+              </view>
+              <view v-else class="add-btn" @click="add(item)">
+                <text>添加</text>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="load-more" v-if="loadingFoods || !foodHasMore">
+          <text class="tip">{{ loadingFoods ? '加载中...' : '没有更多了' }}</text>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 底部购物车栏 -->
+    <view class="cart-bar" v-if="totalQty > 0">
+      <view class="left" @click="openCart">
         <view class="cart-icon">
-          <uni-icons type="cart" size="24" color="#FF6B9D"></uni-icons>
-          <view class="cart-badge">{{ totalQuantity }}</view>
-        </view>
-        <text class="cart-total">合计：¥{{ totalPrice }}</text>
-        <view class="cart-clear" @click="clearCart">
-          <uni-icons type="trash" size="20" color="#999"></uni-icons>
+          <uni-icons type="cart" size="22" color="#FF6B9D"></uni-icons>
+          <view class="badge">{{ totalQty }}</view>
         </view>
+        <text class="summary">菜品数：{{ totalQty }}</text>
       </view>
-      <view class="checkout-btn" @click="checkout">
-        <text class="checkout-text">去结算</text>
-        <uni-icons type="right" size="16" color="#fff"></uni-icons>
+      <view class="right">
+        <view class="clear" @click.stop="clearCart">
+          <uni-icons type="trash" size="18" color="#999"></uni-icons>
+        </view>
+        <button class="submit" @click="submitOrder">去下单</button>
       </view>
     </view>
+
+    <!-- 购物车弹层 -->
+    <uni-popup ref="cartPopup" type="bottom" :mask-click="true" @change="onPopupChange">
+      <view class="cart-sheet">
+        <view class="sheet-header">
+          <text class="title">已选商品</text>
+          <view class="actions">
+            <view class="clear" @click="clearCart">
+              <uni-icons type="trash" size="18" color="#999"></uni-icons>
+              <text class="txt">清空</text>
+            </view>
+            <view class="close" @click="closeCart">
+              <uni-icons type="close" size="22" color="#999"></uni-icons>
+            </view>
+          </view>
+        </view>
+        <scroll-view class="sheet-body" scroll-y>
+          <view v-for="it in cart" :key="it.id" class="row">
+            <image :src="it.data.img" class="thumb" mode="aspectFill"></image>
+            <view class="meta">
+              <text class="name">{{ it.data.name }}</text>
+            </view>
+            <view class="qty">
+              <view class="btn minus" @click="decrease(it.data)">
+                <uni-icons type="minus" size="24" color="#FF6B9D"></uni-icons>
+              </view>
+              <text class="num">{{ it.qty }}</text>
+              <view class="btn plus" @click="increase(it.data)">
+                <uni-icons type="plus" size="24" color="#fff"></uni-icons>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { onPullDownRefresh } from '@dcloudio/uni-app'
+import api from '@/api'
 
-// 响应式数据
+// 搜索与筛选
 const searchText = ref('')
-const selectedCategory = ref('all')
-const cartItems = ref([])
+const categoryList = ref([])
+const selectedCategoryId = ref(0) // 0 表示全部
 
-const categories = ref([
-  { id: 'all', name: '全部' },
-  { id: 'chinese', name: '中餐' },
-  { id: 'western', name: '西餐' },
-  { id: 'dessert', name: '甜点' },
-  { id: 'drink', name: '饮品' },
-  { id: 'snack', name: '小吃' }
-])
+// 分页
+const categoryPage = ref(1)
+const categoryPageSize = ref(50)
+const foodPage = ref(1)
+const foodPageSize = ref(10)
+const foodHasMore = ref(true)
+const loadingFoods = ref(false)
 
-const dishes = ref([
-  {
-    id: 1,
-    name: '红烧肉',
-    description: '经典美味的红烧肉，肥而不腻',
-    image: '/static/images/dish1.jpg',
-    category: 'chinese',
-    cookTime: 60,
-    difficulty: '中等',
-    price: 28,
-    ingredients: ['五花肉', '生抽', '老抽', '冰糖', '葱姜蒜']
-  },
-  {
-    id: 2,
-    name: '提拉米苏',
-    description: '意大利经典咖啡甜点',
-    image: '/static/images/dish2.jpg',
-    category: 'dessert',
-    cookTime: 30,
-    difficulty: '简单',
-    price: 18,
-    ingredients: ['手指饼干', '马斯卡彭奶酪', '咖啡', '鸡蛋', '糖']
-  },
-  {
-    id: 3,
-    name: '意式咖啡',
-    description: '浓郁香醇的意式浓缩咖啡',
-    image: '/static/images/dish3.jpg',
-    category: 'drink',
-    cookTime: 5,
-    difficulty: '简单',
-    price: 12,
-    ingredients: ['咖啡豆', '水']
-  },
-  {
-    id: 4,
-    name: '宫保鸡丁',
-    description: '川菜经典，麻辣鲜香',
-    image: '/static/images/dish4.jpg',
-    category: 'chinese',
-    cookTime: 25,
-    difficulty: '中等',
-    price: 22,
-    ingredients: ['鸡胸肉', '花生', '干辣椒', '葱姜蒜', '生抽']
-  }
-])
+// 菜品与购物车
+const foodList = ref([]) // 接口返回的原始菜品列表
+const cart = ref([]) // { id, qty, data }
 
-// 计算属性
-const menuList = computed(() => {
-  let filtered = dishes.value
-  
-  // 按分类筛选
-  if (selectedCategory.value !== 'all') {
-    filtered = filtered.filter(dish => dish.category === selectedCategory.value)
-  }
-  
-  // 按关键词搜索
-  if (searchText.value) {
-    filtered = filtered.filter(dish => 
-      dish.name.includes(searchText.value) || 
-      dish.description.includes(searchText.value)
-    )
-  }
-  
-  return filtered
-})
+const cartPopup = ref(null)
+const cartVisible = ref(false)
+const openCart = () => { if (cartPopup.value?.open) cartPopup.value.open() }
+const closeCart = () => { if (cartPopup.value?.close) cartPopup.value.close() }
+const onPopupChange = (e) => { cartVisible.value = e.show }
 
-const totalQuantity = computed(() => {
-  return cartItems.value.reduce((total, item) => total + item.quantity, 0)
-})
-
-const totalPrice = computed(() => {
-  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0)
-})
-
-// 方法
-const onSearch = () => {
-  console.log('搜索关键词:', searchText.value)
-}
-
-const selectCategory = (categoryId) => {
-  selectedCategory.value = categoryId
-}
-
-const getCartQuantity = (dishId) => {
-  const cartItem = cartItems.value.find(item => item.id === dishId)
-  return cartItem ? cartItem.quantity : 0
-}
-
-const addToCart = (dish) => {
-  const existingItem = cartItems.value.find(item => item.id === dish.id)
-  
-  if (existingItem) {
-    existingItem.quantity++
-  } else {
-    cartItems.value.push({
-      id: dish.id,
-      name: dish.name,
-      price: dish.price,
-      image: dish.image,
-      quantity: 1
-    })
-  }
-  
-  uni.showToast({
-    title: '已添加到购物车',
-    icon: 'success'
-  })
-}
-
-const decreaseQuantity = (dish) => {
-  const existingItem = cartItems.value.find(item => item.id === dish.id)
-  
-  if (existingItem) {
-    if (existingItem.quantity > 1) {
-      existingItem.quantity--
-    } else {
-      // 移除数量为0的商品
-      const index = cartItems.value.findIndex(item => item.id === dish.id)
-      cartItems.value.splice(index, 1)
+const loadCategories = async (reset = false) => {
+  try {
+    if (reset) categoryPage.value = 1
+    const res = await api.getFoodCategoryList({ page: categoryPage.value, pageSize: categoryPageSize.value })
+    if (res?.code === 0) {
+      const list = res.data?.list || []
+      categoryList.value = list
     }
+  } catch (e) {
+    console.error('加载分类失败:', e)
   }
 }
 
-const increaseQuantity = (dish) => {
-  const existingItem = cartItems.value.find(item => item.id === dish.id)
-  if (existingItem) {
-    existingItem.quantity++
+const loadFoods = async (reset = false) => {
+  if (loadingFoods.value) return
+  try {
+    loadingFoods.value = true
+    if (reset) {
+      foodPage.value = 1
+      foodHasMore.value = true
+      foodList.value = []
+    }
+    const kw = (searchText.value || '').trim()
+    const params = {
+      page: foodPage.value,
+      pageSize: foodPageSize.value
+    }
+    if (kw) params.name = kw
+    if (selectedCategoryId.value && selectedCategoryId.value !== 0) {
+      params.categoryId = selectedCategoryId.value
+    }
+    const res = await api.getFoodList(params)
+    if (res?.code === 0) {
+      const list = res.data?.list || []
+      if (reset) {
+        foodList.value = list
+      } else {
+        foodList.value = foodList.value.concat(list)
+      }
+      const total = res.data?.total ?? list.length
+      const loaded = foodList.value.length
+      foodHasMore.value = loaded < total
+      if (foodHasMore.value) foodPage.value += 1
+    }
+  } catch (e) {
+    console.error('加载菜品失败:', e)
+  } finally {
+    loadingFoods.value = false
+  }
+}
+
+onPullDownRefresh(() => {
+  Promise.all([loadCategories(true), loadFoods(true)]).finally(() => {
+    uni.stopPullDownRefresh()
+  })
+})
+
+const selectCategory = (id) => {
+  selectedCategoryId.value = id
+  loadFoods(true)
+}
+
+const doSearch = () => {
+  loadFoods(true)
+}
+
+const filteredFoodList = computed(() => foodList.value)
+
+const loadMore = () => {
+  if (foodHasMore.value && !loadingFoods.value) {
+    loadFoods(false)
+  }
+}
+
+// 购物车逻辑
+const getQty = (id) => {
+  const found = cart.value.find(i => i.id === id)
+  return found ? found.qty : 0
+}
+
+const add = (item) => {
+  const found = cart.value.find(i => i.id === item.ID)
+  if (found) {
+    found.qty++
   } else {
-    cartItems.value.push({
-      id: dish.id,
-      name: dish.name,
-      price: dish.price,
-      image: dish.image,
-      quantity: 1
-    })
+    cart.value.push({ id: item.ID, qty: 1, data: item })
+  }
+}
+
+const increase = (item) => {
+  add(item)
+}
+
+const decrease = (item) => {
+  const idx = cart.value.findIndex(i => i.id === item.ID)
+  if (idx !== -1) {
+    if (cart.value[idx].qty > 1) {
+      cart.value[idx].qty--
+    } else {
+      cart.value.splice(idx, 1)
+    }
   }
 }
 
 const clearCart = () => {
   uni.showModal({
-    title: '提示',
-    content: '确定要清空购物车吗？',
+    title: '清空购物车',
+    content: '确定要清空已选菜品吗？',
     success: (res) => {
-      if (res.confirm) {
-        cartItems.value = []
-        uni.showToast({
-          title: '购物车已清空',
-          icon: 'success'
-        })
-      }
+      if (res.confirm) cart.value = []
     }
   })
 }
 
-const checkout = () => {
-  if (cartItems.value.length === 0) {
-    uni.showToast({
-      title: '购物车为空',
-      icon: 'none'
-    })
-    return
+const totalQty = computed(() => cart.value.reduce((sum, it) => sum + it.qty, 0))
+const totalPrice = computed(() => cart.value.reduce((sum, it) => sum + ((it.data.price || 0) * it.qty), 0))
+
+const userId = ref(null)
+const fetchUserId = async () => {
+  try {
+    const cached = uni.getStorageSync('userInfo')
+    if (cached?.ID || cached?.id) {
+      userId.value = cached.ID || cached.id
+      return
+    }
+    const res = await api.getUserInfo()
+    if (res?.code === 0 && res.data) {
+      userId.value = res.data.ID || res.data.id || null
+    }
+  } catch (e) {
+    console.warn('获取用户ID失败', e)
   }
-  
-  // 这里可以跳转到订单确认页面
-  uni.showToast({
-    title: '下单功能开发中',
-    icon: 'none'
-  })
 }
 
-// 生命周期
+const init = async () => {
+  await Promise.all([loadCategories(true), loadFoods(true)])
+}
+
 onMounted(() => {
-  // 可以在这里加载数据
+  fetchUserId()
+  init()
 })
+
+const submitOrder = () => {
+  if (cart.value.length === 0) {
+    uni.showToast({ title: '请先选择菜品', icon: 'none' })
+    return
+  }
+  const items = cart.value.map(it => ({
+    id: it.id,
+    name: it.data.name,
+    img: it.data.img,
+    qty: it.qty,
+    price: it.data.price || 0
+  }))
+  const ids = items.map(i => i.id).join(',')
+
+  uni.navigateTo({
+    url: '/pages/order/confirm',
+    success: (res) => {
+      res.eventChannel.emit('initData', {
+        items,
+        ids,
+        userId: userId.value || null
+      })
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
 .order-container {
   min-height: 100vh;
   background: #f5f5f5;
-  padding-bottom: 120rpx;
+  padding-bottom: 140rpx;
 }
 
 .search-section {
   background: #fff;
-  padding: 20rpx 30rpx;
-  
-  .search-box {
-    background: #f8f8f8;
-    border-radius: 20rpx;
-    overflow: hidden;
-  }
-}
+  padding: 20rpx 24rpx;
 
-.category-section {
-  background: #fff;
-  padding: 20rpx 0;
-  margin-bottom: 20rpx;
-  
-  .category-scroll {
-    white-space: nowrap;
-    
-    .category-list {
-      display: flex;
-      padding: 0 30rpx;
-      
-      .category-item {
-        display: inline-block;
-        padding: 16rpx 32rpx;
-        margin-right: 20rpx;
-        background: #f8f8f8;
-        border-radius: 25rpx;
-        transition: all 0.3s;
-        
-        .category-name {
-          font-size: 28rpx;
-          color: #666;
-        }
-        
-        &.active {
-          background: #FF6B9D;
-          
-          .category-name {
-            color: #fff;
-          }
-        }
-      }
+  .search-bar {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+
+    .search-btn {
+      padding: 18rpx 26rpx;
+      background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
+      color: #fff;
+      border-radius: 16rpx;
+      font-size: 26rpx;
     }
   }
 }
 
-.menu-list {
-  padding: 0 30rpx;
-  
-  .menu-item {
+.content {
+  display: flex;
+  height: calc(100vh - 220rpx);
+}
+
+.category-pane {
+  width: 180rpx;
+  background: #fafafa;
+  border-right: 1rpx solid #eee;
+
+  .category-item {
+    padding: 28rpx 20rpx;
+    color: #666;
+    font-size: 28rpx;
+    border-left: 6rpx solid transparent;
+
+    &.active {
+      color: #FF6B9D;
+      background: #fff;
+      border-left-color: #FF6B9D;
+      font-weight: 600;
+    }
+  }
+
+  .category-manage {
+    padding: 24rpx 20rpx;
     display: flex;
     align-items: center;
+    gap: 10rpx;
+    color: #999;
+    font-size: 24rpx;
+  }
+}
+
+.food-pane {
+  flex: 1;
+  padding: 20rpx;
+
+  .empty-holder {
+    text-align: center;
+    padding: 140rpx 0;
+
+    .empty-text {
+      display: block;
+      margin-top: 16rpx;
+      color: #999;
+      font-size: 26rpx;
+    }
+  }
+
+  .food-card {
+    display: flex;
     background: #fff;
-    padding: 30rpx;
     border-radius: 20rpx;
+    padding: 20rpx;
     margin-bottom: 20rpx;
     box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
-    
-    .dish-image {
-      margin-right: 30rpx;
-      
-      .image {
-        width: 120rpx;
-        height: 120rpx;
-        border-radius: 12rpx;
-        object-fit: cover;
-      }
+
+    .cover {
+      width: 140rpx;
+      height: 140rpx;
+      border-radius: 14rpx;
+      object-fit: cover;
+      margin-right: 20rpx;
     }
-    
-    .dish-info {
+
+    .info {
       flex: 1;
-      
-      .dish-name {
+
+      .title {
         display: block;
         font-size: 32rpx;
-        font-weight: bold;
+        font-weight: 700;
         color: #333;
-        margin-bottom: 10rpx;
       }
-      
-      .dish-description {
+
+      .desc {
         display: block;
-        font-size: 26rpx;
+        margin-top: 8rpx;
+        font-size: 24rpx;
         color: #999;
-        margin-bottom: 20rpx;
-        line-height: 1.4;
       }
-      
-      .dish-meta {
-        display: flex;
-        gap: 30rpx;
-        
-        .meta-item {
-          display: flex;
-          align-items: center;
-          gap: 8rpx;
-          
-          .meta-text {
-            font-size: 24rpx;
-            color: #999;
-          }
-        }
-      }
-      
-      .dish-price {
-        margin-top: 15rpx;
-        
-        .price {
-          font-size: 32rpx;
-          font-weight: bold;
-          color: #FF6B9D;
-        }
-      }
-    }
-    
-    .dish-actions {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-      gap: 20rpx;
-      
-      .quantity-control {
+
+      .actions {
+        margin-top: 16rpx;
         display: flex;
+        justify-content: flex-end;
         align-items: center;
-        gap: 15rpx;
-        
-        .btn-minus, .btn-plus {
-          width: 50rpx;
-          height: 50rpx;
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: all 0.3s;
-          cursor: pointer;
-          border: none;
-        }
-        
-        .btn-minus {
-          background: #f8f8f8;
-          border: 2rpx solid #FF6B9D;
-          
-          &:active {
-            background: #FF6B9D;
-            color: #fff;
-            transform: scale(0.9);
-          }
-        }
-        
-        .btn-plus {
+        gap: 16rpx;
+
+        .add-btn {
+          padding: 12rpx 22rpx;
           background: #FF6B9D;
           color: #fff;
-          
-          &:active {
-            transform: scale(0.9);
-            box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.4);
+          border-radius: 22rpx;
+          font-size: 24rpx;
+          box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.25);
+        }
+
+        .qty {
+          display: flex;
+          align-items: center;
+          gap: 14rpx;
+
+          .btn {
+            width: 48rpx;
+            height: 48rpx;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.2);
+          }
+
+          .minus {
+            background: #fff;
+            border: 2rpx solid #FF6B9D;
+          }
+
+          .plus {
+            background: #FF6B9D;
+          }
+
+          .num {
+            min-width: 40rpx;
+            text-align: center;
+            font-size: 28rpx;
+            color: #333;
           }
-        }
-        
-        .quantity {
-          font-size: 28rpx;
-          color: #333;
-          min-width: 40rpx;
-          text-align: center;
-        }
-      }
-      
-      .add-btn {
-        padding: 15rpx 25rpx;
-        background: #FF6B9D;
-        color: #fff;
-        border: none;
-        border-radius: 25rpx;
-        font-size: 24rpx;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        
-        &:active {
-          transform: scale(0.95);
-          box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.4);
         }
       }
     }
   }
 }
 
-.empty-state {
-  text-align: center;
-  padding: 100rpx 0;
-  
-  .empty-text {
-    display: block;
-    font-size: 32rpx;
-    color: #999;
-    margin: 30rpx 0 20rpx;
-  }
-  
-  .empty-desc {
-    font-size: 26rpx;
-    color: #ccc;
-  }
-}
-
-.cart-section {
+.cart-bar {
   position: fixed;
-  bottom: 0;
   left: 0;
   right: 0;
+  bottom: 0;
   background: #fff;
   border-radius: 20rpx 20rpx 0 0;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
+  padding: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   z-index: 999;
-  
-  .cart-header {
+
+  .left {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 30rpx;
-    border-bottom: 2rpx solid #f5f5f5;
-    
+    gap: 14rpx;
+
     .cart-icon {
       position: relative;
-      display: flex;
-      align-items: center;
-      
-      .cart-badge {
+
+      .badge {
         position: absolute;
         top: -8rpx;
-        right: -8rpx;
+        right: -10rpx;
         background: #FF6B9D;
         color: #fff;
         font-size: 20rpx;
-        padding: 4rpx 8rpx;
-        border-radius: 10rpx;
-        min-width: 20rpx;
-        text-align: center;
+        padding: 2rpx 8rpx;
+        border-radius: 12rpx;
       }
     }
-    
-    .cart-total {
-      font-size: 30rpx;
-      font-weight: bold;
+
+    .summary {
+      font-size: 28rpx;
       color: #FF6B9D;
-    }
-    
-    .cart-clear {
-      padding: 10rpx;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      
-      &:active {
-        transform: scale(0.9);
-      }
+      font-weight: 600;
     }
   }
-  
-  .checkout-btn {
+
+  .right {
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 10rpx;
-    background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
-    color: #fff;
-    padding: 25rpx;
-    margin: 20rpx 30rpx 30rpx;
-    border-radius: 25rpx;
-    border: none;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    
-    .checkout-text {
-      font-size: 28rpx;
-      font-weight: bold;
+    gap: 16rpx;
+
+    .clear {
+      padding: 10rpx;
     }
-    
-    &:active {
-      transform: scale(0.98);
-      box-shadow: 0 4rpx 15rpx rgba(255, 107, 157, 0.4);
+
+    .submit {
+      background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
+      color: #fff;
+      border: none;
+      border-radius: 28rpx;
+      padding: 16rpx 28rpx;
+      font-size: 28rpx;
     }
   }
 }
+
+/* 购物车弹层样式 */
+.cart-sheet {
+  background: #fff;
+  border-radius: 20rpx 20rpx 0 0;
+  overflow: hidden;
+  /* 预留底部空间，避免被底部栏遮挡 */
+  padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
+}
+
+.sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  .title {
+    font-size: 30rpx;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+
+    .clear {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 6rpx 10rpx;
+      border-radius: 12rpx;
+      background: #f7f7f7;
+    }
+  }
+}
+
+.sheet-body {
+  max-height: 60vh;
+  padding: 10rpx 24rpx 0;
+
+  .row {
+    display: flex;
+    align-items: center;
+    padding: 16rpx 0;
+    border-bottom: 1rpx solid #f5f5f5;
+
+    .thumb {
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 12rpx;
+      object-fit: cover;
+      margin-right: 16rpx;
+    }
+
+    .meta {
+      flex: 1;
+
+      .name {
+        display: block;
+        font-size: 28rpx;
+        color: #333;
+      }
+
+      .price {
+        display: block;
+        margin-top: 6rpx;
+        color: #FF6B9D;
+        font-weight: 600;
+      }
+    }
+
+    .qty {
+      display: flex;
+      align-items: center;
+      gap: 14rpx;
+      margin-right: 40rpx;
+
+      .btn {
+        width: 44rpx;
+        height: 44rpx;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2rpx 8rpx rgba(255, 107, 157, 0.2);
+      }
+
+      .minus { background: #fff; border: 2rpx solid #FF6B9D; }
+      .plus  { background: #FF6B9D; }
+
+      .num {
+        min-width: 40rpx;
+        text-align: center;
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+  }
+}
+
+.sheet-footer {
+  padding: 20rpx 24rpx 30rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+
+  .amount { font-size: 28rpx; color: #333; }
+  .price { color: #FF6B9D; font-weight: 700; }
+
+  .submit {
+    background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
+    color: #fff;
+    border: none;
+    border-radius: 30rpx;
+    padding: 16rpx 28rpx;
+    font-size: 28rpx;
+  }
+}
 </style> 
\ No newline at end of file
diff --git a/src/pages/order/result.vue b/src/pages/order/result.vue
new file mode 100644
index 0000000..e868cef
--- /dev/null
+++ b/src/pages/order/result.vue
@@ -0,0 +1,30 @@
+<template>
+  <view class="result-container">
+    <view class="card">
+      <view class="title">下单成功</view>
+      <view class="desc">订单已创建，等待商家接单</view>
+      <button class="btn" @click="goBack">返回点餐</button>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const goBack = () => {
+  const pages = getCurrentPages()
+  if (pages.length > 1) {
+    uni.navigateBack({ delta: pages.length - 1 })
+  } else {
+    uni.switchTab({ url: '/pages/order/order' })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.result-container {
+  min-height: 100vh; display:flex; align-items:center; justify-content:center; background:#f5f5f5;
+}
+.card { background:#fff; padding:40rpx; border-radius:20rpx; text-align:center; box-shadow:0 4rpx 20rpx rgba(0,0,0,.06); }
+.title { font-size:36rpx; font-weight:700; color:#333; }
+.desc { margin: 16rpx 0 24rpx; color:#666; }
+.btn { background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%); color:#fff; border:none; border-radius: 30rpx; padding: 16rpx 28rpx; font-size: 28rpx; }
+</style> 
\ No newline at end of file