代客下单增加商品称重弹窗

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

@@ -1,9 +1,9 @@
 <template>
   <div class="simple-Keyboard-number">
-    <div class="carts">
+    <div class="keybord-box">
       <div class="box_status">
         <slot name="input">
-          <span> {{ number }}</span>
+          <span>{{ number }}</span>
         </slot>
       </div>
       <slot name="tips"></slot>
@@ -28,15 +28,25 @@
               </div>
               <div class="key-line">
                 <div class="key" @click="clearFunction">
-                  <slot name="clear"> </slot>
+                  <slot name="clear"></slot>
                 </div>
                 <div class="key" @click="keyboradAdd('0')">0</div>
                 <div class="key" style="font-size: 31px" @click="keyboradReduce">
-                  <svg t="1723453480343" class="icon" viewBox="0 0 1664 1024" version="1.1"
+                  <svg
-                    xmlns="http://www.w3.org/2000/svg" p-id="1467" width="32" height="32">
+                    t="1723453480343"
+                    class="icon"
+                    viewBox="0 0 1664 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    p-id="1467"
+                    width="32"
+                    height="32"
+                  >
                     <path
                       d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
-                      fill="#333333" p-id="1468"></path>
+                      fill="#333333"
+                      p-id="1468"
+                    ></path>
                   </svg>
                 </div>
               </div>
@@ -50,88 +60,88 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
-export default {
+const props = defineProps({
-  props: {
+  isCanEmpty: {
-    isCanEmpty: {
+    type: Boolean,
-      type: Boolean,
+    default: false,
-      default: false,
+  },
-    },
+  maxTips: {
-    maxTips: {
+    type: String,
-      type: String,
+    default: "输入值超范围",
-      default: "输入值超范围",
+  },
-    },
+  showConfirm: {
-    showConfirm: {
+    type: Boolean,
-      type: Boolean,
+    default: false,
-      default: false,
+  },
-    },
+  disabled: {
-    disabled:{
+    type: Boolean,
-      type:Boolean,
+    default: false,
-      default:false
+  },
-    },
+  max: {
-    max: {
+    type: [Number, String],
-      type: [Number, String],
+    default: Infinity,
-      default: Infinity,
+  },
-    },
+  value: {
-    value: {
+    type: [String, Number],
-      type: [String, Number],
+    default: 0,
-      default: 0,
+  },
-    },
+  // 是否启用小数
-    // 是否启用小数
+  isFloat: {
-    isFloat: {
+    type: Boolean,
-      type: Boolean,
+    default: false,
-      default: false,
+  },
+});
+
+let number = ref(0);
+
+watch(
+  () => props.value,
+  (newval) => {
+    number.value = newval;
+  }
+);
+const emits = defineEmits(["input", "confirm"]);
+watch(
+  () => number.value,
+  (newval) => {
+    emits("input", newval);
+  }
+);
+
+function clearFunction() {
+  if (props.isFloat) {
+    return keyboradAdd(".");
+  }
+}
+function keyboradAdd(n) {
+  if (n == "." && `${number.value}`.includes(".")) {
+    return;
+  }
+  if (Number(number.value) == 0) {
+    if (n == ".") {
+      return (number.value = 0 + n);
     }
-  },
+  }
-  data() {
+  const newval = number.value + n;
-    return {
+  if (newval * 1 > props.max * 1) {
-      number: 0,
+    return ElMessage.error(this.maxTips);
-    };
+  }
-  },
+  number.value = newval;
-  watch: {
+}
-    value(newval) {
+function keyboradReduce() {
-      this.number = newval;
+  if (number.value.length <= 1) {
-    },
+    return (number.value = props.isCanEmpty ? "" : "0");
-    number(newval) {
+  }
-      this.$emit("input", newval);
+  number.value = `${number.value}`.substring(0, number.value.length - 1);
-    },
+}
-  },
+function keyboradConfirm() {
-  methods: {
+  this.$emit("confirm", number.value);
-    clearFunction() {
+}
-      if (this.isFloat) {
+
-        return this.keyboradAdd('.')
+onMounted(() => {
-      }
+  number.value = `${props.value}`;
-      // this.$emit("clear", this.number);
+});
-    },
-    keyboradAdd(n) {
-      if (n == '.' && `${this.number}`.includes('.')) {
-        return
-      }
-      if (Number(this.number) == 0) {
-        if (n == '.') {
-          return (this.number = 0 + n);
-        }
-      }
-      const newval = this.number + n;
-      if (newval * 1 > this.max * 1) {
-        return this.$message(this.maxTips);
-      }
-      this.number = newval;
-    },
-    keyboradReduce() {
-      if (this.number.length <= 1) {
-        return (this.number = this.isCanEmpty ? "" : "0");
-      }
-      this.number = `${this.number}`.substring(0, this.number.length - 1);
-    },
-    keyboradConfirm() {
-      this.$emit("confirm", this.number);
-    },
-  },
-  mounted() {
-    this.number = `${this.value}`;
-  },
-};
 </script>
 
 <style lang="scss" scoped>
@@ -267,21 +277,21 @@ export default {
   bottom: 0;
 }
 
-.carts {
+.keybord-box {
   flex-direction: column;
   background: #fff;
   height: 100%;
 }
 
-.carts .title,
+.keybord-box .title,
-.carts {
+.keybord-box {
   display: flex;
 
   align-items: center;
   width: 100%;
 }
 
-.carts .title {
+.keybord-box .title {
   justify-content: space-between;
   height: 64px;
   border-bottom: 1px solid #ebebeb;
@@ -289,24 +299,23 @@ export default {
   padding-top: 30px;
 }
 
-.carts .title .left {
+.keybord-box .title .left {
   font-family: PingFangSC-Medium;
   font-weight: 500;
   font-size: 18px;
   color: #000;
 }
 
-.carts .title .right {
+.keybord-box .title .right {
   font-size: 14.4px;
   cursor: pointer;
 }
 
-.carts .box_status {
+.keybord-box .box_status {
   margin-bottom: 20px;
   width: 370px;
   height: 58px;
   background: #fff;
-  border: 1px solid #dcdfe6;
   border-radius: 4px;
 
   display: flex;
@@ -322,7 +331,7 @@ export default {
   text-align: center;
 }
 
-.carts .box_status span {
+.keybord-box .box_status span {
   padding: 0 5px;
 }
 </style>

src/views/tool/Instead/components/popup-weight-goods.vue

@@ -1,119 +1,125 @@
 <template>
   <div class="select_desk">
-    <el-dialog width="410px" title="套餐" :visible.sync="show">
+    <el-dialog width="410px" title="套餐" v-model="show">
       <div class="select_desk_dialog u-p-b-20">
         <key-board isCanEmpty v-model="number" isFloat @clear="clear">
-          <div slot="clear">.</div>
+          <template #clear>
-          <div slot="input" class="u-font-14 u-row-between u-flex w-full u-text-left">
+            <div>.</div>
-            <div class="">
+          </template>
-              <div>单价</div>
+          <template #input>
-              <div class="u-m-t-10">
+            <div class="u-font-14 u-row-between u-flex w-full u-text-left">
-                <el-tag type="primary" size="medium">￥{{ price }}/{{ item.unitName }}</el-tag>
+              <div class="">
+                <div>单价</div>
+                <div class="u-m-t-10">
+                  <el-tag type="primary" size="medium">￥{{ price }}/{{ item.unitName }}</el-tag>
+                </div>
+              </div>
+              <div>
+                <div class="u-font-14">重量</div>
+                <div class="u-m-t-10">
+                  <el-input
+                    placeholder="请输入重量"
+                    v-model="number"
+                    @input="inputNumber"
+                    @change="inputChange"
+                    @focus="inputFocus"
+                    @blur="inputBlur"
+                    :type="focus ? 'number' : 'text'"
+                  >
+                    <template #append>
+                      {{ item.unitName }}
+                    </template>
+                  </el-input>
+                </div>
               </div>
             </div>
-            <div>
+          </template>
-              <div class="u-font-14">重量</div>
-              <div class="u-m-t-10">
-                <el-input placeholder="请输入重量" v-model="number" @input="inputNumber" @change="inputChange"
-                  @focus="inputFocus" @blur="inputBlur" :type="focus ? 'number' : 'text'">
-                  <template slot="append">{{ item.unitName }}</template>
-                </el-input>
-              </div>
-            </div>
-          </div>
         </key-board>
         <div class="price u-text-left w-full">￥ {{ allPrice }}</div>
 
         <div class="confirm_btns u-flex u-m-t-20">
-          <el-button style="width: 100%;" type="primary" size="medium" @click="confirm">确定</el-button>
+          <el-button style="width: 100%" type="primary" size="medium" @click="confirm">
+            确定
+          </el-button>
         </div>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
-<script>
+<script setup>
 import keyBoard from "./keyboard.vue";
-export default {
+const props = defineProps({
-  components: { keyBoard },
+  payMoney: {
-  props: {
+    type: [Number, String],
-    payMoney: {
+    default: 0,
-      type: [Number, String],
-      default: 0,
-    },
-    isShowVipPrice:{
-      type:Boolean,
-      default:false
-    }
   },
-  data() {
+  isShowVipPrice: {
-    return {
+    type: Boolean,
-      guazhangRen: "",
+    default: false,
-      number: "",
-      show: false,
-      hasOpen: false,
-      loading: false,
-      tips: "",
-      focus: false,
-      data: {},
-      item: ""
-    };
   },
-  watch: {
+});
-    number(newval) {
+
-    },
+const state = reactive({
-  },
+  guazhangRen: "",
-  computed:{
+  number: "",
-    allPrice(){
+  show: false,
-      return (this.price*this.number).toFixed(2);
+  hasOpen: false,
-    },
+  loading: false,
-    price(){
+  tips: "",
-      if(!this.item){
+  focus: false,
-        return 0
+  data: {},
-      }
+  item: "",
-      return this.item.lowPrice;
+});
-    }
+const { guazhangRen, number, show, hasOpen, loading, tips, focus, data, item } = toRefs(state);
-  },
+const price = computed(() => {
-  methods: {
+  if (!item.value) {
-    inputFocus() {
+    return 0;
-      this.focus = true;
+  }
-    },
+  return item.value.lowPrice;
-    inputBlur() {
+});
-      this.focus = false;
+const allPrice = computed(() => {
-    },
+  return (price.value * number.value).toFixed(2);
-    inputNumber(e) {
+});
-      console.log(e);
+function inputFocus() {
-      
+  focus.value = true;
-    },
+}
-    inputChange(e) {
+function inputBlur() {
-      console.log(e);
+  focus.value = false;
-    },
+}
-    clear(e) {
+function inputNumber(e) {
-      console.log(e);
+  console.log(e);
-      this.number = "";
+}
-      this.item=""
+function inputChange(e) {
-    },
+  console.log(e);
-    confirm() {
+}
-      if(this.number*1<=0){
+function clear(e) {
-        return this.$message("请输入重量");
+  console.log(e);
-      }
+  number.value = "";
-      this.$emit("confirm", this.item, (this.number*1).toFixed(2));
+  item.value = "";
-      this.close();
+}
-    },
+const emits = defineEmits(["confirm"]);
-    open(item) {
+function confirm() {
-      console.log(item);
+  if (number.value * 1 <= 0) {
-      this.item = item
+    return ElMessage.error("请输入重量");
-      this.show = true;
+  }
-    },
+  emits("confirm", item.value, (number.value * 1).toFixed(2));
-    close() {
+  close();
-      this.show = false;
+}
-      this.number = "";
+function open(item) {
-      this.item=""
+  console.log(item);
-    },
+  item.value = item;
-  },
+  show.value = true;
-  mounted() { },
+}
-};
+function close() {
+  show.valuie = false;
+  number.value = "";
+  item.value = "";
+}
+defineExpose({
+  open,
+  close,
+});
 </script>
 
 <style lang="scss" scoped>

src/views/tool/Instead/index.vue

@@ -134,11 +134,18 @@
       </div>
     </div>
 
+    <!-- 多规格选择确认 -->
     <dialogGoodsSel ref="refSelSku" @confirm="skuSelConfirm"></dialogGoodsSel>
+    <!-- 备注 -->
     <note ref="refNote" @confirm="noteConfirm"></note>
+    <!-- 打包数量 -->
     <pack ref="refPack" @confirm="packConfirm"></pack>
+    <!-- 临时菜 -->
     <addLingShiCai ref="refAddLingShiCai" @confirm="addLingShiCaiConfirm"></addLingShiCai>
+    <!-- 改价 -->
     <changePrice ref="refChangePrice" @confirm="changePriceConfirm"></changePrice>
+    <!-- 称重商品 -->
+    <changeWeight ref="refChangeWeight" @confirm="changeWeightConfirm"></changeWeight>
   </div>
 </template>
 <script setup>
@@ -146,6 +153,7 @@ import Controls from "./components/control.vue";
 import note from "./components/note.vue";
 import pack from "./components/pack.vue";
 import changePrice from "./components/popup-cart-changePrice.vue";
+import changeWeight from "./components/popup-weight-goods.vue";
 import addLingShiCai from "./components/popup-linshiCai.vue";
 import GoodsItem from "./components/goods-item.vue";
 import dialogGoodsSel from "./components/dialog-goods-sel.vue";
@@ -155,6 +163,13 @@ import productApi from "@/api/product/index";
 import tableApi from "@/api/account/table";
 import $status from "@/views/tool/table/status.js";
 
+// 称重商品
+const refChangeWeight = ref();
+function changeWeightConfirm(e) {}
+function showWeight(item) {
+  refChangeWeight.value.open(item);
+}
+
 //桌台
 const tableSearchText = ref("");
 const tableList = ref([]);
@@ -315,8 +330,8 @@ function goodsClick(item) {
     return;
   }
   //称重
-  if (item.type == "sku") {
+  if (item.type == "weight") {
-    refSelSku.value.open(item);
+    showWeight(item);
     return;
   }
 }