MiniScmV3/subpkg_checkin/selectRoom/selectRoom.vue

<template>
	<view class="container">
		<view class="room" v-for="item in roomList" :key="item.room" @click="confirmSelect(item)">
			<text v-text="item.room"></text>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		reactive
	} from 'vue'
	import {
		useHotelStore
	} from '../../store/hotelStore'
	import {
		useOrderStore
	} from '../../store/orderStore'
	let roomType

	let hotel = useHotelStore().hotel
	let order = useOrderStore()
	let roomList = reactive([])
	async function getRoom() {
		let res = await uni.request({
			url: '/hotel/room',
			method: 'POST',
			data: {
				hotelId: hotel.hotelId,
				roomType: roomType,
				startTime: order.orderInfo.startTime,
				endTime: order.orderInfo.endTime,
				pageNo: 1,
				pageSize: 999
			}
		})
		roomList.push(...res.data.data.records)
	}

	function confirmSelect(item) {
		uni.showModal({
			title: '确认选择' + item.room + '房间？',
			success: (res) => {
				if (res.confirm) {
					order.updateOrderInfo({
						...order.orderInfo,
						building: item.building,
						floor: item.floor,
						room: item.room,
						status: 'ROOM_SELECTED'
					})
					uni.navigateTo({
						url: '/subpkg_checkin/addGuest/addGuest'
					})
				}
			}
		})
	}

	onLoad(async (options) => {
		roomType = options.roomType
	})

	onMounted(async () => {
		await getRoom()
		if (roomList.length === 0) {
			uni.showModal({
				title: '该房型无可用房间可供选择，请选择其它房型',
				showCancel: false,
				success() {
					uni.navigateBack()
				}
			})
		}
	})
</script>

<style lang="scss">
	.container {
		display: flex;
		// justify-content: space-between;
		width: 600rpx;
		margin: 0 auto;
		flex-wrap: wrap;

		.room {
			width: 180rpx;
			height: 180rpx;
			margin: 10rpx 10rpx;
			color: #FFFFFF;
			background-color: #a09cc4;
			border-radius: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>