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">{{info.name}}</text>
							</view>
							<view class="activityBox-row">
								<text class="icon-shijian iconfont"></text>
								<text>预约可入场时间段：{{info.start_time}}-{{info.end_time}}</text>

							</view>
							<view class="activityBox-row">
								<text class="icon-huodong iconfont"></text>
								<text>地址：{{info.address}}</text>

							</view>
							<view class="activityBox-row flex-row align-center" style="margin-bottom: 0rpx;"
								@click="openlocation">
								<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(2)" :class="(currentPark==2?'parkbox-item-on':'')">
										<view class="parkbox-item-status" v-if="currentPark==2">
											<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
										</view>
										<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
										<view>
											<text>大中：{{info.big_park_total}}</text>
										</view>
									</view>
									<view class="parkbox-item flex-col align-center"
										:class="(currentPark==1?'parkbox-item-on':'')" @click="handleSelectPark(1)"
										style="margin-left: 15rpx;">
										<view class="parkbox-item-status" v-if="currentPark==1">
											<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>小车：{{info.small_park_total}}</text>

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

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

<script>
	export default {
		data() {
			return {
				latitude: 31.299893,
				longitude: 120.626022,
				info: {},
				covers: [],
				currentPark: 1,
				btnDisabled: false
			}
		},
		onLoad() {
			var that = this;
			this.loadInfo();
			this.loadOrder(function(res) {
				that.loadactivityOrder(function(r) {
					if (res.length + r.length == 0) {
						that.util.toast("请先预约活动或参观")
						that.btnDisabled = true;
					} else {
						that.btnDisabled = false;
					}
				})
			})
		},
		methods: {
			loadOrder(cb) {
				var that = this;
				this.util.request({
					api: '/api/mobile/user/my-visit-order',
					data: {
						status: 1
					},
					utilSuccess: function(res) {
						cb(res)
					},
					utilFail: function(res) {
						this.util.toast(res)
					}
				})
			},
			loadactivityOrder(cb) {
				var that = this;
				this.util.request({
					api: '/api/mobile/user/my-activity-order',
					data: {
						status: 1
					},
					utilSuccess: function(res) {
						cb(res);
					},
					utilFail: function(res) {
						this.util.toast(res)
					}
				})
			},
			handleSelectPark(type) {
				this.currentPark = type;
			},
			openlocation() {
				uni.openLocation({
					latitude: this.info.latitude,
					longitude: this.info.longitude,
					name: this.info.name,
					address: this.info.address
				});
			},
			loadInfo(cb) {
				var that = this;
				this.util.request({
					api: '/api/mobile/carpark/index',
					utilSuccess: function(r) {
						var res = r[0];
						res.latitude = parseFloat(res.latitude);
						res.longitude = parseFloat(res.longitude);
						that.info = res;
						var mod = {
							latitude: res.latitude,
							longitude: res.longitude,
							width: 70,
							height: 70,
							iconPath: '/static/img/location.png'
						}
						that.covers.push(mod);
						cb(res);
					},
					utilFail: function(res) {

					}
				})
			},
			handleBook() {
				uni.$u.throttle(this.tobook, 500)
			},
			tobook() {
				uni.navigateTo({
					url: "book?id=" + this.info.id + "&currentPark=" + this.currentPark
				})
			}
		}
	}
</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>