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

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

@@ -1,6 +1,6 @@
 <template>
   <div class="simple-Keyboard-number">
-    <div class="carts">
+    <div class="keybord-box">
       <div class="box_status">
         <slot name="input">
           <span>{{ number }}</span>
@@ -32,11 +32,21 @@
                 </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,9 +60,8 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
-export default {
+const props = defineProps({
-  props: {
   isCanEmpty: {
     type: Boolean,
     default: false,
@@ -67,7 +76,7 @@ export default {
   },
   disabled: {
     type: Boolean,
-      default:false
+    default: false,
   },
   max: {
     type: [Number, String],
@@ -81,57 +90,58 @@ export default {
   isFloat: {
     type: Boolean,
     default: false,
+  },
+});
+
+let number = ref(0);
+
+watch(
+  () => props.value,
+  (newval) => {
+    number.value = newval;
   }
-  },
+);
-  data() {
+const emits = defineEmits(["input", "confirm"]);
-    return {
+watch(
-      number: 0,
+  () => number.value,
-    };
+  (newval) => {
-  },
+    emits("input", newval);
-  watch: {
-    value(newval) {
-      this.number = newval;
-    },
-    number(newval) {
-      this.$emit("input", newval);
-    },
-  },
-  methods: {
-    clearFunction() {
-      if (this.isFloat) {
-        return this.keyboradAdd('.')
   }
-      // this.$emit("clear", this.number);
+);
-    },
+
-    keyboradAdd(n) {
+function clearFunction() {
-      if (n == '.' && `${this.number}`.includes('.')) {
+  if (props.isFloat) {
-        return
+    return keyboradAdd(".");
-      }
-      if (Number(this.number) == 0) {
-        if (n == '.') {
-          return (this.number = 0 + n);
   }
 }
-      const newval = this.number + n;
+function keyboradAdd(n) {
-      if (newval * 1 > this.max * 1) {
+  if (n == "." && `${number.value}`.includes(".")) {
-        return this.$message(this.maxTips);
+    return;
   }
-      this.number = newval;
+  if (Number(number.value) == 0) {
-    },
+    if (n == ".") {
-    keyboradReduce() {
+      return (number.value = 0 + n);
-      if (this.number.length <= 1) {
-        return (this.number = this.isCanEmpty ? "" : "0");
     }
-      this.number = `${this.number}`.substring(0, this.number.length - 1);
+  }
-    },
+  const newval = number.value + n;
-    keyboradConfirm() {
+  if (newval * 1 > props.max * 1) {
-      this.$emit("confirm", this.number);
+    return ElMessage.error(this.maxTips);
-    },
+  }
-  },
+  number.value = newval;
-  mounted() {
+}
-    this.number = `${this.value}`;
+function keyboradReduce() {
-  },
+  if (number.value.length <= 1) {
-};
+    return (number.value = props.isCanEmpty ? "" : "0");
+  }
+  number.value = `${number.value}`.substring(0, number.value.length - 1);
+}
+function keyboradConfirm() {
+  this.$emit("confirm", number.value);
+}
+
+onMounted(() => {
+  number.value = `${props.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,10 +1,13 @@
 <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>
+          </template>
+          <template #input>
+            <div class="u-font-14 u-row-between u-flex w-full u-text-left">
               <div class="">
                 <div>单价</div>
                 <div class="u-m-t-10">
@@ -14,41 +17,50 @@
               <div>
                 <div class="u-font-14">重量</div>
                 <div class="u-m-t-10">
-                <el-input placeholder="请输入重量" v-model="number" @input="inputNumber" @change="inputChange"
+                  <el-input
-                  @focus="inputFocus" @blur="inputBlur" :type="focus ? 'number' : 'text'">
+                    placeholder="请输入重量"
-                  <template slot="append">{{ item.unitName }}</template>
+                    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>
+          </template>
         </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 },
-  props: {
   payMoney: {
     type: [Number, String],
     default: 0,
   },
   isShowVipPrice: {
     type: Boolean,
-      default:false
+    default: false,
-    }
   },
-  data() {
+});
-    return {
+
+const state = reactive({
   guazhangRen: "",
   number: "",
   show: false,
@@ -57,63 +69,57 @@ export default {
   tips: "",
   focus: false,
   data: {},
-      item: ""
+  item: "",
-    };
+});
-  },
+const { guazhangRen, number, show, hasOpen, loading, tips, focus, data, item } = toRefs(state);
-  watch: {
+const price = computed(() => {
-    number(newval) {
+  if (!item.value) {
-    },
+    return 0;
-  },
-  computed:{
-    allPrice(){
-      return (this.price*this.number).toFixed(2);
-    },
-    price(){
-      if(!this.item){
-        return 0
   }
-      return this.item.lowPrice;
+  return item.value.lowPrice;
+});
+const allPrice = computed(() => {
+  return (price.value * number.value).toFixed(2);
+});
+function inputFocus() {
+  focus.value = true;
 }
-  },
+function inputBlur() {
-  methods: {
+  focus.value = false;
-    inputFocus() {
-      this.focus = true;
-    },
-    inputBlur() {
-      this.focus = false;
-    },
-    inputNumber(e) {
-      console.log(e);
-      
-    },
-    inputChange(e) {
-      console.log(e);
-    },
-    clear(e) {
-      console.log(e);
-      this.number = "";
-      this.item=""
-    },
-    confirm() {
-      if(this.number*1<=0){
-        return this.$message("请输入重量");
 }
-      this.$emit("confirm", this.item, (this.number*1).toFixed(2));
+function inputNumber(e) {
-      this.close();
+  console.log(e);
-    },
+}
-    open(item) {
+function inputChange(e) {
+  console.log(e);
+}
+function clear(e) {
+  console.log(e);
+  number.value = "";
+  item.value = "";
+}
+const emits = defineEmits(["confirm"]);
+function confirm() {
+  if (number.value * 1 <= 0) {
+    return ElMessage.error("请输入重量");
+  }
+  emits("confirm", item.value, (number.value * 1).toFixed(2));
+  close();
+}
+function open(item) {
   console.log(item);
-      this.item = item
+  item.value = item;
-      this.show = true;
+  show.value = true;
-    },
+}
-    close() {
+function close() {
-      this.show = false;
+  show.valuie = false;
-      this.number = "";
+  number.value = "";
-      this.item=""
+  item.value = "";
-    },
+}
-  },
+defineExpose({
-  mounted() { },
+  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;
   }
 }