hotelHomestayWx/pages/house/index.vue

<template>
	<view class="page" :style="{'padding-top':mt+'px'}">
		<c-nav-bar title="房态" :showIcon="false" :titleStyle="titleStyle" bgColor="transparent"></c-nav-bar>
		<view class="leftFixed" v-if="leftData.length!=0" :style="{'top':(mt+2)+'px'}">
			<view class="tj" :style="{'top':mt+'px'}"></view>
			<view class="year">
				<u-icon name="calendar-fill" color="#B9C2D2" size="40" style="margin-bottom:10rpx;"></u-icon>
				<text style="font-size: 24rpx;">2024</text>
			</view>
			<view v-for="(item,key,i) in leftData" :key="i"
				:class="indexArr[i]!=key.split('-')[0]?'mg0 fixedItem':'fixedItem'">
				<view class="head" v-if="indexArr[i]==key.split('-')[0]" style="margin-top: 16rpx;">
					<!-- <text>{{key.split('-')[0]}}F</text> -->
					<view class="roomType" :style="{'left':scrollLeft+'px'}">{{key.split('-')[1]}}</view>
					<view class="rightIcon" @click="open(i,key.split('-')[0],false)" v-if="opens[i]">
						<text>收起</text>
						<u-icon name="arrow-up-fill" size="18" style="margin-left: 10rpx;"></u-icon>
					</view>
					<view class="rightIcon" @click="open(i,key.split('-')[0],true)" v-else>
						<text>展开</text>
						<u-icon name="arrow-down-fill" size="18" style="margin-left: 10rpx;"></u-icon>
					</view>
				</view>
				<template v-if="opens[i]">
					<!-- 	<view class="roomType" :style="{'left':scrollLeft+'px'}">{{key.split('-')[1]}}</view> -->
					<text v-for="(item2,index2) in item" class="roomNumber">
						{{item2.roomNumber}}
					</text>

				</template>
			</view>
		</view>
		<view>
			<view class="content" v-if="xdata.length!=0">
				<view class="tj" :style="{'top':mt+'px'}">
					<view class="item">
						<text class="label">{{info.bookRooms}}</text>
						<text>待入住</text>
					</view>
					<view class="item">
						<text class="label">{{info.checkinRooms}}</text>
						<text>已入住</text>
					</view>
					<view class="item">
						<text class="label">{{info.checkoutRooms}}</text>
						<text>已退房</text>
					</view>
				</view>
				<view class="date">
					<view class="item">
						<u-icon name="calendar-fill" color="#B9C2D2" size="40" style="margin-bottom:10rpx;"></u-icon>
						<text style="font-size: 24rpx;">2024</text>
					</view>
					<view class="item" v-for="(item,keynme,index) in xdata" :key="index">
						<text>{{item.rentDate.substring(5)}}</text>
						<text>{{weeks[item.rentWeek]}}</text>
						<text>剩{{item.spareRooms||0}}间</text>
					</view>
				</view>
				<view style="height:18rpx"></view>
				<view class="floorData" v-if="leftData.length!=0">
					<view v-for="(item,key,i) in leftData" :key="i">
						<view class="head" v-if="indexArr[i]==key.split('-')[0]" style="opacity: 0;">
							<!-- <text>{{key.split('-')[0]}}F</text> -->
							<view class="roomType" :style="{'left':scrollLeft+'px'}">{{key.split('-')[1]}}</view>
							<view class="rightIcon" @click="open(i,key.split('-')[0],false)" v-if="opens[i]">
								<text>收起</text>
								<u-icon name="arrow-up-fill" size="18" style="margin-left: 10rpx;"></u-icon>
							</view>
							<view class="rightIcon" @click="open(i,key.split('-')[0],true)" v-else>
								<text>展开</text>
								<u-icon name="arrow-down-fill" size="18" style="margin-left: 10rpx;"></u-icon>
							</view>
						</view>
						<template v-if="opens[i]">
							<!-- <view class="roomType" style="opacity: 0;">{{key.split('-')[1]}}</view> -->
							<view class="table">
								<view class="tr" v-for="(item2,index2) in item" :key="index2">
									<view class="td" :style="{'left':scrollLeft+'px'}">{{item2.roomNumber}}</view>
									<view class="td" v-for="(roomData,ind) in xdata" :key="ind"
										:class="'s'+delDataStatus(item2.roomNumber,item2.houseBaseId,roomData.roomDataList,'status')">
										<!-- 空置房-->
										<template
											v-if="delDataStatus(item2.roomNumber,item2.houseBaseId,roomData.roomDataList,'status') == 1">
											<view v-if="disTabCli(roomData) == 1" class="cellBox disT">
												￥{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'price')}}
											</view>
											<view v-else
												@click="check(item2.roomNumber,item2.houseBaseId,roomData,i + '-'+index2+ '-'+ ind)"
												class="cellBox">
												￥{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'price')}}
											</view>
										</template>
										<template v-else>
											<view
												@click="tabCli(item2.roomNumber,item2.houseBaseId,roomData.roomDataList)"
												class="tdP">
												<text>{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'guestName')}}</text>
												<text>{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'status')}}</text>
											</view>
										</template>
										<!-- 点击时状态 -->
										<view class="cover" v-if="checkPosition.indexOf(i + '-'+index2+ '-'+ ind) > -1"
											@click="check(item2.roomNumber,item2.houseBaseId,roomData,i + '-'+index2+ '-'+ ind)">
											<u-icon name="checkbox-mark" size="36" color="#fff"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</view>
			<view class="opration" v-if="checkDataRoomId.length!=0">
				<text @click="areaShow=true">关房</text>
				<text @click="createOrder()">预订</text>
			</view>
		</view>
		<Tabbar :tabbarIndex="1"></Tabbar>
		<!-- 关房 -->
		<u-picker :itemHeight="88" :immediateChange="true" :show="areaShow" :columns="areaTxt" title="房态选择"
			:defaultIndex="passengerDefault" @cancel="areaShow=false;clearData();"
			@confirm="passengerConfirm"></u-picker>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				homestayId: uni.getStorageSync('homestayId') || 0,
				areaShow: false,
				passengerDefault: [0],
				info: {},
				areaTxt: [
					['清洁中', '暂停使用', '保留房', '空置房']
				],
				area: [{
					label: '清洁中',
					id: 4
				}, {
					label: '暂停使用',
					id: 5
				}, {
					label: '保留房',
					id: 6
				}, {
					label: '空置房',
					id: 0
				}],
				titleStyle: {
					fontSize: '34rpx',
					fontWeight: "bold",
				},
				dateArr: [1, 2, 3, 4, 5],
				xdata: [], //纵向列
				leftData: [], //横向列，
				indexArr: [], //楼层索引,
				opens: [],
				statusTxt: {
					'-2': '待支付',
					'-1': '待确定',
					'1': '已预订',
					'2': '已入住',
					'3': '已退房',
					'4': '清洁中',
					'5': '暂停使用',
					'6': '保留房',
				},
				weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
				checkPosition: [],
				checkDataDate: [],
				checkPrice: [],
				checkDataRoomId: [],
				checkStatus: '',
				scrollLeft: 0
			}
		},
		mounted() {
			that = this;
			this.getLeftData();
			this.getData();
			this.getTj();
		},
		filters: {
			delDataStatus(roomNumber, id, roomId, name) {
				for (let i = 0; i < roomId.length; i++) {
					if (id == roomId[i].houseBaseId && roomNumber == roomId[i].roomNumber) {
						if (name == "status") {
							return that.statusTxt[roomId[i][name]]
						} else {
							return roomId[i][name] || ''
						}

					}
				}
			},
		},
		methods: {
			init() {
				this.getLeftData();
				this.getData();
				this.$forceUpdate();
			},
			getTj() {
				this.$api.get('/merchant/hotel/room/state/getRoomStateCount', {
					homestayId: this.homestayId
				}).then(res => {
					if (res.data.code == 0) {
						this.info = res.data.data;
					}
				})
			},
			scroll(e) {
				//this.scrollLeft = e.detail.scrollLeft; // div 到左边的距离
			},
			//关房
			tabCli(roomNumber, id, roomId) {
				if (roomNumber) {
					let obj = {};
					for (let i = 0; i < roomId.length; i++) {
						if (id == roomId[i].houseBaseId && roomNumber == roomId[i].roomNumber) {
							obj = roomId[i];
						}
					}
					//已预订，已入住 待确认 待支付
					if (obj.status == 1 || obj.status == 2 || obj.status == -1 || obj.status == -2) {
						let orderId = obj.orderId;
						uni.navigateTo({
							url: "/pages/house/orderInfo?orderId=" + orderId
						})
						//到详情
					} else {
						//更改状态
						this.areaShow = true;
						this.checkDataRoomId = [obj.id];
						this.checkStatus = obj.status;
					}
				}
			},
			//确定关房
			passengerConfirm(e) {
				let status = this.area[e.indexs[0]].id;
				this.$api.post('/merchant/hotel/room/state/updRoomState', {
					roomIds: this.checkDataRoomId,
					status: status
				}).then(res => {
					if (res.data.code == 0) {
						this.clearData();
						this.areaShow = false;
						this.init()
					} else {
						this.$showToast(res.data.msg);
					}

				})
			},
			//新增订单
			createOrder() {
				this.clearData()
				uni.navigateTo({
					url: '/pages/house/createOrder?roomId=' + this.checkDataRoomId
				})
			},
			//展开收起
			open(i, F, val) {
				this.opens[i] = !this.opens[i];
				let list = this.leftData;
				for (var i = 0; i < Object.keys(list).length; i++) {
					var index = i; // 索引
					var key = Object.keys(list)[i].split('-')[0]; // key
					if (F == key) {
						this.opens[index] = val;
					}
				}
				this.$forceUpdate();
			},
			delDataStatus(roomNumber, id, roomId, name) {
				for (let i = 0; i < roomId.length; i++) {
					if (id == roomId[i].houseBaseId && roomNumber == roomId[i].roomNumber) {
						return roomId[i][name] + 1;
					}
				}
			},
			disTabCli(roomData) {
				if (new Date(roomData.rentDate).Format('yyyy-MM-dd') < new Date().Format('yyyy-MM-dd')) {
					return 1
				}
			},
			clearData() {
				setTimeout(() => {
					this.checkDataDate = [];
					this.checkPrice = [];
					this.checkDataRoomId = [];
					this.checkPosition = [];
				}, 1500);
			},
			//选择房间
			check(roomNumber, id, item, position) {
				for (let i = 0; i < item.roomDataList.length; i++) {
					if (
						id == item.roomDataList[i].houseBaseId &&
						roomNumber == item.roomDataList[i].roomNumber
					) {
						//宫格位置标识
						if (item.roomDataList[i].status == 0) {
							if (this.checkPosition.indexOf(position) < 0) {
								this.checkPosition.push(position);
							} else {
								let index = this.checkPosition.findIndex(
									(pos) => pos == position
								); //选中的索引位置
								this.checkPosition.splice(index, 1);
							}
							//房间id
							if (this.checkDataRoomId.indexOf(item.roomDataList[i].id) < 0) {
								this.checkDataRoomId.push(item.roomDataList[i].id);
							} else {
								let index = this.checkDataRoomId.findIndex(
									(roomId) => roomId == item.roomDataList[i].id
								);
								this.checkDataRoomId.splice(index, 1);
							}
							//日期
							if (this.checkPosition.indexOf(position) > -1) {
								this.checkDataDate.push(item.rentDate);
								this.checkPrice.push(item.roomDataList[i].price)
							} else {
								let index = this.checkDataDate.findIndex(
									(date) => date == item.rentDate
								);
								this.checkDataDate.splice(index, 1);
								//价格
								let index2 = this.checkPrice.findIndex(
									(price) => price == item.price
								);
								this.checkPrice.splice(index2, 1);
							}
							if (this.checkPosition.length == 0) {
								this.checkDataDate = [];
								this.checkPrice = [];
							}
						}
					}
				}
			},
			getLeftData() {
				this.$api.get(`/merchant/hotel/room/state/getHouseCategoryData/${this.homestayId}`).then(res => {
					if (res.data.code == 0) {
						// for (let i; i < res.data.data.length; i++) {
						// 	res.data.data[i].open = true;
						// }
						for (let i in res.data.data) {
							let F = i.split('-')[0];
							if (this.indexArr.indexOf(F) < 0) {
								this.indexArr.push(F);
								this.opens.push(true)
							} else {
								this.indexArr.push('');
								this.opens.push(true)
							}
						}
						this.leftData = res.data.data;
					}
				})
			},
			getData() {
				this.$api.get('/merchant/hotel/room/state/getDateRoomList', {
					homestayId: this.homestayId,
					nowDate: '',
					status: ''
				}).then(res => {
					if (res.data.code == 0) {
						this.xdata = res.data.data;
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.opration {
		height: 140rpx;
		padding: 0 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		text {
			display: inline-block;
			width: 160rpx;
			text-align: center;
			line-height: 56rpx;
			border: 1rpx solid #D1D1D1;
			height: 56rpx;
			border-radius: 64rpx;
			font-size: 24rpx;
			color: #999;

			&:last-child {
				background-color: #1372FF;
				color: #fff;
				border: 0;
			}
		}
	}

	.page {
		background: #F3F4F4;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		overflow-x: auto;

		.content {}
	}

	.tj {
		padding: 30rpx 0;
		text-align: center;
		height: 140rpx;
		box-sizing: border-box;
		position: absolute;
		width: 750rpx;
		left: 0;
		display: flex;
		justify-content: space-between;
		background-color: #fff;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100px;
			flex: 1;
		}

		text {
			font-size: 24rpx;
			color: #999;

			&.label {
				font-size: 40rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.date {
		display: flex;
		position: relative;
		border: 1rpx solid #E9F0F5;
		// padding-bottom: 19rpx;
		margin-top: 140rpx;

		.item {
			min-width: 140rpx;
			width: 140rpx;
			height: 136rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			border-right: 1rpx solid #E9F0F5;
			background-color: #fff;

			&:last-child {
				border: 0;
			}

			text {
				&:nth-child(2) {
					margin: 6rpx 0;
				}
			}
		}
	}

	.head,
	.roomType {
		padding: 0 30rpx;
		display: flex;
		width: 400rpx;
		// justify-content: space-between;
	}

	.head {
		// position: absolute;
		// top: 0;
		// left: 0;
		margin-top: 16rpx;
		width: 750rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;

		&>text {
			&:first-child {
				font-size: 32rpx;
				margin-right: 30rpx;
			}
		}

		.rightIcon {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #1F2425;

		}
	}

	.roomType {
		// position: absolute;
		// top: 40rpx;
		// left: 0;

		color: #333;
		font-size: 24rpx;
		position: relative;
		padding-left: 44rpx;
		margin: 20rpx 0 16rpx;

		&::after {
			position: absolute;
			content: "";
			height: 24rpx;
			width: 5rpx;
			background-color: #1372FF;
			left: 30rpx;
			top: 4rpx;
			z-index: 1;
		}
	}

	.floorData {



		.table {
			// border: 1rpx solid #E9F0F5;
			width: auto;
			min-width: 100%;

			.tr {
				display: flex;
				align-items: center;
				background-color: #fff;
				position: relative;

				&:last-child {
					border: 0;
				}

				.td {


					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					width: 140rpx;
					min-width: 140rpx;
					height: 110rpx;
					border-right: 1rpx solid #E9F0F5;
					background-color: #fff;
					color: #1F2425;
					font-size: 24rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #E9F0F5;


					.tdP,
					.cellBox {
						display: flex;
						width: 100%;
						height: 100%;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						&.disT {
							color: #ccc;
						}
					}



					&:last-child {
						border: 0;
					}

					//已预订
					&.s2 {
						background-color: rgba(29, 202, 104, 0.1);
						color: rgb(29, 202, 104);

						text {
							&:first-child {
								margin-bottom: 6rpx;
								color: #1F2425;
							}
						}
					}

					// 已入住
					&.s3 {
						color: rgb(19, 114, 255);
						background-color: rgba(19, 114, 255, 0.1);

						text {
							&:first-child {
								margin-bottom: 6rpx;
								color: #1F2425;
							}
						}
					}

					// 已退房
					&.s4 {
						color: rgb(219, 41, 195);
						background-color: rgba(219, 41, 195, 0.1);
					}

					//待确定
					&.s0 {
						color: rgb(25, 185, 197);
						background-color: rgba(25, 185, 197, 0.1);
					}

					//清洁中
					&.s5 {
						color: rgb(237, 86, 86);
						background-color: rgba(237, 86, 86, 0.1);
					}

					//暂停使用
					&.s6 {
						color: rgb(41, 60, 115);
						background-color: rgba(41, 60, 115, 0.1);
					}

					//保留房
					&.s7 {
						color: rgb(132, 68, 244);
						background-color: rgba(132, 68, 244, 0.1);
					}
				}
			}

			.cover {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: #1372FF;
				color: #fff;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.small {
		padding-top: 68rpx !important;

		.roomType {
			top: 0 !important;
		}
	}

	.pd0 {
		padding: 0 !important;
	}

	.leftFixed {
		width: 72rpx;
		position: absolute;
		left: 0;
		// top: 232rpx;
		z-index: 1;

		.tj {
			width: 0;
			position: relative;
		}

		.year {
			min-width: 130rpx;
			width: 130rpx;
			height: 136rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			border-right: 1rpx solid #E9F0F5;
			background-color: #fff;
			margin-bottom: 18rpx;
		}

		.fixedItem {
			display: flex;
			flex-direction: column;

			.roomNumber {
				height: 110rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #E9F0F5;
				width: 130rpx;
				background-color: #fff;
				box-shadow: 3px 0 10px #efefef;
				box-sizing: border-box;
				justify-content: center;
				// &:first-child{height: 84rpx;border-top: 1rpx solid #E9F0F5;}
			}
		}
	}
</style>