MiniScmV3/pages/home/home.vue

<template>
	<view class="title">
		<text>源享住</text>
	</view>
	<view class="adv-pic">
		<swiper :indicator-dots="true" :autoplay="true" :interval="8000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in advPicList" :key="index">
				<image :src="item.image" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
	</view>
	<view class="hotel-name">
		<view class="hotel-name--fix" :style="[fixStyle]"></view>
		<view class="hotel-name--content" :style="[hotelNameFontSize]">
			<text>{{ hotel.name }}</text>
		</view>
		<view class="hotel-name--fix" @click="gotoSelectHotel" id="changeHotel">
			<image src="/static/switch.svg" style="width: 30rpx; height: 30rpx;"></image>
			切换
		</view>
	</view>
	<view class="business">
		<view class="business-row">
			<view class="business-item" id="checkin"
				@click="navigateTo('/subpkg_checkin/selectCheckinType/selectCheckinType')">
				<view>
					<image src="/static/checkin.png" width="127rpx" height="116rpx"></image>
				</view>
				<text>入住</text>
			</view>
			<view class="business-item" id="extend" @click="navigateTo('/subpkg/extend/extend?fromExtend=true')">
				<view>
					<image src="/static/extend.png" width="127rpx" height="116rpx"></image>
				</view>
				<text>续住</text>
			</view>
			<view class="business-item" id="checkout" @click="navigateTo('/subpkg/extend/extend?fromExtend=false')">
				<view>
					<image src="/static/checkout.png" width="127rpx" height="116rpx"></image>
				</view>
				<text>退房</text>
			</view>
		</view>
		<view class="business-row">
			<view class="business-item" id="lift_qrcode"
				@click="gotoTlevatorControl('/subpkg/elevatorControl/elevatorControl')">
				<view>
					<image src="/static/lift_qrcode.png" width="127rpx" height="116rpx"></image>
				</view>
				<text>梯控二维码</text>
			</view>
			<view class="business-item" id="emergency_key" @click="navigateTo('/subpkg/emergencyKey/emergencyKey')">
				<view>
					<image src="/static/emergency_key.png" width="127rpx" height="116rpx"></image>
				</view>
				<text>手机开门</text>
			</view>
			<view class="business-item" id="shop" @click="showNotEnabled">
				<view>
					<image src="/static/shop.png" width="127rpx" height="116rpx"></image>
				</view>
				<text>客房超市</text>
			</view>
		</view>
	</view>
	<view class="voucher" @click="navigateTo('/subpkg/voucherDesc/voucherDesc')" v-if="false">
		<image :src="voucherImg" mode="aspectFit" width="671rpx" height="181rpx"></image>
	</view>

	<guide :show="showGuide" :width="cWidth" :height="cHeight" :left="cLeft" :right="cRight" :top="cTop"
		:showMessage='cShowMsg' :currentIndex="currentIndex" :noticeArray="noticeArray" @click="clickNext">
	</guide>
</template>

<script setup>
	import {
		computed,
		ref,
		nextTick,
		getCurrentInstance
	} from 'vue';
	import {
		IMG_BASE_URL
	} from '../../config';
	import {
		useHotelStore
	} from '@/store/hotelStore.js'
	import {
		useUserStore
	} from '../../store/userStore';
	import {
		useAppInfoStore
	} from '../../store/appInfoStore.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import guide from '@/components/guide/guide.vue'

	let advPicList = [{
			image: IMG_BASE_URL + "/home_adv1.png",
			title: ""
		},
		{
			image: IMG_BASE_URL + "/home_adv2.png",
			title: ""
		}
	]
	let hotel = useHotelStore().hotel
	let fixStyle = computed(() => {
		let style = {}
		if (hotel.hasOwnProperty('name') && hotel.name.length <= 14) return style
		style.display = "none"
		return style
	})

	let hotelNameFontSize = computed(() => {
		let style = {}
		if (hotel.hasOwnProperty('name') && hotel.name.length <= 14) return style
		style.fontSize = "30rpx"
		return style
	})

	function navigateTo(url) {
		if (url) {
			if (url !== "/subpkg_checkin/selectCheckinType/selectCheckinType") {
				if (!user.userInfo.idNumber) {
					uni.showModal({
						title: '身份信息未完善',
						content: '请至个人中心实名认证处完善个人信息',
						showCancel: false,
						success() {
							uni.switchTab({
								url: '/pages/my/my'
							})
						}
					})
					return
				}
			}
			uni.navigateTo({
				url: url,
			});
		}
	}

	function showNotEnabled() {
		uni.showModal({
			showCancel: false,
			content: "该酒店未开通此功能"
		})
	}

	function gotoSelectHotel() {
		uni.redirectTo({
			url: '/subpkg/chooseHotel/chooseHotel?source=home'
		})
	}

	let voucherImg = IMG_BASE_URL + '/voucher.png'

	let showGuide = ref(false)
	let cShowMsg = ref('') // 展示的解释语
	let cWidth = ref('')
	let cHeight = ref('')
	let cLeft = ref('')
	let cRight = ref('')
	let cTop = ref('')
	let currentIndex = ref(0)
	//配置需要显示引导的view以及引导显示的msg
	let noticeArray = [{
			"showID": "changeHotel", // 对应的id
			"showMessage": "点击“切换” 选择您要入住的酒店", // 对应的解释文本
			"type": "bottom" // 解释框的气泡类型
		},
		{
			"showID": "checkin", // 对应的id
			"showMessage": "点击“入住”办理当前酒店入住流程", // 对应的解释文本
			"type": "bottom" // 解释框的气泡类型
		},
		{
			"showID": "extend",
			"showMessage": "点击“续住”办理当前房间续住流程",
			"type": "bottom"
		},
		{
			"showID": "checkout",
			"showMessage": "点击“退房”办理当前房间退房流程",
			"type": "bottom"
		},
		{
			"showID": "lift_qrcode",
			"showMessage": "如面部无法识别， 点击进入梯控二维码界面",
			"type": "bottom"
		},
		{
			"showID": "emergency_key",
			"showMessage": "如面部无法识别， 点击进入手机开门界面",
			"type": "bottom"
		},
		{
			"showID": "shop",
			"showMessage": "点击进入酒店小超市， 挑选心仪商品",
			"type": "bottom"
		}
	]

	const instance = getCurrentInstance()

	function clickNext() {
		console.log('点击了下一个')
		currentIndex.value++;
		console.log('currentIndex.value', currentIndex.value)
		console.log('noticeArray.length', noticeArray.length)
		if (currentIndex.value >= noticeArray.length) {
			console.log('click next return')
			showGuide.value = false
			return
		}
		cShowMsg.value = noticeArray[currentIndex.value].showMessage;
		var idS = '#' + noticeArray[currentIndex.value].showID;
		console.log(idS)
		const query = uni.createSelectorQuery().in(instance);
		query.select(idS).boundingClientRect(data => {
			console.log("得到布局位置信息" + JSON.stringify(data));
			cWidth.value = data.width;
			cHeight.value = data.height;
			cLeft.value = data.left;
			cRight.value = data.right;
			cTop.value = data.top;
		}).exec();
	}

	const user = useUserStore()
	const appInfo = useAppInfoStore()
	onLoad(() => {
		if (!user.userInfo.openid) {
			uni.login({
				success: async (res) => {
					console.log('get openid', res)
					if (res.code) {
						//发起网络请求
						let getOpenidRes = await uni.request({
							url: '/user/weChatOpenid',
							method: 'POST',
							data: {
								code: res.code,
								appId: appInfo.appId
							}
						})
						if (getOpenidRes.data.success) {
							console.log("获取微信openId", getOpenidRes);
							user.updateUserInfo({
								...user.userInfo,
								openid: getOpenidRes.data.data
							})
						}
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				}
			})
		}

		if (uni.getStorageSync('showGuide') === '') {
			showGuide.value = true
			uni.setStorageSync('showGuide', 'false')
			nextTick(function() {
				if (currentIndex.value >= noticeArray.length) {
					showGuide.value = false;
					return;
				}
				// showGuide.value = true;
				cShowMsg.value = noticeArray[currentIndex.value].showMessage;
				var idS = '#' + noticeArray[currentIndex.value].showID;
				console.log(idS)
				//根据布局信息显示引导框位置
				const query = uni.createSelectorQuery().in(instance);
				query.select(idS).boundingClientRect(data => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					cWidth.value = data.width;
					cHeight.value = data.height;
					cLeft.value = data.left;
					cRight.value = data.right;
					cTop.value = data.top;
				}).exec();
			});
		}
	})
</script>

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

	.title {
		z-index: 999;
		display: block;
		position: fixed;
		top: 80rpx;
		left: 30rpx;
		right: 30rpx;
		color: #ffffff;
		text-align: center;
		font-size: 40rpx;
	}

	.adv-pic {
		height: 540rpx;

		swiper {
			height: 540rpx;

			swiper-item {
				image {
					width: 100vw;
					height: 540rpx;
				}
			}
		}
	}

	.hotel-name {
		margin: 20rpx 40rpx;
		display: flex;
		flex-direction: row;
		color: #ffffff;
		background-color: hsla(0, 100%, 0%, 0.5);
		padding: 20rpx 0;
		border-radius: 10rpx;
		transform: translateY(-80rpx);

		.hotel-name--fix {
			font-size: 20rpx;
			width: 100rpx;
			height: 100%;
			padding-right: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

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

	.business {
		display: flex;
		flex-direction: column;
		margin: 0 20rpx;
		border-radius: 10rpx;
		box-shadow: 1px 1px #eaeaf5, -1px 2px #eaeaf5;


		.business-row {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin: 0 60rpx 30rpx;
			// padding-top: 60rpx;

			.business-item {
				width: 30vw;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				image {
					width: 127rpx;
					height: 116rpx;
				}
			}
		}
	}

	.voucher {
		width: 90vw;
		margin: 20rpx auto;

		image {
			width: 100%;
		}
	}
</style>