czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代客下单增加历史订单，代码优化

This commit is contained in:
YeMingfei666 2024-08-30 17:00:29 +08:00
parent eb7522c222
commit d889b9b1ad
2 changed files with 415 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
src/views/table/components/table-diancan-components/cart-item.vue Normal file
View File

@ -0,0 +1,265 @@
<template>
<div
class="flex order-item relative"
:class="{ active: selIndex === index }"
@click="itemClick"
>
<span class="absolute pack" v-if="item.isPack === 'true'"> 包 </span>
<div class="flex">
<div class="img">
<img :src="item.coverImg" class="" alt="" />
</div>
<div class="good-info">
<div class="flex lh-16">
<div class="name">{{ item.name }}</div>
<span class="good_info_discount" v-if="item.isGift === 'true'"
>赠</span
>
</div>
<div v-if="item.specSnap" class="specSnap">
{{ item.specSnap }}
</div>
</div>
</div>
<div class="flex">
<div class="order-number-box">
<div class="" style="">X{{ item.number }}</div>
<div class="absolute" v-if="canChangeNumber">
<div class="order-input-number">
<i class="icon-remove" @click="changeOrderNumber(true)"></i>
<div style="width: 40px" class="number-box">
<el-input
:min="0"
type="number"
@input="cartGoodsNumberInput"
@change="cartGoodsNumberChange"
v-model="number"
placeholder="0"
></el-input>
</div>
<i
class="el-icon-circle-plus icon-add"
@click="changeOrderNumber(false)"
></i>
</div>
</div>
</div>
<div class="color-333 total-price">
<div v-if="item.isGift === 'true'">￥0</div>
<div :class="{ 'free-price': item.isGift === 'true' }">
￥{{ item.salePrice }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
//是否允许改变梳理
canChangeNumber: {
type: Boolean,
default: true,
},
item: {
type: Object,
default: () => {
return {
number: 0,
};
},
},
selIndex: {
type: Number,
default: 0,
},
index: {
type: Number,
default: 0,
},
},
data() {
return {
number: 0,
};
},
watch: {
"item.number": function (val) {
this.number = val;
// this.$emit('changeOrderNumber',this.index)
},
},
mounted() {
this.number = this.item.number;
},
methods: {
//购物车商品输入框数量改变
cartGoodsNumberChange(newval) {
if (newval <= 0) {
item.number = 1;
}
newval = `${newval}`.split(".")[0] * 1;
this.number = newval;
this.$emit("cartGoodsNumberChange",newval, this.index);
},
//购物车商品输入框数量输入
cartGoodsNumberInput(newval) {
if (newval <= 0) {
return this.number =1
}
newval = `${newval}`.split(".")[0] * 1;
this.number = newval;
this.$emit("cartGoodsNumberInput",newval, this.index);
},
changeOrderNumber(isReduce) {
this.$emit("changeOrderNumber", this.index, isReduce);
},
itemClick() {
this.$emit("itemClick", this.index,this.canChangeNumber);
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .number-box .el-input__inner {
border: none;
}
::v-deep .el-button--text {
color: #000;
}
::v-deep .number-box .el-input__inner {
border: none;
padding: 0 4px;
text-align: center;
}
.icon-remove {
border: 1px solid #d8d8d8;
width: 22px;
height: 22px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
&::after {
content: "";
display: block;
width: 10px;
height: 1px;
background: #999;
}
}
.icon-add {
color: rgb(34, 191, 100);
font-size: 22px;
cursor: pointer;
}
.order-item {
padding: 4px;
border-radius: 2px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
background-color: rgba(0, 0, 0, 0);
transition: all 0.3s;
.pack {
right: 100%;
width: 18px;
height: 18px;
background: #35ac6a;
border-radius: 4px 0 4px 0;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 17px;
}
&.active {
background-color: rgba(0, 0, 0, 0.04);
}
.total-price {
width: 94px;
text-align: right;
}
.good-info {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 70px;
.specSnap {
color: #999;
font-size: 12px;
margin-top: 3px;
}
}
.name {
font-size: 13px;
text-align: left;
color: #212121;
overflow: hidden;
}
.img {
width: 40px;
height: 40px;
position: relative;
margin-right: 10px;
img {
width: 40px;
height: 40px;
}
}
}
.order-number-box {
position: relative;
.absolute {
width: 60px;
height: 40px;
right: -30px;
top: -12px;
position: absolute;
.order-input-number {
position: absolute;
right: -6px;
top: 0;
justify-content: center;
align-items: center;
display: none;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
padding: 9px 6px;
background-color: #fff;
height: 40px;
}
&:hover .order-input-number {
display: flex;
}
}
}
.good_info_discount {
height: 16px;
padding: 0 3px;
color: #ff3f3f;
background-color: rgba(255, 63, 63, 0.1);
border-radius: 2px;
margin-left: 6px;
font-size: 12px;
white-space: nowrap;
}
</style>

297
src/views/table/components/table-diancan.vue
View File

@ -260,7 +260,7 @@
<div class="flex-1">
<el-button
size="medium"
:disabled="!order.list.length"
:disabled="!order.list.length && !order.old.list.length"
@click="toCreateOrder(true)"
>
去结账
@ -270,75 +270,46 @@
</div>
</div>
<div class="list">
<div
v-for="(item, index) in order.list"
:key="index"
class="flex order-item relative"
:class="{ active: order.selIndex === index }"
@click="changeOrderSel(index)"
>
<span class="absolute pack" v-if="item.isPack === 'true'">
包
</span>
<div class="flex">
<div class="img">
<img :src="item.coverImg" class="" alt="" />
</div>
<div class="good-info">
<div class="flex lh-16">
<div class="name">{{ item.name }}</div>
<span
class="good_info_discount"
v-if="item.isGift === 'true'"
>赠</span
>
</div>
<div v-if="item.specSnap" class="specSnap">
{{ item.specSnap }}
</div>
</div>
</div>
<div class="flex">
<div class="order-number-box">
<div class="color-999" style="">X{{ item.number }}</div>
<div class="absolute">
<div class="order-input-number">
<i
class="icon-remove"
@click="changeOrderNumber(index, '-')"
></i>
<div style="width: 40px" class="number-box">
<el-input
:min="0"
type="number"
@input="cartGoodsNumberInput($event, item)"
@change="cartGoodsNumberChange($event, item)"
v-model="item.number"
placeholder="0"
></el-input>
</div>
<i
class="el-icon-circle-plus icon-add"
@click="changeOrderNumber(index)"
></i>
</div>
</div>
</div>
<div class="color-333 total-price">
￥{{ item.salePrice }}
</div>
</div>
</div>
<!-- 当前购物车列表 -->
<template v-if="order.list.length">
<cart-item
@itemClick="changeOrderSel"
@changeOrderNumber="changeOrderNumber"
@cartGoodsNumberInput="cartGoodsNumberInput"
@cartGoodsNumberChange="cartGoodsNumberChange"
v-for="(item, index) in order.list"
:key="index"
:index="index"
:item="item"
:selIndex="order.selIndex"
></cart-item>
</template>
<div v-if="order.gift.list.length">
<div class="carts_list_title">以下是优惠菜品</div>
</div>
<div v-if="!order.list.length">
<el-empty description="点餐列表为空"></el-empty>
<el-empty
:image-size="50"
description="点餐列表为空"
></el-empty>
</div>
</div>
<!-- 已下单菜品列表 -->
<template v-if="order.old.list.length">
<div class="carts_list_title">已下单菜品</div>
<div class="list">
<cart-item
@itemClick="changeOrderOldSel"
:canChangeNumber="false"
v-for="(item, index) in order.old.list"
:key="index"
:index="index"
:item="item"
:selIndex="order.old.selIndex"
></cart-item>
</div>
</template>
<div class="order_remark" v-if="note.content">
订单备注： {{ note.content }}
@ -346,7 +317,10 @@
</div>
<div class="controls">
<div class="numberbox">
<div
class="numberbox"
:class="{ 'cur-pointer': order.old.selIndex < 0 }"
>
<div class="reduce" @click="changeOrderGoodsNumber('-')">-</div>
<div class="input relative">
<div
@ -399,14 +373,14 @@
<div
class="btn"
:class="{ disabled: !order.list.length }"
:class="{ disabled: !order.list.length ||key}"
@click="saveOrder"
>
存单
</div>
<div
class="btn relative"
:class="{ disabled: !prveOrder.list.length }"
:class="{ disabled: !prveOrder.list.length ||key}"
@click="cacheOrderShow"
>
取单
@ -699,12 +673,16 @@
}}
</div>
</div>
<!---->
<div class="detail_form_item" v-if="createOrder.data.packFee">
<div class="left">打包费</div>
<div class="right">
￥{{ createOrder.data.packFee || "0.00" }}
</div>
</div>
<div class="detail_form_item">
<div class="left">桌位费/附加费</div>
<div class="right">￥0.00</div>
</div>
<!----><!----><!---->
<div class="detail_form_item">
<div class="left">总价</div>
<div class="right">
@ -772,27 +750,6 @@
>
{{ val.name }}
</el-button>
<!-- <el-tag
v-if="val === item.sel"
size="medium"
:disabled="item.disabled"
@click="changeTagSel(index, val)"
effect="dark"
type="success"
>
{{ val }}
</el-tag>
<el-tag
v-else
size="medium"
type="success"
:disabled="item.disabled"
@click="changeTagSel(index, val)"
effect="light"
>
{{ val }}
</el-tag> -->
</span>
</div>
</div>
@ -804,7 +761,7 @@
<div class="price">￥{{ skuGoods.data.salePrice | to2 }}</div>
<div class="sku-group-text">
<span> {{ skuText }}</span>
<span>库存：{{ skuGoods.data.stockNumber || "" }}</span>
<span>库存：{{ skuGoods.data.stockNumber || 0 }}</span>
</div>
</div>
<div class="flex">
@ -829,7 +786,15 @@
>
已下架
</button>
<button
<template v-else>
<button
class="my-btn disabled flex-1"
v-if=" skuGoods.data.stockNumber<=0"
disabled
>
库存不足
</button>
<button
class="my-btn success flex-1"
v-else
:disabled="CanConfirm"
@ -837,6 +802,10 @@
>
确定
</button>
</template>
</div>
</div>
</el-dialog>
@ -989,9 +958,11 @@
</template>
<script>
import _ from "lodash";
import chooseUser from "./choose-user.vue";
import payType from "./pay-type.vue";
import chooseTable from "./table-diancan-components/choose-table-master.vue";
import cartItem from "./table-diancan-components/cart-item.vue";
import scanPay from "./table-diancan-components/scan-pay.vue";
import moneyDiscount from "./table-diancan-components/discount.vue";
import orderNote from "./table-diancan-components/note.vue";
@ -1020,7 +991,6 @@ import {
generateCombinations,
returnReverseVal,
} from "./util.js";
export default {
components: {
chooseUser,
@ -1030,9 +1000,12 @@ export default {
moneyKeyboard,
scanPay,
moneyDiscount,
cartItem,
},
data() {
return {
//台桌点餐页面打开时带来的参数 isAddGoods 加菜 isPayOrder结账
key: "",
//是否是从挂单里取出来的订单
isPrverOrder: false,
//是否全屏
@ -1113,6 +1086,11 @@ export default {
list: [],
selIndex: -1,
},
//已下单菜品
old: {
list: [],
selIndex: -1,
},
query: {
page: 1,
size: 20,
@ -1209,17 +1187,26 @@ export default {
return result.substring(0, result.length - 1);
},
allPrice() {
const oldPrice = this.order.old.list
.filter((v) => v.isGift !== "true")
.reduce((a, b) => {
return a + b.number * b.salePrice;
}, 0);
const price = this.order.list
.filter((v) => v.isGift !== "true")
.reduce((a, b) => {
return a + b.number * b.salePrice;
}, 0);
return price.toFixed(2);
return (oldPrice + price).toFixed(2);
},
allNumber() {
return this.order.list.reduce((a, b) => {
const oldNumber = this.order.old.list.reduce((a, b) => {
return a + b.number * 1;
}, 0);
const cartNumber = this.order.list.reduce((a, b) => {
return a + b.number * 1;
}, 0);
return oldNumber + cartNumber;
},
selGoodsHide() {
this.selGoods.show = false;
@ -1252,10 +1239,10 @@ export default {
},
},
watch: {
"masterId": function (val) {
masterId: function (val) {
console.log(val);
},
"isCreateOrder": function (val) {
isCreateOrder: function (val) {
if (!val) {
this.createOrder.discount = 1;
}
@ -1351,7 +1338,7 @@ export default {
// this.order.number = this.order.list[this.order.selIndex].number;
}
},
"order.number": function (newval) {
"order.number": _.debounce(function (newval) {
if (this.order.list.length <= 0 || this.order.selIndex < 0) {
return;
}
@ -1360,23 +1347,27 @@ export default {
let item = this.order.list[this.order.selIndex];
console.log(item.specSnap);
const { productId, skuId, isPack, isGift, number } = item;
const oldGoods = this.order.old.list.find((v) => {
return v.productId === productId && v.skuId === skuId;
});
$updateCart({
cartId: item.id,
productId,
skuId,
tableId: this.table.tableId,
num: this.order.number, // 0会删除此商品
num: this.order.number + (oldGoods ? oldGoods.number : 0), // 0会删除此商品
}).then((res) => {
this.$set(this.order.list, this.order.selIndex, {
...res,
specSnap: item.specSnap,
number: this.order.number,
});
});
return;
this.updateOrder({
num: newval, // 0会删除此商品
});
},
}, 30),
"goods.query.productId": function (newval) {
if (!this.$goodsData) {
return;
@ -1416,23 +1407,15 @@ export default {
isShow ? this.$refs[key].open(data) : this.$refs[key].close(data);
},
//购物车商品输入框数量输入
cartGoodsNumberInput(newval, item) {
if (newval <= 0) {
return (this.order.cacheNumber = 1);
}
newval = `${newval}`.split(".")[0] * 1;
cartGoodsNumberInput(newval, index) {
const item = this.order.list[index];
console.log(item);
this.order.cacheNumber = newval;
this.$nextTick(() => {
item.number = newval;
});
item.number = newval;
},
//购物车商品输入框数量改变
cartGoodsNumberChange(newval, item) {
console.log(newval);
if (newval <= 0) {
item.number = 1;
return (this.order.number = 1);
}
cartGoodsNumberChange(newval, index) {
const item = this.order.list[index];
newval = `${newval}`.split(".")[0] * 1;
console.log(newval);
this.order.cacheNumber = newval;
@ -1843,6 +1826,7 @@ export default {
}
this.order.selIndex = index;
console.log(index);
console.log(isReduce);
const item = this.order.list[index];
const mumber = item.number * 1;
const newval = mumber + (isReduce ? -1 : 1);
@ -1943,10 +1927,16 @@ export default {
id: "",
name: "全部",
});
console.log(this.category.list);
},
//改变购物车菜品选中
changeOrderSel(index) {
this.order.selIndex = index;
this.order.old.selIndex = -1;
},
//改变已下单菜品选中
changeOrderOldSel(index) {
this.order.old.selIndex = index;
this.order.cacheNumber = this.order.old.list[index].number;
},
chooseSkuConfirm() {
if (this.timer) {
@ -2003,20 +1993,34 @@ export default {
});
const orderGoods =
orderGoodsIndex != -1 ? this.order.list[orderGoodsIndex] : undefined;
console.log(orderGoods);
if (orderGoods) {
const oldOrderGoods = this.order.old.list.find((V) => {
return V.skuId == item.id && V.productId == this.selGoods.data.id;
});
if (orderGoods || oldOrderGoods) {
//更新
const newNum =
(oldOrderGoods ? oldOrderGoods.number : 0) +
(orderGoods ? orderGoods.number * 1 : 0) +
this.skuGoods.number;
res = await $updateCart({
cartId: orderGoods.id,
cartId: orderGoods ? orderGoods.id : oldOrderGoods.id,
productId: this.selGoods.data.id,
skuId: item.id,
tableId: this.table.tableId,
num: orderGoods.number * 1 + this.skuGoods.number, // 0会删除此商品
num: newNum, // 0会删除此商品
isPack: false, // 是否打包
});
orderGoods.number += this.skuGoods.number;
this.order.selIndex = orderGoodsIndex;
this.order.cacheNumber = orderGoods.number;
if (this.key && orderGoodsIndex == -1) {
this.orderListPush({
...res,
specSnap: name,
number: this.skuGoods.number,
});
} else {
orderGoods.number += this.skuGoods.number;
this.order.selIndex = orderGoodsIndex;
this.order.cacheNumber = orderGoods.number;
}
} else {
//添加
res = await addCart({
@ -2091,14 +2095,14 @@ export default {
prve[i] = matchArr
.filter((v) => v.specSnap.match(i))
.every((v) => {
return (
!v.isGrounding || v.isPauseSale == 1 || v.stockNumber <= 0
);
// return isCanBuy(v,this.selGoods.data.isStock)
return isCanBuy(v)
});
}
}
return prve;
}, {});
console.log(includeSkuMap)
for (let i in includeSkuMap) {
for (let k in skuList) {
const index = skuList[k].valueArr.findIndex((val) => val === i);
@ -2136,6 +2140,9 @@ export default {
this.order.query.page = 1;
this.goods.total = 0;
this.order.list = [];
this.order.selIndex = -1;
this.order.old.list = [];
this.order.old.selIndex = -1;
this.isCreateOrder = false;
this.note.content = "";
this.vipUser = { id: "" };
@ -2143,6 +2150,7 @@ export default {
this.note.content = "";
this.isPrverOrder = false;
this.createOrder.discount = 1;
this.key = "";
},
//获取购物车数据
async getCart() {
@ -2151,7 +2159,11 @@ export default {
masterId: this.masterId,
tableId: this.table.tableId,
});
this.order.list = res.records;
if (this.key) {
this.order.old.list = res.records;
} else {
this.order.list = res.records;
}
this.order.total = res.total;
},
showSelGoods(item) {
@ -2392,11 +2404,19 @@ export default {
this.goods.total = res.total;
this.$goodsData = goods;
},
async open(item) {
async open(item, key) {
this.table = item;
this.key = key;
if (this.key == "isPayOrder") {
this.isCreateOrder = true;
}
this.informationdialogshow;
this.informationdialogshow = true;
const res = await this.getMasterId();
this.masterId = res.masterId;
if (this.key == "isPayOrder") {
this.toCreateOrder(true);
}
this.getCart();
this.getGoods();
this.getCategory();
@ -2484,7 +2504,9 @@ input[type="number"]::-webkit-outer-spin-button {
padding: 0 4px;
text-align: center;
}
::v-deep .el-empty {
padding: 0;
}
::v-deep .el-button--success:not(.is-disabled) {
background: #22bf64;
color: #fff;
@ -2647,25 +2669,6 @@ input[type="number"]::-webkit-outer-spin-button {
}
}
.color-333 {
color: #333;
}
.color-666 {
color: #666;
}
.ft-13 {
font-size: 13px;
}
.color-000 {
color: #000;
}
.color-999 {
color: #999;
}
.ft-12 {
font-size: 12px;
}
@ -2973,6 +2976,7 @@ input[type="number"]::-webkit-outer-spin-button {
color: #888;
margin: 0 0 10px 7px;
}
.numberbox {
border: 1px solid #dcdfe6;
background-color: #fff;
@ -2982,7 +2986,6 @@ input[type="number"]::-webkit-outer-spin-button {
text-align: center;
border-radius: 4px;
position: relative;
cursor: pointer;
margin: 0 0 10px;
.reduce,