<template>
	<view class="page">
		<u-navbar title="确认开锁" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='45'></u-navbar>
			<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
				:show-location='true' :polygons='polygons' :markers="markers" :polyline="polyline"></map>
			<view class="bot_btn">
				<view class="top">
					<view class="left">
						<view class="text">
							可行驶53公里
						</view>
						<view class="ele">
							<image src="https://api.ccttiot.com/smartmeter/img/static/upbpFLv4dkl88Syk2VKW" mode=""></image>
							电量充足
						</view>
					</view>
					<view class="right">
						<view class="text">
							起步价（15分钟内）
						</view>
						<view class="txt">
							2.0<span style="font-size: 40rpx;">元</span>
						</view>
					</view>
				</view>
				<view class="center">
					<view class="card">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uYg1WNJJH1VK7RdldKE1" mode=""></image>
						<view class="tit">
							计时收费
						</view>
						<view class="nmtxt">
							<view class="left">
								起步价
							</view>
							<view class="right">
								2.0元（含15分钟）
							</view>
						</view>
						<view class="nmtxt">
							<view class="left">
								时长费
							</view>
							<view class="right">
								1.0元/10分钟
							</view>
						</view>
						<view class="tip">
							超出起步价包含时长后收取
						</view>
					</view>
					<view class="card">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uYg1WNJJH1VK7RdldKE1" mode=""></image>
						<view class="tit">
							套餐一
						</view>
						<view class="nmtxt">
							<view class="left">
								可骑行3小时
							</view>
							<view class="right red">
								15.00<span style="font-size: 24rpx;"> 元</span>
							</view>
						</view>
						<view class="nmtxt">
							<view class="left">
								
							</view>
							<view class="right">
								原价 <span style=" text-decoration: line-through;">19.00元</span>
							</view>
						</view>
						<view class="tip">
							超出起步价包含时长后收取
						</view>
					</view>
					<view class="card">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uYg1WNJJH1VK7RdldKE1" mode=""></image>
						<view class="tit">
							套餐一
						</view>
						<view class="nmtxt">
							<view class="left">
								可骑行3小时
							</view>
							<view class="right red">
								15.00<span style="font-size: 24rpx;"> 元</span>
							</view>
						</view>
						<view class="nmtxt">
							<view class="left">
								
							</view>
							<view class="right">
								原价 <span style=" text-decoration: line-through;">19.00元</span>
							</view>
						</view>
						<view class="tip">
							超出起步价包含时长后收取
						</view>
					</view>
				</view>
				<view class="bot" style="margin-top: 20rpx;">
					<view class="btn" @click="sub()">
						确认开锁
					</view>
				</view>
			</view>
			<u-mask :show="show" @click="show = false" :z-index='100'/>
			<view class="pops">
				<view class="tit">
					安全骑行 禁止超载
				</view>
				<view class="text">
					<view class="yuan">
						
					</view>
					<span>临时锁车：相当于拔钥匙，还在租借中</span>
					
				</view>
				<view class="text">
					<view class="yuan">
						
					</view>
					<span>结束订单：在还车点结束订单，押金可在【个人中心-押金】申请押金退还</span>
					
				</view>
				<view class="text">
					<view class="yuan">
						
					</view>
					<span>严禁超载：一辆车最多坐两个人</span>
					
				</view>
				<view class="text">
					<view class="yuan">
						
					</view>
					<span>请爱护车辆，且注意查看车辆剩余电量</span>
					
				</view>
				<view class="btn">
					我已阅读同意
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				latitude: '39.916527',
				longitude: ' 116.397128',
				isMap: false,
				zoomSize: 15,
				 markers: [{
				      id: 1,
				      latitude: 39.90469,
				      longitude: 116.40717,
				      title: 'Marker1'
				    }, {
				      id: 2,
				      latitude: 39.90969,
				      longitude: 116.41217,
				      title: 'Marker2'
				    }],
				polyline: [{
					points: [{
						latitude: 39.916527,
						longitude: 116.397128
					}, {
						latitude: 39.926527,
						longitude: 116.397128
					}, {
						latitude: 39.926527,
						longitude: 116.407128
					}, {
						latitude: 39.916527,
						longitude: 116.407128
					}],
					width:8,
					arrowLine:true,
					color:'#00AF99'
					// strokeWidth: 2,
					// strokeColor: '#00AF99',
					// fillColor: '#00AF99'
				}, ],
				polygons:[ 
					{
				          points: [
				            { latitude: 39.918527, longitude: 116.400128 },
				            { latitude: 39.922527, longitude: 116.400128 },
				            { latitude: 39.924527, longitude: 116.405128 },
				            { latitude: 39.912527, longitude: 116.402128 }
				          ],
				          strokeColor: '#00FF00DD', // 使用不同的颜色来区分第二个区域
				          strokeWidth: 2,
				         fillColor: '#00FF00DD'
				        }
				]
				 
			}
		},
		onShow() {
			console.log(this.$u.config.v);
		},
		methods: {
			sub(){
				uni.showToast({
					title: '骑行前，请先到个人中心支付押金，否 则将无法使用电单车！',
					icon: 'none',
					duration: 2000
				})
			}
		}
	}
</script>

<style lang="scss" >
page{
	background-color: #F7FAFE;
}
.page{
	width: 750rpx;
	.map{
		width: 750rpx;
		height:100vh ;
	}
	.pops{
		padding: 46rpx 36rpx;
		position: fixed;
		top: 400rpx;
		left: 74rpx;
		width: 604rpx;
		height: 606rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		z-index: 110;
		.tit{
			// width: 604rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
			margin-bottom: 54rpx;
		}
		.text{
			margin-top: 36rpx;
			display: flex;
			flex-wrap: wrap;
			// align-items: center;
			
			.yuan{
				margin-top: 10rpx;
				margin-right: 12rpx;
				width: 20rpx;
				height: 20rpx;
				background: #000;
				border-radius: 50%;
			}
			span{
				width: 90%;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
		.btn{
			margin-left: 40rpx;
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 470rpx;
			height: 90rpx;
			background: #4C97E7;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}
	}
	.bot_btn{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 716rpx;
		background: #F7F7F7;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 50rpx 50rpx 0 0  ;
		.top{
			display: flex;
			flex-wrap: nowrap;
			width: 100%;
			height: 284rpx;
			.left{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 50%;
				padding-top: 68rpx;
				
				.text{
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
				}
				.ele{
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					// align-items: center;
					justify-content: center;
					
					font-weight: 400;
					font-size: 40rpx;
					color: #4C97E7;
					image{
						margin-right: 18rpx;
						width: 22rpx;
						height: 48rpx;
					}
				}
			}
			.right{
				width: 50%;
				padding-top: 68rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				.text{
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
				}
				.txt{
					
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					// align-items: center;
					// align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 72rpx;
					color: #3D3D3D;
					span{
						font-weight: 700;
						margin-top: 30rpx;
					}
				}
			}
		}
		.center::-webkit-scrollbar {
		  display: none;
		}
		.center{
			width: 750rpx;
			display: flex;
			// flex-wrap: nowrap;
			padding: 0 32rpx;
			height: 228rpx;
			 overflow-x: auto; /* 添加水平滚动条 */
			.card{
				margin-right: 20rpx;
				position: relative;
				padding: 16rpx 24rpx;
				// width: 368rpx;
				height: 228rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #fff;
				image{
					position: absolute;
					top: 0;
					right: 0;
					width: 82rpx;
					height: 50rpx;
				}
				.tit{
					width: 320rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.nmtxt{
					margin-top: 22rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					.left{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
					.right{
						font-weight: 400;
						font-size: 24rpx;
						color: #3D3D3D;
					}
					.red{
						font-weight: 400;
						font-size: 36rpx;
						color: #FF4444;
					}
				}
				.tip{
					margin-top: 14rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #808080;
				}
			}
			.act1{
				border: 2rpx solid #4C97E7;
			}
		}
		.bot{
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 184rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08), 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 680rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}
	}
}
</style>