Browse Source

✨ feat(router/views): 更新订单路由结构,添加订单列表,订单详情页面,添加选择桌子弹窗

Mcal 4 days ago
parent
commit
47b834e848

+ 5 - 0
src/assets/img/desk/Order1.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 1.25H8.5V4.25H15.5V1.25Z" stroke="#EA7C69" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.525 4.25H19C19.5523 4.25 20 4.69771 20 5.25V21.75C20 22.3023 19.5523 22.75 19 22.75H5C4.44771 22.75 4 22.3023 4 21.75V5.25C4 4.69771 4.44771 4.25 5 4.25H8H8.5V5.75H15.5V4.25H16.525Z" stroke="#EA7C69" stroke-width="2" stroke-linejoin="round"/>
+<path d="M13.4998 9.5L9.5 13.5006H14.502L10.5001 17.5009" stroke="#EA7C69" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

BIN
src/assets/img/desk/order10.png


BIN
src/assets/img/desk/order11.png


BIN
src/assets/img/desk/order12.png


+ 6 - 0
src/assets/img/desk/order2.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 2H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 22H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 22C6.83335 15.3306 9 11.9972 12 12C15 12.0028 17.1667 15.3361 18.5 22H5.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+<path d="M18.5 2C17.1667 8.66945 15 12.0028 12 12C9 11.9972 6.83335 8.6639 5.5 2H18.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+</svg>

+ 5 - 0
src/assets/img/desk/order3.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 9C13.933 9 15.5 7.433 15.5 5.5C15.5 3.567 13.933 2 12 2C10.067 2 8.5 3.567 8.5 5.5C8.5 7.433 10.067 9 12 9Z" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 20.5C2 16.0817 6.02945 12.5 11 12.5" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.5 21L20.5 16L18.5 14L13.5 19V21H15.5Z" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

+ 6 - 0
src/assets/img/desk/order4.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.5 3H4.5C3.67158 3 3 3.67158 3 4.5V19.5C3 20.3285 3.67158 21 4.5 21H19.5C20.3285 21 21 20.3285 21 19.5V4.5C21 3.67158 20.3285 3 19.5 3Z" stroke="#48E482" stroke-width="2"/>
+<path d="M8 7.5V16.5" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 8.5V16.5" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 16.5C12.75 16.5 12 15.7 12 14.5C12 13.3 12.75 12.5 14 12.5C15.25 12.5 16 12.5 16 12.5V16.5H14Z" stroke="#48E482" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

BIN
src/assets/img/desk/order5.png


+ 8 - 0
src/assets/img/desk/order6.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 2H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.5 22H20.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 22C6.83335 15.3306 9 11.9972 12 12C15 12.0028 17.1667 15.3361 18.5 22H5.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+<path d="M18.5 2C17.1667 8.66945 15 12.0028 12 12C9 11.9972 6.83335 8.6639 5.5 2H18.5Z" stroke="#FFC038" stroke-width="2" stroke-linejoin="round"/>
+<path d="M10.5 7.5H13.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 19H14.5" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

+ 6 - 0
src/assets/img/desk/order7.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 3C5 2.44771 5.4477 2 6 2H18C18.5523 2 19 2.44771 19 3V22L15.5 19.5L12 22L8.5 19.5L5 22V3Z" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 11H15" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 15H15" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 7H15" stroke="#FFC038" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

BIN
src/assets/img/desk/order8.png


BIN
src/assets/img/desk/order9.png


+ 9 - 0
src/assets/img/desk/座位.svg

@@ -0,0 +1,9 @@
+<svg width="240" height="204" viewBox="0 0 240 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M96.3636 20C98.3719 20 100.033 18.3588 99.6703 16.3836C99.4165 15.0029 99.0174 13.6495 98.4776 12.3463C97.4725 9.91982 95.9993 7.71503 94.1421 5.85786C92.285 4.00069 90.0802 2.5275 87.6537 1.52241C85.2272 0.517315 82.6264 -1.14805e-07 80 0C77.3736 1.14805e-07 74.7728 0.517315 72.3463 1.52241C69.9198 2.5275 67.715 4.00069 65.8579 5.85786C64.0007 7.71504 62.5275 9.91982 61.5224 12.3463C60.9826 13.6495 60.5835 15.0029 60.3297 16.3836C59.9665 18.3588 61.6281 20 63.6364 20L96.3636 20Z" fill="#E6E6E6"/>
+<path d="M176.364 20C178.372 20 180.033 18.3588 179.67 16.3836C179.416 15.0029 179.017 13.6495 178.478 12.3463C177.472 9.91982 175.999 7.71503 174.142 5.85786C172.285 4.00069 170.08 2.5275 167.654 1.52241C165.227 0.517315 162.626 -1.14805e-07 160 0C157.374 1.14805e-07 154.773 0.517315 152.346 1.52241C149.92 2.5275 147.715 4.00069 145.858 5.85786C144.001 7.71504 142.528 9.91982 141.522 12.3463C140.983 13.6495 140.584 15.0029 140.33 16.3836C139.967 18.3588 141.628 20 143.636 20L176.364 20Z" fill="#E6E6E6"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" fill="white"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" stroke="#E6E6E6" stroke-width="0.8"/>
+<rect width="9.6" height="140" transform="translate(0 32)" fill="#E6E6E6"/>
+<path d="M143.636 184C141.628 184 139.967 185.641 140.33 187.616C140.584 188.997 140.983 190.35 141.522 191.654C142.528 194.08 144.001 196.285 145.858 198.142C147.715 199.999 149.92 201.472 152.346 202.478C154.773 203.483 157.374 204 160 204C162.626 204 165.227 203.483 167.654 202.478C170.08 201.472 172.285 199.999 174.142 198.142C175.999 196.285 177.472 194.08 178.478 191.654C179.017 190.35 179.416 188.997 179.67 187.616C180.033 185.641 178.372 184 176.364 184L143.636 184Z" fill="#E6E6E6"/>
+<path d="M63.6364 184C61.6281 184 59.9665 185.641 60.3297 187.616C60.5835 188.997 60.9826 190.35 61.5224 191.654C62.5275 194.08 64.0007 196.285 65.8579 198.142C67.715 199.999 69.9198 201.472 72.3463 202.478C74.7728 203.483 77.3736 204 80 204C82.6264 204 85.2272 203.483 87.6537 202.478C90.0802 201.472 92.285 199.999 94.1421 198.142C95.9993 196.285 97.4725 194.08 98.4776 191.654C99.0174 190.35 99.4165 188.997 99.6703 187.616C100.033 185.641 98.3719 184 96.3636 184L63.6364 184Z" fill="#E6E6E6"/>
+</svg>

+ 9 - 0
src/assets/img/desk/座位_active.svg

@@ -0,0 +1,9 @@
+<svg width="240" height="204" viewBox="0 0 240 204" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M96.3636 20C98.3719 20 100.033 18.3588 99.6703 16.3836C99.4165 15.0029 99.0174 13.6495 98.4776 12.3463C97.4725 9.91982 95.9993 7.71503 94.1421 5.85786C92.285 4.00069 90.0802 2.5275 87.6537 1.52241C85.2272 0.517315 82.6264 -1.14805e-07 80 0C77.3736 1.14805e-07 74.7728 0.517315 72.3463 1.52241C69.9198 2.5275 67.715 4.00069 65.8579 5.85786C64.0007 7.71504 62.5275 9.91982 61.5224 12.3463C60.9826 13.6495 60.5835 15.0029 60.3297 16.3836C59.9665 18.3588 61.6281 20 63.6364 20L96.3636 20Z" fill="#F67F20"/>
+<path d="M176.364 20C178.372 20 180.033 18.3588 179.67 16.3836C179.416 15.0029 179.017 13.6495 178.478 12.3463C177.472 9.91982 175.999 7.71503 174.142 5.85786C172.285 4.00069 170.08 2.5275 167.654 1.52241C165.227 0.517315 162.626 -1.14805e-07 160 0C157.374 1.14805e-07 154.773 0.517315 152.346 1.52241C149.92 2.5275 147.715 4.00069 145.858 5.85786C144.001 7.71504 142.528 9.91982 141.522 12.3463C140.983 13.6495 140.584 15.0029 140.33 16.3836C139.967 18.3588 141.628 20 143.636 20L176.364 20Z" fill="#F67F20"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" fill="white"/>
+<rect x="0.4" y="32.4" width="239.2" height="139.2" rx="9.2" stroke="#E6E6E6" stroke-width="0.8"/>
+<rect width="9.6" height="140" transform="translate(0 32)" fill="#F67F20"/>
+<path d="M143.636 184C141.628 184 139.967 185.641 140.33 187.616C140.584 188.997 140.983 190.35 141.522 191.654C142.528 194.08 144.001 196.285 145.858 198.142C147.715 199.999 149.92 201.472 152.346 202.478C154.773 203.483 157.374 204 160 204C162.626 204 165.227 203.483 167.654 202.478C170.08 201.472 172.285 199.999 174.142 198.142C175.999 196.285 177.472 194.08 178.478 191.654C179.017 190.35 179.416 188.997 179.67 187.616C180.033 185.641 178.372 184 176.364 184L143.636 184Z" fill="#F67F20"/>
+<path d="M63.6364 184C61.6281 184 59.9665 185.641 60.3297 187.616C60.5835 188.997 60.9826 190.35 61.5224 191.654C62.5275 194.08 64.0007 196.285 65.8579 198.142C67.715 199.999 69.9198 201.472 72.3463 202.478C74.7728 203.483 77.3736 204 80 204C82.6264 204 85.2272 203.483 87.6537 202.478C90.0802 201.472 92.285 199.999 94.1421 198.142C95.9993 196.285 97.4725 194.08 98.4776 191.654C99.0174 190.35 99.4165 188.997 99.6703 187.616C100.033 185.641 98.3719 184 96.3636 184L63.6364 184Z" fill="#F67F20"/>
+</svg>

BIN
src/assets/img/orderList/暂无支付记录.png


+ 15 - 1
src/router/index.ts

@@ -4,7 +4,9 @@ import LayoutView from '../views/layout/index.vue'
 import LoginView from '../views/login/index.vue'
 import MenuView from '../views/menu/index.vue'
 import OrderView from '../views/order/index.vue'
+import orderDetail from '../views/order/orderDetail.vue'
 import ExitView from '../views/exit/index.vue'
+import { path } from '@tauri-apps/api'
 
 const routes: RouteRecordRaw[] = [
   { path: '/login', component: LoginView },
@@ -14,7 +16,19 @@ const routes: RouteRecordRaw[] = [
     redirect: '/menu',
     children: [
       { path: '/menu', component: MenuView },
-      { path: '/order', component: OrderView },
+      { 
+        path: '/order', 
+        children: [
+          {
+            path:'orderList',
+            component: OrderView,
+          },
+          {
+            path:'orderDetail',
+            component: orderDetail,
+          }
+        ]
+      },
       { path: '/exit', component: ExitView },
     ],
   },

+ 1 - 1
src/views/layout/index.vue

@@ -36,7 +36,7 @@ const menus = ref([
     name: $t('sidebar.order'),
     img: menuCooker2,
     key: 2,
-    path: '/order',
+    path: '/order/orderList',
   },
   {
     name: $t('sidebar.exit'),

+ 216 - 0
src/views/menu/components/desk-drawer.vue

@@ -0,0 +1,216 @@
+<template>
+    <div class="desk-drawer">
+        <el-drawer v-model="show" :show-close="false" direction="rtl" size="80%">
+            <template #header style="margin-bottom: 0;">
+                <div class="mb-0">
+                    <div class="flex items-center justify-between">
+                        <h1 class="text-2xl font-semibold text-gray-900">List of Pending Orders</h1>
+                        <button @click="show = false"
+                            class="!rounded-button bg-orange-500 px-6 py-2 text-white hover:bg-orange-600 whitespace-nowrap">
+                            <i class="fas fa-arrow-left mr-2"></i>Back Home
+                        </button>
+                    </div>
+                    <!-- <el-divider /> -->
+                </div>
+            </template>
+            <div class="h-full bg-gray-50">
+                <div class="mx-auto w-full px-4">
+                    <!-- Header -->
+                    <!-- Tip Message -->
+                    <div class="mb-6 rounded-lg bg-orange-50 p-4 text-orange-700">
+                        <p>Tip: Please select a blank space to place an order and click on the table where the order has
+                            already
+                            been placed to proceed with checkout</p>
+                    </div>
+
+                    <!-- Table Filter -->
+                    <div class="mb-8 space-x-4">
+                        <button class="!rounded-button whitespace-nowrap bg-orange-500 px-6 py-2 text-white">All
+                            Tables</button>
+                        <button
+                            class="!rounded-button whitespace-nowrap bg-gray-100 px-6 py-2 text-gray-600 hover:bg-gray-200">A
+                            Tables</button>
+                        <button
+                            class="!rounded-button whitespace-nowrap bg-gray-100 px-6 py-2 text-gray-600 hover:bg-gray-200">B
+                            Tables</button>
+                    </div>
+
+                    <!-- Table Grid -->
+                    <div class="grid grid-cols-5 gap-6 pb-8">
+                        <template v-for="table in tables" :key="table.id">
+                            <div class="relative cursor-pointer" 
+                            @click="selectTable(table)"
+                            >
+                                <img class="w-full h-full"
+                                    :src="table.isActive ? '/src/assets/img/desk/座位_active.svg' : '/src/assets/img/desk/座位.svg'"
+                                    alt="">
+                                <div class="absolute top-0 py-2 left-5 flex flex-col justify-around h-full">
+                                    <div class=" text-sm font-medium"
+                                        :class="table.isActive ? 'text-orange-500' : 'text-gray-400'">
+                                        {{ table.name }}
+                                    </div>
+                                    <div :class="table.isActive ? 'text-gray-900' : 'text-gray-400'">
+                                        {{ table.status }}
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- <div :class="[
+                                'relative rounded-lg border p-4 transition-all duration-200',
+                                table.isActive ? 'border-orange-500 bg-white shadow-lg' : 'border-gray-200 bg-gray-50'
+                            ]" @click="selectTable(table)">
+                                <div class="mb-2 text-lg font-medium"
+                                    :class="table.isActive ? 'text-orange-500' : 'text-gray-400'">
+                                    {{ table.name }}
+                                </div>
+                                <div :class="table.isActive ? 'text-gray-900' : 'text-gray-400'">
+                                    {{ table.status }}
+                                </div>
+                                <div v-if="table.isActive" class="mt-2 text-sm text-gray-500">
+                                    {{ table.orderInfo }}
+                                    <div class="mt-1">{{ table.date }}</div>
+                                </div>
+
+                                <div class="absolute -bottom-2 left-1/2 flex -translate-x-1/2 space-x-1">
+                                    <div v-for="i in 2" :key="i" :class="[
+                                        'h-2 w-2 rounded-full',
+                                        table.isActive ? 'bg-orange-500' : 'bg-gray-300'
+                                    ]"></div>
+                                </div>
+                            </div> -->
+                        </template>
+                    </div>
+                </div>
+            </div>
+            <!-- <template #footer>
+      <div style="flex: auto">
+        <el-button type="primary" @click="" plain>close window</el-button>
+        <el-button type="primary" @click="">Join the checkout counter</el-button>
+      </div>
+    </template> -->
+        </el-drawer>
+    </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Table {
+    id: number;
+    name: string;
+    status: string;
+    isActive: boolean;
+    orderInfo?: string;
+    date?: string;
+}
+const show = defineModel('show')
+const showInput = defineModel('showInput')
+const tables = ref<Table[]>([
+    {
+        id: 1,
+        name: 'A1',
+        status: 'Registration',
+        isActive: true,
+        orderInfo: 'QTY:10',
+        date: 'February 26, 2018'
+    },
+    {
+        id: 2,
+        name: 'A2',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 3,
+        name: 'A3',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 4,
+        name: 'A4',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 5,
+        name: 'A5',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 6,
+        name: 'B1',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 7,
+        name: 'B2',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 8,
+        name: 'B3',
+        status: 'Registration',
+        isActive: true,
+        orderInfo: 'QTY:8',
+        date: 'February 26, 2018'
+    },
+    {
+        id: 9,
+        name: 'B4',
+        status: 'Free',
+        isActive: false
+    },
+    {
+        id: 10,
+        name: 'B5',
+        status: 'Free',
+        isActive: false
+    }
+]);
+
+const selectTable = (table: Table) => {
+    table.isActive = !table.isActive;
+    console.log(table.isActive,'table.isActive')
+    if (table.isActive) {
+        table.status = 'Registration';
+        table.orderInfo = 'QTY:10';
+        table.date = 'February 26, 2018';
+    } else {
+        table.status = 'Free';
+        table.orderInfo = undefined;
+        table.date = undefined;
+    }
+};
+console.log(show)
+console.log(show)
+
+</script>
+
+<style scoped lang="scss">
+.grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+/* :global(.el-drawer__header) {
+    margin:0;
+    } */
+// .desk-drawer .el-drawer__header {
+//     margin: 0;
+// }
+
+.desk-drawer {
+    :deep(.el-drawer__header) {
+        margin: 0;
+    }
+}
+
+/* 
+:deep(.el-drawer__header) {
+    margin: 0;
+}
+ */
+</style>

+ 4 - 0
src/views/menu/components/rightOrder/rightOrder.vue

@@ -22,6 +22,7 @@
         </button>
       </div>
       <button
+        @click="emits('showDeskDrawer')"
         class="rounded text-sm w-full py-3 px-6 mb-1 text-white bg-[#999] !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors"
       >
         Choose A Table For Payment
@@ -33,6 +34,9 @@
 <script lang="ts" setup>
 import noProduct from '@/components/noProduct.vue'
 import order from './components/order.vue'
+import { emit } from '@tauri-apps/api/event';
+const emits= defineEmits(['showDeskDrawer'])
+
 </script>
 
 <style scoped></style>

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

@@ -70,9 +70,10 @@
       </div>
     </div>
     <div class="w-[500px] h-full overflow-hidden border-l border-gray-200">
-      <rightOrder></rightOrder>
+      <rightOrder @showDeskDrawer="catgroyClick"></rightOrder>
     </div>
     <OrderDrawer v-model:show="show" />
+    <deskDrawer v-model:show="deskShow" />
   </div>
 </template>
 <script setup>
@@ -83,7 +84,7 @@ import { useI18n } from 'vue-i18n'
 import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
 import rightOrder from './components/rightOrder/rightOrder.vue'
 import OrderDrawer from './components/order-drawer.vue'
-
+import deskDrawer from './components/desk-drawer.vue'
 const { t } = useI18n()
 const store = useStore()
 const { count } = storeToRefs(store)
@@ -187,6 +188,12 @@ const scrollToPosition = () => {
     behavior: 'smooth',
   })
 }
+
+// 挂单桌子
+const deskShow = ref(false)
+const catgroyClick = () => {
+  deskShow.value = true
+}
 </script>
 <style scoped>
 ::-webkit-scrollbar-thumb {

+ 162 - 7
src/views/order/index.vue

@@ -1,9 +1,164 @@
+<!-- 代码已包含 CSS:使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
+
 <template>
-    <div>
-        <swiper-container>
-  <swiper-slide>Slide 1</swiper-slide>
-  <swiper-slide>Slide 2</swiper-slide>
-  <swiper-slide>Slide 3</swiper-slide>
-</swiper-container>
+  <div class=" bg-gray-50 p-8 bg-white">
+    <div class="mx-auto w-full">
+      <!-- Search Area -->
+      <div class="mb-6 flex items-center gap-4">
+        <el-input v-model="searchKeyword" placeholder="Enter Keywords To Search" class="!rounded-button">
+          <template #append>
+            <el-icon>
+              <Search />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-select v-model="classification" placeholder="Product classification filtering" class="w-3 !rounded-button">
+          <el-option v-for="item in classifications" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <div class="flex items-center gap-2">
+          <span class="whitespace-nowrap text-gray-600">Trading Hours:</span>
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="—"
+            start-placeholder="Please enter the time" end-placeholder="Please enter the time"
+            class="w-[400px] !rounded-button" />
+        </div>
+
+        <el-button type="primary" class="!rounded-button" @click="handleReset">
+          Reset
+        </el-button>
+      </div>
+
+      <!-- Table -->
+      <!-- 内容居中 -->
+      <el-table :data="tableData" class="w-full" :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ textAlign: 'center' }">
+        <el-table-column prop="orderNumber" label="Order Number" width="120" />
+        <el-table-column prop="employeeId" label="Employee ID" width="120" />
+        <el-table-column prop="classification" label="Classification" />
+        <el-table-column prop="cashierName" label="Cashier's Name" width="150" />
+        <el-table-column prop="amountReceivable" label="Amount Receivable">
+          <template #default="{ row }">
+            ${{ row.amountReceivable }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="tradingHours" label="Trading Hours" width="150" />
+        <el-table-column prop="orderUpload" label="Order Upload" />
+        <el-table-column label="Operation" width="100">
+          <template #default="{ row }">
+            <el-button type="primary" link class="!rounded-button text-orange-500" @click="handleDetails(row)">
+              Details
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+
     </div>
-</template>
+    <!-- Pagination -->
+    <div class="fixed bottom-5 right-5 flex items-center justify-between">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50]"
+        :total="total" layout="prev, pager, next, sizes" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+const searchKeyword = ref('');
+const classification = ref('');
+const dateRange = ref([]);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(600);
+console.log('total', total);
+const classifications = [
+  { value: 'seasonal', label: 'Seasonal Hot Dishes' },
+  { value: 'regular', label: 'Regular Menu' },
+  { value: 'drinks', label: 'Beverages' },
+  { value: 'desserts', label: 'Desserts' },
+];
+
+const tableData = [
+  {
+    orderNumber: '00001',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Emma Thompson',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00002',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Michael Chen',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00003',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Sarah Wilson',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00004',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'David Miller',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00005',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'Rachel Anderson',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+  {
+    orderNumber: '00006',
+    employeeId: '12312123',
+    classification: 'Seasonal Hot Dishes',
+    cashierName: 'James Parker',
+    amountReceivable: 90,
+    tradingHours: '2025-04-25',
+    orderUpload: '2025-04-25',
+  },
+];
+
+const handleReset = () => {
+  searchKeyword.value = '';
+  classification.value = '';
+  dateRange.value = [];
+};
+const handleDetails = (row) => {
+  console.log('row', row);
+  router.push({ path: '/order/orderDetail', query: { id: row.orderNumber } });
+};
+</script>
+
+<style scoped>
+.el-input__wrapper {
+  background-color: white !important;
+}
+
+.el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
+</style>

+ 226 - 0
src/views/order/orderDetail.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="bg-white rounded-lg  p-8">
+    <!-- Header -->
+    <div class="flex justify-between items-center mb-8">
+      <div>
+        <h1 class="text-2xl font-medium">Order Details</h1>
+        <p class="text-gray-500 mt-1">Order #{{ orderNumber }}</p>
+      </div>
+      <button
+        class="!rounded-button bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 flex items-center whitespace-nowrap"
+        @click="$router.push('/order/orderList')">
+        <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order12.png" alt="">
+        Back Home
+      </button>
+    </div>
+    <el-divider />
+    <!-- Order Information Grid -->
+    <div class="grid grid-cols-3 gap-8 mb-8 text-sm">
+      <div class="space-y-6">
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/Order1.svg" alt="">Order Number
+          </div>
+          <div>{{ orderNumber }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order2.svg" alt="">Order Transaction Time
+          </div>
+          <div>{{ orderTime }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order3.svg" alt="">Trader's Name
+          </div>
+          <div>{{ traderName }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order4.svg" alt="">Employee ID
+          </div>
+          <div>{{ employeeId }}</div>
+        </div>
+      </div>
+
+      <div class="space-y-6">
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order5.png" alt="">Amount Receivable
+          </div>
+          <div>$ {{ amount }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order6.svg" alt="">Order Upload Time
+          </div>
+          <div>{{ uploadTime }}</div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order7.svg" alt="">Order Status
+          </div>
+          <div>
+            <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">
+              {{ orderStatus }}
+            </span>
+          </div>
+        </div>
+        <div class="flex items-start">
+          <div class="w-48 text-gray-500 flex items-center">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order8.png" alt="">Payment Method
+          </div>
+          <div>{{ paymentMethod }}</div>
+        </div>
+      </div>
+
+      <div>
+        <!-- Additional Information -->
+        <div class="mb-4">
+          <div class="flex items-center">
+            <div class="w-48 text-gray-500">
+              <img class="h-5 w-5  mr-2 inline" src="@/assets/img/desk/order11.png" alt="">Commodity Classification
+            </div>
+            <div>
+              <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">
+                {{ commodityType }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex flex-col space-y-2">
+          <button
+            class="!rounded-button flex-1 border border-orange-500 text-orange-500 hover:bg-orange-50 px-4 py-3 flex items-center justify-center whitespace-nowrap"
+            @click="handleRefund">
+            <img class="h-5 w-5  mr-2" src="@/assets/img/desk/order9.png" alt="">
+            Refund
+          </button>
+          <button
+            class="!rounded-button flex-1 bg-orange-500 hover:bg-orange-600 text-white px-4 py-3 flex items-center justify-center whitespace-nowrap"
+            @click="handlePrint">
+            <img class="h-5 w-5  mr-2 bg-white rounded-full" src="@/assets/img/desk/order10.png" alt="">
+            Print
+          </button>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+
+  <div class="bg-white p-6 pt-0 mb-10">
+    <!-- Transaction Details -->
+    <el-table :data="transactionDetails" class="mb-8">
+      <el-table-column prop="serialNumber" label="Transaction Serial Number" align="left" />
+      <el-table-column prop="balance" label="Balance" align="left" />
+      <el-table-column prop="wallet" label="Wallet" align="left" />
+    </el-table>
+
+    <!-- Order Details -->
+    <el-table :data="orderDetails">
+      <el-table-column prop="number" label="Number" align="left" />
+      <el-table-column prop="item" label="Item" align="left" />
+      <el-table-column prop="unit" label="Unit" align="left" />
+      <el-table-column prop="quantity" label="Quantity" align="left" />
+      <el-table-column prop="specifications" label="Specifications" align="left" />
+      <el-table-column prop="unitPrice" label="Unit Price" align="right" />
+      <el-table-column prop="transactionAmount" label="Transaction Amount" align="right" />
+    </el-table>
+
+  </div>
+  <el-dialog class="top-1/4" v-model="showRefundDialog" :show-close="false" width="400">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header">
+        <h4 :id="titleId" :class="titleClass" class="text-center">Reason for refund</h4>
+      </div>
+    </template>
+    <el-input v-model="refundText" placeholder="Please enter the reason for refund"></el-input>
+    <el-button class="w-full mt-3" type="primary" @click="closeFundDialog">Confirm refund</el-button> 
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+
+const orderNumber = ref('123456788987654');
+const orderTime = ref('2023-09-09 24:00:00');
+const traderName = ref('12357633');
+const employeeId = ref('4567645');
+const amount = ref('76.0');
+const uploadTime = ref('2024-2-7 15:09:00');
+const orderStatus = ref('Completed');
+const paymentMethod = ref('Offline payment');
+const commodityType = ref('Hot Dishes');
+const showRefundDialog = ref(false);
+const refundText = ref('');
+const closeFundDialog = ()=>{
+  console.log('Refund');
+  showRefundDialog.value = false;
+}
+const handleBackHome = () => {
+  console.log('Navigate back home');
+};
+
+const handleRefund = () => {
+  console.log('Process refund');
+  showRefundDialog.value = true;
+};
+
+const handlePrint = () => {
+  console.log('Print order details');
+};
+
+const transactionDetails = ref([
+  {
+    serialNumber: '12345',
+    balance: 1000,
+    wallet: 'Wallet A'
+  },
+  {
+    serialNumber: '67890',
+    balance: 2000,
+    wallet: 'Wallet B'
+  }
+]);
+
+const orderDetails = ref([
+  {
+    number: '001',
+    item: 'Product A',
+    unit: 'Piece',
+    quantity: 5,
+    specifications: 'Standard',
+    unitPrice: 10.5,
+    transactionAmount: 52.5
+  },
+  {
+    number: '002',
+    item: 'Product B',
+    unit: 'Box',
+    quantity: 3,
+    specifications: 'Large',
+    unitPrice: 20.0,
+    transactionAmount: 60.0
+  }
+]);
+
+const totalAmount = ref(orderDetails.value.reduce((sum, order) => sum + order.transactionAmount, 0));
+
+const formatPrice = (row, column, cellValue) => {
+  return `$${cellValue.toFixed(2)}`;
+};
+</script>
+
+<style scoped>
+.order-details {
+  font-family: 'Inter', sans-serif;
+}
+
+.el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
+</style>