房态首页，下单

pages/house/createOrder.vue

@@ -0,0 +1,115 @@
+<template>
+	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
+		<c-nav-bar title="新增订单" :showIcon="false"></c-nav-bar>
+		<view class="box">
+			<view class="tit">预订信息</view>
+
+			<u-cell-group :border="false"
+				customStyle="background-color: #fff;border-radius: 16rpx;width: 94%;margin:0 auto;">
+				<u-cell>
+					<text slot="icon" style="font-size: 30rpx">姓名</text>
+					<view slot="title" class="title">
+						<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
+							placeholder="请输入姓名" v-model="dataForm.guestName"></u--input>
+					</view>
+				</u-cell>
+				<u-cell>
+					<text slot="icon" style="font-size: 30rpx">手机号码</text>
+					<view slot="title" class="title">
+						<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
+							placeholder="请输入手机号码" v-model="dataForm.guestPhone"></u--input>
+					</view>
+				</u-cell>
+				<u-cell isLink="true" @click="showLaiyuan=true">
+					<text slot="icon" style="font-size: 30rpx">订单来源</text>
+					<view slot="title" class="title">
+						{{dataForm.guestSourceName}}
+					</view>
+				</u-cell>
+			</u-cell-group>
+		</view>
+		<u-picker :itemHeight="88" :immediateChange="true" :show="showLaiyuan" :columns="laiyuan" title="来源选择"
+			keyName="guestSource" :defaultIndex="passengerDefault" @cancel="areaShow=false;"
+			@confirm="passengerConfirm"></u-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				showLaiyuan: false,
+				passengerDefault: [0],
+				dataForm: {
+					arriveDate: "",
+					detailFormList: [{
+						breakfastAmount: 0,
+						checkInPersonList: [],
+						checkInType: 0,
+						id: 0,
+						otherAmount: 0,
+						roomAmount: 0,
+						roomIds: "",
+						roomNumber: "",
+					}, ],
+					guestName: "",
+					guestPhone: "",
+					guestSourceId: null,
+					guestSourceName: null,
+					homestayId: '1711268640588517378',
+					houseBaseId: 0,
+					leaveDate: "",
+					num: 0,
+					orderStatus: null,
+					remarks: "",
+				},
+				roomId: '',
+				laiyuan: []
+			}
+		},
+		onLoad(opt) {
+			this.roomId = opt.roomId.split(',');
+			this.getInfo();
+			this.getLaiyuan();
+		},
+		methods: {
+			getLaiyuan() {
+				this.$api.get("/merchant/hotel/room/state/getSourceDownBox", {
+						homestayId: '1711268640588517378',
+					})
+					.then((res) => {
+						if (res.data.code == 0) {
+							this.laiyuan = [res.data.data];
+						}
+					});
+			},
+			getInfo() {
+				this.$api.post('/merchant/hotel/order/getRoomInfoList', this.roomId).then(res => {
+					console.log(res)
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.page {
+		background: #F3F4F4;
+		padding-bottom: 260rpx;
+		box-sizing: border-box;
+		overflow-y: auto;
+		overflow-x: auto;
+	}
+	.box{
+		background-color: #fff;
+		margin: 0 auto 20rpx;
+		border-radius: 10rpx;
+		width: 96%;
+		padding: 0 30rpx;
+	}
+	.tit {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #333;
+	}
+</style>

pages/house/index.vue

@@ -1,29 +1,536 @@
 <template>
 	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
-		<c-nav-bar title="房态" :showIcon="false"></c-nav-bar>
-		
+		<c-nav-bar title="房态" :showIcon="false" :titleStyle="titleStyle"></c-nav-bar>
+		<view class="content">
+			<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}}</text>
+				</view>
+			</view>
+			<view class="floorData" v-if="leftData.length!=0">
+				<view v-for="(item,key,i) in leftData" :key="i" style="margin-bottom: 16rpx;">
+					<view class="head" v-if="indexArr[i]==key.split('-')[0]">
+						<text>{{key.split('-')[0]}}F</text>
+						<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">{{key.split('-')[1]}}</view>
+						<view class="table">
+							<view class="tr" v-for="(item2,index2) in item" :key="index2">
+								<view class="td">{{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
+											@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>
 		<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 {
-				
+				areaShow: false,
+				passengerDefault: [0],
+				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: {
+					'-1': '待确定',
+					'1': '已预订',
+					'2': '已入住',
+					'3': '已退房',
+					'4': '清洁中',
+					'5': '暂停使用',
+					'6': '保留房',
+				},
+				weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+				checkPosition: [],
+				checkDataDate: [],
+				checkPrice: [],
+				checkDataRoomId: [],
+				checkStatus:''
 			}
 		},
+		onLoad() {
+			that = this;
+			this.getLeftData();
+			this.getData();
+		},
+		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();
+			},
+			//关房
+			tabCli(roomNumber, id, roomId) {
+				this.clearData();
+				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==2||obj.status==3){
+						//到详情
+					}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) {
+						console.log(res.data)
+						this.clearData();
+						this.areaShow = false;
+						this.init()
+					}
+
+				})
+			},
+			//新增订单
+			createOrder(){
+				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;
+					}
+				}
+			},
+			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 = [];
+							}
+							console.log(this.checkDataDate);
+							console.log(this.checkDataRoomId)
+						}
+					}
+				}
+			},
+			getLeftData() {
+				this.$api.get('/merchant/hotel/room/state/getHouseCategoryData/1711268640588517378').then(res => {
+					console.log(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;
+						console.log(this.leftData)
+						console.log(this.indexArr)
+					}
+				})
+			},
+			getData() {
+				this.$api.get('/merchant/hotel/room/state/getDateRoomList', {
+					homestayId: '1711268640588517378',
+					nowDate: '',
+					status: ''
+				}).then(res => {
+					if (res.data.code == 0) {
+						this.xdata = res.data.data;
+					}
+					console.log(res)
+				})
+			}
 		}
 	}
 </script>
 
 <style scoped lang="less">
-	.page{
+	.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;
+
+		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-y: auto;
+		overflow-x: auto;
+	}
+
+	.date {
+		display: flex;
+
+		border: 1rpx solid #E9F0F5;
+		margin-bottom: 30rpx;
+
+		.item {
+			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;
+
+			&:last-child {
+				border: 0;
+			}
+
+			text {
+				&:nth-child(2) {
+					margin: 6rpx 0;
+				}
+			}
+		}
+	}
+
+	.floorData {
+
+		.head,
+		.roomType {
+			padding: 0 30rpx;
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.head {
+			&>text {
+				&:first-child {
+					font-size: 32rpx;
+				}
+			}
+
+			.rightIcon {
+				display: flex;
+				align-items: center;
+				font-size: 24rpx;
+				color: #1F2425;
+			}
+		}
+
+		.roomType {
+			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;
+			}
+		}
+
+		.table {
+			border: 1rpx solid #E9F0F5;
+			width: auto;
+			min-width: 100%;
+
+			.tr {
+				border-bottom: 1rpx solid #E9F0F5;
+				display: flex;
+				align-items: center;
+				background-color: #fff;
+
+				&:last-child {
+					border: 0;
+				}
+
+				.td {
+					position: relative;
+					width: 130rpx;
+					min-width: 130rpx;
+					height: 83rpx;
+					border-right: 1rpx solid #E9F0F5;
+					background-color: #fff;
+					color: #1F2425;
+					font-size: 20rpx;
+
+					.tdP,.cellBox {
+						display: flex;
+						height: 100%;
+						flex-direction: column;
+						align-items: center;
+						justify-content: center;
+					}
+
+
+
+					&: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);
+					}
+
+					//待确定
+					&.s5 {
+						color: rgb(25, 185, 197);
+						background-color: rgba(25, 185, 197, 0.1);
+					}
+
+					//清洁中
+					&.s6 {
+						color: rgb(237, 86, 86);
+						background-color: rgba(237, 86, 86, 0.1);
+					}
+
+					//暂停使用
+					&.s7 {
+						color: rgb(41, 60, 115);
+						background-color: rgba(41, 60, 115, 0.1);
+					}
+
+					//保留房
+					&.s8 {
+						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;
+			}
+		}
 	}
 </style>