对接台桌列表

src/components/leftMenu.vue

@@ -99,7 +99,7 @@ const menus = ref([
         }
 
         &.more {
-            margin-top: 30px;
+            margin-top: 50px;
         }
 
         .icon {

src/components/remarkModal.vue

@@ -1,9 +1,9 @@
 <template>
     <el-dialog title="备注" width="800" v-model="dialogVisible">
         <div class="tag_wrap">
-            <div class="item" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
+            <el-button plain type="primary" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
                 {{ item.remark }}
-            </div>
+            </el-button>
         </div>
         <div class="content">
             <el-input type="textarea" :rows="6" v-model="remark" placeholder="请输入备注"></el-input>
@@ -45,21 +45,6 @@ defineExpose({
 .tag_wrap {
     display: flex;
     flex-wrap: wrap;
-    gap: 20px;
-
-    .item {
-        padding: 10px 20px;
-        border: 1px solid var(--primary-color);
-        border-radius: 4px;
-        color: var(--primary-color);
-        font-size: var(--el-font-size-base);
-
-        &:hover {
-            cursor: pointer;
-            background-color: var(--primary-color);
-            color: #fff;
-        }
-    }
 }
 
 .content {

src/components/skuModal.vue

@@ -5,15 +5,19 @@
             <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
                 <div class="title">{{ item.name }}</div>
                 <div class="sku_wrap">
-                    <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
-                        @click="selectedSku(index, i)">{{ val.name }}</div>
+                    <!-- <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
+                        @click="selectedSku(index, i)">{{ val.name }}</div> -->
+                    <el-button :plain="!val.active" type="primary" v-for="(val, i) in  item.value" :key="i"
+                        @click="selectedSku(index, i)">{{ val.name }}</el-button>
                 </div>
             </div>
         </div>
         <div class="footer">
-            <div class="info" v-if="goodsInfo.id">
-                <span>库存：{{ goodsInfo.stockNumber }}</span>
-                <span>￥{{ goodsInfo.salePrice }}</span>
+            <div class="info">
+                <template v-if="goodsInfo.id">
+                    <span>库存：{{ goodsInfo.stockNumber }}</span>
+                    <span>￥{{ goodsInfo.salePrice }}</span>
+                </template>
             </div>
             <div class="btn_wrap">
                 <div class="btn">
@@ -165,8 +169,9 @@ defineExpose({
     padding-top: 100px;
 
     .info {
-        padding-bottom: 20px;
+        height: 50px;
         display: flex;
+        align-items: center;
         justify-content: space-between;
         font-size: 20px;
     }

src/components/takeFoodCode.vue

@@ -1,13 +1,80 @@
 <!-- 取餐号组件 -->
 <template>
-    <el-dialog title="修改取餐号" v-model="dialogVisible">
-        <el-input v-model="number" placeholder="请输入取餐号"></el-input>
+    <el-dialog title="修改取餐号" width="600" v-model="dialogVisible" @open="opne">
+        <el-input v-model="number" placeholder="请输入取餐号" readonly></el-input>
+        <div class="keybord_wrap">
+            <div v-for="item in 9" :key="item">
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(item)">{{ item }}</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" disabled style="width: 100%;">.</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" style="width: 100%;" @click="inputHandle(0)">0</el-button>
+            </div>
+            <div>
+                <el-button plain type="info" icon="CloseBold" style="width: 100%;" @click="delHandle"></el-button>
+            </div>
+        </div>
+        <div class="footer">
+            <el-button type="primary" style="width: 100%;" @click="confirmHandle">确认</el-button>
+        </div>
     </el-dialog>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, defineExpose, defineEmits } from 'vue';
 
 const dialogVisible = ref(false)
 const number = ref('')
-</script>
+
+const emit = defineEmits(['success'])
+
+function show() {
+    dialogVisible.value = true
+}
+
+function opne() {
+    number.value = ''
+}
+
+// 输入
+function inputHandle(n) {
+    number.value += n
+}
+
+// 删除
+function delHandle() {
+    if (!number.value) return
+    number.value = number.value.substring(0, number.value.length - 1)
+}
+
+// 确认
+function confirmHandle() {
+    emit('success', number.value)
+    dialogVisible.value = false
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-input__inner) {
+    height: 70px;
+    font-size: 36px;
+}
+
+.keybord_wrap {
+    padding: 20px 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr;
+    gap: 20px;
+
+    :deep(.el-button--large) {
+        height: 70px;
+    }
+}
+</style>