chuangte/CarRental
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
38c586d74f
CarRental/page_user/carSelection.vue
tx 38c586d74f 111
2024-09-19 17:33:39 +08:00

596 lines
11 KiB
Vue
Raw Blame History

<template>
<view class="page">
<u-navbar ref="navbar" title="租车" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
height='45'></u-navbar>
<view class="cont">
<u-mask :show="showchoose" :z-index='100' />
<view class="ips_box">
<view class="ipt">
<view class="left">
<view class="txt">
文三数字生活...|
</view>
<view class="txt">
09月02日取车|
</view>
<view class="txt">
日租
</view>
</view>
<view class="right" @click="showchoose=true">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uukFtL3r4DCAYPcUPsK0" mode=""></image>
</view>
</view>
</view>
<view class="choose_card" v-if="showchoose">
<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_li">
<view class="btns" @click="showchoose=false">
关闭
</view>
<view class="btn" @click="tosele()">
确定
</view>
</view>
</view>
<!-- <image class="kefu" src="https://lxnapi.ccttiot.com/bike/img/static/u8osHvZfHL7u3lbveVXx" mode=""></image> -->
<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>
<view class="choosedata" v-if="false">
<view class="tit">
请选择租车周期
<image src="https://lxnapi.ccttiot.com/bike/img/static/uLzTHCbE6TTRPYj6rv8X" mode=""></image>
</view>
<view class="li">
时租
</view>
<view class="li act">
时租
</view>
<view class="li">
时租
</view>
<view class="li">
时租
</view>
<view class="li">
时租
</view>
<view class="li">
时租
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: '#fff'
},
sn: '',
showchoose: false,
CouponLists: [],
hight: 0,
showkf
}
},
onShow() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.ips_box').boundingClientRect(data => {
this.hight = data.height + 45
console.log('ips_box height:', this.hight);
}).exec();
});
},
methods: {
}
}
</script>
<style lang="scss">
page {
background-color: #F7F7F7;
}
.page {
width: 100%;
.cont {
position: relative;
.choosedata {
padding: 46rpx 37rpx;
position: fixed;
bottom: 0;
width: 750rpx;
// height: 757rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 0 0;
z-index: 101;
.tit {
margin-bottom: 54rpx;
position: relative;
width: 100%;
text-align: center;
font-weight: 600;
font-size: 40rpx;
color: #3D3D3D;
image {
position: absolute;
right: 36rpx;
width: 52rpx;
height: 52rpx;
}
}
.li {
margin-bottom: 24rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 676rpx;
height: 88rpx;
background: #F7F7F7;
border-radius: 14rpx 14rpx 14rpx 14rpx;
border: 2rpx solid #fff;
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.act {
background: #DCEDFF;
border: 2rpx solid #4297F3;
}
}
.ips_box {
padding: 22rpx 38rpx;
width: 750rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
.ipt {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
width: 100%;
background: #EFEFEF;
border-radius: 39rpx 39rpx 39rpx 39rpx;
.left {
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt {
font-weight: 400;
font-size: 24rpx;
color: #6F6F6F;
}
}
.right {
width: 32rpx;
height: 32rpx;
image {
width: 32rpx;
height: 32rpx;
}
}
}
}
.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: absolute;
top: 0;
padding-bottom: 28rpx;
width: 750rpx;
// height: 511rpx;
background: #FFFFFF;
border-radius: 0rpx 0rpx 20rpx 20rpx;
z-index: 100;
.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_li {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
margin-top: 20rpx;
.btns {
display: flex;
align-items: center;
justify-content: center;
width: 238rpx;
height: 80rpx;
font-weight: 500;
font-size: 36rpx;
color: #6DB3FF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #6DB3FF;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 406rpx;
height: 80rpx;
background: #6DB3FF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
//
margin-left: 14rpx;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
border: 2rpx solid #fff;
}
}
.time_box {
margin: 0 auto;
padding: 22rpx 24rpx 28rpx 24rpx;
display: flex;
flex-wrap: nowrap;
width: 658rpx;
// 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: 20rpx 46rpx 28rpx 46rpx;
.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>
Reference in New Issue View Git Blame Copy Permalink