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 { $status } from '@/commons/table-status.js'
	import { $table } from '@/http/yskApi/table.js'

	const emits = defineEmits(['more', 'update', 'bind'])
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},
		areaMap: {
			type: Object,
			default: () => {}
		}
	})
	const status = $status
	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
		return key 
	}

	function returnStutasColor(key) {
		key = returnIsUseing(key)
		const item = status[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() {
		const item = props.data
		uni.showModal({
			title: '提示',
			content: '确定要清台：' + props.data.name + '？',
			success(res) {
				if (res.confirm) {
					$table.update({
						...item,
						status: "idle",
						qrcode: 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: 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>