cashier_app/pageTable/index/components/table-item.vue

<template>
	<view class="item color-fff border-r-12" :class="[computedClass]">
		<view class="my-bg-main" :style="{ 'background-color': returnStutasColor(data.status) }">
			<view class="u-flex u-row-between">
				<view class="u-font-32">{{ data.name }}</view>
				<view class="u-flex" @tap.stop="more">
					<uni-icons type="more-filled" color="#fff" size="16"></uni-icons>
				</view>
			</view>
			<view class="u-flex u-m-t-10 u-row-between">
				<view>{{ areaMap[data.areaId] || '' }}</view>
				<view class="tag" :style="{ color: returnStutasColor(data.status) }">
					{{ returnStutasText(data.status) }}
				</view>
			</view>
		</view>
		<view class="u-flex u-flex-col u-row-center u-col-center bg-fff bottom">
			<template v-if="data.status != 'unsettled'">
				<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 == 'unsettled' && data.orderId">
					<view class="color-666 u-text-left u-p-b-20 border-bottom">
						<view class="">
							<text>就餐人数</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.orderAmount || 0 }} 元</text>
						</view>
						<!-- <view class="u-m-t-10">
							<text>待结</text>
							<text class="u-m-l-20 color-333">{{ data.totalAmount || 0 }} 元</text>
						</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.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>
							</template>
							<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>
							</template>
							<template v-if="data.status == 'cleaning'">
								<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>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	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 {
		shopTableClear
	} from '@/http/api/table.js';

	const emits = defineEmits(['more', 'update', 'bind']);
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {};
			}
		},
		areaMap: {
			type: Object,
			default: () => {}
		}
	});

	const computedClass = computed(() => {
		return props.data.status;
	});

	function returnStutasText(key) {
		const item = uni.$dict.tableStatus[key];
		return item ? item.label : '';
	}

	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 + "分"}`;
	}
	/**
	 * 更多
	 */
	function more() {
		if (props.data.status == 'done') {
			return uni.showToast({
				icon: 'none',
				title: '桌台关闭中！'
			});
		}
		emits('more');
	}

	/**
	 * 绑定码牌
	 */
	function bind() {
		emits('bind', props.data);
	}

	/**
	 * 选择下单
	 */
	async function diancan() {
		hasPermission('允许下单').then((res) => {
			console.log(res);
			if (res) {
				const useType = props.status == 'unsettled' ? props.data.useType : undefined;
				console.log(props.data);
				go.to('PAGES_CREATE_ORDER', props.data);
			}
		});
	}

	/**
	 * 清台
	 */
	function qingtai() {
		let item = props.data;
		uni.showModal({
			title: '提示',
			content: '确定要清台：' + item.name + '？',
			success(res) {
				if (res.confirm) {
					shopTableClear({
						id: item.id
					}).then((res) => {
						uni.$utils.showToast('清台成功');
						emits('update');
					});
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 330rpx;
		box-sizing: border-box;
		overflow: hidden;
		box-shadow: 1px 1px 0 #eee;
		border-color: #eee;

		.bottom {
			min-height: 224rpx;
		}

		.my-bg-main {
			padding: 24rpx 28rpx;

			.tag {
				background-color: rgba(255, 255, 255, 0.7);
				font-size: 24rpx;
				color: $my-main-color;
				border-radius: 8rpx;
				padding: 2rpx 10rpx;
			}
		}

		&.unsettled {
			.tag {
				color: rgb(250, 85, 85);
			}
		}
	}
</style>