292 lines
6.5 KiB
Vue
292 lines
6.5 KiB
Vue
<template>
|
|
<view class="page-content">
|
|
<view style="z-index: 10000;position: sticky;" :style="'top:0px'">
|
|
<view class="top-bar">
|
|
<nut-button type="primary" block @click="navigateTo('/pages/index/orderAdd')">
|
|
新增商品订单
|
|
</nut-button>
|
|
</view>
|
|
</view>
|
|
<!-- 使用flex布局 -->
|
|
<view class="room-grid">
|
|
<view v-for="(room, index) in rooms" :key="index" class="room-grid-item" :style="getRoomStyle(room.status)">
|
|
<view class="room-grid-card">
|
|
<view class="grid-item-content">
|
|
<view class="room-name">{{room.room_name}}</view>
|
|
<view class="room-info">
|
|
<view class="room-id" v-if="room.tel">尾号: {{room.tel}}</view>
|
|
<view class="remark" v-if="room.remarks">备注: {{room.remarks}}</view>
|
|
</view>
|
|
<view class="room-buttons">
|
|
<view v-if="room.status === 1">
|
|
<nut-button size="small" type="primary" shape="square"
|
|
@click="onBooking(room)">预约</nut-button>
|
|
</view>
|
|
<view v-else-if="room.status === 2">
|
|
<nut-button size="small" type="warning" plain shape="square"
|
|
@click="onUnBooking(room)">取消预约</nut-button>
|
|
</view>
|
|
|
|
<view v-if="room.status === 3">
|
|
<nut-button size="small" type="info" plain shape="square"
|
|
@click="navigateTo(`/pages/index/orderEdit?roomId=${room.id}`)">详情</nut-button>
|
|
|
|
</view>
|
|
<view v-else>
|
|
<nut-button size="small" type="success" plain shape="square"
|
|
@click="navigateTo(`/pages/index/orderAdd?roomId=${room.id}`)">开台</nut-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 弹出 -->
|
|
<nut-popup :custom-style="{ height: '60%' }" v-model:visible="visiblePopup" position="bottom"
|
|
safe-area-inset-bottom :close-on-click-overlay="true" @close="onClosePopup">
|
|
<view>
|
|
<view class="title">{{tempRoom?.room_name}} </view>
|
|
<nut-form>
|
|
<nut-form-item label="尾号">
|
|
<nut-input v-model="form.tel" placeholder="请输入尾号"></nut-input>
|
|
</nut-form-item>
|
|
<nut-form-item label="备注">
|
|
<nut-textarea v-model="form.remarks" :rows="3" :adjust-keyboard-to="bottom"
|
|
placeholder="请输入备注"></nut-textarea>
|
|
</nut-form-item>
|
|
</nut-form>
|
|
<view style=" padding: 0rpx 80rpx;">
|
|
<nut-button type="primary" block @click="onSubmit">
|
|
预约
|
|
</nut-button>
|
|
</view>
|
|
</view>
|
|
</nut-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
computed
|
|
} from 'vue'
|
|
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
fetchRooms,
|
|
fetchBooking,
|
|
fetchUnBooking
|
|
} from '@/api/index';
|
|
import {
|
|
navigateTo,
|
|
} from '@/utils/helper'
|
|
const form = reactive({
|
|
room_id: 0,
|
|
tel: '',
|
|
remarks: ''
|
|
})
|
|
// 房间列表
|
|
const rooms = ref([]);
|
|
const getRoomStyle = (status) => {
|
|
let backgroundColor = '';
|
|
let borderColor = '';
|
|
switch (status) {
|
|
case 1: // 空闲/可用
|
|
backgroundColor = '#d9d9d9';
|
|
break;
|
|
case 2: // 已预约
|
|
backgroundColor = '#ffa39e';
|
|
break;
|
|
case 3: // 已占用
|
|
backgroundColor = '#b7eb8f';
|
|
break;
|
|
// case 4: // 打扫中
|
|
// backgroundColor = '#f0f5ff';
|
|
// borderColor = '#adc6ff';
|
|
// break;
|
|
default: // 默认
|
|
backgroundColor = '#d9d9d9';
|
|
}
|
|
return {
|
|
'background-color': backgroundColor,
|
|
};
|
|
}
|
|
const visiblePopup = ref(false)
|
|
const tempRoom = reactive({})
|
|
const onBooking = (room) => {
|
|
console.log("----", room);
|
|
Object.assign(tempRoom, room)
|
|
form.room_id = room.id
|
|
visiblePopup.value = true
|
|
}
|
|
const onClosePopup = () => {
|
|
Object.assign(tempRoom, {})
|
|
Object.assign(form, {
|
|
room_id: 0,
|
|
tel: '',
|
|
remarks: ''
|
|
})
|
|
visiblePopup.value = false
|
|
console.log("关闭");
|
|
};
|
|
|
|
const getRooms = () => {
|
|
console.log("房间");
|
|
fetchRooms().then(res => {
|
|
console.log(res);
|
|
rooms.value = res;
|
|
})
|
|
}
|
|
|
|
// 预约
|
|
const onSubmit = () => {
|
|
fetchBooking(form).then(res => {
|
|
console.log(res);
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '预约成功'
|
|
})
|
|
onClosePopup()
|
|
getRooms()
|
|
})
|
|
}
|
|
// 取消预约
|
|
const onUnBooking = (room) => {
|
|
fetchUnBooking({
|
|
id: room.id
|
|
}).then(res => {
|
|
console.log(res);
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '取消预约成功'
|
|
})
|
|
getRooms()
|
|
})
|
|
}
|
|
|
|
const init = () => {
|
|
console.log('init');
|
|
getRooms()
|
|
}
|
|
|
|
onShow(() => {
|
|
console.log("onshow---");
|
|
getRooms()
|
|
});
|
|
|
|
onMounted(() => {
|
|
init();
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page-content {
|
|
min-height: 100vh;
|
|
background-color: #f2f3f5;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-bar {
|
|
background: #fff;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 20rpx 60rpx;
|
|
|
|
}
|
|
|
|
/* Grid布局 - 每行两列 */
|
|
.room-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
/* 两列等宽 */
|
|
gap: 20rpx;
|
|
/* 间距 */
|
|
padding: 20rpx;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.room-grid-item {
|
|
border-radius: 16rpx;
|
|
// overflow: hidden;
|
|
// background: white;
|
|
// box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
// position: relative;
|
|
}
|
|
|
|
.grid-item-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
text-align: center;
|
|
|
|
.room-name {
|
|
font-size: 32rpx;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.room-info {
|
|
text-align: left;
|
|
padding: 20rpx 10rpx;
|
|
color: #666;
|
|
width: 100%;
|
|
min-height: 160rpx;
|
|
box-sizing: border-box;
|
|
|
|
.room-id {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.remark {
|
|
font-size: 24rpx;
|
|
display: -webkit-box;
|
|
/* 使元素成为伸缩容器 */
|
|
-webkit-box-orient: vertical;
|
|
/* 设置伸缩方向为纵向 */
|
|
overflow: hidden;
|
|
/* 隐藏超出的内容 */
|
|
-webkit-line-clamp: 2;
|
|
/* 限制显示2行 */
|
|
line-height: 36rpx;
|
|
word-wrap: break-word;
|
|
/* 强制长单词或长数字换行 */
|
|
word-break: break-word;
|
|
/* 强制长单词或长数字换行 */
|
|
white-space: normal;
|
|
/* 确保文本正常换行 */
|
|
/* 设置行高 */
|
|
}
|
|
}
|
|
|
|
.room-buttons {
|
|
padding: 20rpx 10rpx;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
padding: 0 20rpx;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
</style> |