696 lines
16 KiB
Vue
696 lines
16 KiB
Vue
<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">
|
||
{{storeInfo.name}}
|
||
</view>
|
||
<view class="address">
|
||
</view>
|
||
<view class="time">
|
||
营业时间 | {{storeInfo.businessTimeStart}} - {{storeInfo.businessTimeEnd}}
|
||
|
||
</view>
|
||
<view class="type_li">
|
||
<view class="type1">
|
||
{{storeInfo.rentalCar ? storeInfo.rentalCar : 0}} 辆可租
|
||
</view>
|
||
<view class="type2" v-if="agentInfo.isFreeCar">
|
||
免费送取车
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<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>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="ips_box" v-if="false">
|
||
<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>
|
||
<view class="car_card" v-for="(item,index) in storeInfo.models" :key="index">
|
||
<view class="car_img">
|
||
<image :src="item.picture" mode=""></image>
|
||
</view>
|
||
<view class="car_info">
|
||
<view class="info_top">
|
||
<view class="txt">
|
||
{{item.model}}
|
||
</view>
|
||
<view class="red1">
|
||
剩余
|
||
</view>
|
||
</view>
|
||
<view class="info_cont">
|
||
<view class="txt">
|
||
{{item.modelsType}}
|
||
<!-- 手机开关锁 | 定位防盗 -->
|
||
</view>
|
||
<view class="red1" style="white-space: nowrap;">
|
||
<span>{{item.rentalCar}}</span>辆
|
||
</view>
|
||
</view>
|
||
<view class="info_bot">
|
||
<view class="price">
|
||
日租￥<span>{{item.price}}</span>
|
||
</view>
|
||
<view class="btn" @click="" @click="toOrdder(storeInfo,item)" :style="{ background: item.rentalCar < 1 ? '#ccc' : ''}">
|
||
立即租
|
||
</view>
|
||
<!-- <view class="red1" :style="{ color: item.rentalCar < 1 ? '#ccc' : 'inherit', whiteSpace: 'nowrap' }">
|
||
<span>{{ item.rentalCar }}</span>辆
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tip">
|
||
没有更多了哦
|
||
</view>
|
||
<u-mask :show="showkf" :z-index='100' />
|
||
<view class="kfbox" v-if="showkf">
|
||
<view class="tit">
|
||
请选择您要联系的客服
|
||
</view>
|
||
<view class="words">
|
||
我们根据选择为您提供服务
|
||
</view>
|
||
<view class="phone_box" @click="callPhone(agentInfo.phone)">
|
||
<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">
|
||
{{agentInfo.phone}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="phone_box" @click="callPhone(storeInfo.serverPhone)">
|
||
<view class="img">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/unsZOLTPuYrpQKF8MpFt" mode=""></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="name">
|
||
门店客服
|
||
</view>
|
||
<view class="phone">
|
||
{{storeInfo.serverPhone}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="close" src="https://lxnapi.ccttiot.com/bike/img/static/ulwJylk0JSmOdmU3FnnG" mode="" @click="showkf=false"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
background: {
|
||
backgroundColor: 'transparent'
|
||
},
|
||
statusBarHeight:0,
|
||
navBarHeight:0,
|
||
showkf:false,
|
||
storeId:'',
|
||
storeInfo:{},
|
||
agentInfo:{},
|
||
gps:{},
|
||
kmInfo:''
|
||
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
//获取手机状态栏高度
|
||
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
|
||
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 '';
|
||
// });
|
||
// };
|
||
// }
|
||
},
|
||
methods: {
|
||
toOrdder(item,items){
|
||
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
|
||
});
|
||
}
|
||
|
||
},
|
||
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 ''; // 返回空字符串或其他默认值
|
||
});
|
||
},
|
||
|
||
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
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
.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;
|
||
}
|
||
}
|
||
|
||
}
|
||
.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>
|