MiniScm/pages/home/home.vue

<template>
	<view>
		<view class="top">
			<u-image class="top-pic" :src="topSrc" height="350rpx" width="100%" mode="aspectFill"></u-image>
		</view>
		<view class="hotel-name">
			<u-text :text="currentHotelName" align="center" size="36rpx"></u-text>
		</view>
		<view class="bottom">
			<view class="bottom-item" v-for="item in businessListTop" @click="navigateTo(item.url)">
				<view class="top-img">
					<u-image :src="item.src" width="180rpx" height="180rpx"></u-image>
				</view>
				<view class="bottom-img">
					<u-image :src="item.backgroundSrc" width="160rpx" height="160rpx"></u-image>
				</view>
				<view class="tip">
					<text class="">{{ item.text }}</text>
				</view>
			</view>
			<view class="bottom-item" v-for="item in businessListBottom" @click="navigateTo(item.url)">
				<view class="top-img">
					<u-image :src="item.src" width="180rpx" height="180rpx"></u-image>
				</view>
				<view class="bottom-img">
					<u-image :src="item.backgroundSrc" width="160rpx" height="160rpx"></u-image>
				</view>
				<view class="tip">
					<text class="">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		stringHasText
	} from '../../utils/commonUtils.js'
	import {
		startEid
	} from "../../mp_ecard_sdk/main.js";
	import moment from "moment";
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		IMG_BASE_URL
	} from "../../config.js"
	export default {
		data() {
			return {
				topSrc: IMG_BASE_URL + "/home_top.png",
				businessListTop: [{
						backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
						src: IMG_BASE_URL + "/checkin.png",
						text: "入住",
						url: "/subpkg_checkin/selectCheckinType/selectCheckinType",
					},
					{
						backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
						src: IMG_BASE_URL + "/extand.png",
						text: "续住",
						url: "/subpkg/extend/extend",
					},
					{
						backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
						src: IMG_BASE_URL + "/checkout.png",
						text: "退房",
						url: "/subpkg/checkout/checkout",
					},
				],
				businessListBottom: [{
						backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
						src: IMG_BASE_URL + "/emergency_key.png",
						text: "手机开门",
						url: "/subpkg/emergencyKey/emergencyKey",
					},
					{
						backgroundSrc: IMG_BASE_URL + "/home_business_background.png",
						src: IMG_BASE_URL + "/lift.png",
						text: "梯控二维码",
						url: "/subpkg/elevatorControl/elevatorControl",
					},
				],
			};
		},
		computed: {
			...mapState("m_user", ["userInfo"]),
			...mapState("m_business", ["currentHotelName"]),
		},
		methods: {
			...mapMutations('m_business', ['updateCurrentHotelId', 'updateCurrentHotelName']),
			navigateTo(url) {
				if (url !== "" && url !== null && url !== undefined) {
					uni.navigateTo({
						url: url,
					});
				}
			},
		},
		onLoad(query) {
			//二维码扫描时传入hotelId和hotelName
			if (query.q !== null && query.q !== undefined) {
				let url = decodeURIComponent(query.q)
				let hotelId = url.split('=')[1].split('&')[0]
				let hotelName = url.split('=')[2]
				if (stringHasText(hotelId)) {
					this.updateCurrentHotelId(hotelId)
				}
				if (stringHasText(hotelName)) {
					this.updateCurrentHotelName(hotelName)
				}
			}
		}
	};
</script>

<style lang="scss">
	.top {}

	.hotel-name {
		margin: 40rpx;
	}

	.bottom {
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		margin: 0 auto;
		justify-content: space-around;

		.bottom-item {
			position: relative;
			width: 33%;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;

			.top-img {
				// width: 180rpx;
				// height: 180rpx;
				position: absolute;
				margin: 0 auto;
				z-index: 2;
			}

			.bottom-img {
				// width: 180rpx;
				// height: 180rpx;
				margin: 20rpx 0;
				position: absolute;
				z-index: 1;
			}

			.tip {
				font-size: 40rpx;
				margin-top: 20rpx;
				position: absolute;
				bottom: 0;
			}
		}
	}

	.completeBtn {
		left: 80rpx;
		right: 80rpx;
		bottom: 160rpx;
		position: fixed;
		background-color: #0081ff;
		color: #ffffff;
	}

	.testBtn {
		left: 80rpx;
		right: 80rpx;
		bottom: 80rpx;
		position: fixed;
		background-color: #0081ff;
		color: #ffffff;
	}
</style>