|
|
@@ -1,9 +1,14 @@
|
|
|
<template>
|
|
|
<view class="dish-order-page">
|
|
|
<view class="query-bar">
|
|
|
- <input class="query-input" v-model="searchForm.roomName" placeholder="请输入包房名称" confirm-type="search"
|
|
|
+ <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"
|
|
|
+ <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>
|
|
|
@@ -14,26 +19,22 @@
|
|
|
</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 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-title-wrap">
|
|
|
- <view class="room-name">{{ item.roomName || '-' }}</view>
|
|
|
- <view class="room-no">包房号：{{ item.roomNo || '-' }}</view>
|
|
|
- </view>
|
|
|
+ <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-meta">
|
|
|
- <view>
|
|
|
- <text>容纳人数</text>
|
|
|
- <strong>{{ item.capacity || 0 }} 人</strong>
|
|
|
- </view>
|
|
|
+ <view class="room-tags">
|
|
|
+ <text class="room-tag">包房号 {{ item.roomNo || '-' }}</text>
|
|
|
+ <text class="room-tag">容纳 {{ item.capacity || 0 }} 人</text>
|
|
|
</view>
|
|
|
- <view class="room-remarks">{{ item.remarks || '暂无备注' }}</view>
|
|
|
+ <view v-if="item.remarks" class="room-remarks">{{ item.remarks }}</view>
|
|
|
</view>
|
|
|
- <view v-if="roomList.length === 0" class="empty-room">暂无包房</view>
|
|
|
+ <view v-if="displayRoomList.length === 0" class="empty-room">暂无包房</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
@@ -50,11 +51,20 @@ export default {
|
|
|
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()
|
|
|
@@ -78,8 +88,12 @@ export default {
|
|
|
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' })
|
|
|
@@ -106,16 +120,41 @@ export default {
|
|
|
|
|
|
.query-bar {
|
|
|
flex-shrink: 0;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140rpx 140rpx;
|
|
|
- gap: 16rpx;
|
|
|
+ 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;
|
|
|
@@ -150,7 +189,7 @@ export default {
|
|
|
|
|
|
.room-grid {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(320rpx, 1fr));
|
|
|
gap: 22rpx;
|
|
|
padding-bottom: 4rpx;
|
|
|
}
|
|
|
@@ -168,17 +207,22 @@ export default {
|
|
|
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-title-wrap {
|
|
|
- min-width: 0;
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
.room-name {
|
|
|
font-size: 34rpx;
|
|
|
font-weight: 700;
|
|
|
@@ -189,13 +233,6 @@ export default {
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
-.room-no {
|
|
|
- margin-top: 8rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #909399;
|
|
|
- line-height: 34rpx;
|
|
|
-}
|
|
|
-
|
|
|
.room-status {
|
|
|
height: 44rpx;
|
|
|
padding: 0 18rpx;
|
|
|
@@ -206,41 +243,28 @@ export default {
|
|
|
}
|
|
|
|
|
|
.room-status.free {
|
|
|
- color: #19be6b;
|
|
|
- background: #e8f7ef;
|
|
|
+ color: #fff;
|
|
|
+ background: #19be6b;
|
|
|
}
|
|
|
|
|
|
.room-status.busy {
|
|
|
- color: #2979ff;
|
|
|
- background: #ecf5ff;
|
|
|
+ color: #fff;
|
|
|
+ background: #fa3534;
|
|
|
}
|
|
|
|
|
|
-.room-meta {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
- gap: 12rpx;
|
|
|
- margin-top: 28rpx;
|
|
|
+.room-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
|
|
|
-.room-meta>view {
|
|
|
- padding: 16rpx;
|
|
|
+.room-tag {
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
border-radius: 8rpx;
|
|
|
- /* background: #f7f9fb; */
|
|
|
-}
|
|
|
-
|
|
|
-.room-meta text {
|
|
|
- display: block;
|
|
|
+ background: rgba(255, 255, 255, 0.72);
|
|
|
font-size: 24rpx;
|
|
|
- color: #909399;
|
|
|
- line-height: 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.room-meta strong {
|
|
|
- display: block;
|
|
|
- margin-top: 6rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #303133;
|
|
|
- line-height: 40rpx;
|
|
|
+ color: #606266;
|
|
|
}
|
|
|
|
|
|
.room-remarks {
|
|
|
@@ -265,4 +289,57 @@ export default {
|
|
|
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>
|
