chuangte/CarRental
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
590a33096c
CarRental/page_user/carStore.vue

696 lines
16 KiB
Vue
Raw Normal View History

111
2024-09-19 17:33:39 +08:00
<template>
<view class="page">
<view class="fixed">
<u-navbar title="租车" :border-bottom="false" :background="background" title-color='#fff' title-size='36' height='45' back-icon-color='#fff'></u-navbar>
</view>
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/uSCRH3mWfzIsDjQ3jGvy" mode=""></image>
<view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
<view class="statusBars" :style="{ height:navBarHeight+'px' }"></view>
<view class="store_info">
<view class="left">
<view class="store_tit">
11
2024-09-30 18:02:38 +08:00
{{storeInfo.name}}
111
2024-09-19 17:33:39 +08:00
</view>
<view class="address">
</view>
<view class="time">
11
2024-09-30 18:02:38 +08:00
营业时间 | {{storeInfo.businessTimeStart}} - {{storeInfo.businessTimeEnd}}
111
2024-09-19 17:33:39 +08:00
</view>
<view class="type_li">
<view class="type1">
11
2024-09-30 18:02:38 +08:00
{{storeInfo.rentalCar ? storeInfo.rentalCar : 0}} 辆可租
111
2024-09-19 17:33:39 +08:00
</view>
11
2024-09-30 18:02:38 +08:00
<view class="type2" v-if="agentInfo.isFreeCar">
111
2024-09-19 17:33:39 +08:00
免费送取车
</view>
</view>
</view>
<view class="right">
11
2024-09-30 18:02:38 +08:00
<view class="img_box" style="margin-left: -29rpx;" @click="mapFun()">
<image class="img1" src="https://lxnapi.ccttiot.com/bike/img/static/uG86Af90zSFQz9rZwgKb" mode=""></image>
<view class="txt1">
{{kmInfo}}
</view>
</view>
<view class="img_box" style="margin-left: 44rpx;" @click="showkf=true">
<image class="img2" src="https://lxnapi.ccttiot.com/bike/img/static/uetWl3PLcTTOM3GYN6EW" mode="" ></image>
<view class="txt1">
电话
</view>
</view>
111
2024-09-19 17:33:39 +08:00
</view>
</view>
11
2024-09-30 18:02:38 +08:00
<view class="ips_box" v-if="false">
111
2024-09-19 17:33:39 +08:00
<view class="ipt">
<view class="left">
<view class="txt">
取车时间
</view>
<view class="words">
09月2日
<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
</image>
</view>
<view class="txt" style="margin-left: 58rpx;">
租车周期
</view>
<view class="words">
日租
<image src="https://lxnapi.ccttiot.com/bike/img/static/uJkuBFsHACP6tnUo5nYm" mode="">
</image>
</view>
</view>
<view class="right" @click="showchoose=true">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uukFtL3r4DCAYPcUPsK0" mode=""></image>
</view>
</view>
</view>
11
2024-09-30 18:02:38 +08:00
<view class="car_card" v-for="(item,index) in storeInfo.models" :key="index">
111
2024-09-19 17:33:39 +08:00
<view class="car_img">
11
2024-09-30 18:02:38 +08:00
<image :src="item.picture" mode=""></image>
111
2024-09-19 17:33:39 +08:00
</view>
<view class="car_info">
<view class="info_top">
<view class="txt">
11
2024-09-30 18:02:38 +08:00
{{item.model}}
111
2024-09-19 17:33:39 +08:00
</view>
<view class="red1">
剩余
</view>
</view>
<view class="info_cont">
<view class="txt">
11
2024-09-30 18:02:38 +08:00
{{item.modelsType}}
<!-- 手机开关锁 | 定位防盗 -->
111
2024-09-19 17:33:39 +08:00
</view>
11
2024-09-30 18:02:38 +08:00
<view class="red1" style="white-space: nowrap;">
<span>{{item.rentalCar}}</span>辆
111
2024-09-19 17:33:39 +08:00
</view>
</view>
<view class="info_bot">
<view class="price">
11
2024-09-30 18:02:38 +08:00
日租￥<span>{{item.price}}</span>
111
2024-09-19 17:33:39 +08:00
</view>
11
2024-10-25 18:05:22 +08:00
<view class="btn" @click="" @click="toOrdder(storeInfo,item)" :style="{ background: item.rentalCar < 1 ? '#ccc' : ''}">
111
2024-09-19 17:33:39 +08:00
立即租
</view>
11
2024-10-25 18:05:22 +08:00
<!-- <view class="red1" :style="{ color: item.rentalCar < 1 ? '#ccc' : 'inherit', whiteSpace: 'nowrap' }">
<span>{{ item.rentalCar }}</span>辆
</view> -->
111
2024-09-19 17:33:39 +08:00
</view>
</view>
</view>
<view class="tip">
没有更多了哦
</view>
<u-mask :show="showkf" :z-index='100' />
11
2024-09-30 18:02:38 +08:00
<view class="kfbox" v-if="showkf">
111
2024-09-19 17:33:39 +08:00
<view class="tit">
请选择您要联系的客服
</view>
<view class="words">
我们根据选择为您提供服务
</view>
11
2024-09-30 18:02:38 +08:00
<view class="phone_box" @click="callPhone(agentInfo.phone)">
111
2024-09-19 17:33:39 +08:00
<view class="img">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uwiRmed6Kz4OUJh00HBD" mode=""></image>
</view>
<view class="info">
<view class="name">
官方客服
</view>
<view class="phone">
11
2024-09-30 18:02:38 +08:00
{{agentInfo.phone}}
111
2024-09-19 17:33:39 +08:00
</view>
</view>
</view>
11
2024-09-30 18:02:38 +08:00
<view class="phone_box" @click="callPhone(storeInfo.serverPhone)">
111
2024-09-19 17:33:39 +08:00
<view class="img">
<image src="https://lxnapi.ccttiot.com/bike/img/static/unsZOLTPuYrpQKF8MpFt" mode=""></image>
</view>
<view class="info">
<view class="name">
11
2024-09-30 18:02:38 +08:00
门店客服
111
2024-09-19 17:33:39 +08:00
</view>
<view class="phone">
11
2024-09-30 18:02:38 +08:00
{{storeInfo.serverPhone}}
111
2024-09-19 17:33:39 +08:00
</view>
</view>
</view>
11
2024-09-30 18:02:38 +08:00
<image class="close" src="https://lxnapi.ccttiot.com/bike/img/static/ulwJylk0JSmOdmU3FnnG" mode="" @click="showkf=false"></image>
111
2024-09-19 17:33:39 +08:00
</view>
</view>
</template>
<script>
export default {
data() {
return {
background: {
backgroundColor: 'transparent'
},
statusBarHeight:0,
navBarHeight:0,
11
2024-09-30 18:02:38 +08:00
showkf:false,
storeId:'',
storeInfo:{},
agentInfo:{},
gps:{},
kmInfo:''
111
2024-09-19 17:33:39 +08:00
}
},
11
2024-09-30 18:02:38 +08:00
onLoad(e) {
111
2024-09-19 17:33:39 +08:00
//获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
// #ifdef MP-WEIXIN
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
const custom = wx.getMenuButtonBoundingClientRect()
// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
// #endif
11
2024-09-30 18:02:38 +08:00
this.storeId=e.storeId
this.getStoreInfo()
},
onShow() {
},
computed: {
// getType() {
// return (item) => {
// let data = {
// modelId: item.modelId
// };
// this.$u.get(`app/getFunctionListByModelId?`, data).then((res) => {
// if (res.code == 200) {
// return res.data;
// }
// return '';
// });
// };
// }
111
2024-09-19 17:33:39 +08:00
},
methods: {
111
2024-10-14 18:02:05 +08:00
toOrdder(item,items){
11
2024-10-25 18:05:22 +08:00
if(items.rentalCar>0){
console.log(items,'toOrdder');
uni.navigateTo({
url:'/page_user/ordder?storeId='+item.storeId+'&modelId='+items.modelId
})
}else{
uni.showToast({
title: '改车型已没货，请查看其他车型',
icon: 'none',
duration: 2000
});
}
111
2024-10-14 18:02:05 +08:00
},
11
2024-09-30 18:02:38 +08:00
mapFun() {
console.log('点击了');
uni.openLocation({
latitude: this.storeInfo.lat,
//纬度 - 目的地/坐标点
longitude: this.storeInfo.lng,
//经度 - 目的地/坐标点
// name: "荆门市",
address: this.storeInfo.simpleAddress
});
},
getkm(){
let data = {
lon: this.gps.longitude,
lat: this.gps.latitude,
storeId: this.storeInfo.storeId
};
this.$u.get(`app/computeDistance?`, data).then((res) => {
if (res.code == 200) {
let distance = res.data; // 获取返回的距离
// 判断距离单位，如果小于1000米则显示米，大于等于1000米则显示千米
if (distance < 1000) {
this.kmInfo = `${distance.toFixed(0)}m`; // 小于1000米，保留整数并拼接'm'
} else {
this.kmInfo = `${(distance / 1000).toFixed(1)}km`; // 大于等于1000米，转换为千米并保留两位小数
}
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
},
callPhone(phone){
uni.makePhoneCall({
phoneNumber:phone
})
setTimeout(()=>{
this.showkf=false
},500)
},
getAgent(){
let data={
agentId:this.storeInfo.agentId
}
this.$u.get(`app/getAgentByAgentId?`,data).then((res) => {
if (res.code == 200) {
this.agentInfo = res.data;
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
},
getType(item) {
let data = {
modelId: item.modelId
};
return this.$u.get(`app/getFunctionListByModelId?`, data).then((res) => {
if (res.code == 200) {
// 截取前两项并提取 function 字段，拼接上 '|'
return res.data.slice(0, 2).map(func => func.function).join(' | ');
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
return ''; // 返回空字符串或其他默认值
}
}).catch(err => {
console.error('Request failed:', err);
return ''; // 返回空字符串或其他默认值
});
},
111
2024-09-19 17:33:39 +08:00
11
2024-09-30 18:02:38 +08:00
async updateModelsType() {
for (let index = 0; index < this.storeInfo.models.length; index++) {
const item = this.storeInfo.models[index];
// 调用 getType 函数并等待返回结果
const modelsType = await this.getType(item);
// 将返回的内容添加到对应的项
this.$set(this.storeInfo.models, index, {
...item,
modelsType // 添加 modelsType 字段
});
}
console.log( this.storeInfo,'aaa');
},
getStoreInfo(){
let data={
storeId:this.storeId
}
this.$u.get(`app/getStore?`,data).then((res) => {
if (res.code == 200) {
this.storeInfo = res.data;
this.updateModelsType(); // 确保在设置 storeInfo 后调用
this.getAgent()
let that = this
uni.getLocation({
type: 'gcj02',
success: function(lb) {
that.gps.latitude = lb.latitude;
that.gps.longitude = lb.longitude;
that.getkm()
},
fail: function(error) {
uni.showToast({
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
icon: 'none',
duration: 2000
});
// that.getmarks()
// 在这里处理获取位置信息失败的情况
}
})
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
}
111
2024-09-19 17:33:39 +08:00
}
}
</script>
<style lang="scss">
page {
background-color: #F7F7F7;
}
.page{
.kfbox{
padding: 48rpx 30rpx;
position: fixed;
left: 82rpx;
top: 410rpx;
width: 590rpx;
// height: 282rpx;
background: #FFFFFF;
border-radius: 30rpx 30rpx 30rpx 30rpx;
z-index: 110;
display: flex;
justify-content: center;
flex-wrap: wrap;
.close{
position: relative;
bottom: -124rpx;
width: 60rpx;
height: 60rpx;
}
.phone_box{
margin-top:32rpx;
width: 528rpx;
height: 144rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.1);
border-radius: 20rpx 20rpx 20rpx 20rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
.img{
width: 86rpx;
height: 86rpx;
image{
width: 86rpx;
height: 86rpx;
}
}
.info{
display: flex;
flex-wrap: wrap;
margin-left: 34rpx;
.name{
width: 100%;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
}
.phone{
width: 100%;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
}
}
}
.tit{
font-weight: 600;
font-size: 40rpx;
color: #3D3D3D;
}
.words{
margin-bottom: 42rpx;
margin-top: 16rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
11
2024-09-30 18:02:38 +08:00
111
2024-09-19 17:33:39 +08:00
.tip{
margin-top: 30rpx;
width: 100;
text-align: center;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.car_card{
display: flex;
flex-wrap: nowrap;
margin: 0 auto;
margin-top: 16rpx;
width: 676rpx;
// height: 260rpx;
padding: 22rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.car_img{
width: 216rpx;
height: 216rpx;
display: flex;
align-items: center;
justify-content: center;
background: #EFEFEF;
border-radius: 18rpx 18rpx 18rpx 18rpx;
image{
width: 172rpx;
height: 132rpx;
}
}
.car_info{
margin-left: 16rpx;
width: 70%;
// display: flex;
// flex-wrap: wrap;
.info_top{
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
height: 38rpx;
.txt{
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
}
.red1{
font-weight: 400;
font-size: 24rpx;
color: #FF1C1C;
}
}
.info_cont{
width: 100%;
height: 66rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.txt{
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
.red1{
font-weight: 400;
font-size: 24rpx;
color: #FF1C1C;
span{
font-size: 48rpx;
font-weight: 600;
}
}
}
.info_bot{
margin-top: 56rpx;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.price{
font-weight: 400;
font-size: 24rpx;
color: #FF1C1C;
span{
font-size: 44rpx;
font-weight: 600;
}
}
.btn{
display: flex;
align-items: center;
justify-content: center;
width: 138rpx;
height: 50rpx;
background: #F14C4C;
border-radius: 31rpx 31rpx 31rpx 31rpx;
font-weight: 600;
font-size: 24rpx;
color: #FFFFFF;
}
}
}
}
.ips_box {
margin-top: 16rpx;
padding: 22rpx 38rpx;
width: 750rpx;
background: #FFFFFF;
border-radius: 30rpx 30rpx 30rpx 30rpx;
.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;
}
.words{
margin-left: 12rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
image{
width: 40rpx;
height: 22rpx;
}
}
}
// .right {
// width: 32rpx;
// height: 32rpx;
// image {
// width: 32rpx;
// height: 32rpx;
// }
// }
}
}
.store_info{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 30rpx;
margin-top: 62rpx;
width: 750rpx;
background: #FFFFFF;
border-radius: 20rpx;
.right{
display: flex;
align-items: center;
width: 166rpx;
height: 166rpx;
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uiIqqyZ7lKmwHShwdb7e');
background-size: cover;
/* 背景图片等比缩放以覆盖整个容器 */
background-position: center;
11
2024-09-30 18:02:38 +08:00
.img_box{
width: 80rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.img1{
width: 58rpx;
height: 58rpx;
}
.img2{
width: 58rpx;
height: 58rpx;
}
.txt1{
text-align: center;
width: 80rpx;
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
111
2024-09-19 17:33:39 +08:00
}
11
2024-09-30 18:02:38 +08:00
111
2024-09-19 17:33:39 +08:00
}
.left{
.store_tit{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
}
.address{
margin-top: 10rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.time{
margin-top: 8rpx;
font-weight: 500;
font-size: 28rpx;
color: #3D3D3D;
}
.type_li{
margin-top: 22rpx;
width: 100%;
display: flex;
flex-wrap: nowrap;
.type1{
padding: 4rpx 12rpx;
background: #FFE9D4;
border-radius: 6rpx 6rpx 6rpx 6rpx;
font-weight: 400;
font-size: 24rpx;
color: #FF8C1E;
}
.type2{
margin-left: 12rpx;
padding: 4rpx 12rpx;
background: #DCEDFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
font-weight: 400;
font-size: 24rpx;
color: #4297F3;
}
}
}
}
.fixed {
z-index: 999;
position: fixed;
top: 0;
}
.backimg {
position: fixed;
width: 750rpx;
height: 324rpx;
z-index: -1;
}
}
</style>
Reference in New Issue Copy Permalink