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

<template>
	<view class="item color-fff border-r-12" :class="[computedClass]" @click="toOrderDetail">
		<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.tableId">
							<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 * as Api from '@/http/yskApi/Instead.js'
	import myButton from '@/components/my-components/my-button'
	import go from '@/commons/utils/go.js'
	import {
		$status
	} from '@/commons/table-status.js'
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import {
		$table
	} from '@/http/yskApi/table.js'
	import infoBox from '@/commons/utils/infoBox.js'
	const status = $status
	const emits = defineEmits(['more', 'update'])

	function returnStutasText(key) {
		key = returnIsUseing(key)
		const item = status[key]
		return item ? item.label : ''
	}

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

	function returnIsUseing(key) {
		return key = key == 'using' ? (props.data.orderId ? key : 'idle') : key
	}

	function returnStutasColor(key) {
		// if(key=='using'){
		// 	return 'rgb(250,85,85)'
		// }else{
		// 	return ''
		// }
		key = returnIsUseing(key)
		const item = status[key]
		return item ? item.type : ''
	}
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},
		areaMap: {
			type: Object,
			default: () => {}
		}
	})
	const goodsList = ref([])
	const allPrice = computed(() => {
		return goodsList.value.reduce((prve, cur) => {
			return prve + cur.salePrice * cur.number
		}, 0).toFixed(2)
	})

	const goodsNumber = computed(() => {
		let result = 0
		result = goodsList.value.reduce((prve, cur) => {
			return prve + cur.number
		}, 0)
		return result
	})

	onMounted(() => {})

	function more() {
		emits('more')
	}


	function diancan() {
		const useType = props.status == 'using' ? props.data.useType : undefined
		go.to('PAGES_CREATE_ORDER', {
			tableId: props.data.tableId,
			name: props.data.name,
			maxCapacity: props.data.maxCapacity,
			status: props.data.status,
		})
	}

	function toOrderDetail() {
		if (props.data.status == 'using' && props.data.orderId) {
			const {
				tableId,
				name,
				status,
				amount,
				areaId,
				orderId
			} = props.data
			if (!orderId) {
				return uni.showToast({
					icon: 'none',
					title: '台桌未返回订单id'
				})
			}
			go.to('PAGES_ORDER_DETAIL', {
				tableId,
				name,
				status,
				amount,
				areaId,
				id: orderId
			})
		}
	}

	function qingtai() {
		const item = props.data
		uni.showModal({
			title: '提示',
			content: '确定要清台：' + props.data.name + '？',
			success(res) {
				if (res.confirm) {
					$table.update({
						...item,
						status: "idle",
						qrcode: item.tableId,
					}).then(res => {
						infoBox.showToast('清台成功')
						emits('update')
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.gap-10 {
		gap: 10rpx;
	}

	.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: 32rpx 28rpx;

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

		&.using {
			.tag {
				color: rgb(250, 85, 85);
			}
		}

	}
</style>