Browse Source

✨ feat(order): 优化订单组件布局,调整样式并添加桌子选择弹窗

Mcal 4 days ago
parent
commit
c4ff459075

+ 7 - 5
src/views/menu/components/rightOrder/components/order.vue

@@ -2,13 +2,13 @@
 
 <template>
   <div class="h-full bg-gray-50">
-    <div class="w-full mx-auto">
-      <div class="bg-white rounded-lg p-3">
+    <div class="w-full mx-auto h-full">
+      <div class="bg-white rounded-lg p-3 h-full">
         <div class="flex items-center justify-between mb-3">
           <h1 class="text-sm font-medium">Orders #45892</h1>
         </div>
-
-        <div class="space-y-4 mb-6 overflow-auto h-[200px]">
+        <div class="flex flex-col h-[calc(100%-3rem)]">
+          <div class="space-y-4 mb-6 overflow-auto flex-1">
           <div
             v-for="(item, index) in orderItems"
             :key="index"
@@ -59,6 +59,8 @@
             <span class="text-sm font-medium">${{ total.toFixed(2) }}</span>
           </div>
         </div>
+        </div>
+
       </div>
     </div>
   </div>
@@ -94,7 +96,7 @@ const orderItems = ref<OrderItem[]>([
     image: 'https://ai-public.mastergo.com/ai/img_res/a20aaccbc775fd5729c8b8c6dac46563.jpg',
   },
 ])
-
+orderItems.value.concat(orderItems.value)
 const total = computed(() => {
   return orderItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
 })

+ 2 - 0
src/views/menu/index.vue

@@ -71,6 +71,8 @@
       <rightOrder @showDeskDrawer="catgroyClick"></rightOrder>
     </div>
     <OrderDrawer v-model:show="show" />
+    <deskDrawer v-model:show="deskShow" />
+
   </div>
 </template>
 <script lang="ts" setup>