CarRental/page_user/carSelection.vue
2024-09-25 18:03:49 +08:00

808 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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="txt1">
{{addressInfo}}
</view>
<view class="txt">
|{{time}} 取车|
</view>
<view class="txt">
{{dataInfo.dictLabel}}
</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" @click="showCity()">
<view class="txt">
取车城市
</view>
<view class="words" style="white-space: nowrap;">
{{cityList[0].cityName}}
<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode=""></image>
</view>
</view>
<view class="area" @click="getMapLocation()" style="white-space: nowrap;">
<view class="top">
<view class="txt">
取车地点
</view>
<view class="type">
距最近店铺727m
</view>
</view>
<view class="bot">
<view class="txt3">
{{addressInfo}}
</view>
<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode=""></image>
</view>
</view>
<view class="dingw" style="white-space: nowrap;" @click="getaddress()">
当前位置
<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" @click="time1=true">
{{time}}
<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" @click="showdata=true">
{{dataInfo.dictLabel}}
<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>
<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" start-year="2024"
:default-time="pickertime" start="2024"></u-picker>
<!-- <u-mask :show="showdata" @click="closeData()" :z-index='100' /> -->
<view class="choosedata" v-if="showdata">
<view class="tit">
请选择租车周期
<image src="https://lxnapi.ccttiot.com/bike/img/static/uLzTHCbE6TTRPYj6rv8X" mode="" @click="closeData()"></image>
</view>
<view class="li" v-for="(item,index) in dataList" :key="index" :class="index == dataIndex? 'act':''" @click="chooseData(item,index)">
{{item.dictLabel}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: '#fff'
},
sn: '',
showchoose: false,
CouponLists: [],
hight: 0,
showkf:false,
cityList: [],
dataList: [],
gps: {},
cityInfo: {},
cityIndex: -1,
addressInfo: '',
time1: false,
params: {
year: false,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
startTime: '',
pickertime: '',
time: '',
showdata:false,
dataIndex:0,
dataInfo:{},
shopList:[]
}
},
onLoad() {
this.getcityList()
this.getdata()
},
onShow() {
let that = this
uni.getLocation({
type: 'gcj02',
success: function(lb) {
that.gps.latitude = lb.latitude;
that.gps.longitude = lb.longitude;
that.getCity()
that.getaddress()
that.getshopList()
},
fail: function(error) {
uni.showToast({
title: '未获取到定位信息,请点击设置勾选允许位置信息,即可使用全部功能',
icon: 'none',
duration: 2000
});
// that.getmarks()
// 在这里处理获取位置信息失败的情况
}
})
// 获取当前日期并设置startDate和pickertime
const now = new Date();
const month = now.getMonth() + 1; // 月份从0开始因此加1
const day = now.getDate();
// 格式化为 MM-DD 的字符串
this.startDate = `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`;
// 初始化pickertime为当天的默认日期
this.pickertime = this.startDate;
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: {
getshopList(){
let data={
// phoneLon:this.gps.latitude,
phoneLon:120.257144,
// phoneLat:this.gps.longitude,
phoneLat:27.105719,
isFreeCar:true
}
this.$u.post(`app/getStoreListByLocation`,data).then((res) => {
if (res.code == 200) {
this.shopList = res.data;
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
},
chooseData(item,index){
this.dataInfo=item
this.dataIndex=index
},
closeData(){
this.showdata=false
},
confirm1(selectedDate) {
// 将用户选择的日期和当前日期进行比较
// 从回调中获取选择的月份和日期
const selectedMonth = parseInt(selectedDate.month, 10);
const selectedDay = parseInt(selectedDate.day, 10);
// 获取当前日期
const now = new Date();
const currentMonth = now.getMonth() + 1;
const currentDay = now.getDate();
// 比较选择的日期和当前日期
if (selectedMonth < currentMonth || (selectedMonth === currentMonth && selectedDay < currentDay)) {
// 如果选择的日期比当前日期早则重置为pickertime
const now = new Date();
const month = now.getMonth() + 1; // 月份从0开始因此加1
const day = now.getDate();
// 格式化为 MM-DD 的字符串
this.time = `${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日`;
uni.showToast({
title: '选择的日期不能小于当前日期',
icon: 'none',
duration: 2000
});
} else {
// 否则,设置为用户选择的日期
this.time = `${selectedDate.month}月${selectedDate.day}日`;
}
},
getaddress() {
this.$u.get(`app/getAddress?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => {
if (res.code == 200) {
this.addressInfo = res.data;
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
},
getCity() {
this.$u.get(`app/getCity?lon=` + this.gps.longitude + '&lat=' + this.gps.latitude).then((res) => {
if (res.code == 200) {
this.cityInfo = res.data;
// 假设 cityList 是一个包含城市信息的数组,并且 cityInfo 中有一个唯一标识字段,例如 cityName 或 cityId
const index = this.cityList.findIndex(city => city.cityName === this.cityInfo.cityName);
if (index !== -1) {
this.cityIndex = index
console.log('City found at index:', index);
// 可以在这里对找到的索引进行其他处理
} else {
console.log('City not found in the list');
}
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
},
showCity() {
},
getdata() {
this.$u.get("/app/getDictData?dictType=rl_rental_period").then((res) => {
if (res.code == 200) {
this.dataList = res.data
this.dataInfo=this.dataList[0]
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
},
getcityList() {
this.$u.get("app/city/list").then((res) => {
if (res.code == 200) {
this.cityList = res.data
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
},
tosele() {
uni.navigateTo({
url: '/page_user/carSelection'
})
},
}
}
</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;
}
.txt1{
font-weight: 400;
font-size: 24rpx;
color: #6F6F6F;
width: 252rpx;
/* 设置宽度 */
white-space: nowrap;
/* 禁止文本换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
}
.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 {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-top: 6rpx;
.txt3 {
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
width: 252rpx;
/* 设置宽度 */
white-space: nowrap;
/* 禁止文本换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
}
image {
width: 40rpx;
height: 22rpx;
}
}
}
}
}
}
}
</style>