MiniScm/subpkg_checkin/selectCheckinType/selectCheckinType.vue

<template>
	<view class="container">
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="源享住" control="back"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="源享住"></NavigateBar>
			<!-- #endif -->
		</view>

		<view class="adv-pic">
			<u-swiper :list="advPicList" keyName="image" indicator indicatorMode="dot" circular height="540rpx"
				imgMode="aspectFit" interval="2500"></u-swiper>
		</view>

		<view class="hotel-name">
			<view class="hotel-name--fix" :style="[fixStyle]"></view>
			<view class="hotel-name--content" :style="currentHotel.name.length > 14 ? 'font-size: 30rpx' : ''">
				<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="btn-area">
			<button v-for="btn in btnList" :key=btn.text v-text="btn.text" @click="navigateTo(btn.url)"></button>
		</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 {
				btnList: [{
						text: "无预定",
						url: "/subpkg_checkin/selectRoomType/selectRoomType"
					},
					{
						text: "有预定",
						url: "/subpkg_checkin/queryOrder/queryOrder"
					}
				],
				advPicList: [{
						image: IMG_BASE_URL + "/home_adv1.png",
						title: ""
					},
					{
						image: IMG_BASE_URL + "/home_adv2.png",
						title: ""
					}
				]
			};
		},
		computed: {
			...mapState("m_business", ["currentHotel"]),
			fixStyle() {
				let style = {}
				if (this.currentHotel.name.length <= 14) return style
				style.display = "none"
				return style
			}
		},
		methods: {
			...mapMutations("m_business", ["updateOrder", "updateCheckinInfo"]),
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			gotoSelectHotel() {
				uni.redirectTo({
					url: '/subpkg/chooseHotel/chooseHotel?source=selectCheckinType'
				})
			}
		},
		onLoad() {
			this.updateOrder({})
			this.updateCheckinInfo([])
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style lang="scss" scoped>
	@import "../../config.scss";

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

		.btn-area {
			margin-top: 100rpx;

			button {
				color: #FFFFFF;
				background-color: #9e97c3;
				margin: 0 60rpx 60rpx;
				font-size: 33rpx;
			}
		}
	}
</style>