MiniScm/subpkg/chooseHotel/chooseHotel.vue

<template>
	<view class="choose-hotel">
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="酒店选择" control="home" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="酒店选择" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->

			<view class="choose-hotel--input">

				<view class="choose-hotel--input__frame">
					<u-search placeholder="酒店搜索" v-model="hotelName" bgColor="#ffffff" shape="square"
						:showAction="false" color="#181818" margin="0" @change="inputChanged">
					</u-search>
				</view>

				<view class="choose-hotel--input__scan" @click="scanQRCode" v-if="displayScanner">
					<u-icon name="scan" color="#4f4e51" size="28"></u-icon>
				</view>
			</view>
		</view>

		<view class="choose-hotel--dispaly-area" v-if="!notFound">

			<view class="choose-hotel--description" v-for="(hotel, index) in hotelList" :key="index">

				<view class="choose-hotel--description__hotel" @click="goBack(hotel)">

					<view class="choose-hotel--description__hotel-pic">
						<u-image :src="getHotelPicPath(hotel.picturePath)" width="180rpx" height="180rpx"></u-image>
					</view>

					<view class="choose-hotel--description__hotel-name">
						{{ hotel.name }}
					</view>
				</view>
			</view>
		</view>

		<view class="choose-hotel--not-found" v-if="notFound">{{`未查询到名称中包含“${hotelName}”的酒店`}}</view>
	</view>
</template>

<script>
	import {
		IMG_BASE_URL
	} from "../../config"
	import {
		mapMutations
	} from 'vuex'
	import getParamByName from 'get-param-by-name'
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				hotelName: "",
				hotelList: [],
				notFound: false,
				displayScanner: true,
				source: "",
			}
		},
		methods: {
			...mapMutations('m_business', ['updateCurrentHotel']),
			async inputChanged() {
				this.notFound = false

				let res = await uni.$http.get(`/hotel/hotelName/${this.hotelName}`)
				if (res.data.data.length === 0) {
					this.notFound = true
					return
				}
				this.hotelList = res.data.data
			},
			inputFocusd() {
				// 取得焦点时显示shortcut
				console.log("input focused");
			},
			inputBlured() {
				// 失去焦点时关闭shortcut
				console.log("inpot blured");
			},
			async scanQRCode() {
				// #ifdef MP-WEIXIN
				let scanResWX = await wx.scanCode({
					scanType: ['qrCode']
				})
				// console.log("扫描二维码的结果", scanResWX);
				const hotelId = getParamByName("hotelId", scanResWX.result);

				// console.log("hotelName", hotelName);
				this.updateCurrentHotel(this.queryHotelByHotelId(hotelId))
				uni.switchTab({
					url: '/pages/home/home'
				})
				// #endif

				// #ifdef MP-ALIPAY
				let scanResAli = await my.scan({
					scanType: ['qrCode']
				})
				console.log("扫描二维码的结果", scanResAli);
				// #endif
			},
			async getHotels() {
				let res = await uni.$http.get('/hotel')
				this.hotelList = res.data.data
			},
			async queryHotelByHotelId(hotelId) {
				let res = await uni.$http.get(`/hotel/${hotelId}`)
				return res.data.data
			},
			getHotelPicPath(path) {
				return IMG_BASE_URL + '/' + path
			},
			goBack(hotel) {
				this.updateCurrentHotel(hotel)

				console.log(this.source === "home");
				if (this.source === "home") {
					uni.switchTab({
						url: '/pages/home/home'
					})
				} else if (this.source === "selectCheckinType") {
					uni.redirectTo({
						url: '/subpkg_checkin/selectCheckinType/selectCheckinType'
					})
				}
			},
		},
		async onLoad(option) {
			console.log("option", option)
			this.source = option.source
			// #ifdef MP-WEIXIN
			this.displayScanner = true
			// #endif

			// #ifdef MP-ALIPAY
			this.displayScanner = false
			// #endif

			// 首次载入页面渲染全部酒店，后可根据搜索来搜索其他酒店
			await this.getHotels()
		},
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.choose-hotel {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;

			.top {
				position: sticky;
				background-color: #f0eff5;
				width: 100%;
				top: 0;
				z-index: 999;

				.choose-hotel--input {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 20rpx;
					height: 80rpx;

					.choose-hotel--input__frame {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.choose-hotel--input__scan {
						height: 100%;
						width: 30px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-left: 20rpx;
					}
				}
			}



			.choose-hotel--dispaly-area {
				background-color: #ffffff;
				width: 100%;
				height: 100%;
				padding-top: 10rpx;

				.choose-hotel--description {
					padding: 5rpx 20rpx;

					.choose-hotel--description__hotel {
						background-color: #f1f1f4;
						display: flex;
						flex-direction: row;
						padding: 20rpx 10rpx;
						border-radius: 6rpx;

						.choose-hotel--description__hotel-name {
							display: flex;
							align-items: center;
							padding-left: 30rpx;
							font-size: 38rpx;
						}
					}
				}
			}

			.choose-hotel--not-found {
				background-color: #ffffff;
				width: 100%;
				position: absolute;
				top: 120rpx;
				left: 0;
				bottom: 0;
				padding-top: 20rpx;
				display: flex;
				justify-content: center;
				font-size: 40rpx;
			}
		}
	}
</style>