增加代客下单页面

src/views/tool/Instead/components/control.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="controls">
+    <div class="input-number">
+      <div class="reduce">
+        <el-icon @click="carts.changeNumber(-1, carts.selCart)"><Minus /></el-icon>
+      </div>
+      <span class="text">{{ carts.selCart.number || 1 }}</span>
+      <div class="add">
+        <el-icon @click="carts.changeNumber(1, carts.selCart)"><Plus /></el-icon>
+      </div>
+    </div>
+    <el-button
+      v-for="(item, index) in controls"
+      :key="index"
+      v-bund="item"
+      :disabled="btnDisabled(item)"
+      @click="controlsClick(item)"
+    >
+      {{ returnLabel(item) }}
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+const number = ref(1);
+import { useCartsStore } from "@/store/modules/carts";
+const carts = useCartsStore();
+
+const controls = ref([
+  { label: "规格", key: "", disabled: false, per: "sku" },
+  { label: "赠送", key: "is_gift", disabled: false, per: "cart" },
+  { label: "打包", key: "is_pack", disabled: false, per: "cart" },
+  { label: "删除", key: "del", disabled: false, per: "cart" },
+  { label: "存单", key: "", disabled: false, per: "save" },
+  { label: "取单", key: "", disabled: false },
+  { label: "单品备注", key: "one-note", disabled: false, per: "one-note" },
+  { label: "整单备注", key: "all-note", disabled: false, per: "all-note" },
+  { label: "退菜", key: "", disabled: false, per: "order" },
+  { label: "免厨打", key: "is_print", disabled: false, per: "cart" },
+  { label: "单品改价", key: "", disabled: false, per: "cart" },
+  { label: "等叫", key: "", disabled: false, per: "cart" },
+  { label: "整单等叫", key: "", disabled: false, per: "all-wating" },
+]);
+
+const emits = defineEmits(["noteClick"]);
+function controlsClick(item) {
+  switch (item.key) {
+    case "is_gift":
+      carts.updateTag("is_gift", carts.selCart.is_gift ? 0 : 1);
+      break;
+    case "is_pack":
+      emits("packClick", carts.selCart.pack_number, carts.selCart.number);
+      break;
+    case "is_print":
+      carts.updateTag("is_print", carts.selCart.is_print ? 0 : 1);
+      break;
+    case "del":
+      carts.del(carts.selCart);
+      break;
+    case "save":
+      carts.saveCart();
+      break;
+    case "one-note":
+      emits("noteClick", true);
+      break;
+    case "all-note":
+      emits("noteClick", false);
+      break;
+    case "order":
+      carts.order();
+      break;
+    case "all-wating":
+      carts.allWating();
+      break;
+  }
+}
+const perList = computed(() => {
+  if (!carts.selCart.id) {
+    return ["all-wating", "all-note"];
+  }
+  if (carts.selCart.id) {
+    return ["cart", "save", "one-note", "all-note", "all-wating"];
+  }
+});
+
+function btnDisabled(item) {
+  return !perList.value.includes(item.per);
+}
+function returnLabel(item) {
+  if (item.key == "is_gift") {
+    return carts.selCart.is_gift ? "取消赠送" : "赠送";
+  }
+  if (item.key == "is_pack") {
+    return carts.selCart.is_pack ? "取消打包" : "打包";
+  }
+  if (item.key == "is_print") {
+    return carts.selCart.is_print ? "免厨打" : "打印";
+  }
+  return item.label;
+}
+</script>
+
+<style scoped lang="scss">
+$gap: 10px;
+.controls {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 106px;
+  padding: 14px 10px;
+  background-color: #f7f7fa;
+}
+.el-button + .el-button {
+  margin-top: $gap;
+  margin-left: 0;
+}
+.input-number {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  margin-bottom: $gap;
+  cursor: pointer;
+  .reduce,
+  .text,
+  .add {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 38px;
+  }
+  .text {
+    height: 48px;
+    font-size: 30px;
+    border-top: 1px solid #dcdfe6;
+    border-bottom: 1px solid #dcdfe6;
+  }
+  .reduce {
+  }
+  .add {
+  }
+}
+</style>