代客下单增加商品称重弹窗
This commit is contained in:
parent
2d53c6ee0f
commit
ffcaaf9e41
|
|
@ -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"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="1467" width="32" height="32">
|
||||
<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>
|
||||
fill="#333333"
|
||||
p-id="1468"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,88 +60,88 @@
|
|||
</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,
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
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() {
|
||||
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}`;
|
||||
},
|
||||
};
|
||||
}
|
||||
const newval = number.value + n;
|
||||
if (newval * 1 > props.max * 1) {
|
||||
return ElMessage.error(this.maxTips);
|
||||
}
|
||||
number.value = newval;
|
||||
}
|
||||
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,
|
||||
.carts {
|
||||
.keybord-box .title,
|
||||
.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>
|
||||
|
|
@ -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>
|
||||
<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>
|
||||
<template #clear>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
</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 {
|
||||
components: { keyBoard },
|
||||
props: {
|
||||
payMoney: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
isShowVipPrice:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
const props = defineProps({
|
||||
payMoney: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
guazhangRen: "",
|
||||
number: "",
|
||||
show: false,
|
||||
hasOpen: false,
|
||||
loading: false,
|
||||
tips: "",
|
||||
focus: false,
|
||||
data: {},
|
||||
item: ""
|
||||
};
|
||||
isShowVipPrice: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
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() { },
|
||||
};
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
guazhangRen: "",
|
||||
number: "",
|
||||
show: false,
|
||||
hasOpen: false,
|
||||
loading: false,
|
||||
tips: "",
|
||||
focus: false,
|
||||
data: {},
|
||||
item: "",
|
||||
});
|
||||
const { guazhangRen, number, show, hasOpen, loading, tips, focus, data, item } = toRefs(state);
|
||||
const price = computed(() => {
|
||||
if (!item.value) {
|
||||
return 0;
|
||||
}
|
||||
return item.value.lowPrice;
|
||||
});
|
||||
const allPrice = computed(() => {
|
||||
return (price.value * number.value).toFixed(2);
|
||||
});
|
||||
function inputFocus() {
|
||||
focus.value = true;
|
||||
}
|
||||
function inputBlur() {
|
||||
focus.value = false;
|
||||
}
|
||||
function inputNumber(e) {
|
||||
console.log(e);
|
||||
}
|
||||
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);
|
||||
item.value = item;
|
||||
show.value = true;
|
||||
}
|
||||
function close() {
|
||||
show.valuie = false;
|
||||
number.value = "";
|
||||
item.value = "";
|
||||
}
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -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") {
|
||||
refSelSku.value.open(item);
|
||||
if (item.type == "weight") {
|
||||
showWeight(item);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue