MiniScm/subpkg_checkin/selectRoom/selectRoom.vue

<template>
	<view>
		<u-picker :show="showBuilding" :columns="buildings" @confirm="confirmBuilding"
			@cancel="showBuilding=false"></u-picker>
		<u-picker :show="showFloor" :columns="floors" @confirm="confirmFloor" @cancel="showFloor=false"></u-picker>
		<view class="select">
			<view class="select-building">
				<view class="select-floor-left">
					<text>{{building}}栋</text>
				</view>
				<view class="select-floor-right">
					<u-button @click="showBuilding = true">选择楼栋</u-button>
				</view>
			</view>
			<view class="select-floor">
				<view class="select-floor-left">
					<text>{{floor}}F</text>
				</view>
				<view class="select-floor-right">
					<u-button @click="showFloor = true">选择楼层</u-button>
				</view>
			</view>
		</view>
		<u-modal :show="modalShow" :title="modalText" :content='content' showCancelButton="true"
			@confirm="confirmSelectRoom" @cancel="modalShow=false"></u-modal>
		<view class="select-room">
			<view class="room-item" v-for="item in roomInfos" @click="select(item)" id="item.room"
				:style="{'background':' #'+item.color}">
				<view class="room-item-inner">

					<view class="">
						<text>{{item.room}}</text>
					</view>
					<view class="">
						<text>({{item.text}})</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				showBuilding: false,
				showFloor: false,
				buildings: [
					[]
				],
				floors: [
					[]
				],
				building: '',
				floor: '',
				roomInfos: [],
				modalShow: false,
				modalText: '',
				selectedRoom: '',
				roomType: ''
			};
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['currentHotelName', 'currentHotelId', 'reservationInfo']),
		},
		methods: {
			...mapMutations('m_business', ['updateReservationInfo']),
			confirmBuilding(building) {
				this.building = building.value[0]
				this.showBuilding = false;
				this.getFloor(this.currentHotelId, this.building)
			},
			confirmFloor(floor) {
				this.floor = floor.value[0]
				this.showFloor = false;
				this.getRoomInfo(this.currentHotelId, this.building, this.floor)
			},
			async getBuilding() {
				let buildingRes = await uni.$http.post('/building', {
					hotelId: this.currentHotelId,
					roomType: this.roomType
				});
				this.buildings[0] = buildingRes.data.data
				this.building = this.buildings[0][0]
				this.getFloor(this.currentHotelId, this.building)
			},
			async getFloor(hotelId, building) {
				let floorRes = await uni.$http.post('/floor', {
					hotelId: hotelId,
					building: building,
					roomType: this.roomType
				});

				this.floors[0] = floorRes.data.data
				this.floor = this.floors[0][0]
				this.getRoomInfo(this.currentHotelId, this.building, this.floor)

			},
			async getRoomInfo(hotelId, building, floor) {
				let res = await uni.$http.post('/roomInfo', {
					hotelId: hotelId,
					building: building,
					floor: floor,
					roomType: this.roomType,
					pageNo: 1,
					pageSize: 999
				})
				this.roomInfos = res.data.data.records
				this.roomInfos?.forEach(info => {
					if (info.status == 0) {
						info.text = '可选'
						info.color = '7098F6'
					} else {
						info.text = '不可预订'
						info.color = '999999'
					}
				})

			},
			select(item) {
				if (item.status !== 0) {
					uni.$showMsg('该房间不可预订！')
				} else {
					this.selectedRoom = item.room
					this.modalText = "确认选择" + item.room + '房间？'
					this.modalShow = true
				}
			},
			confirmSelectRoom() {
				let temp = this.reservationInfo
				temp.orderInfo.building = this.building
				temp.orderInfo.floor = this.floor
				temp.orderInfo.room = this.selectedRoom
				console.log('temp', temp)
				this.modalShow = false;
				this.updateReservationInfo(temp)
				uni.navigateTo({
					url: '/subpkg_checkin/addGuest/addGuest'
				})
			}
		},
		onLoad(options) {
			console.log(options.roomType)
			this.roomType = options.roomType
			this.getBuilding();
		}
	}
</script>

<style lang="scss">
	.select {
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.select-floor,
		.select-building {
			display: flex;
			width: 50%;

			button {
				background-color: #DCDCDC;
			}

			.select-floor-left {
				width: 50%;
				text-align: center;

				text {
					line-height: 80rpx;
				}
			}
		}
	}


	.select-room {
		display: flex;
		flex-wrap: wrap;
		width: 600rpx;
		margin: 0 auto;

		.room-item {
			width: 180rpx;
			height: 180rpx;
			margin: 10rpx 10rpx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 15rpx;

			.room-item-inner {
				margin-top: 40rpx;
			}
		}
	}
</style>