增加台桌增减菜功能

pageTable/index/components/table-item.vue

@@ -15,41 +15,48 @@
 			</view>
 		</view>
 		<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>
 			<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="">
-							<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 class="u-m-t-10">
 							<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 class="u-m-t-10">
+						<!-- <view class="u-m-t-10">
 							<text>待结</text>
 							<text class="u-m-l-20 color-333">{{ data.totalAmount || 0 }} 元</text>
-						</view>
+						</view> -->
 					</view>
 					<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-666">{{ data.useTime }}</text>
+						<!-- <text class="color-666">{{ data.orderCreateTime }}</text> -->
+						<text class="color-666">{{ formatTime(data.orderCreateTime) }}</text>
+
+
 					</view>
 				</template>
 				<template v-else>
 					<view class="u-flex u-row-center u-m-t-16">
 						<template v-if="data.id">
 							<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 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 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>
 						<my-button v-else :width="150" :height="56" type="default" disabled>选择</my-button>
@@ -61,11 +68,18 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue';
+	import {
+		computed,onUnmounted,
+		ref
+	} from 'vue';
 	import myButton from '@/components/my-components/my-button';
 	import go from '@/commons/utils/go.js';
-import { hasPermission } from '@/commons/utils/hasPermission.js';
+	import {
-import { shopTableClear } from '@/http/api/table.js';
+		hasPermission
+	} from '@/commons/utils/hasPermission.js';
+	import {
+		shopTableClear
+	} from '@/http/api/table.js';
 
 	const emits = defineEmits(['more', 'update', 'bind']);
 	const props = defineProps({
@@ -94,7 +108,41 @@ function returnStutasColor(key) {
 		const item = uni.$dict.tableStatus[key];
 		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 + "分"}`;
+	}
 	/**
 	 * 更多
 	 */
@@ -122,7 +170,7 @@ async function diancan() {
 		hasPermission('允许下单').then((res) => {
 			console.log(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);
 				go.to('PAGES_CREATE_ORDER', props.data);
 			}
@@ -175,7 +223,7 @@ function qingtai() {
 			}
 		}
 
-	&.using {
+		&.unsettled {
 			.tag {
 				color: rgb(250, 85, 85);
 			}

pageTable/index/index.vue

@@ -5,25 +5,19 @@
 				<view class="input-wrapper">
 					<view class="input-main">
 						<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>
 						</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>
 								<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
 							</template>
 						</uni-easyinput>
 						<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> -->
 						</view>
 					</view>
@@ -39,7 +33,8 @@
 						<!-- <view class="u-m-t-10">0/12</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="up-line-1">{{ item.name }}</view>
 						<!-- <view class="u-m-t-10">0/12</view> -->
@@ -51,38 +46,63 @@
 				<template v-if="pageData.tabList.length">
 					<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">
-							<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>
-					<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>
 
 				<my-img-empty v-if="pageData.hasAjax && !pageData.tabList.length" tips="未找到相关桌台"></my-img-empty>
 			</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>
 			<view class="color-999 u-p-30 u-text-center border-bottom">桌号：{{ actionSheet.title }}</view>
 		</template>
 	</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>
 
 <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 go from '@/commons/utils/go.js';
 	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({
 		statusShow: false,
@@ -97,8 +117,7 @@ const pageData = reactive({
 		},
 		totalElements: 0,
 		statusList: [
-		[
+			[{
-			{
 					key: '',
 					label: '全部'
 				},
@@ -132,6 +151,7 @@ watch(
 	onShow((opt) => {
 		getData();
 	});
+
 	function getData() {
 		getTable();
 		getArea();
@@ -151,7 +171,11 @@ async function getTable() {
 	 * 获取区域
 	 */
 	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.areaMap = res.records.reduce((prve, cur) => {
 			prve[cur.id] = cur.name;
@@ -188,7 +212,9 @@ function moreShow(table) {
 		actionSheet.selTable = table;
 		refMoreSheet.value.open();
 		if (actionSheet.selTable.orderId) {
-		getHistoryOrder({ orderId: actionSheet.selTable.orderId }).then((res) => {
+			getHistoryOrder({
+				orderId: actionSheet.selTable.orderId
+			}).then((res) => {
 				pageData.orderInfo = res;
 			});
 		}
@@ -230,7 +256,12 @@ async function actionSheetClick(index) {
 			});
 		}
 		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) {
 			return uni.$utils.showToast('待开放，请敬请期待！');
@@ -241,7 +272,10 @@ async function actionSheetClick(index) {
 				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;
 		}
 		if (index == 6) {
@@ -326,6 +360,7 @@ function pageChange(page) {
 	.fixed-top {
 		z-index: 10;
 	}
+
 	.input-wrapper {
 		display: flex;
 		justify-content: space-between;
@@ -426,6 +461,7 @@ function pageChange(page) {
 		background-color: #fff;
 		padding: 16rpx 0;
 		display: flex;
+
 		.search-btn {
 			padding: 0 30rpx;
 			box-sizing: border-box;