CarRental/pages/index/index.vue

<template>
	<view class="page">
		<view class="backimg"></view>
		<view class="choose_card">
			<view class="check">
				<view class="txt1">
					预约租车
				</view>
				<view class="txt2">
					地图选车
				</view>
			</view>
			<view class="area_li">
				<view class="city">
					<view class="txt">
						取车城市
					</view>
					<view class="words">
						宁德
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode=""></image>
					</view>
				</view>
				<view class="area" @click="getMapLocation()">
					<view class="top">
						<view class="txt">
							取车城市
						</view>
						<view class="type">
							距最近店铺727m
						</view>
					</view>
					<view class="bot">
						福鼎市太姥山镇... 
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode=""></image>
					</view>
				</view>
				<view class="dingw">
					当前位置
					<image src="https://lxnapi.ccttiot.com/bike/img/static/unTHfCN5IgnVKDbadsFp" mode=""></image>
				</view>
			</view>
			<view class="time_box">
				<view class="time_li">
					<view class="txt">
						取车时间
					</view>
					<view class="words">
						09月2日 今天
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode=""></image>
					</view>
				</view>
				<view class="time_li">
					<view class="txt">
						选择租车周期
					</view>
					<view class="words">
					时租
						<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode=""></image>
					</view>
				</view>
			</view>
			<view class="btn" @click="tosele()">
				立即选车
			</view>
			<image class="kefu" src="https://lxnapi.ccttiot.com/bike/img/static/u8osHvZfHL7u3lbveVXx" mode=""></image>
		</view>
		<view class="car_card">
			<view class="card_top">
				<view class="tit">
					本田电动车
				</view>
				<view class="txt">
					2辆可租 <view class="iconfont icon-xiangyou1"> </view>
				</view>
			</view>
			<view class="type_box">
				<view class="type">
					727m
				</view>
				<view class="address">
					天目山路148号
				</view>
			</view>
			<view class="car_info">
				<view class="car_img">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uzgNTmtp5axPAOysf4cJ" mode=""></image>
				</view>
				<view class="info">
					<view class="modle">
						全新车网红泡泡50KM...
					</view>
					<view class="price">
						日租￥ <span>108</span>
					</view>
				</view>
			</view>
		</view>
		
		<tab-bar :indexs='0' style=""></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				
			}
		},
		onLoad() {
		
		},
		computed: {
			
		},
		onShow() {
			
		},
		watch: {
			
		},
		methods: {
			tosele(){
				uni.navigateTo({
					url:'/page_user/carSelection'
				})
			},
			getMapLocation(){
				uni.chooseLocation({
					success:(res)=> {
						console.log(res);
						// this.getRegionFn(res);
					},
					fail:()=>{
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if(!status['scope.userLocation']){
								// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title:"是否授权当前位置",
										content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success:(tip)=>{
											if(tip.confirm){
											// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success:(data)=>{
													// 如果用户授权了地理信息在，则提示授权成功
														if(data.authSetting['scope.userLocation']===true){
															uni.showToast({
																title:"授权成功",
																icon:"success",
																duration:1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (res) => {
																	console.log("详细地址",res);
																	// this.getRegionFn(res);
																}
															})
														}else{
															uni.showToast({
																title:"授权失败",
																icon:"none",
																duration:1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title:"调用授权窗口失败",
									icon:"none",
									duration:1000
								})
							}
						})
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}

	.page {
		width: 100%;
		.car_card{
			margin: 0 auto;
			margin-top: 16rpx;
			padding: 28rpx 34rpx;
			width: 676rpx;
			
			background: #FFFFFF;
			
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.car_info{
				margin-top: 44rpx;
				display: flex;
				flex-wrap: nowrap;
				.car_img{
					image{
						width: 166rpx;
						height: 128rpx;
					}
				}
				.info{
					.modle{
						font-weight: 600;
						font-size: 28rpx;
						color: #3D3D3D;
					}
					.price{
						margin-top: 44rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF1C1C;
						span{
							font-weight: 500;
							font-size: 44rpx;
						}
					}
				}
			}
			.card_top{
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				.tit{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.txt{
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #3D3D3D;
				}
			}
			.type_box{
				margin-top: 8rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.type{
					padding: 2rpx 12rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #0D75E5;
					background: #DCEDFF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
				.address{
					margin-left: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}
			}
		}
		.kefu{
			position: fixed;
			right: 0;
			bottom: 500rpx;
			width: 94rpx;
			height: 94rpx;
		}
		.backimg {
			// position: fixed;
			width: 750rpx;
			height: 464rpx;
			z-index: -10;
			background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uNurSfSfybEGAJYfXD07');
			background-size: cover;
			/* 背景图片等比缩放以覆盖整个容器 */
			background-position: center;
		}
		.choose_card{
			// position: fixed;
			padding-bottom: 28rpx;
			margin: 0 auto;
			margin-top: -60rpx;
			width: 676rpx;
			// height: 511rpx;
			background: #FFFFFF;
			border-radius:20rpx 20rpx 20rpx 20rpx;
			z-index: 110;
			.check{
				margin-bottom: 40rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				width: 676rpx;
				height: 96rpx;
				background-image: url('https://lxnapi.ccttiot.com/bike/img/static/u5r7QJyFfPruTi4VsXzV');
				background-size: cover;
				/* 背景图片等比缩放以覆盖整个容器 */
				background-position: center;
				.txt1{
					width: 50%;
					text-align: center;
					font-weight: 600;
					font-size: 40rpx;
					color: #3D3D3D;
				}
				.txt2{
					width: 50%;
					text-align: center;
					font-weight: 600;
					font-size: 36rpx;
					color: #808080;
				}
			}
			.btn{
				margin: 0 auto;
				
				display: flex;
				align-items: center;
				justify-content: center;
				width: 608rpx;
				height: 80rpx;
				background: #6DB3FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 20rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
			.time_box{
				margin:  0 auto;
				padding: 22rpx 24rpx 28rpx 24rpx;
				display: flex;
				flex-wrap: nowrap;
				width: 608rpx;
				// height: 128rpx;
				background: #EEEEEE;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				.time_li{
					width: 50%;
					.txt{
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
					}
					.words{
						margin-top: 6rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
						image{
							width: 40rpx;
							height: 22rpx;
						}
					}
				}
			}
			.area_li{
				display: flex;
				flex-wrap: nowrap;
				align-items: flex-start;
				padding: 0 34rpx 28rpx 34rpx;
				.dingw{
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					margin-top: 46rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
					image{
						margin-left: 8rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
				.city{
					
					.txt{
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;
					}
					.words{
						margin-top: 6rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
						image{
							width: 40rpx;
							height: 22rpx;
						}
					}
				}
				.area{
					margin-left: 20rpx;
					.top{
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						.txt{
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
						}
						.type{
							margin-left: 10rpx;
							background: #FFE9D4;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							padding: 2rpx 6rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #FF8C1E;
						}
					}
					.bot{
						margin-top: 6rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #3D3D3D;
						image{
							width: 40rpx;
							height: 22rpx;
						}
					}
				}
			}
		}
	}


</style>