From 2d53c6ee0f6e8c3cfa4f6645ee5b3d17558e2f90 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Mon, 24 Feb 2025 14:17:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4websocket=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E5=A4=B1=E8=B4=A5=E6=97=B6=E7=9A=84=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/websocket.ts                        |  40 +--
 .../tool/Instead/components/keyboard.vue      | 328 +++++++++++++++++
 .../Instead/components/popup-weight-goods.vue | 330 ++++++++++++++++++
 src/views/tool/Instead/index.vue              |   7 +
 4 files changed, 683 insertions(+), 22 deletions(-)
 create mode 100644 src/views/tool/Instead/components/keyboard.vue
 create mode 100644 src/views/tool/Instead/components/popup-weight-goods.vue

diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts
index 3a2d7ce..a7fba09 100644
--- a/src/utils/websocket.ts
+++ b/src/utils/websocket.ts
@@ -58,19 +58,17 @@ class WebSocketManager {
     this.client.onopen = () => {
       this.connected = true;
       console.log("WebSocket 连接已建立");
-      ElNotification.success('WebSocket 连接已建立')
+      // ElNotification.success('WebSocket 连接已建立')
       this.sendMessage(this.initParams)
     };
     this.client.onclose = () => {
       if (!this.connected) {
-        ElMessageBox.alert('WebSocket 连接已断开', 'Title', {
-          // if you want to disable its autofocus
-          // autofocus: false,
-          confirmButtonText: '立即重连',
-          callback: () => {
-            this.sendMessage(this.initParams)
-          },
-        })
+        // ElMessageBox.alert('WebSocket 连接已断开', 'Title', {
+        //   confirmButtonText: '立即重连',
+        //   callback: () => {
+        //     this.sendMessage(this.initParams)
+        //   },
+        // })
       }
       this.connected = false;
       console.log("WebSocket 连接已断开");
@@ -78,19 +76,17 @@ class WebSocketManager {
     };
     this.client.onerror = (error) => {
       console.error("WebSocket 发生错误:", error);
-      ElNotification({
-        title: "提示",
-        message: "WebSocket 发生错误",
-        type: "error",
-      });
-      ElMessageBox.alert('WebSocket 发生错误', 'Title', {
-        // if you want to disable its autofocus
-        // autofocus: false,
-        confirmButtonText: '立即重连',
-        callback: () => {
-          this.sendMessage(this.initParams)
-        },
-      })
+      // ElNotification({
+      //   title: "提示",
+      //   message: "WebSocket 发生错误",
+      //   type: "error",
+      // });
+      // ElMessageBox.alert('WebSocket 发生错误', 'Title', {
+      //   confirmButtonText: '立即重连',
+      //   callback: () => {
+      //     this.sendMessage(this.initParams)
+      //   },
+      // })
     };
     this.client.onmessage = (event) => {
       const message = event.data;
diff --git a/src/views/tool/Instead/components/keyboard.vue b/src/views/tool/Instead/components/keyboard.vue
new file mode 100644
index 0000000..1a2c624
--- /dev/null
+++ b/src/views/tool/Instead/components/keyboard.vue
@@ -0,0 +1,328 @@
+<template>
+  <div class="simple-Keyboard-number">
+    <div class="carts">
+      <div class="box_status">
+        <slot name="input">
+          <span> {{ number }}</span>
+        </slot>
+      </div>
+      <slot name="tips"></slot>
+      <div class="number_list_box" v-if="!disabled">
+        <div class="yd-keyboard">
+          <div class="mini-number-box1">
+            <div class="mini-number">
+              <div class="key-line">
+                <div class="key" @click="keyboradAdd('1')">1</div>
+                <div class="key" @click="keyboradAdd('2')">2</div>
+                <div class="key" @click="keyboradAdd('3')">3</div>
+              </div>
+              <div class="key-line">
+                <div class="key" @click="keyboradAdd('4')">4</div>
+                <div class="key" @click="keyboradAdd('5')">5</div>
+                <div class="key" @click="keyboradAdd('6')">6</div>
+              </div>
+              <div class="key-line">
+                <div class="key" @click="keyboradAdd('7')">7</div>
+                <div class="key" @click="keyboradAdd('8')">8</div>
+                <div class="key" @click="keyboradAdd('9')">9</div>
+              </div>
+              <div class="key-line">
+                <div class="key" @click="clearFunction">
+                  <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"
+                    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>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template v-if="showConfirm">
+        <div class="submit" @click="keyboradConfirm">确认</div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isCanEmpty: {
+      type: Boolean,
+      default: false,
+    },
+    maxTips: {
+      type: String,
+      default: "输入值超范围",
+    },
+    showConfirm: {
+      type: Boolean,
+      default: false,
+    },
+    disabled:{
+      type:Boolean,
+      default:false
+    },
+    max: {
+      type: [Number, String],
+      default: Infinity,
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+    // 是否启用小数
+    isFloat: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      number: 0,
+    };
+  },
+  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) {
+      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>
+.yd-keyboard {
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.mini-number-box1 .mini-number,
+.yd-keyboard {
+  display: flex;
+
+  flex-direction: column;
+}
+
+.mini-number-box1 .mini-number {
+  border: 1px solid #dcdfe6;
+}
+
+.mini-number-box1 .mini-number .key-line {
+  margin-top: 0;
+}
+
+.mini-number-box1 .mini-number .key {
+  width: 122px;
+  height: 60px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  margin-left: 0;
+}
+
+.mini-number-box1 .mini-number .key:hover {
+  background-color: #dcdfe6;
+}
+
+.mini-number-box1 .mini-number .key:not(:last-child) {
+  border-right: 1px solid #dcdfe6;
+}
+
+.mini-number-box1 .mini-number .key-line:not(:last-child) {
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.mini-number-box2 {
+  display: flex;
+
+  justify-content: center;
+}
+
+.mini-number-box2 .key {
+  width: 80px;
+  height: 70px;
+}
+
+.mini-number-box2 .function-button {
+  display: flex;
+
+  flex-direction: column;
+}
+
+.mini-number-box2 .function-button .key {
+  margin-top: 8px;
+}
+
+.key-line {
+  margin-top: 8px;
+}
+
+.key,
+.key-line {
+  display: flex;
+
+  justify-content: center;
+}
+
+.key {
+  width: 64px;
+  height: 64px;
+  background: #fff;
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
+  border-radius: 4px;
+
+  align-items: center;
+  margin-left: 8px;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.8);
+  text-align: center;
+  line-height: 34px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.simple-Keyboard-number,
+.simple-Keyboard-weight {
+  min-width: 410px;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.submit {
+  width: 366px;
+  height: 44px;
+  background: #22bf64;
+  border-radius: 2px;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
+
+.disabled-box {
+  position: absolute;
+  inset: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.carts {
+  flex-direction: column;
+  background: #fff;
+  height: 100%;
+}
+
+.carts .title,
+.carts {
+  display: flex;
+
+  align-items: center;
+  width: 100%;
+}
+
+.carts .title {
+  justify-content: space-between;
+  height: 64px;
+  border-bottom: 1px solid #ebebeb;
+  padding: 20px;
+  padding-top: 30px;
+}
+
+.carts .title .left {
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  font-size: 18px;
+  color: #000;
+}
+
+.carts .title .right {
+  font-size: 14.4px;
+  cursor: pointer;
+}
+
+.carts .box_status {
+  margin-bottom: 20px;
+  width: 370px;
+  height: 58px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+  margin-top: 20px;
+  font-family: MicrosoftYaHei;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  text-align: center;
+}
+
+.carts .box_status span {
+  padding: 0 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/components/popup-weight-goods.vue b/src/views/tool/Instead/components/popup-weight-goods.vue
new file mode 100644
index 0000000..496abb9
--- /dev/null
+++ b/src/views/tool/Instead/components/popup-weight-goods.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="select_desk">
+    <el-dialog width="410px" title="套餐" :visible.sync="show">
+      <div class="select_desk_dialog u-p-b-20">
+        <key-board isCanEmpty v-model="number" isFloat @clear="clear">
+          <div slot="clear">.</div>
+          <div slot="input" class="u-font-14 u-row-between u-flex w-full u-text-left">
+            <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 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>
+        </div>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import keyBoard from "./keyboard.vue";
+export default {
+  components: { keyBoard },
+  props: {
+    payMoney: {
+      type: [Number, String],
+      default: 0,
+    },
+    isShowVipPrice:{
+      type:Boolean,
+      default:false
+    }
+  },
+  data() {
+    return {
+      guazhangRen: "",
+      number: "",
+      show: false,
+      hasOpen: false,
+      loading: false,
+      tips: "",
+      focus: false,
+      data: {},
+      item: ""
+    };
+  },
+  watch: {
+    number(newval) {
+    },
+  },
+  computed:{
+    allPrice(){
+      return (this.price*this.number).toFixed(2);
+    },
+    price(){
+      if(!this.item){
+        return 0
+      }
+      return this.item.lowPrice;
+    }
+  },
+  methods: {
+    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));
+      this.close();
+    },
+    open(item) {
+      console.log(item);
+      this.item = item
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+      this.number = "";
+      this.item=""
+    },
+  },
+  mounted() { },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.el-button {
+  padding: 12px 20px;
+}
+
+::v-deep .carts .box_status {
+  border: none;
+}
+
+::v-deep .select_desk_dialog .el-input__inner {
+  // border: none;
+}
+
+::v-deep .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+::v-deep .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+::v-deep .el-button--success {
+  border-color: #22bf64;
+  background-color: #22bf64;
+}
+
+.select_desk .btn {
+  height: 34px;
+}
+
+.tags {
+  font-size: 16px;
+
+  &.using {
+    color: rgb(234, 64, 37);
+  }
+
+  &.wait {
+    color: rgb(252, 236, 79);
+  }
+
+  &.idle {
+    color: rgb(137, 234, 71);
+  }
+
+  &.closed {
+    color: rgb(221, 221, 221);
+    filter: grayscale(1);
+  }
+}
+
+::v-deep .inputs .el-input__inner {
+  border-color: transparent !important;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  font-size: 20px;
+}
+
+.select_desk .select_desk_dialog {
+  display: flex;
+
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.select_desk .select_desk_dialog .nav {
+  width: 286px;
+  height: 38px;
+  background: #dcf0e8;
+
+  justify-content: space-around;
+}
+
+.select_desk .select_desk_dialog .nav .li,
+.select_desk .select_desk_dialog .nav {
+  border-radius: 4px;
+
+  display: flex;
+
+  align-items: center;
+}
+
+.select_desk .select_desk_dialog .nav .li {
+  width: 140px;
+  height: 34px;
+  color: #0fc161;
+
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.select_desk .select_desk_dialog .nav .lion {
+  background: #0fc161;
+  color: #fff;
+}
+
+.select_desk .select_desk_dialog .inputs {
+  width: 370px;
+  line-height: 54px;
+  margin-top: 24px;
+  height: 54px;
+  margin-bottom: 20px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  text-align: center;
+  font-size: 20px;
+  position: relative;
+}
+
+.price {
+  font-size: 18px;
+  text-align: left;
+  color: rgb(255, 81, 82);
+  font-weight: 600;
+}
+
+.select_desk .select_desk_dialog .inputs .close {
+  color: #aaa;
+  position: absolute;
+  right: 10px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  top: 50%;
+  margin-top: -15px;
+  cursor: pointer;
+}
+
+.guazhangren {
+  padding: 12px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  margin-top: 20px;
+  min-height: 58px;
+  color: #999;
+  cursor: pointer;
+
+  .name {
+    color: #3f9eff;
+  }
+}
+
+.select_desk .select_desk_dialog .keyboard {
+  display: flex;
+
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border-right: 1px solid #dcdfe6;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.select_desk .select_desk_dialog .keyboard .li {
+  height: 60px;
+  width: 33.333%;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+  font-size: 24px;
+  color: #212121;
+  cursor: pointer;
+
+  user-select: none;
+  border-left: 1px solid #dcdfe6;
+  border-top: 1px solid #dcdfe6;
+
+  transition: all 0.1s;
+}
+
+.select_desk .select_desk_dialog .keyboard .li:hover {
+  background: #dcdfe6;
+}
+
+.select_desk .select_desk_dialog .keyboard .li .icon {
+  font-size: 1.3em;
+}
+
+.select_desk .select_desk_dialog .keyboard .confirm {
+  height: 140px;
+  background: #ff9f2e;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-right: none;
+}
+
+.select_desk .select_desk_dialog .keyboard .confirm:hover {
+  background: #f88502;
+}
+
+.confirm_btns {
+  display: flex;
+
+  justify-content: space-between;
+  width: 100%;
+}
+
+.confirm_btns .el-button {
+  width: 175px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tool/Instead/index.vue b/src/views/tool/Instead/index.vue
index e4298fd..bcb7cc4 100644
--- a/src/views/tool/Instead/index.vue
+++ b/src/views/tool/Instead/index.vue
@@ -307,10 +307,17 @@ function goodsClick(item) {
       product_name: "",
       remark: "",
     });
+    return;
   }
   // 多规格
   if (item.type == "sku") {
     refSelSku.value.open(item);
+    return;
+  }
+  //称重
+  if (item.type == "sku") {
+    refSelSku.value.open(item);
+    return;
   }
 }