MiniScmV3/pages/home/home.vue

<template>
	<advVue />
	<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="gotoElevatorControl('/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 {
	ref,
	nextTick,
	getCurrentInstance,
	computed
} from 'vue'
import {
	useUserStore
} from '../../store/userStore'
import {
	useAppInfoStore
} from '../../store/appInfoStore'
import {
	useCheckinInfoStore
} from '../../store/checkinInfoStore'
import {
	onLoad
} from '@dcloudio/uni-app'
import guide from '@/components/guide/guide.vue'
import advVue from '../../components/adv/adv.vue'
import {
	useHotelStore
} from '@/store/hotelStore'
import {
	useOrderStore
} from '../../store/orderStore';

let checkinInfoStore = useCheckinInfoStore()
let hotel = computed(() => {
	return useHotelStore().hotel
})
let fixStyle = computed(() => {
	let style = {}
	if (hotel.value.hasOwnProperty('name') && hotel.value.name.length <= 14) return style
	style.display = "none"
	return style
})

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

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

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
		});
	}
}

const gotoElevatorControl = (url) => {
	// if (!this.currentHotel.hasLiftQrCode) {
	// 	uni.showModal({
	// 		content: '当前酒店不支持梯控二维码功能',
	// 		showCancel: false,
	// 	})
	// 	return
	// }
	
	navigateTo(url)
}

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

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(() => {
	//清空缓存订单信息
	useOrderStore().updateOrderInfo({})
	checkinInfoStore.clearCheckinInfo()
	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;
}

.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>