wx-dangyuanjiaoyujidi/pages/park/index.vue

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;position: relative;" :latitude="latitude" :longitude="longitude"
					:markers="covers">
					<view class="book-box">
						<view class="activityBox-content flex-col">
							<view class="activityBox-row" style="margin-bottom: 56rpx;">
								<text class="activityBox-title">苏州市党性教育实训基地停车场</text>
							</view>
							<view class="activityBox-row">
								<text class="icon-shijian iconfont"></text>
								<text>预约可入场时间段：00:00:00-23:59:59</text>

							</view>
							<view class="activityBox-row">
								<text class="icon-huodong iconfont"></text>
								<text>地址：苏州市姑苏区体育场路4号</text>

							</view>
							<view class="activityBox-row flex-row align-center" style="margin-bottom: 0rpx;">
								<text class="icon-ditu-dibiao iconfont"></text>
								<text>距离：11.3km</text>
								<view class="tomap">
									<text class="icon-daohang1 iconfont" style="margin-right: 0;"></text>
								</view>
							</view>
							<view class="parkbox">
								<view class="parkbox-title">可预约车位</view>
								<view class="parkbox-content flex-row justify-around">
									<view class="parkbox-item  flex-row align-center" style="margin-right: 15rpx;"
										@click="handleSelectPark(1)" :class="(currentPark==1?'parkbox-item-on':'')">
										<view class="parkbox-item-status" v-if="currentPark==1">
											<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
										</view>
										<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
										<view>
											<text>大中：10</text>
										</view>
									</view>
									<view class="parkbox-item flex-col align-center"
										:class="(currentPark==2?'parkbox-item-on':'')" @click="handleSelectPark(2)"
										style="margin-left: 15rpx;">
										<view class="parkbox-item-status" v-if="currentPark==2">
											<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
										</view>
										<view class="flex-row align-center">
											<text class="iconfont icon-tingchechang1"
												style="font-size: 28rpx;"></text><text>小车：10</text>

										</view>
										<text style="font-size: 24rpx;color: #828282;">（充电桩空闲0）</text>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="footer">
						<u-button type="primary" @click="tobook">预约</u-button>
					</view>
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 31.299893,
				longitude: 120.626022,
				covers: [{
					latitude: 31.302377,
					longitude: 120.625826,
					width: 70,
					height: 70,
					iconPath: '/static/img/location.png'
				}],
				currentPark: 1
			}
		},
		methods: {
			handleSelectPark(type) {
				this.currentPark = type;
			},
			tobook() {
				uni.navigateTo({
					url: "book"
				})
			}
		}
	}
</script>

<style>
	@import url("@/static/css/activitybox.css");

	.parkbox-item-status {
		position: absolute;
		right: 0;
		top: 0;
		background: #EF9525;
		border-top-right-radius: 5rpx;
		border-bottom-left-radius: 5rpx;
		font-size: 20rpx;
		color: #828282;
		padding: 7rpx;
	}

	.parkbox-title {
		margin-bottom: 40rpx;
		margin-top: 40rpx;
		font-size: 26rpx;
		color: #4E4E4E;
	}

	.parkbox-item-on {
		background: #FCF6E3 !important;
		border: 2rpx solid #EF9525 !important;
	}

	.parkbox-item {
		border: 2rpx solid #F7F6F4;
		background: #F7F6F4;
		border-radius: 5rpx;
		padding: 28rpx 0rpx;
		position: relative;
		flex: 1;
		display: flex;
		justify-content: center;
		font-size: 26rpx;
		color: #EF9525;
		box-sizing: border-box;
	}

	.book-box {
		height: 50%;
		position: absolute;
		bottom: 108rpx;
		left: 0;
		background: #FFFFFF;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		margin: 0rpx 2%;
		width: 96%;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 108rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
		padding: 21rpx 25rpx;
	}
</style>