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">
				<img src="/static/switch.svg" style="width: 30rpx; height: 30rpx;">
				切换
			</view>
		</view>

		<view class="bottom">
			<view class="botton--row" v-for="(row, rowIndex) in bottomList" :key="rowIndex">
				<view class="botton--row-item" v-for="(item, itemIndex) in row" :key="itemIndex">
					<view class="botton--row-item__content" @click="navigateTo(item.url)">
						<view class="botton--row-item__img">
							<u-image :src="item.src" :width="item.width" :height="item.height"></u-image>
						</view>
						<view class="botton--row-item__word">{{ item.text }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		IMG_BASE_URL
	} from "../../config.js"
	import NavigateBar from '../../components/navigateBar/navigate-bar.vue';
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				topSrc: IMG_BASE_URL + "/home_top.png",
				bottomList: [
					[{
							src: "/static/checkin.png",
							text: "入住",
							url: "/subpkg_checkin/selectCheckinType/selectCheckinType",
							width: "118rpx",
							height: "108rpx"
						},
						{
							src: "/static/extand.png",
							text: "续住",
							url: "/subpkg/extend/extend?fromExtend=true",
							width: "105rpx",
							height: "103rpx"
						},
						{
							src: "/static/checkout.png",
							text: "退房",
							url: "/subpkg/extend/extend?fromExtend=false",
							width: "113rpx",
							height: "105rpx"
						},
					],
					[{
							src: "/static/lift_qrcode.png",
							text: "梯控二维码",
							url: "/subpkg/elevatorControl/elevatorControl",
							width: "105rpx",
							height: "93rpx"
						},
						{
							src: "/static/emergency_key.png",
							text: "手机开门",
							url: "/subpkg/emergencyKey/emergencyKey",
							width: "78rpx",
							height: "95rpx"
						}
					]
				],
				advPicList: [{
						image: IMG_BASE_URL + "/home_adv1.png",
						title: ""
					},
					{
						image: IMG_BASE_URL + "/home_adv2.png",
						title: ""
					}
				]
			};
		},
		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) {
					uni.navigateTo({
						url: url,
					});
				}
			},
			gotoSelectHotel() {
				uni.redirectTo({
					url: '/subpkg/chooseHotel/chooseHotel?source=home'
				})
			}
		},
		onShow() {
			//进入页面时 currentHotel 为空时 跳转选择酒店
			if (JSON.stringify(this.currentHotel) === '{}') {
				uni.redirectTo({
					url: '/subpkg/chooseHotel/chooseHotel?source=home'
				})
			}
		},
		async onLoad() {
			//获取openid
			if (!this.userInfo.openid) {
				// #ifdef MP-WEIXIN
				wx.login({
					success: (res) => {
						if (res.code) {
							//发起网络请求
							uni.$http.post('/userInfo/openid', {
								code: res.code,
								platform: 'WECHAT'
							}).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('/userInfo/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
			}
		},
		// #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;


			.botton--row:first-child {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 0 60rpx 30rpx;
				padding-top: 60rpx;

				.botton--row-item__content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					height: 170rpx;
					width: 170rpx;

					.botton--row-item__img {
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.botton--row:last-child {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 0 180rpx;
				padding-bottom: 80rpx;

				.botton--row-item__content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
					height: 170rpx;
					width: 170rpx;

					.botton--row-item__img {
						height: 120rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>