去除websocket链接错误失败时的弹窗
This commit is contained in:
parent
7489a9cc39
commit
2d53c6ee0f
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue