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

增加台桌增减菜功能

Browse Source
This commit is contained in:
YeMingfei666
2026-04-09 16:16:52 +08:00
parent 5032b86d69
commit e51e2f4298
2 changed files with 562 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
pageTable/index/components/table-item.vue
View File

@@ -15,41 +15,48 @@
</view> </view>
</view> </view>
<view class="u-flex u-flex-col u-row-center u-col-center bg-fff bottom"> <view class="u-flex u-flex-col u-row-center u-col-center bg-fff bottom">
<template v-if="data.status != 'using'"> <template v-if="data.status != 'unsettled'">
<view class="u-font-32" :style="{ color: returnStutasColor(data.status) }">{{ returnStutasText(data.status) }}~</view> <view class="u-font-32" :style="{ color: returnStutasColor(data.status) }">
{{ returnStutasText(data.status) }}~</view>
</template> </template>
<view class="w-full u-p-l-16 u-p-r-16 u-p-t-16 u-font-24"> <view class="w-full u-p-l-16 u-p-r-16 u-p-t-16 u-font-24">
<template v-if="data.status == 'using' && data.orderId"> <template v-if="data.status == 'unsettled' && data.orderId">
<view class="color-666 u-text-left u-p-b-20 border-bottom"> <view class="color-666 u-text-left u-p-b-20 border-bottom">
<view class=""> <view class="">
<text>已点</text> <text>就餐人数</text>
<text class="u-m-l-20 color-333">{{ data.productNum || 0 }}件</text> <text class="u-m-l-20 color-333">{{ data.personNum}}/{{data.maxCapacity}}人</text>
</view> </view>
<view class="u-m-t-10"> <view class="u-m-t-10">
<text>金额</text> <text>金额</text>
<text class="u-m-l-20 color-333">{{ data.totalAmount || 0 }} 元</text> <text class="u-m-l-20 color-333">{{ data.orderAmount || 0 }} 元</text>
</view> </view>
<view class="u-m-t-10"> <!-- <view class="u-m-t-10">
<text>待结</text> <text>待结</text>
<text class="u-m-l-20 color-333">{{ data.totalAmount || 0 }} 元</text> <text class="u-m-l-20 color-333">{{ data.totalAmount || 0 }} 元</text>
</view> </view> -->
</view> </view>
<view class="u-flex u-row-between u-font-20 u-p-b-20 u-p-t-20"> <view class="u-flex u-row-between u-font-20 u-p-b-20 u-p-t-20">
<text class="color-333">开台时间</text> <text class="color-333">开台时间</text>
<text class="color-666">{{ data.useTime }}</text> <!-- <text class="color-666">{{ data.orderCreateTime }}</text> -->
<text class="color-666">{{ formatTime(data.orderCreateTime) }}</text>
</view> </view>
</template> </template>
<template v-else> <template v-else>
<view class="u-flex u-row-center u-m-t-16"> <view class="u-flex u-row-center u-m-t-16">
<template v-if="data.id"> <template v-if="data.id">
<template v-if="data.status == 'unbind'"> <template v-if="data.status == 'unbind'">
<my-button color="#333" :width="200" :height="56" type="default" @click="bind">绑定码牌</my-button> <my-button color="#333" :width="200" :height="56" type="default"
@click="bind">绑定码牌</my-button>
</template> </template>
<template v-if="data.status == 'idle' || (data.status == 'using' && !data.orderId)"> <template v-if="data.status == 'idle' || (data.status == 'unsettled' && !data.orderId)">
<my-button color="#333" :width="150" :height="56" type="default" @click="diancan">选择</my-button> <my-button color="#333" :width="150" :height="56" type="default"
@click="diancan">选择</my-button>
</template> </template>
<template v-if="data.status == 'cleaning'"> <template v-if="data.status == 'cleaning'">
<my-button color="#333" :width="150" :height="56" type="default" @click="qingtai">清台</my-button> <my-button color="#333" :width="150" :height="56" type="default"
@click="qingtai">清台</my-button>
</template> </template>
</template> </template>
<my-button v-else :width="150" :height="56" type="default" disabled>选择</my-button> <my-button v-else :width="150" :height="56" type="default" disabled>选择</my-button>
@@ -61,14 +68,21 @@
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue'; import {
import myButton from '@/components/my-components/my-button'; computed,onUnmounted,
import go from '@/commons/utils/go.js'; ref
import { hasPermission } from '@/commons/utils/hasPermission.js'; } from 'vue';
import { shopTableClear } from '@/http/api/table.js'; import myButton from '@/components/my-components/my-button';
import go from '@/commons/utils/go.js';
import {
hasPermission
} from '@/commons/utils/hasPermission.js';
import {
shopTableClear
} from '@/http/api/table.js';
const emits = defineEmits(['more', 'update', 'bind']); const emits = defineEmits(['more', 'update', 'bind']);
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: () => { default: () => {
@@ -79,26 +93,60 @@ const props = defineProps({
type: Object, type: Object,
default: () => {} default: () => {}
} }
}); });
const computedClass = computed(() => { const computedClass = computed(() => {
return props.data.status; return props.data.status;
}); });
function returnStutasText(key) { function returnStutasText(key) {
const item = uni.$dict.tableStatus[key]; const item = uni.$dict.tableStatus[key];
return item ? item.label : ''; return item ? item.label : '';
} }
function returnStutasColor(key) { function returnStutasColor(key) {
const item = uni.$dict.tableStatus[key]; const item = uni.$dict.tableStatus[key];
return item ? item.type : ''; return item ? item.type : '';
} }
const nowTime = ref(new Date().getTime());
/** // 定时器 ID（用于销毁）
let timer = null;
// 启动实时更新时间（uniapp 全端稳定）
function updateTime() {
timer = setInterval(() => {
nowTime.value = new Date().getTime();
}, 1000); // 1秒刷新一次，足够用
}
updateTime();
// 页面销毁时清除定时器（必须加！）
onUnmounted(() => {
if (timer) {
clearInterval(timer);
timer = null;
}
});
// 时间格式化工具（完全不变，逻辑一样）
function formatTime(str) {
if (!str) return "";
const targetTime = new Date(str).getTime();
const milliseconds = nowTime.value - targetTime;
if (milliseconds <= 0) return "已结束";
const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
}
/**
* 更多 * 更多
*/ */
function more() { function more() {
if (props.data.status == 'done') { if (props.data.status == 'done') {
return uni.showToast({ return uni.showToast({
icon: 'none', icon: 'none',
@@ -106,33 +154,33 @@ function more() {
}); });
} }
emits('more'); emits('more');
} }
/** /**
* 绑定码牌 * 绑定码牌
*/ */
function bind() { function bind() {
emits('bind', props.data); emits('bind', props.data);
} }
/** /**
* 选择下单 * 选择下单
*/ */
async function diancan() { async function diancan() {
hasPermission('允许下单').then((res) => { hasPermission('允许下单').then((res) => {
console.log(res); console.log(res);
if (res) { if (res) {
const useType = props.status == 'using' ? props.data.useType : undefined; const useType = props.status == 'unsettled' ? props.data.useType : undefined;
console.log(props.data); console.log(props.data);
go.to('PAGES_CREATE_ORDER', props.data); go.to('PAGES_CREATE_ORDER', props.data);
} }
}); });
} }
/** /**
* 清台 * 清台
*/ */
function qingtai() { function qingtai() {
let item = props.data; let item = props.data;
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@@ -148,11 +196,11 @@ function qingtai() {
} }
} }
}); });
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item { .item {
width: 330rpx; width: 330rpx;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@@ -175,10 +223,10 @@ function qingtai() {
} }
} }
&.using { &.unsettled {
.tag { .tag {
color: rgb(250, 85, 85); color: rgb(250, 85, 85);
} }
} }
} }
</style> </style>

220
pageTable/index/index.vue
View File

@@ -5,25 +5,19 @@
<view class="input-wrapper"> <view class="input-wrapper">
<view class="input-main"> <view class="input-main">
<view class="u-flex u-p-r-30 u-font-28" @click="pageData.statusShow = !pageData.statusShow"> <view class="u-flex u-p-r-30 u-font-28" @click="pageData.statusShow = !pageData.statusShow">
<text class="u-m-r-10 u-line-1" :class="{ 'color-main': pageData.query.status != '' }" style="max-width: 100rpx">{{ pageData.statusName }}</text> <text class="u-m-r-10 u-line-1" :class="{ 'color-main': pageData.query.status != '' }"
style="max-width: 100rpx">{{ pageData.statusName }}</text>
<up-icon name="arrow-down" size="16"></up-icon> <up-icon name="arrow-down" size="16"></up-icon>
</view> </view>
<uni-easyinput <uni-easyinput clearable class="jeepay-search" :inputBorder="false" trim="all" placeholder="搜索"
clearable v-model="pageData.query.name" @clear="searchConfirm" @confirm="searchConfirm">
class="jeepay-search"
:inputBorder="false"
trim="all"
placeholder="搜索"
v-model="pageData.query.name"
@clear="searchConfirm"
@confirm="searchConfirm"
>
<template #prefixIcon> <template #prefixIcon>
<image src="@/static/iconImg/icon-search.svg" class="input-icon" /> <image src="@/static/iconImg/icon-search.svg" class="input-icon" />
</template> </template>
</uni-easyinput> </uni-easyinput>
<view class="u-m-l-4"> <view class="u-m-l-4">
<button class="" type="text" @click="searchConfirm"><text class="color-333">搜索</text></button> <button class="" type="text" @click="searchConfirm"><text
class="color-333">搜索</text></button>
<!-- <button class="" type="text" ><text class="color-main font-bold">清台设置</text></button> --> <!-- <button class="" type="text" ><text class="color-main font-bold">清台设置</text></button> -->
</view> </view>
</view> </view>
@@ -39,7 +33,8 @@
<!-- <view class="u-m-t-10">0/12</view> --> <!-- <view class="u-m-t-10">0/12</view> -->
</view> </view>
</view> </view>
<view class="item u-p-20" :class="{ sel: pageData.area.sel === item.id }" @tap="changeAreaSel(item)" v-for="(item, index) in pageData.area.list" :key="index"> <view class="item u-p-20" :class="{ sel: pageData.area.sel === item.id }" @tap="changeAreaSel(item)"
v-for="(item, index) in pageData.area.list" :key="index">
<view class="box"> <view class="box">
<view class="up-line-1">{{ item.name }}</view> <view class="up-line-1">{{ item.name }}</view>
<!-- <view class="u-m-t-10">0/12</view> --> <!-- <view class="u-m-t-10">0/12</view> -->
@@ -51,40 +46,65 @@
<template v-if="pageData.tabList.length"> <template v-if="pageData.tabList.length">
<view class="u-flex u-flex-wrap u-row-between"> <view class="u-flex u-flex-wrap u-row-between">
<view class="u-m-b-30" v-for="(item, index) in pageData.tabList" :key="index"> <view class="u-m-b-30" v-for="(item, index) in pageData.tabList" :key="index">
<table-item @bind="scanCode" @update="getTable" :areaMap="pageData.areaMap" @more="moreShow(item)" :data="item"></table-item> <table-item @bind="scanCode" @update="getTable" :areaMap="pageData.areaMap"
@more="moreShow(item)" :data="item"></table-item>
</view> </view>
</view> </view>
<my-pagination :page="pageData.query.page" :totalElements="pageData.totalElements" :size="pageData.query.size" @change="pageChange"></my-pagination> <my-pagination :page="pageData.query.page" :totalElements="pageData.totalElements"
:size="pageData.query.size" @change="pageChange"></my-pagination>
</template> </template>
<my-img-empty v-if="pageData.hasAjax && !pageData.tabList.length" tips="未找到相关桌台"></my-img-empty> <my-img-empty v-if="pageData.hasAjax && !pageData.tabList.length" tips="未找到相关桌台"></my-img-empty>
</view> </view>
</view> </view>
</view> </view>
<my-action-sheet :active="4" @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list" :title="actionSheet.title"> <my-action-sheet :active="4" @itemClick="actionSheetClick" ref="refMoreSheet" :list="actionSheet.list"
:title="actionSheet.title">
<template #title> <template #title>
<view class="color-999 u-p-30 u-text-center border-bottom">桌号：{{ actionSheet.title }}</view> <view class="color-999 u-p-30 u-text-center border-bottom">桌号：{{ actionSheet.title }}</view>
</template> </template>
</my-action-sheet> </my-action-sheet>
<up-picker :show="pageData.statusShow" :columns="pageData.statusList" keyName="label" @cancel="pageData.statusShow = false" @confirm="confirmStatus"></up-picker> <up-picker :show="pageData.statusShow" :columns="pageData.statusList" keyName="label"
@cancel="pageData.statusShow = false" @confirm="confirmStatus"></up-picker>
</template> </template>
<script setup> <script setup>
import { onLoad, onReady, onShow } from '@dcloudio/uni-app'; import {
import { ref, reactive, computed, watch } from 'vue'; onLoad,
onReady,
onShow
} from '@dcloudio/uni-app';
import {
ref,
reactive,
computed,
watch
} from 'vue';
import tableItem from './components/table-item'; import tableItem from './components/table-item';
import go from '@/commons/utils/go.js'; import go from '@/commons/utils/go.js';
import myActionSheet from '@/components/my-components/my-action-sheet'; import myActionSheet from '@/components/my-components/my-action-sheet';
import { hasPermission } from '@/commons/utils/hasPermission.js'; import {
hasPermission
} from '@/commons/utils/hasPermission.js';
import { getShopTable, shopTableBind, shopTableClear } from '@/http/api/table.js'; import {
import { getShopArea } from '@/http/api/area.js'; getShopTable,
import { printOrder } from '@/http/api/order.js'; shopTableBind,
import { getHistoryOrder } from '@/http/api/order.js'; shopTableClear
} from '@/http/api/table.js';
import {
getShopArea
} from '@/http/api/area.js';
import {
printOrder
} from '@/http/api/order.js';
import {
getHistoryOrder
} from '@/http/api/order.js';
const pageData = reactive({ const pageData = reactive({
statusShow: false, statusShow: false,
hasAjax: false, hasAjax: false,
areaMap: {}, areaMap: {},
@@ -97,8 +117,7 @@ const pageData = reactive({
}, },
totalElements: 0, totalElements: 0,
statusList: [ statusList: [
[ [{
{
key: '', key: '',
label: '全部' label: '全部'
}, },
@@ -112,93 +131,100 @@ const pageData = reactive({
sel: '' sel: ''
}, },
orderInfo: null orderInfo: null
}); });
const refMoreSheet = ref(null); const refMoreSheet = ref(null);
const actionSheet = reactive({ const actionSheet = reactive({
list: ['结账', '清台', '增减菜', '换台', '打印订单', '历史订单', '绑定码牌'], list: ['结账', '清台', '增减菜', '换台', '打印订单', '历史订单', '绑定码牌'],
title: '', title: '',
selTable: '' selTable: ''
}); });
watch( watch(
() => pageData.area.sel, () => pageData.area.sel,
(newval) => { (newval) => {
pageData.query.page = 1; pageData.query.page = 1;
getTable(); getTable();
} }
); );
onShow((opt) => { onShow((opt) => {
getData(); getData();
}); });
function getData() {
function getData() {
getTable(); getTable();
getArea(); getArea();
} }
/** /**
* 获取桌台列表 * 获取桌台列表
*/ */
async function getTable() { async function getTable() {
const res = await getShopTable(pageData.query); const res = await getShopTable(pageData.query);
pageData.hasAjax = true; pageData.hasAjax = true;
pageData.tabList = res.records; pageData.tabList = res.records;
pageData.totalElements = res.totalRow; pageData.totalElements = res.totalRow;
} }
/** /**
* 获取区域 * 获取区域
*/ */
async function getArea() { async function getArea() {
const res = await getShopArea({ name: '', page: 1, size: 300 }); const res = await getShopArea({
name: '',
page: 1,
size: 300
});
pageData.area.list = res.records; pageData.area.list = res.records;
pageData.areaMap = res.records.reduce((prve, cur) => { pageData.areaMap = res.records.reduce((prve, cur) => {
prve[cur.id] = cur.name; prve[cur.id] = cur.name;
return prve; return prve;
}, {}); }, {});
} }
/** /**
* 类型选择 * 类型选择
* @param {Object} e * @param {Object} e
*/ */
function confirmStatus(e) { function confirmStatus(e) {
pageData.statusShow = false; pageData.statusShow = false;
pageData.query.status = e.value[0].key; pageData.query.status = e.value[0].key;
pageData.statusName = e.value[0].label; pageData.statusName = e.value[0].label;
getTable(); getTable();
} }
/** /**
* 区域选择确定 * 区域选择确定
* @param {Object} item * @param {Object} item
*/ */
function changeAreaSel(item) { function changeAreaSel(item) {
pageData.area.sel = item.id; pageData.area.sel = item.id;
pageData.query.areaId = item.id; pageData.query.areaId = item.id;
} }
/** /**
* 更多操作打开 * 更多操作打开
* @param {Object} table * @param {Object} table
*/ */
function moreShow(table) { function moreShow(table) {
actionSheet.title = table.name; actionSheet.title = table.name;
actionSheet.selTable = table; actionSheet.selTable = table;
refMoreSheet.value.open(); refMoreSheet.value.open();
if (actionSheet.selTable.orderId) { if (actionSheet.selTable.orderId) {
getHistoryOrder({ orderId: actionSheet.selTable.orderId }).then((res) => { getHistoryOrder({
orderId: actionSheet.selTable.orderId
}).then((res) => {
pageData.orderInfo = res; pageData.orderInfo = res;
}); });
} }
} }
/** /**
* 更多操作选择 * 更多操作选择
* @param {Object} index * @param {Object} index
*/ */
async function actionSheetClick(index) { async function actionSheetClick(index) {
console.log(index); console.log(index);
const item = actionSheet.selTable; const item = actionSheet.selTable;
if (index == 0) { if (index == 0) {
@@ -230,7 +256,12 @@ async function actionSheetClick(index) {
}); });
} }
if (index == 2) { if (index == 2) {
return uni.$utils.showToast('待开放，请敬请期待！'); if (item.status == 'idle' || item.status == 'unsettled') {
return go.to('PAGES_CREATE_ORDER', item);
}else{
return uni.$utils.showToast('当前台桌不可增减菜！');
}
// return uni.$utils.showToast('待开放，请敬请期待！');
} }
if (index == 3) { if (index == 3) {
return uni.$utils.showToast('待开放，请敬请期待！'); return uni.$utils.showToast('待开放，请敬请期待！');
@@ -241,7 +272,10 @@ async function actionSheetClick(index) {
return uni.$utils.showToast('该桌台暂无要打印的订单！'); return uni.$utils.showToast('该桌台暂无要打印的订单！');
} }
let res = await printOrder({ id: actionSheet.selTable.orderId, type: pageData.orderInfo.status == 'unpaid' ? 1 : 0 }); let res = await printOrder({
id: actionSheet.selTable.orderId,
type: pageData.orderInfo.status == 'unpaid' ? 1 : 0
});
return; return;
} }
if (index == 6) { if (index == 6) {
@@ -250,13 +284,13 @@ async function actionSheetClick(index) {
return; return;
} }
uni.$utils.showToast('待开放，请敬请期待！'); uni.$utils.showToast('待开放，请敬请期待！');
} }
/** /**
* 去结账 * 去结账
* @param {Object} item * @param {Object} item
*/ */
function toPay(item) { function toPay(item) {
go.to('PAGES_ORDER_PAY', { go.to('PAGES_ORDER_PAY', {
tableId: item.id, tableId: item.id,
tableName: item.name, tableName: item.name,
@@ -264,16 +298,16 @@ function toPay(item) {
discount: 1, discount: 1,
userId: item.userId userId: item.userId
}); });
} }
/** /**
* 绑定码牌 * 绑定码牌
* @param {Object} item * @param {Object} item
*/ */
function scanCode(item) { function scanCode(item) {
uni.scanCode({ uni.scanCode({
onlyFromCamera: true, onlyFromCamera: true,
success: function (res) { success: function(res) {
console.log('条码类型：' + res.scanType); console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result); console.log('条码内容：' + res.result);
let params = getQueryString(res.result); let params = getQueryString(res.result);
@@ -288,13 +322,13 @@ function scanCode(item) {
}); });
} }
}); });
} }
/** /**
* 解码 * 解码
* @param {Object} url * @param {Object} url
*/ */
function getQueryString(url) { function getQueryString(url) {
let params = {}; let params = {};
// 正则表达式来匹配URL中的查询字符串 // 正则表达式来匹配URL中的查询字符串
let reg = /(?:\?|#|&){1}([^=]*)=([^&]*)/g; let reg = /(?:\?|#|&){1}([^=]*)=([^&]*)/g;
@@ -302,31 +336,32 @@ function getQueryString(url) {
params[key] = value; params[key] = value;
}); });
return params; return params;
} }
/** /**
* 搜索 * 搜索
*/ */
function searchConfirm() { function searchConfirm() {
pageData.query.page = 1; pageData.query.page = 1;
getTable(); getTable();
} }
/** /**
* 页数改变事件 * 页数改变事件
* @param {Object} page * @param {Object} page
*/ */
function pageChange(page) { function pageChange(page) {
pageData.query.page = page; pageData.query.page = page;
getTable(); getTable();
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fixed-top { .fixed-top {
z-index: 10; z-index: 10;
} }
.input-wrapper {
.input-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -380,9 +415,9 @@ function pageChange(page) {
} }
} }
} }
} }
.table-type { .table-type {
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 10rpx 0 10rpx; padding: 0 10rpx 0 10rpx;
@@ -420,12 +455,13 @@ function pageChange(page) {
} }
} }
} }
} }
.search-box { .search-box {
background-color: #fff; background-color: #fff;
padding: 16rpx 0; padding: 16rpx 0;
display: flex; display: flex;
.search-btn { .search-btn {
padding: 0 30rpx; padding: 0 30rpx;
box-sizing: border-box; box-sizing: border-box;
@@ -436,23 +472,23 @@ function pageChange(page) {
background-color: rgb(247, 247, 247); background-color: rgb(247, 247, 247);
border-radius: 100px; border-radius: 100px;
} }
} }
.status { .status {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
z-index: 10; z-index: 10;
background-color: #fff; background-color: #fff;
} }
.icon-arrow-down-fill { .icon-arrow-down-fill {
width: 16rpx; width: 16rpx;
height: 10rpx; height: 10rpx;
} }
.list { .list {
// margin-top: 52px; // margin-top: 52px;
} }
</style> </style>