MiniScmV3/subpkg/selectHotel/selectHotel.vue

<template>
	<view class="search-area">
		<uni-search-bar class="search-bar" placeholder="酒店搜索" v-model="hotelName" cancel-button="none"
			@input="searchHotel"></uni-search-bar>
		<uni-icons class="icon" type="scan" size="30" @click="scanQRCode"></uni-icons>
	</view>
	<view class="hotel-list">
		<view class="hotel-item" v-for="hotel in hotelListFiltered" :key="hotel.hotelId" @click="selectHotel(hotel)">
			<image :src="hotel.picturePath"></image>
			<text>{{hotel.name}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useHotelStore
	} from '../../store/hotelStore'
	import {
		useAppInfoStore
	} from '../../store/appInfoStore'
	let hotelName = ref('')
	let source = 'home'
	let hotelStore = useHotelStore()
	let hotel = useHotelStore().hotel
	let appInfo = useAppInfoStore()
	let hotelList = reactive([])
	let hotelListFiltered = reactive([])

	async function getHotels() {
		let res = await uni.request({
			url: '/hotel/available',
			method: 'POST',
			data: {
				appId: appInfo.appId
			}
		})
		hotelList.push(...res.data.data)
		hotelListFiltered.push(...res.data.data)
	}

	function searchHotel(name) {
		hotelListFiltered.length = 0
		if (name) {
			hotelListFiltered.push(...hotelList.filter((hotel) => {
				return hotel.name.includes(name)
			}))
		} else {
			hotelListFiltered.push(...hotelList)
		}
		console.log(hotelListFiltered)
	}

	async function scanQRCode() {
		// let scanRes = await uni.scanCode({
		// 	scanType:['qrCode']
		// })
		let o = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"

		console.log(uni.parseQuery(o))
	}

	function selectHotel(hotel) {
		console.log(hotel)
		hotelStore.updateHotel(hotel)
		if (source === 'home') {
			uni.switchTab({
				url: '/pages/home/home'
			})
		} else if (source === 'selectCheckinType') {
			uni.navigateBack()
		}
	}
	onLoad(async (options) => {
		source = options.source
		hotelList.length = 0
		hotelListFiltered.length = 0
		await getHotels()
	})
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.search-area {
		background-color: #f0eff5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.search-bar {
			width: 80vw;
		}

		.icon {
			margin-right: 20rpx;
		}
	}

	.hotel-list {
		margin: 20rpx;
		background-color: #ffffff;

		.hotel-item {
			display: flex;
			align-items: center;
			background-color: #f1f1f4;
			border-radius: 20rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				margin: 20rpx;
			}

			text {
				margin-left: 20rpx;
				font-size: 40rpx;
			}
		}
	}
</style>