bike/page_user/xcjs.vue

<template>
	<view class="page">
		<u-navbar title="行程结束" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='40'></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" v-if="false">
				<view class="time">
					骑行时间30分钟9秒
				</view>
				<view class="price">
					4.00<span>元</span>
				</view>
				<view class="toinfo">
					查看骑行费明细 >
				</view>
				<view class="btn">
					 去支付
				</view>
			</view>
			<view class="bot">
				<view class="card">
					<view class="top">
						<view class="topcont">
							<view class="left">
								3.0<span style="font-size: 24rpx;">元</span>
							</view>
							<view class="right">
								费用明细 >
							</view>
						</view>
						<view class="info">
							<view class="type">
								电单车
							</view>
							<view class="data">
								2023-12-31  19:17:44
							</view>
						</view>
						<view class="topcont" style="margin-top: 32rpx;"> 
							<view class="left" style="font-size:20rpx ;">
								订单时长
							</view>
							<view class="right"  style="font-size:20rpx ;">
								6分5秒
							</view>
						</view>
						<view class="topcont"  style="margin-top: 14rpx;">
							<view class="left" style="font-size:20rpx ;">
								骑行距离
							</view>
							<view class="right"  style="font-size:20rpx ;">
								1.3公里
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="text">
							故障上报 >
						</view>
					</view>
				</view>
			</view>
			<u-mask :show="show" @click="show = false" :z-index='100'/>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				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 ;
	}
	.bot{
		display: flex;
		justify-content: center;
		padding: 26rpx 34rpx 48rpx 34rpx;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 420rpx;
		background: #F7F7F7;
		border-radius: 30rpx;
		.card{
			width: 708rpx;
			height: 320rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			.top{
				padding: 26rpx 38rpx;
				.topcont{
					display: flex;
					flex-wrap: nowrap;
					justify-content: center;
					justify-content: space-between;
					.left{
						font-weight: 500;
						font-size: 36rpx;
						color: #3D3D3D;
					}
					.right{
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
					}
				}
				.info{
					margin-top: 16rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					.type{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 112rpx;
						height: 42rpx;
						background: linear-gradient( 90deg, #4C97E7 0%, rgba(158,205,255,0.58) 100%);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
					.data{
						margin-left: 15rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #3D3D3D;
					}
				}
			}
			.bottom{
				display: flex;
				align-items: center;
				justify-content: center;
				border-top: 2rpx solid  #EFEFEF;
				width: 100%;
				height: 66rpx;
				.text{
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
				}
				
				
			}
		}
	}
	.bot_btn{
		padding: 26rpx 34rpx 48rpx 34rpx;
		position: fixed;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: center;
		bottom: 0;
		width: 750rpx;
		height: 420rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 30rpx;
		.time{
			// height: 88rpx;
			width: 100%;
			text-align: center;
			padding-bottom: 24rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #3D3D3D;
			border-bottom: 2rpx solid  #EFEFEF;
		}
		.price{
			margin-top: 22rpx;
			width: 100%;
			text-align: center;
			font-weight: 500;
			font-size: 72rpx;
			color: #3D3D3D;
			span{
				font-size: 28rpx;
				font-weight: 500;
			}
		}
		.toinfo{
			// margin-top: 12rpx;
			width: 100%;
			text-align: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
		}
		.btn{
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 680rpx;
			height: 90rpx;
			background: #4C97E7;
			border-radius: 54rpx 54rpx 54rpx 54rpx;
			font-weight: 500;
			font-size: 40rpx;
			color: #FFFFFF;
		}
		
	}
}
</style>