对接台桌列表

2024-02-28 15:02:31 +08:00
parent 56f9d83447
commit d65e3db7c0
17 changed files with 655 additions and 37 deletions
--- a/src/views/table/components/tableInfo.vue
+++ b/src/views/table/components/tableInfo.vue
@@ -0,0 +1,141 @@
+<!-- 空闲台桌 -->
+<template>
+    <div class="table_wrap">
+        <div class="header">
+            <span class="t">{{ props.tableInfo.name }}</span>
+            <div class="close" @click="close">
+                <el-icon class="icon">
+                    <Close />
+                </el-icon>
+            </div>
+        </div>
+        <div class="status_wrap">
+            <el-icon class="icon">
+                <Clock />
+            </el-icon>
+            <span class="t">{{ status[props.tableInfo.status] }}</span>
+        </div>
+        <div class="place_order">
+            <router-link class="btn" :to="{ name: 'home', query: { table_code: 1 } }">
+                <div class="top">
+                    <el-icon class="icon">
+                        <TakeawayBox />
+                    </el-icon>
+                    <span class="t">点单</span>
+                </div>
+                <span class="tips">开始新订单</span>
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineEmits } from 'vue'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+    tableInfo: {
+        type: Object,
+        default: {}
+    }
+})
+
+const status = ref({
+    'subscribe': '预定',
+    'closed': '关台',
+    'opening': '开台中',
+    'cleaning': '台桌清理中'
+})
+
+// 关闭
+function close() {
+    emit('close')
+}
+</script>
+
+<style scoped lang="scss">
+.table_wrap {
+    padding: 20px;
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .t {
+            font-size: 26px;
+        }
+
+        .close {
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+
+            .icon {
+                font-size: 30px;
+                color: #999;
+            }
+        }
+    }
+
+    .status_wrap {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+
+        .icon {
+            color: #666;
+            font-size: 24px;
+        }
+
+        .t {
+            color: #666;
+            margin-left: 4px;
+        }
+    }
+
+    .place_order {
+        background-color: #efefef;
+        height: calc(100vh - 180px);
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .btn {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-decoration: none;
+
+            .top {
+                background-color: var(--el-color-danger);
+                width: 130px;
+                height: 130px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                border-radius: 6px;
+
+                .icon {
+                    color: #fff;
+                    font-size: 50px;
+                }
+
+                .t {
+                    color: #fff;
+                }
+            }
+
+            .tips {
+                color: #999;
+                padding-top: 6px;
+            }
+        }
+    }
+}
+</style>