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

优化台桌点餐

This commit is contained in:
gyq 2024-10-11 14:26:39 +08:00
parent cfd04625dd
commit 72cf926747
11 changed files with 350 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -255,6 +255,10 @@ html {
color: #333;
}
.el-divider__text {
white-space: nowrap;
}
.el-dialog__headerbtn {
top: 10px !important;
}

41
src/api/table.js
View File

@ -1,27 +1,40 @@
import request from "@/utils/request.js"
import request from "@/utils/request.js";
/**
* 查询台桌分类
* @param {*} params
* @param {*} params
* @returns
*/
export function queryShopArea(params) {
return request({
method: "get",
url: "shopInfo/queryShopArea",
params
});
return request({
method: "get",
url: "shopInfo/queryShopArea",
params,
});
}
/**
* 查询台桌信息
* @param {*} params
* @param {*} params
* @returns
*/
export function queryShopTable(params) {
return request({
method: "get",
url: "shopInfo/queryShopTable",
params
});
}
return request({
method: "get",
url: "shopInfo/queryShopTable",
params,
});
}
/**
* 清台
* @param {*} params
* @returns
*/
export function clearTable(data) {
return request({
method: "put",
url: "/shopInfo/clearTable",
data,
});
}

16
src/api/user.js
View File

@ -34,3 +34,19 @@ export function queryPwdInfo() {
},
});
}
/**
* 查询店铺信息
* @param {*} params
* @returns
*/
export function queryShopInfo() {
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
return request({
method: "get",
url: "/shopInfo/queryShopInfo",
params: {
shopId: userInfo.shopId,
},
});
}

22
src/store/shop.js Normal file
View File

@ -0,0 +1,22 @@
import { defineStore } from "pinia";
import { queryShopInfo } from "@/api/user";
import useStorage from "@/utils/useStorage";
export const useShop = defineStore({
id: "shopInfo",
state: () => ({
info: useStorage.get("shopInfo"),
}),
actions: {
// 获取店铺信息
async queryShopInfo() {
try {
const res = await queryShopInfo();
useStorage.set("shopInfo", res);
this.info = useStorage.get("shopInfo");
} catch (error) {
console.log(error);
}
},
},
});

2
src/views/home/components/cartOperation.vue
View File

@ -83,6 +83,8 @@ function giftPackHandle(key) {
// 加减修改数量
function numberChange(t) {
console.log(props.item);
if (!props.item.id) return
switch (t) {
case 'sub':

16
src/views/home/components/settleAccount.vue
View File

@ -26,7 +26,7 @@
</div>
</div>
<div class="list_wrap card" style="margin-top: var(--el-font-size-base)">
<div class="item" v-for="item in props.cart" :key="item.id">
<div class="item" v-for="item in cartList" :key="item.id">
<div class="top">
<span class="name">{{ item.name }}</span>
<span class="n">x{{ item.number }}</span>
@ -148,6 +148,8 @@ const props = defineProps({
}
});
const cartList = ref([])
const isPrint = ref(true);
@ -202,7 +204,7 @@ const printHandle = _.throttle(async function () {
shop_name: store.userInfo.shopName,
loginAccount: store.userInfo.loginAccount,
isBefore: true,
carts: props.cart,
carts: cartList.value,
amount: formatDecimal(props.amount),
discountAmount: propsDiscount.value > 0 ? formatDecimal(props.amount * propsDiscount.value) : formatDecimal(props.amount),
discount: formatDecimal(propsDiscount.value * 10, 1, true),
@ -305,6 +307,16 @@ function paySuccess() {
function show() {
dialogVisible.value = true;
cartList.value = []
props.cart.map(item => {
if (item.info && item.info.length) {
item.info.map(item => {
cartList.value.push({ ...item })
})
} else {
cartList.value.push({ ...item })
}
})
}
defineExpose({

146
src/views/home/index.vue
View File

@ -42,39 +42,45 @@
</div>
<div class="shop_operation">
<div class="shop_list">
<div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList"
:key="item.id" @click="selectCartItemHandle(item, index)">
<div class="name_wrap">
<span>{{ item.name }}</span>
<span>￥{{ item.salePrice }}</span>
</div>
<div class="sku_list" v-if="item.skuName">
<div class="tag" v-for="item in item.skuName.split(',')">
{{ item }}
<template v-for="(arr, index) in cartList" :key="index">
<el-divider v-if="arr.placeNum">{{ `第${arr.placeNum}次下单` }}</el-divider>
<div class="item" :class="{ active: item.active }" :key="item.id" v-for="(item, i) in arr.info"
@click="selectCartItemHandle(item, index, i)">
<div class="name_wrap">
<span>{{ item.name }}</span>
<span>￥{{ item.salePrice }}</span>
</div>
</div>
<div class="num">
<div class="left">
<div class="icon_item" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
<el-icon class="icon">
<ShoppingBag />
</el-icon>
</div>
<div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
<el-icon class="icon" style="color: var(--primary-color)">
<Box />
</el-icon>
<div class="sku_list" v-if="item.skuName">
<div class="tag" v-for="item in item.skuName.split(',')">
{{ item }}
</div>
</div>
<el-text class="t">X{{ item.number }}</el-text>
<div class="num">
<div class="left">
<div class="icon_item" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
<el-icon class="icon">
<ShoppingBag />
</el-icon>
</div>
<div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
<el-icon class="icon" style="color: var(--primary-color)">
<Box />
</el-icon>
</div>
<div class="icon_item" v-if="item.status == 'return'">
<span class="t">已退</span>
</div>
</div>
<el-text class="t">X{{ item.number }}</el-text>
</div>
</div>
</div>
</template>
<div class="empty">
<el-empty description="请选择商品" v-if="!cartList.length" />
</div>
</div>
<!-- 购物车操作栏 -->
<cartOperation :item="cartList[cartListActive]" @confirm="(res) => addCart(res, 'edit')" @delete="delCartHandle"
<cartOperation :item="cartListActiveItem" @confirm="(res) => addCart(res, 'edit')" @delete="delCartHandle"
@pending="pendingCart" @clearCart="clearCartHandle" />
</div>
<div class="footer">
@ -98,11 +104,14 @@
<div class="btm">
<el-button icon="Edit" @click="remarkRef.show()"></el-button>
<div class="button">
<!-- <div class="btn" v-if="global.tableInfo.id">
<el-button type="primary" style="width: 100%;" :disabled="!cartList.length"
@click="createOrderHandle(0)">仅下单</el-button>
</div> -->
<div class="btn">
<div class="btn" v-if="shopStore.info.registerType == 'restaurant'">
<el-button type="primary" style="width: 100%;" :disabled="!cartList.length" @click="createOrderHandle(0)">
<template v-if="!createOrderLoading">
仅下单</template>
<template v-else>下单中...</template>
</el-button>
</div>
<div class="btn" v-if="shopStore.info.registerType != 'restaurant' || cartList.length">
<el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
@click="createOrderHandle(1)">
<template v-if="!createOrderLoading">
@ -171,11 +180,17 @@ import {
createOrder,
} from "@/api/product";
import { queryShopInfo } from '@/api/user.js'
// 商品列表
import goods from "@/views/home/components/goods.vue";
import member from "@/views/member/index.vue";
import { ElMessage } from "element-plus";
import { useShop } from '@/store/shop.js'
const shopStore = useShop()
const global = useGlobal()
const route = useRoute()
@ -193,6 +208,7 @@ const allSelected = ref(false);
const remark = ref("");
const cartListActive = ref(0);
const cartListActiveItem = ref({})
const cartList = ref([]);
const cartInfo = ref({});
const cartLoading = ref(false);
@ -216,18 +232,28 @@ async function createOrderHandle(t = 0) {
remark: remark.value,
vipUserId: global.orderMemberInfo.id || '',
tableId: global.tableInfo.qrcode || '',
type: t
type: t,
seatNum: global.tableInfo.num
});
createOrderLoading.value = false;
if (global.tableInfo.id && t == 0) {
// 订单数据
orderInfo.value = res;
if (shopStore.info.registerType == 'restaurant' && t == 0) {
ElMessage.success('下单成功')
global.setOrderTable({})
createCodeAjax(1)
} else {
orderInfo.value = res;
settleAccountRef.value.show();
}
// if (global.tableInfo.id && t == 0) {
// ElMessage.success('下单成功')
// global.setOrderTable({})
// createCodeAjax(1)
// } else {
// orderInfo.value = res;
// settleAccountRef.value.show();
// }
} catch (error) {
console.log(error);
createOrderLoading.value = false;
@ -242,6 +268,7 @@ async function clearCartHandle() {
masterId: masterId.value,
tableId: global.tableInfo.qrcode || ''
});
cartListActiveItem.value = {}
queryCartAjax();
// 清除商品所有红点
@ -273,7 +300,8 @@ async function pendingCart(params, status = true) {
status: status,
uuid: params.uuid,
vipUserId: global.orderMemberInfo.id || '',
tableId: global.tableInfo.qrcode || ''
tableId: global.tableInfo.qrcode || '',
orderId: params.orderId
});
if (status && cartList.value.length) {
await createCodeAjax();
@ -299,6 +327,7 @@ async function delCartHandle(params) {
masterId: params.masterId,
cartId: params.id,
});
cartListActiveItem.value = {}
await queryCartAjax();
cartLoading.value = false;
cartListActive.value = 0;
@ -338,8 +367,17 @@ async function takeFoodCodeSuccess(code) {
}
// 从购物车选择商品
function selectCartItemHandle(item, index) {
cartListActive.value = index;
function selectCartItemHandle(row, index, i) {
cartList.value.map(item => {
item.info.map(val => {
if (val.id == row.id) {
val.active = true
cartListActiveItem.value = val
} else {
val.active = false
}
})
})
}
// 选择完规格开始添加购物车
@ -377,9 +415,33 @@ async function queryCartAjax() {
masterId: masterId.value,
shopId: store.userInfo.shopId,
tableId: global.tableInfo.qrcode || '',
vipUserId: global.orderMemberInfo.id || ''
vipUserId: global.orderMemberInfo.id || '',
num: ''
});
if (!res.list.length) {
cartListActiveItem.value = {}
}
res.list.map((item, index) => {
item.info.map((val, i) => {
if (i == 0 && index == 0) {
val.active = true
if (!cartListActiveItem.value.id) {
cartListActiveItem.value = val
}
} else {
val.active = false
}
})
})
cartList.value = res.list;
if (cartListActiveItem.value.id) {
selectCartItemHandle(cartListActiveItem.value)
}
cartInfo.value = res.amount;
pendingCartNum.value = res.num;
goodsRef.value.updateData();
@ -440,7 +502,8 @@ function clearMember() {
}
onMounted(() => {
createCodeAjax();
createCodeAjax()
shopStore.queryShopInfo()
});
</script>
@ -595,6 +658,11 @@ onMounted(() => {
align-items: center;
justify-content: center;
margin-right: 10px;
.t {
font-size: 10px;
color: #888;
}
}
}

4
src/views/login.vue
View File

@ -73,8 +73,11 @@ import { douyincheckIn } from "@/api/group";
import { useUser } from "@/store/user.js";
import { useSocket } from "@/store/socket.js";
import { useGlobal } from '@/store/global.js'
import { useShop } from '@/store/shop.js'
const global = useGlobal()
const shopInfo = useShop()
const store = useUser();
const socket = useSocket();
@ -125,6 +128,7 @@ const submitHandle = () => {
.then(async (res) => {
ElMessage.success("登录成功");
socket.init();
await shopInfo.queryShopInfo()
setTimeout(() => {
router.replace({
name: "home",

1
src/views/member/components/add.vue
View File

@ -113,6 +113,7 @@ const formRef = ref(null)
function showRefundHandle(item) {
refundItem.value = item
form.amount = item.amount
showDialog.value = true
}

151
src/views/table/components/tableInfo.vue
View File

@ -50,9 +50,30 @@
</div>
<!-- <span class="tips">开始新订单</span> -->
<div class="btn_wrap" v-if="props.tableInfo.status == 'idle'">
<el-button type="primary" style="width: 100%;" @click="toOrderMeal(1)">开始新订单</el-button>
<el-button type="primary" style="width: 100%;" @click="showPeopleNumHandle">开始新订单</el-button>
</div>
<div class="btn_wrap" v-if="props.tableInfo.status == 'cleaning'">
<el-button type="primary" style="width: 100%;" @click="clearTableStatus">清理完成</el-button>
</div>
</div>
<transition name="el-fade-in">
<div class="people_num_wrap" v-show="showPeopleNum">
<div class="title">应选择就餐人数</div>
<div class="num_btns">
<div class="item" :class="{ active: peopleNum == item }" v-for="item in 8"
@click="peopleNum = item">{{ item }}人</div>
<div class="item" :class="{ active: peopleNum == 'custom' }">
<input class="ipt" @focus="inputFocus" placeholder="自定义" v-model="peopleNumInputValue"
@change="" />
</div>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;"
:disabled="(!peopleNum && !peopleNumInputValue) || (peopleNum == 'custom' && !peopleNumInputValue)"
@click="orderDownHandle">确认</el-button>
</div>
</div>
</transition>
</div>
<!-- 结算订单 -->
<settleAccount ref="settleAccountRef" :cart="cartList" :amount="orderInfo.orderAmount"
@ -69,6 +90,8 @@ import { queryMembermember } from '@/api/member/index.js'
import { orderDetail } from '@/api/order/index.js'
import { formatDecimal } from '@/utils/index.js'
import settleAccount from "@/views/home/components/settleAccount.vue";
import { ElMessage } from 'element-plus'
import { clearTable } from '@/api/table.js'
const router = useRouter()
const global = useGlobal()
@ -83,10 +106,20 @@ const props = defineProps({
}
})
const showPeopleNum = ref(false)
const peopleNum = ref(0)
const peopleNumInputValue = ref('')
watch(props, () => {
getOrderDetail()
})
// 自定义人数输入获得焦点
function inputFocus() {
peopleNum.value = 'custom'
}
const settleAccountRef = ref(null)
const orderInfo = ref({})
const cartList = ref([])
@ -108,6 +141,27 @@ function showPayHandle() {
settleAccountRef.value.show()
}
// 显示就就餐人数
function showPeopleNumHandle() {
showPeopleNum.value = true
}
// 清理桌台
const clearLoading = ref(false)
async function clearTableStatus() {
try {
clearLoading.value = true
const res = await clearTable({
shopId: store.userInfo.shopId,
tableId: props.tableInfo.qrcode
})
clearLoading.value = false
emits('success')
} catch (error) {
console.log(error);
}
}
// 获取订单详情
async function getOrderDetail() {
try {
@ -141,6 +195,30 @@ function close() {
emits('close')
}
// 判断数字是不是正整数
function isPositiveInteger(num) {
return Number.isInteger(num) && num > 0;
}
// 选择人数后确认下单
function orderDownHandle() {
if (peopleNum.value == 'custom') {
if (!isPositiveInteger(parseFloat(peopleNumInputValue.value))) {
ElMessage.error('请输入有效的就餐人数')
return
}
}
// 直接点单
global.setOrderTable({
...props.tableInfo,
num: peopleNum.value == 'custom' ? peopleNumInputValue.value : peopleNum.value
})
router.push({
name: 'home',
})
}
// 点单
function toOrderMeal(t) {
if (t == 1) {
@ -324,6 +402,77 @@ onMounted(() => {
width: $size;
}
}
.people_num_wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9;
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.title {
padding-bottom: 40px;
font-size: 18px;
font-weight: bold;
}
.num_btns {
width: 80%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 40px 40px 40px;
gap: 20px;
.item {
color: #fff;
border-radius: 4px;
background-color: var(--el-color-danger);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all .1s ease-in-out;
&.active {
font-size: 14px;
background-color: #e96565;
box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.3);
.ipt {
font-size: 14px;
}
}
.ipt {
width: 100%;
height: 100%;
outline: none;
border: none;
background: transparent;
color: #fff;
text-align: center;
font-size: 16px;
transition: all .1s ease-in-out;
&::-webkit-input-placeholder {
color: #fff;
}
}
}
}
.btn {
width: 80%;
padding-top: 40px;
}
}
}
}
</style>

6
src/views/table/index.vue
View File

@ -254,13 +254,13 @@ onMounted(() => {
gap: var(--el-font-size-base);
.item {
$usingColor: #D2441F;
$subColor: #3274D5;
$closedColor: #aeb8c9;
background-color: #efefef;
border-radius: 6px;
overflow: hidden;
border: 2px solid #fff;
$usingColor: #D2441F;
$subColor: #3274D5;
$closedColor: #aeb8c9;
&.active {
border-color: $subColor;