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 != 'using'">
				<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">
					<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.productNum || 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 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.useTime }}</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 == 'using' && !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, 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 : '';
}

/**
 * 更多
 */
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 == 'using' ? 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;
		}
	}

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