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