xg_total_process_master_cloud_h5/pages/psiManagement/dishManage/DishOrder.vue

<template>
	<view class="dish-order-page">
		<view class="query-bar">
			<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 roomList" :key="item.id" class="room-card"
					:class="{ disabled: item.status === '1' }" @click="enterOrder(item)">
					<view class="room-card-top">
						<view class="room-title-wrap">
							<view class="room-name">{{ item.roomName || '-' }}</view>
							<view class="room-no">包房号：{{ item.roomNo || '-' }}</view>
						</view>
						<view class="room-status" :class="item.useStatus === '0' ? 'free' : 'busy'">
							{{ item.useStatus === '0' ? '空闲中' : '使用中' }}
						</view>
					</view>
					<view class="room-meta">
						<view>
							<text>容纳人数</text>
							<strong>{{ item.capacity || 0 }} 人</strong>
						</view>
					</view>
					<view class="room-remarks">{{ item.remarks || '暂无备注' }}</view>
				</view>
				<view v-if="roomList.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'
			},
			roomList: [],
			roomLoading: false,
			dishOrderService: null
		}
	},
	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.refreshRoomList()
		},
		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: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140rpx 140rpx;
	gap: 16rpx;
	margin-bottom: 22rpx;
	padding: 18rpx;
	border-radius: 12rpx;
	background: #fff;
}

.query-input {
	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(3, minmax(0, 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-top {
	display: flex;
	justify-content: space-between;
	gap: 18rpx;
}

.room-title-wrap {
	min-width: 0;
	flex: 1;
}

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

.room-no {
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #909399;
	line-height: 34rpx;
}

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

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

.room-status.busy {
	color: #2979ff;
	background: #ecf5ff;
}

.room-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12rpx;
	margin-top: 28rpx;
}

.room-meta>view {
	padding: 16rpx;
	border-radius: 8rpx;
	/* background: #f7f9fb; */
}

.room-meta text {
	display: block;
	font-size: 24rpx;
	color: #909399;
	line-height: 32rpx;
}

.room-meta strong {
	display: block;
	margin-top: 6rpx;
	font-size: 30rpx;
	color: #303133;
	line-height: 40rpx;
}

.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;
}
</style>