MiniScm/pages/home/home.vue

<template>
	<view class="container">
		<view class="top">
			<NavigateBar title="源享住"></NavigateBar>
		</view>
		<view class="adv-pic">
			<u-swiper :list="advPicList" keyName="image" indicator indicatorMode="dot" circular height="540rpx"
				imgMode="aspectFit" interval="8000"></u-swiper>
		</view>

		<view class="hotel-name">
			<view class="hotel-name--fix" :style="[fixStyle]"></view>
			<view class="hotel-name--content" :style="[hotelNameFontSize]">
				<view>{{ currentHotel.name }}</view>
			</view>
			<view class="hotel-name--fix" @click="gotoSelectHotel" id="changeHotel">
				<img src="/static/switch.svg" style="width: 30rpx; height: 30rpx;">
				切换
			</view>
		</view>

		<view class="bottom">
			<view class="bottom--row">
				<view class="bottom--row-item" id="checkin"
					@click="navigateTo('/subpkg_checkin/selectCheckinType/selectCheckinType')">
					<view class="bottom--row-item__img">
						<u-image src="/static/checkin.png" width="118rpx" height="108rpx"></u-image>
					</view>
					<view class="bottom--row-item__word">入住</view>
				</view>
				<view class="bottom--row-item" id="extend" @click="navigateTo('/subpkg/extend/extend?fromExtend=true')">
					<view class="bottom--row-item__img">
						<u-image src="/static/extend.png" width="105rpx" height="103rpx"></u-image>
					</view>
					<view class="bottom--row-item__word">续住</view>
				</view>
				<view class="bottom--row-item" id="checkout"
					@click="navigateTo('/subpkg/extend/extend?fromExtend=false')">
					<view class="bottom--row-item__img">
						<u-image src="/static/checkout.png" width="113rpx" height="105rpx"></u-image>
					</view>
					<view class="bottom--row-item__word">退房</view>
				</view>
			</view>
			<view class="bottom--row">
				<view class="bottom--row-item" id="lift_qrcode"
					@click="navigateTo('/subpkg/elevatorControl/elevatorControl')">
					<view class="bottom--row-item__img">
						<u-image src="/static/lift_qrcode.png" width="105rpx" height="93rpx"></u-image>
					</view>
					<view class="bottom--row-item__word">梯控二维码</view>
				</view>
				<view class="bottom--row-item" id="emergency_key"
					@click="navigator('/subpkg/emergencyKey/emergencyKey')">
					<view class="bottom--row-item__img">
						<u-image src="/static/emergency_key.png" width="78rpx" height="95rpx"></u-image>
					</view>
					<view class="bottom--row-item__word">手机开门</view>
				</view>
				<view class="bottom--row-item" id="shop">
					<view class="bottom--row-item__img">
						<u-image src="/static/shop.png" width="118rpx" height="108rpx"></u-image>
					</view>
					<view class="bottom--row-item__word">客房超市</view>
				</view>
			</view>
		</view>
		<guide :show="showGuide" :width="cWidth" :height="cHeight" :left="cLeft" :right="cRight" :top="cTop"
			:showMessage='cShowMsg' :currentIndex="currentIndex" :noticeArray="noticeArray" @click="clicktoNext">
		</guide>
	</view>
</template>

<script>
	import guide from '@/components/guide/guide.vue'
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		IMG_BASE_URL
	} from "../../config.js"
	import NavigateBar from '../../components/navigateBar/navigate-bar.vue';
	export default {
		components: {
			NavigateBar,
			guide
		},
		data() {
			return {
				topSrc: IMG_BASE_URL + "/home_top.png",
				advPicList: [{
						image: IMG_BASE_URL + "/home_adv1.png",
						title: ""
					},
					{
						image: IMG_BASE_URL + "/home_adv2.png",
						title: ""
					}
				],
				showGuide: false, //引导是否显示 
				cShowMsg: '', // 展示的解释语
				cWidth: '',
				cHeight: '',
				cLeft: '',
				cRight: '',
				cTop: '',
				currentIndex: 0,
				//配置需要显示引导的view以及引导显示的msg
				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": "top"
					},
					{
						"showID": "emergency_key",
						"showMessage": "如面部无法识别， 点击进入手机开门界面",
						"type": "top"
					},
					{
						"showID": "shop",
						"showMessage": "点击进入酒店小超市， 挑选心仪商品",
						"type": "top"
					}
				]
			};
		},
		computed: {
			...mapState("m_user", ["userInfo"]),
			...mapState("m_business", ["currentHotel"]),
			fixStyle() {
				let style = {}
				if (this.currentHotel.hasOwnProperty('name') && this.currentHotel.name.length <= 14) return style
				style.display = "none"
				return style
			},
			hotelNameFontSize() {
				let style = {}
				if (this.currentHotel.hasOwnProperty('name') && this.currentHotel.name.length <= 14) return style
				style.fontSize = "30rpx"
				return style
			}
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			navigateTo(url) {
				if (url !== "" && url !== null && url !== undefined) {
					if (url !== "/subpkg_checkin/selectCheckinType/selectCheckinType") {
						if (!this.userInfo.idNumber) {
							uni.showModal({
								title: '身份信息未完善',
								content: '请至个人中心实名认证处完善个人信息',
								showCancel: false,
								success() {
									uni.switchTab({
										url: '/pages/my/my'
									})
								}
							})
							return
						}
					}
					uni.navigateTo({
						url: url,
					});
				}
			},
			gotoSelectHotel() {
				uni.redirectTo({
					url: '/subpkg/chooseHotel/chooseHotel?source=home'
				})
			},
			clicktoNext() {
				console.log('点击了下一个')
				if (this.currentIndex >= this.noticeArray.length) {
					this.showGuide = false;
					uni.setStorageSync('showGuide', false)
					return;
				}
				this.noticeArray[this.currentIndex].zindex = 0;
				this.cShowMsg = '';
				this.currentIndex++;
				if (this.currentIndex >= this.noticeArray.length) {
					this.showGuide = false;
					return;
				}
				this.cShowMsg = this.noticeArray[this.currentIndex].showMessage;
				var idS = '#' + this.noticeArray[this.currentIndex].showID;
				console.log(idS)
				const query = uni.createSelectorQuery().in(this);
				query.select(idS).boundingClientRect(data => {
					console.log("得到布局位置信息" + JSON.stringify(data));
					this.cWidth = data.width;
					this.cHeight = data.height;
					this.cLeft = data.left;
					this.cRight = data.right;
					this.cTop = data.top;
				}).exec();

			},
		},
		onShow() {
			//进入页面时 currentHotel 为空时 跳转选择酒店
			if (JSON.stringify(this.currentHotel) === '{}') {
				uni.redirectTo({
					url: '/subpkg/chooseHotel/chooseHotel?source=home'
				})
			}
		},
		async onLoad() {
			// console.log(__wxConfig)
			//获取openid
			if (!this.userInfo.openid) {
				// #ifdef MP-WEIXIN
				wx.login({
					success: (res) => {
						if (res.code) {
							//发起网络请求
							uni.$http.post('/user/weChatOpenid', {
								code: res.code
							}).then((res) => {
								this.userInfo.openid = res.data.data
								this.updateUserInfo(this.userInfo)
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
				// #endif

				// #ifdef MP-ALIPAY
				my.getAuthCode({
					scopes: 'auth_user',
					success: res => {
						const authCode = res.authCode;
						// console.log("authCode",authCode);
						//发起网络请求
						uni.$http.post('/user/aliOpenid', {
							code: authCode,
							appId: '2021004131662268'
						}).then((res) => {
							this.userInfo.openid = res.data.data
							console.log("获取支付宝端的openid", res.data.data);
							this.updateUserInfo(this.userInfo)
						})
					},
					fail: err => {
						console.log('my.getAuthCode 调用失败', err)
					}
				});
				// #endif
			}

			//显示引导
			// uni.setStorageSync('showGuide', true)
			let showGuide = uni.getStorageSync('showGuide')
			console.log(typeof showGuide)
			console.log(showGuide)
			console.log(showGuide === '')
			if (showGuide === '') {
				this.showGuide = true
				uni.setStorageSync('showGuide', 'false')
				let _this = this;
				this.$nextTick(function() {
					if (_this.currentIndex >= _this.noticeArray.length) {
						_this.showGuide = false;
						return;
					}
					_this.showGuide = true;
					_this.cShowMsg = _this.noticeArray[_this.currentIndex].showMessage;
					var idS = '#' + _this.noticeArray[_this.currentIndex].showID;
					console.log(idS)
					//根据布局信息显示引导框位置
					const query = uni.createSelectorQuery().in(_this);
					query.select(idS).boundingClientRect(data => {
						console.log("得到布局位置信息" + JSON.stringify(data));
						_this.cWidth = data.width;
						_this.cHeight = data.height;
						_this.cLeft = data.left;
						this.cRight = data.right;
						_this.cTop = data.top;
					}).exec();
				});
			}
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		},
		onShareTimeline(info) {}
		// #endif
	};
</script>

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

		.top {
			width: 100%;
			height: 130rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
		}

		.adv-pic {
			width: 100%;
			height: 540rpx;
		}

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

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

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

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


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

				.bottom--row-item {
					width: 30vw;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
				}
			}
		}
	}
</style>