|
|
<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>
|
