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

<template>
	<view class="item color-fff border-r-12" :class="[data.status]" @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 class="u-flex gap-10">
					<!-- <uni-tag  text="计时" size="small" type="warning"></uni-tag> -->
					<!-- <uni-tag text="可预约" size="small" type="primary"></uni-tag> -->
				</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">
			<template v-if="data.status=='idle'">
				<view class="u-m-t-40 color-main u-font-32">{{returnStutasText(data.status)}}~</view>
				<view class="u-flex gap-10 u-m-t-20">
					<uni-tag :text="data.type == 0 ? '低消' : '计时'" size="small" type="warning"></uni-tag>
					<uni-tag :text="data.isPredate == 1 ? '可预约' : '不可预约'" size="small" type="primary"></uni-tag>
				</view>
			</template>
			<view class="u-m-t-40 w-full u-p-l-20 u-p-r-20 u-m-b-40">
				<template v-if="data.status=='idle'">
					<view class="u-flex u-row-center">
						<my-button type="default" @click="diancan" :disabled="!data.tableId">
							<view class=" u-p-l-30 u-p-r-30" :class="{'color-333':data.tableId}">点餐</view>
						</my-button>
					</view>

				</template>
				<template v-else>
					<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">{{goodsNumber}}件</text> </view>
						<view class="u-m-t-10"><text>金额</text><text class="u-m-l-20 color-333">{{allPrice}} 元</text> </view>
						<view class="u-m-t-10"><text>待结</text><text class="u-m-l-20 color-333">{{allPrice}} 元</text> </view>
					</view>
					<view class="u-text-right u-p-20 color-666">
						0人扫码
					</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';
	const status = $status

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

	function returnStutasColor(key) {
		// if(key=='using'){
		// 	return 'rgb(250,85,85)'
		// }else{
		// 	return ''
		// }
		const item = status[key]
		return item ? item.type : ''
	}
	const props = defineProps({
		data: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	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 
	})
	
	async function init(){
		if(props.data.tableId){
			const {masterId}=await Api.$getMasterId({
				tableId:props.data.tableId
			})
			const {records} = await Api.getCart({
				tableId:props.data.tableId,
				masterId
			})
			goodsList.value=records
		}
		
	}
	onMounted(()=>{
		init()
	})
	const emits = defineEmits(['more'])

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

	function diancan() {
		go.to('PAGES_CREATE_ORDER', {
			tableId: props.data.tableId,
			tableName: props.data.name
		})
	}

	function toOrderDetail() {
		if(props.data.status=='using'){
			const {tableId,name,status,amount,areaId}=props.data
			go.to('PAGES_CRESATE_ORDER_DETAIL', {
				tableId,name,status,amount,areaId
			})
		}
	}
</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;

		.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>