MiniScmV3/subpkg_checkin/selectCheckinType/selectCheckinType.vue

<template>
	<image src="/static/arrow-left.svg" class="back-arrow" @click="navigateBack"></image>
	<advVue />
	<hotelSelectorVue class="hotel-selector" />
	<view class="checkin-type-btns">
		<button v-for="(btn,index) in btnList" :key=index v-text="btn.text"
			@click="navigateTo(btn.url)">btn.text</button>
	</view>
</template>

<script setup>
	import advVue from '../../components/adv/adv.vue';
	import hotelSelectorVue from '../../components/hotelSelector/hotelSelector.vue';
	const btnList = [{
			text: "无预定",
			url: "/subpkg_checkin/selectRoomType/selectRoomType"
		},
		{
			text: "有预定",
			url: "/subpkg_checkin/queryOrder/queryOrder"
		}
	]

	function navigateTo(url) {
		uni.navigateTo({
			url
		})
	}

	function navigateBack() {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.back-arrow {
		position: fixed;
		top: 100rpx;
		left: 10rpx;
		z-index: 99;
		width: 72rpx;
		height: 72rpx;
	}

	.hotel-selector {
		transform: translateY(-80rpx);
	}

	.checkin-type-btns {
		margin-top: 100rpx;

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