feat: 增加数量编辑弹窗，修复数量输入键盘问题增加限制最多两位小数，增加socket重连次数上限弹窗
This commit is contained in:
parent
7b7dcefd5f
commit
72fddad3eb
|
|
@ -30,7 +30,7 @@ class WebSocketManager {
|
|||
private messageHandlers: Map<string, ((message: string) => void)[]> = new Map();
|
||||
private type: string = 'manage';
|
||||
private reconnectAttempts = 0;
|
||||
private maxReconnectAttempts = 3; // 自定义最大重试次数
|
||||
private maxReconnectAttempts = 10; // 自定义最大重试次数
|
||||
private reconnectDelay = 5000; // 重试延迟（单位：毫秒）
|
||||
private timer: any | null = null;
|
||||
|
||||
|
|
@ -145,6 +145,18 @@ class WebSocketManager {
|
|||
}, this.reconnectDelay);
|
||||
} else {
|
||||
console.error("达到最大重连次数，停止重连");
|
||||
ElMessageBox.confirm('达到最大重连次数' + this.maxReconnectAttempts + '次，已停止重连,是否立即重连？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
|
||||
callback: (action: string) => {
|
||||
console.log(action);
|
||||
if (action == 'confirm') {
|
||||
this.setupWebSocket();
|
||||
this.reconnectAttempts = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="reduce" @click="changeCartNumber(-1)">
|
||||
<el-icon><Minus /></el-icon>
|
||||
</div>
|
||||
<span class="text">{{ carts.selCart.number || 1 }}</span>
|
||||
<span class="text" @click="changeCartNumberShow()">{{ carts.selCart.number || 1 }}</span>
|
||||
<div class="add" @click="changeCartNumber(1)">
|
||||
<el-icon><Plus /></el-icon>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,20 @@ const controls = ref([
|
|||
// { label: "整单等叫", key: "", disabled: false, per: "all-wating" },
|
||||
]);
|
||||
|
||||
const emits = defineEmits(["noteClick", "changePriceClick", "packClick", "return", "rottable"]);
|
||||
const emits = defineEmits([
|
||||
"noteClick",
|
||||
"changePriceClick",
|
||||
"packClick",
|
||||
"return",
|
||||
"rottable",
|
||||
"changeCartNumberShow",
|
||||
]);
|
||||
function changeCartNumberShow() {
|
||||
if (!carts.selCart.id) {
|
||||
return;
|
||||
}
|
||||
emits("changeCartNumberShow");
|
||||
}
|
||||
function controlsClick(item) {
|
||||
switch (item.key) {
|
||||
case "is_gift":
|
||||
|
|
@ -99,8 +112,9 @@ const perList = computed(() => {
|
|||
if (carts.selCart.id) {
|
||||
if (carts.isOldOrder) {
|
||||
arr = ["return"];
|
||||
} else {
|
||||
arr = ["cart", "del", "pack", "gift", "save", "one-note", "print", "all-note", "all-wating"];
|
||||
}
|
||||
arr = ["cart", "del", "pack", "gift", "save", "one-note", "print", "all-note", "all-wating"];
|
||||
}
|
||||
if (carts.oldOrder.id) {
|
||||
arr.push("rottable");
|
||||
|
|
|
|||
|
|
@ -111,6 +111,8 @@ function clearFunction() {
|
|||
}
|
||||
number.value = "";
|
||||
}
|
||||
const regex = /^\d+(\.\d{1,2})?$/;
|
||||
|
||||
function keyboradAdd(n) {
|
||||
if (n == "." && `${number.value}`.includes(".")) {
|
||||
return;
|
||||
|
|
@ -120,10 +122,17 @@ function keyboradAdd(n) {
|
|||
return (number.value = 0 + n);
|
||||
}
|
||||
}
|
||||
if (n == ".") {
|
||||
return (number.value += n);
|
||||
}
|
||||
const newval = number.value + n;
|
||||
if (newval * 1 > props.max * 1) {
|
||||
return ElMessage.error(props.maxTips);
|
||||
}
|
||||
if (props.isFloat && !regex.test(newval)) {
|
||||
console.log("输入不合法");
|
||||
return;
|
||||
}
|
||||
console.log(number.value);
|
||||
number.value = newval;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,289 @@
|
|||
<template>
|
||||
<div class="select_desk">
|
||||
<el-dialog width="410px" :title="title" v-model="show" @close="reset">
|
||||
<div class="select_desk_dialog u-p-b-20">
|
||||
<key-board isCanEmpty v-model="number" :isFloat="isFloat" @clear="clear">
|
||||
<template #clear v-if="isFloat">
|
||||
<div>.</div>
|
||||
</template>
|
||||
</key-board>
|
||||
|
||||
<div class="confirm_btns u-flex u-m-t-20">
|
||||
<el-button style="width: 100%" type="primary" @click="confirm">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import keyBoard from "./keyboard.vue";
|
||||
const props = defineProps({
|
||||
payMoney: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
isShowVipPrice: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
number: "",
|
||||
show: false,
|
||||
data: {},
|
||||
item: "",
|
||||
});
|
||||
const { number, show, item } = toRefs(state);
|
||||
const title = ref("数量");
|
||||
const min = ref(1);
|
||||
|
||||
const isFloat = ref(false);
|
||||
function reset() {}
|
||||
|
||||
function clear(e) {
|
||||
console.log(e);
|
||||
number.value = "";
|
||||
item.value = "";
|
||||
}
|
||||
const emits = defineEmits(["confirm"]);
|
||||
function confirm() {
|
||||
if (number.value * 1 <= 0) {
|
||||
return ElMessage.error("请输入正确的数量！");
|
||||
}
|
||||
if (number.value * 1 < min.value) {
|
||||
return ElMessage.error("最小起售数量为" + min.value);
|
||||
}
|
||||
emits("confirm", item.value, number.value * 1);
|
||||
close();
|
||||
}
|
||||
function open(data) {
|
||||
item.value = data;
|
||||
min.value = data.skuData.suitNum || 1;
|
||||
isFloat.value = data.type == "weight" ? true : false;
|
||||
number.value = `${data.number * 1}`;
|
||||
show.value = true;
|
||||
}
|
||||
function close() {
|
||||
show.value = false;
|
||||
number.value = "";
|
||||
item.value = "";
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.keybord-box .box_status) {
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
:deep(.el-button) {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
:deep(.carts .box_status) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner::-webkit-inner-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner::-webkit-outer-spin-button) {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
: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);
|
||||
}
|
||||
}
|
||||
|
||||
: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>
|
||||
|
|
@ -124,6 +124,7 @@
|
|||
@changePriceClick="showChangePrice"
|
||||
@return="refReturnCartShow"
|
||||
@rottable="rottableShow"
|
||||
@changeCartNumberShow="refChangeNumberShow"
|
||||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
|
|
@ -186,7 +187,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更改数量 -->
|
||||
<changeNumber ref="refChangeNumber" @confirm="refChangeNumberConfirm"></changeNumber>
|
||||
<!-- 多规格选择确认 -->
|
||||
<dialogGoodsSel ref="refSelSku" @confirm="skuSelConfirm"></dialogGoodsSel>
|
||||
<!-- 备注 -->
|
||||
|
|
@ -231,6 +233,7 @@ import chooseUser from "./components/choose-user.vue";
|
|||
import changeWeight from "./components/popup-weight-goods.vue";
|
||||
import changeTaocan from "./components/popup-taocan-goods.vue";
|
||||
import addLingShiCai from "./components/popup-linshiCai.vue";
|
||||
import changeNumber from "./components/popup-change-number.vue";
|
||||
import rottable from "./components/popup-rottable.vue";
|
||||
import GoodsItem from "./components/goods-item.vue";
|
||||
import dialogGoodsSel from "./components/dialog-goods-sel.vue";
|
||||
|
|
@ -252,6 +255,15 @@ const shopUser = useUserStore();
|
|||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
//更改数量
|
||||
const refChangeNumber = ref();
|
||||
function refChangeNumberShow() {
|
||||
refChangeNumber.value.open(carts.selCart);
|
||||
}
|
||||
function refChangeNumberConfirm(cart, num) {
|
||||
carts.updateTag("number", num);
|
||||
}
|
||||
|
||||
//转桌
|
||||
const refRotTable = ref();
|
||||
function rottableShow() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue