xg_total_process_master_cloud_h5/pages/psiManagement/dishManage/DishOrder.vue

<template>
	<view class="dish-order-page">
		<view class="query-bar">
			<view class="status-chips">
				<view class="chip" :class="{ active: statusFilter === '' }" @click="changeStatusFilter('')">全部</view>
				<view class="chip" :class="{ active: statusFilter === '0' }" @click="changeStatusFilter('0')">空闲中</view>
				<view class="chip" :class="{ active: statusFilter === '1' }" @click="changeStatusFilter('1')">使用中</view>
			</view>
			<input class="query-input" v-model="searchForm.roomName" placeholder="包房名称" confirm-type="search"
				@confirm="refreshRoomList" />
			<input class="query-input" v-model="searchForm.roomNo" placeholder="包房编号" confirm-type="search"
				@confirm="refreshRoomList" />
			<button class="query-btn primary" @click="refreshRoomList">查询</button>
			<button class="query-btn" @click="resetSearch">重置</button>
		</view>

		<view v-if="roomLoading" class="state-box">
			<u-loading-icon text="加载中" textSize="14"></u-loading-icon>
		</view>
		<scroll-view v-else scroll-y class="room-scroll">
			<view class="room-grid">
				<view v-for="item in displayRoomList" :key="item.id" class="room-card"
					:class="[{ disabled: item.status === '1' }, item.useStatus === '0' ? 'free' : 'busy']"
					@click="enterOrder(item)">
					<view class="room-card-top">
						<view class="room-name">{{ item.roomName || '-' }}</view>
						<view class="room-status" :class="item.useStatus === '0' ? 'free' : 'busy'">
							{{ item.useStatus === '0' ? '空闲中' : '使用中' }}
						</view>
					</view>
					<view class="room-tags">
						<text class="room-tag">包房号 {{ item.roomNo || '-' }}</text>
						<text class="room-tag">容纳 {{ item.capacity || 0 }} 人</text>
					</view>
					<view v-if="item.remarks" class="room-remarks">{{ item.remarks }}</view>
				</view>
				<view v-if="displayRoomList.length === 0" class="empty-room">暂无包房</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import DishOrderService from '@/api/psi/DishOrderService'

export default {
	data() {
		return {
			searchForm: {
				roomName: '',
				roomNo: '',
				status: '0'
			},
			statusFilter: '',
			roomList: [],
			roomLoading: false,
			dishOrderService: null
		}
	},
	computed: {
		displayRoomList() {
			if (!this.statusFilter) {
				return this.roomList
			}
			return this.roomList.filter(item => item.useStatus === this.statusFilter)
		}
	},
	onLoad() {
		uni.setNavigationBarTitle({ title: '点菜' })
		this.dishOrderService = new DishOrderService()
		this.refreshRoomList()
	},
	onShow() {
		if (!this.dishOrderService) {
			this.dishOrderService = new DishOrderService()
		}
		this.refreshRoomList()
	},
	methods: {
		refreshRoomList() {
			this.roomLoading = true
			this.dishOrderService.roomList({ ...this.searchForm }).then((data) => {
				this.roomList = Array.isArray(data) ? data : []
			}).finally(() => {
				this.roomLoading = false
			})
		},
		resetSearch() {
			this.searchForm.roomName = ''
			this.searchForm.roomNo = ''
			this.statusFilter = ''
			this.refreshRoomList()
		},
		changeStatusFilter(value) {
			this.statusFilter = value
		},
		enterOrder(room) {
			if (room.status === '1') {
				uni.showToast({ title: '该包房已停用', icon: 'none' })
				return
			}
			uni.navigateTo({
				url: `/pages/psiManagement/dishManage/DishOrderDetail?roomId=${room.id}`
			})
		}
	}
}
</script>

<style scoped>
.dish-order-page {
	height: calc(100vh - var(--window-top, 0px));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 24rpx;
	background: #f5f6fa;
}

.query-bar {
	flex-shrink: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12rpx;
	margin-bottom: 22rpx;
	padding: 18rpx;
	border-radius: 12rpx;
	background: #fff;
}

.status-chips {
	display: flex;
	gap: 10rpx;
	margin-right: auto;
}

.chip {
	height: 56rpx;
	padding: 0 26rpx;
	border-radius: 999rpx;
	background: #f2f4f7;
	font-size: 26rpx;
	line-height: 56rpx;
	color: #606266;
}

.chip.active {
	color: #fff;
	background: #2979ff;
	font-weight: 700;
}

.query-input {
	flex: 1;
	min-width: 180rpx;
	height: 72rpx;
	box-sizing: border-box;
	padding: 0 22rpx;
	border: 1rpx solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #303133;
	background: #fff;
}

.query-btn {
	height: 72rpx;
	margin: 0;
	padding: 0;
	border-radius: 8rpx;
	font-size: 28rpx;
	line-height: 72rpx;
	color: #606266;
	background: #f7f8fa;
}

.query-btn.primary {
	color: #fff;
	background: #2979ff;
}

.room-scroll {
	flex: 1;
	height: 0;
	min-height: 0;
}

.room-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320rpx, 1fr));
	gap: 22rpx;
	padding-bottom: 4rpx;
}

.room-card {
	min-height: 260rpx;
	box-sizing: border-box;
	padding: 24rpx;
	border: 3rpx solid #e5e7eb;
	border-radius: 10rpx;
	background: #fff;
}

.room-card.disabled {
	background: #f7f8fa;
}

.room-card.free {
	border-color: #b3e19d;
	background: #f0f9eb;
}

.room-card.busy {
	border-color: #fbc4c4;
	background: #fef0f0;
}

.room-card-top {
	display: flex;
	justify-content: space-between;
	gap: 18rpx;
}

.room-name {
	font-size: 34rpx;
	font-weight: 700;
	color: #1f2937;
	line-height: 46rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.room-status {
	height: 44rpx;
	padding: 0 18rpx;
	border-radius: 999rpx;
	font-size: 24rpx;
	line-height: 44rpx;
	white-space: nowrap;
}

.room-status.free {
	color: #fff;
	background: #19be6b;
}

.room-status.busy {
	color: #fff;
	background: #fa3534;
}

.room-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
	margin-top: 20rpx;
}

.room-tag {
	padding: 6rpx 16rpx;
	border-radius: 8rpx;
	background: rgba(255, 255, 255, 0.72);
	font-size: 24rpx;
	color: #606266;
}

.room-remarks {
	margin-top: 22rpx;
	font-size: 26rpx;
	color: #606266;
	line-height: 38rpx;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.state-box,
.empty-room {
	flex: 1;
	min-height: 360rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
	background: #fff;
	color: #909399;
}

@media (min-width: 768px) {
	.query-input {
		height: 44px;
		font-size: 16px;
	}

	.query-btn {
		width: 88px;
		height: 44px;
		font-size: 16px;
		line-height: 44px;
	}

	.chip {
		height: 40px;
		padding: 0 22px;
		font-size: 16px;
		line-height: 40px;
	}

	.room-grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 16px;
	}

	.room-card {
		min-height: 150px;
		padding: 18px;
	}

	.room-name {
		font-size: 24px;
		line-height: 32px;
	}

	.room-status {
		height: 32px;
		padding: 0 16px;
		font-size: 15px;
		line-height: 32px;
	}

	.room-tag {
		padding: 4px 12px;
		font-size: 14px;
	}

	.room-remarks {
		font-size: 15px;
		line-height: 22px;
	}
}
</style>