1842 lines
46 KiB
Vue
1842 lines
46 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 地图 -->
|
||
<view class="">
|
||
<image class="picimg" v-if="iconflag" src="https://api.ccttiot.com/smartmeter/img/static/uU4DEpKYqBND0oXDiqod"
|
||
mode=""></image>
|
||
</view>
|
||
<!-- v-if="orderflag == false"<view class="" v-else>
|
||
<image class="picimg" style="top: 30%;" v-if="iconflag" src="https://api.ccttiot.com/smartmeter/img/static/uU4DEpKYqBND0oXDiqod"
|
||
mode=""></image>
|
||
</view> -->
|
||
<map class='map' id="map" :latitude="latitude" :longitude="longitude" :markers="covers"
|
||
@markertap="handleMarkerClick" @regionchange="regionchange" :polygons="polyline" :show-location="true" />
|
||
<!--v-if="orderflag == false" <map class='map' v-else style="height: 64vh;" id="map" :latitude="latitude" :longitude="longitude" :markers="covers"
|
||
@markertap="handleMarkerClick" @regionchange="regionchange" :polygons="polyline" :show-location="true" /> -->
|
||
<!-- 左侧图标 -->
|
||
<view class="lticon">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u8WwVFtQy59eGWWQ9cfy" @click="btnbz" mode="">
|
||
</image>
|
||
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/ulCxXq0nQDSfdDWg5Ttw" @click="kefuflag = true" mode=""></image> -->
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uDnm3dpbwMh9jLBRMeZw" @click="btnhuiz" mode="">
|
||
</image>
|
||
</view>
|
||
<!-- 右侧图标 -->
|
||
<view class="rticon">
|
||
<image v-if="rtindex != 1" src="https://api.ccttiot.com/smartmeter/img/static/uyNPBYUMjYxybfRLHyu9"
|
||
@click="btntap(1)" mode=""></image>
|
||
<image v-if="rtindex == 1" src="https://api.ccttiot.com/smartmeter/img/static/u8zXd0xYhLKD0BvgZDVv"
|
||
@click="btntap(1)" mode=""></image>
|
||
<image v-if="rtindex != 2" src="https://api.ccttiot.com/smartmeter/img/static/unoWsjJjeFKVrivp7MMF"
|
||
@click="btntap(2)" mode=""></image>
|
||
<image v-if="rtindex == 2" src="https://api.ccttiot.com/smartmeter/img/static/ukCjlSRsRoqMNNNxcFJ9"
|
||
@click="btntap(2)" mode=""></image>
|
||
<image v-if="rtindex != 3" src="https://api.ccttiot.com/smartmeter/img/static/uwIWeuTVbjFLNmLTGPOh"
|
||
@click="btntap(3)" mode=""></image>
|
||
<image v-if="rtindex == 3" src="https://api.ccttiot.com/smartmeter/img/static/uEWVQFGBf10XJn8aTlaZ"
|
||
@click="btntap(3)" mode=""></image>
|
||
<image style="width: 80rpx;height: 80rpx;" @click="toggleIconAndCallout"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uZT6o9OqOdZeXHLYszIg" mode=""></image>
|
||
</view>
|
||
<!-- 点击地图门店弹窗 -->
|
||
<view class="shoptc" v-if="shoptcflag" @click="btnmendain">
|
||
<view class="top">
|
||
<view class="name">
|
||
云行租车（汇丰公寓）
|
||
</view>
|
||
<view class="zu">
|
||
1辆可租 <image src="https://api.ccttiot.com/smartmeter/img/static/uX3GfXzwzS4GY1J55raG" mode="">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
<view class="juli">
|
||
<view class="mi">
|
||
727m
|
||
</view>
|
||
<view class="dizhi">
|
||
福建省宁德市霞浦县六一七路402号台铃...
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
|
||
<view class="shuoming">
|
||
<view class="name">
|
||
全新车网红泡泡50KM...
|
||
</view>
|
||
<view class="price">
|
||
日租￥<text>108</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 车辆弹窗 -->
|
||
<view class="biketc" v-if="taocanflag">
|
||
<view class="topfor">
|
||
<view class="biketop">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u6u6mWzrgiVCHICU1IWg" mode=""></image>
|
||
<view class="bianh">
|
||
<view class="">
|
||
车牌号：{{cheobj.vehicleNum == null ? '--' : cheobj.vehicleNum}}
|
||
</view>
|
||
<view class="bh" style="color: #808080;">
|
||
车辆编号：{{cheobj.sn == null ? '--' : cheobj.sn}}
|
||
</view>
|
||
</view>
|
||
<view class="bikebeep" @click="btnxlxc">
|
||
响铃寻车
|
||
</view>
|
||
</view>
|
||
<view class="bikesy">
|
||
<view class="bikelt">
|
||
<view class="bikets">
|
||
剩余骑行
|
||
</view>
|
||
<view class="bikegongli">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uLybsyJqWL4siF7mXkXh" mode="">
|
||
</image> {{cheobj.remainEndurance == null ? '--' : cheobj.remainEndurance}}公里
|
||
</view>
|
||
</view>
|
||
<view class="bikert">
|
||
<view class="bikets">
|
||
剩余电量
|
||
</view>
|
||
<view class="bikegongli">
|
||
<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/u9y1tZIJBWLsO0DRoweT" mode=""></image> -->
|
||
<image v-if="cheobj.remainingPower >= 0 && cheobj.remainingPower < 20 " src="https://api.ccttiot.com/smartmeter/img/static/u8M9KmIfHXpmeifTwCzj" mode=""></image>
|
||
<image v-if="cheobj.remainingPower >= 20 && cheobj.remainingPower < 50 " src="https://api.ccttiot.com/smartmeter/img/static/u2gp2pE9kPGwaJ4MKUxE" mode=""></image>
|
||
<image v-if="cheobj.remainingPower >= 50 && cheobj.remainingPower < 80 " src="https://api.ccttiot.com/smartmeter/img/static/umm5Ruc5vhNSjeacslwX" mode=""></image>
|
||
<image v-if="cheobj.remainingPower >= 80 && cheobj.remainingPower <= 100 " src="https://api.ccttiot.com/smartmeter/img/static/uo75cOfYZiQoxZQAI3FH" mode=""></image>
|
||
{{cheobj.remainingPower == null ? '--' : cheobj.remainingPower}}%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bikeyc" @click="btncheyc">
|
||
×
|
||
</view>
|
||
</view>
|
||
<view class="anniuks" @click="btndetaxq">
|
||
<text>去下单</text>
|
||
</view>
|
||
</view>
|
||
<view class="clmask" v-if="taocanflag"></view>
|
||
|
||
<!-- 平台客服弹窗 -->
|
||
<view class="kefutc" v-if="kefuflag">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/umtjJg2CJLiOS6hfAEzo" mode=""
|
||
@click="kefuflag = false"></image>
|
||
<view class="box">
|
||
<view class="" style="max-height: 170rpx;overflow: scroll;">
|
||
<view class="top" v-for="(item,index) in kefulist" :key="index">
|
||
<view class="dianhua">
|
||
{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf(item.contact)">
|
||
<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
|
||
<text>拨打</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="wz">
|
||
平台客服工作时间
|
||
</view>
|
||
<view class="wz">
|
||
08：00~20：00
|
||
</view>
|
||
<view class="wzs">
|
||
客服电话高峰期可能遇忙，请耐心等待
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="kefuflag"></view>
|
||
|
||
<!-- 有订单弹窗 -->
|
||
<view class="conts_box" v-if="orderflag" @click="btntz">
|
||
<view class="orderzt">
|
||
<view class="" style="font-size: 32rpx;font-weight: 600;">
|
||
订单状态
|
||
</view>
|
||
<view class="">
|
||
<view style="color: #333;">订单进行中<u-icon name="arrow-right" color="#333" size="28"></u-icon></view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_li">
|
||
<view class="right">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uqKmFMF9YHTX8lAQARSd" mode="aspectFill">
|
||
</image>
|
||
<view class="NO">
|
||
SN：{{orderobj.deviceSn == null ? '--' : orderobj.deviceSn}}
|
||
</view>
|
||
</view>
|
||
<view class="left">
|
||
<view class="km">
|
||
可继续行驶{{orderobj.deviceRemainEndurance == null ? '--' : orderobj.deviceRemainEndurance}}公里
|
||
</view>
|
||
<view class="speed">
|
||
<view class="speeds" :style="{ width: orderobj.deviceRemainingPower + '%' }"></view>
|
||
</view>
|
||
<view class="NO">
|
||
电量{{orderobj.deviceRemainingPower == null ? '--' : orderobj.deviceRemainingPower}}%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class=""
|
||
style="display: flex;width: 100%;padding: 0 20rpx;box-sizing: border-box;justify-content: space-between;">
|
||
<view class="dh" @click.stop="danghang">
|
||
导航 <u-icon name="arrow-right" color="#333" size="28"></u-icon>
|
||
</view>
|
||
<view class="suocheanniu">
|
||
<view class="lssc" @click.stop="btnjsdd">
|
||
结束订单
|
||
</view>
|
||
<view class="lssc" @click.stop="btnqd">
|
||
{{orderobj.deviceLockStatus == 1 ? '临时锁车' : '开锁'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 扫码用车未在停车点内还车弹窗 -->
|
||
<view class="tingchetc" v-if="fjflag">
|
||
<view class="topname">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uDfEXjApmdS6ByM88pv3" mode=""></image>
|
||
{{fajinobj.manageFee > 0 ? '不在运营区' : fajinobj.dispatchFee > 0 ? '不在停车点' : ''}}
|
||
</view>
|
||
<view class="shuom">
|
||
需支付<text>{{fajinobj.manageFee > 0 ? fajinobj.manageFee : fajinobj.dispatchFee > 0 ? fajinobj.dispatchFee : ''}}元</text>，你可查看<text
|
||
@click="btntcd">最近停车点</text>
|
||
</view>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uzRrRFiToK3bb3IurIHU" class="tcimg" mode="aspectFill">
|
||
</image>
|
||
<view class="btnan">
|
||
<view class="fj" @click="btnfajin">
|
||
缴纳罚金还车
|
||
</view>
|
||
<view class="qx" @click="btnjjqx">
|
||
继续骑行
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="fjflag"></view>
|
||
<tab-bar :indexs='1'></tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "",
|
||
},
|
||
latitude: '',
|
||
longitude: '',
|
||
lat: '',
|
||
lng: '',
|
||
latsc: '',
|
||
lngsc: '',
|
||
rtindex: 2,
|
||
covers: [],
|
||
shoptcflag: false,
|
||
iconPath: '',
|
||
tcindex: 0,
|
||
taocanflag: false,
|
||
kefuflag: false,
|
||
iconflag: false,
|
||
cheobj: {},
|
||
jingweidu: '',
|
||
taocaolist: [],
|
||
polyline: [],
|
||
kefulist: [],
|
||
orderAreaId: '',
|
||
areaId: '',
|
||
orderobj: {},
|
||
orderAreaReturnVerify: '',
|
||
fajinobj: {},
|
||
fjflag: false,
|
||
showIconAndCallout:false,
|
||
orderflag:false,
|
||
hei:{
|
||
height:'64vh'
|
||
},
|
||
|
||
sockedata:{},
|
||
socketTask: null,
|
||
messages: [],
|
||
reconnectAttempts: 0,
|
||
maxReconnectAttempts: 5,
|
||
reconnectInterval: 3000, // 3秒重试一次
|
||
isPageActive: true,
|
||
deviceMac: '' ,// 从页面参数或其他地方获取
|
||
newMarkers:'',
|
||
|
||
count: 0,
|
||
timer: null,
|
||
user:{}
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getAone()
|
||
this.covers = []
|
||
this.sockedata = ''
|
||
this.getMyLocation()
|
||
this.setMapScale()
|
||
this.getkefu()
|
||
this.getorderdevice()
|
||
// this.startTimer()
|
||
this.polyline = []
|
||
setTimeout(()=>{
|
||
this.toggleIconAndCallout()
|
||
},3000)
|
||
},
|
||
onUnload() {
|
||
this.clearTimer()
|
||
this.isPageActive = false;
|
||
this.closeWebSocket();
|
||
},
|
||
onHide() {
|
||
this.clearTimer()
|
||
// 页面隐藏时关闭连接
|
||
this.isPageActive = false;
|
||
this.closeWebSocket();
|
||
},
|
||
methods: {
|
||
startTimer() {
|
||
this.timer = setInterval(() => {
|
||
this.count++;
|
||
console.log(`定时器执行，当前计数: ${this.count}`);
|
||
// 这里替换为你的实际逻辑
|
||
this.setMapScale()
|
||
}, 5000);
|
||
},
|
||
|
||
// 清除定时器
|
||
clearTimer() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
console.log("定时器已清除");
|
||
}
|
||
},
|
||
btnjjqx(){
|
||
this.orderflag = true
|
||
this.fjflag = false
|
||
},
|
||
//WebSocket 自动重连实现
|
||
initWebSocket() {
|
||
if (!this.isPageActive || !this.deviceMac) return;
|
||
let token = uni.getStorageSync('token');
|
||
// 关闭已有连接
|
||
if (this.socketTask) {
|
||
this.socketTask.close();
|
||
this.socketTask = null;
|
||
}
|
||
// 创建新连接
|
||
this.socketTask = uni.connectSocket({
|
||
url: `wss://ele.ccttiot.com/prod-api/ws/device?token=${token}&mac=${this.deviceMac}`,
|
||
success: () => {
|
||
console.log('WebSocket连接建立中...');
|
||
},
|
||
fail: (err) => {
|
||
console.error('WebSocket连接失败:', err);
|
||
this.scheduleReconnect();
|
||
}
|
||
});
|
||
// 监听连接打开
|
||
this.socketTask.onOpen(() => {
|
||
console.log('WebSocket连接已打开');
|
||
this.reconnectAttempts = 0; // 重置重连计数器
|
||
// 发送订阅消息（如果需要）
|
||
this.socketTask.send({
|
||
data: JSON.stringify({
|
||
action: 'subscribe'
|
||
}),
|
||
success: () => console.log('订阅消息发送成功'),
|
||
fail: (err) => console.error('订阅消息发送失败:', err)
|
||
});
|
||
});
|
||
// 监听消息接收
|
||
this.socketTask.onMessage((res) => {
|
||
console.log('收到实时消息:', res.data);
|
||
this.messages.push(res.data); // 存储消息
|
||
try {
|
||
const data = JSON.parse(res.data);
|
||
console.log('解析后的JSON数据:', data);
|
||
// 这里可以处理具体的业务逻辑
|
||
this.sockedata = data
|
||
// this.getqingqiu()
|
||
// this.$u.get(`/app/device/listNearBy?radius=10000¢er=${this.jingweidu}`).then((res) => {
|
||
// if (res.code == 200) {
|
||
this.covers = []
|
||
const newMarkers = []
|
||
this.parkingList.forEach(item => {
|
||
newMarkers.push({
|
||
id: parseFloat(item.id),
|
||
latitude: parseFloat(item.latitude),
|
||
longitude: parseFloat(item.longitude),
|
||
width: 40,
|
||
height: 60,
|
||
iconPath: item.type == 1 ?
|
||
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' :
|
||
item.type == 2 ?
|
||
'https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq' :
|
||
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t',
|
||
callout: {
|
||
content: item.name,
|
||
color: '#ffffff',
|
||
fontSize: 14,
|
||
borderRadius: 10,
|
||
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FF473E' :
|
||
'#FFC107',
|
||
padding: 6,
|
||
display: 'ALWAYS'
|
||
},
|
||
isCalloutVisible: true // 添加标记
|
||
})
|
||
})
|
||
this.newMarkers = newMarkers
|
||
this.$set(this, 'covers', [...this.covers, ...newMarkers])
|
||
// this.$set(this, 'covers', [...this.covers, ...this.newMarkers])
|
||
if(this.sockedata.latitude){
|
||
this.covers.push({
|
||
latitude: this.sockedata.latitude,
|
||
longitude: this.sockedata.longitude,
|
||
width: 8,
|
||
height: 8,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uow9Zq3edTUYCVHI9H60',
|
||
})
|
||
}
|
||
// }
|
||
// })
|
||
this.covers.push({
|
||
latitude: data.latitude,
|
||
longitude: data.longitude,
|
||
width: 8,
|
||
height: 8,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uow9Zq3edTUYCVHI9H60',
|
||
})
|
||
} catch (e) {
|
||
console.log('原始消息内容:', res.data);
|
||
}
|
||
});
|
||
// 监听错误
|
||
this.socketTask.onError((err) => {
|
||
console.error('WebSocket错误:', err);
|
||
this.scheduleReconnect();
|
||
});
|
||
// 监听连接关闭
|
||
this.socketTask.onClose((res) => {
|
||
console.log('WebSocket连接已关闭', res);
|
||
if (this.isPageActive) {
|
||
this.scheduleReconnect();
|
||
}
|
||
});
|
||
},
|
||
// 关闭WebSocket连接
|
||
closeWebSocket() {
|
||
if (this.socketTask) {
|
||
this.socketTask.close({
|
||
success: () => {
|
||
console.log('WebSocket已主动关闭');
|
||
this.socketTask = null;
|
||
},
|
||
fail: (err) => {
|
||
console.error('WebSocket关闭失败:', err);
|
||
this.socketTask = null;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 安排重连
|
||
scheduleReconnect() {
|
||
if (!this.isPageActive || this.reconnectAttempts >= this.maxReconnectAttempts) {
|
||
console.log('已达到最大重连次数或页面已关闭，停止重连');
|
||
return;
|
||
}
|
||
this.reconnectAttempts++;
|
||
console.log(`尝试第 ${this.reconnectAttempts} 次重连，等待 ${this.reconnectInterval/1000} 秒...`);
|
||
setTimeout(() => {
|
||
this.initWebSocket();
|
||
}, this.reconnectInterval);
|
||
// 指数退避策略，增加重连间隔
|
||
this.reconnectInterval = Math.min(this.reconnectInterval * 2, 30000); // 最大不超过30秒
|
||
},
|
||
|
||
// 点击结束订单
|
||
btnjsdd() {
|
||
if (this.orderAreaReturnVerify == true) {
|
||
uni.navigateTo({
|
||
url: '/page_user/hcshenhe?sn=' + this.orderobj.deviceSn + '&orderid=' + this.orderobj.orderId + '&orderAreaId=' + this.orderobj.orderAreaId
|
||
})
|
||
} else {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
console.log(res);
|
||
this.latsc = res.latitude
|
||
this.lonsc = res.longitude
|
||
this.getfeiyong()
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
this.getfeiyong()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 点击还车判断是否需要另外缴费
|
||
getfeiyong() {
|
||
let data = {
|
||
orderId: this.orderobj.orderId,
|
||
lon: this.latsc,
|
||
lat: this.lonsc
|
||
}
|
||
this.$u.post(`/app/order/calcFee`, data).then(res => {
|
||
if (res.code == 200) {
|
||
this.fajinobj = res.data
|
||
if (res.data.manageFee > 0 || res.data.dispatchFee > 0) {
|
||
this.fjflag = true
|
||
this.orderflag = false
|
||
} else {
|
||
this.gethuan()
|
||
}
|
||
}else if(res.code == 30001){
|
||
uni.showToast({
|
||
title: '必须在停车点内还车',
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
}else if(res.code == 30002){
|
||
uni.showToast({
|
||
title: '不允许在禁停区内还车',
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
}else if(res.code == 30003){
|
||
uni.showToast({
|
||
title: '必须在运营区内还车',
|
||
icon: 'none',
|
||
duration: 5000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击缴纳罚金继续还车
|
||
btnfajin() {
|
||
this.gethuan()
|
||
},
|
||
// 还车统一调用
|
||
gethuan() {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要还车吗？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
let data = {
|
||
orderId: that.orderobj.orderId,
|
||
picture: that.imgs,
|
||
lon: that.lonsc,
|
||
lat: that.latsc
|
||
}
|
||
that.$u.put(`/app/order/end`, data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '还车成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
that.getorderdevice()
|
||
that.fjflag = false
|
||
that.orderflag = false
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转到最近停车点
|
||
btntcd() {
|
||
uni.navigateTo({
|
||
url: '/pages/myorder/returned/tingche?areaId=' + this.orderobj.orderAreaId
|
||
})
|
||
},
|
||
|
||
// 点击跳转到车辆
|
||
btntz() {
|
||
uni.switchTab({
|
||
url: '/pages/myorder/returned/index'
|
||
})
|
||
},
|
||
// 点击跳转导航
|
||
danghang() {
|
||
if (this.orderobj.deviceLatitude && this.orderobj.deviceLongitude) {
|
||
uni.openLocation({
|
||
latitude: this.orderobj.deviceLatitude, //纬度-目的地/坐标点
|
||
longitude: this.orderobj.deviceLongitude, //经度-目的地/坐标点
|
||
name: '', //地点名称
|
||
address: '' //详细地点名称
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '车辆暂无法导航',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
// 点击启动and关闭
|
||
btnqd() {
|
||
if (this.orderobj.deviceLockStatus == 0) {
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您是否要解锁车辆？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.$u.put(`/app/order/openDevice?orderId=${that.orderobj.orderId}`).then((
|
||
res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '解锁成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
that.getorderdevice()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('取消'); // 用户点击取消
|
||
}
|
||
}
|
||
})
|
||
} else if (this.orderobj.deviceLockStatus == 1) {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
console.log(res);
|
||
this.latsc = res.latitude
|
||
this.lngsc = res.longitude
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
})
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您是否要临时锁车？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
that.$u.put(
|
||
`/app/order/closeDevice?orderId=${that.orderobj.orderId}&lat=${that.latsc}&lon=${that.lngsc}`
|
||
).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '临时锁车成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
that.getorderdevice()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('取消'); // 用户点击取消
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 获取本人正在使用的订单设备
|
||
getorderdevice() {
|
||
this.$u.get("/app/orderDevice/mineUsing").then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.data) {
|
||
this.orderobj = res.data
|
||
this.orderAreaReturnVerify = res.data.orderAreaReturnVerify
|
||
this.orderAreaId = res.data.orderAreaId
|
||
this.areaId = res.data.orderAreaId
|
||
this.deviceMac = res.data.deviceMac
|
||
this.orderflag = true
|
||
this.isPageActive = true
|
||
this.initWebSocket() //WebSocket接受数据
|
||
|
||
this.$u.get(`/app/area/detail?id=${this.orderAreaId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||
this.polyline.push(polylines)
|
||
this.getParking()
|
||
}
|
||
})
|
||
} else {
|
||
this.orderAreaId = ''
|
||
this.orderflag = false
|
||
this.newMarkers = ''
|
||
console.log(this.covers);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击地图中的店铺操作
|
||
handleMarkerClick(e) {
|
||
let id = String(e.detail.markerId)
|
||
if (id.slice(-1) == 1) {
|
||
console.log('店铺')
|
||
this.covers.filter(item => {
|
||
if (item.id == id) {
|
||
item.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/u8ONjRuMpydcZ4WuA6vP'
|
||
this.shoptcflag = true
|
||
}
|
||
})
|
||
} else if (id.slice(-1) == 2) {
|
||
console.log('车辆')
|
||
if (this.orderAreaId == '') {
|
||
this.covers.filter(item => {
|
||
if (item.id == id) {
|
||
item.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uCBNaRAdk9kcgQgrom2G'
|
||
this.taocanflag = true
|
||
this.$u.get(`/app/device/availableDetail?id=${id.slice(0, -1)}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.cheobj = res.data
|
||
this.areaId = res.data.areaId
|
||
this.getArea()
|
||
setTimeout(()=>{
|
||
this.getqingqiu()
|
||
},1000)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
console.log('进行中订单');
|
||
uni.showToast({
|
||
title: '当前已有订单',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
} else if (id.slice(-1) == 3) {
|
||
console.log('导览')
|
||
}
|
||
},
|
||
// 请求客服
|
||
getkefu() {
|
||
this.$u.get(`/app/customerService/list?pageNum=1&pageSize=999`).then(res => {
|
||
if (res.code == 200) {
|
||
this.kefulist = res.rows
|
||
}
|
||
})
|
||
},
|
||
// 点击去下单
|
||
btndetaxq() {
|
||
this.$u.get(`/getInfo`).then(res => {
|
||
if (res.code == 200) {
|
||
this.taocanflag = false
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/storedlist/trueorder?modelId=' + this.cheobj.modelId + '&sn=' + this.cheobj.sn
|
||
})
|
||
} else if (res.code == 401) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您当前未登录，是否前去登录？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击响铃寻车
|
||
btnxlxc() {
|
||
this.$u.put(`/app/device/iot/ring?id=${this.cheobj.id}`).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else if (res.code == 401) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您当前未登录，是否前去登录？',
|
||
showCancel: true,
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击隐藏车辆弹窗
|
||
btncheyc() {
|
||
this.taocanflag = false
|
||
this.newMarkers = ''
|
||
this.getqingqiu()
|
||
},
|
||
// 拖动查询中心点的数据
|
||
regionchange(e) {
|
||
this.iconflag = true
|
||
if (e.type == 'end') {
|
||
if (this.rtindex == 2) {
|
||
this.jingweidu = e.detail.centerLocation.longitude + ',' + e.detail.centerLocation.latitude
|
||
this.getqingqiu()
|
||
this.iconflag = false
|
||
}
|
||
}
|
||
},
|
||
// 点击选择骑行套餐
|
||
btntcxz(index) {
|
||
this.tcindex = index
|
||
},
|
||
// 点击跳转到帮助中心
|
||
btnbz() {
|
||
uni.navigateTo({
|
||
url: '/page_user/bangzhu'
|
||
})
|
||
},
|
||
// 点击拨打平台客服电话
|
||
btnptkf() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '18888888888',
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转到租车门店
|
||
btnmendain() {
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/storedlist/index'
|
||
})
|
||
},
|
||
// 点击右侧图标
|
||
btntap(num) {
|
||
if (num == 3) {
|
||
uni.showToast({
|
||
title: '导览暂未开放',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
this.covers = []
|
||
this.rtindex = num
|
||
this.shoptcflag = false
|
||
this.getqingqiu()
|
||
}
|
||
},
|
||
// 点击调用回到地图中心点
|
||
btnhuiz() {
|
||
this.setMapScale()
|
||
},
|
||
// 回到地图中心点
|
||
async setMapScale(e, val) {
|
||
let mapContext = uni.createMapContext('map', this);
|
||
let setScale = () => {
|
||
return new Promise((resolve, reject) => {
|
||
mapContext.getScale({
|
||
success: r => {
|
||
resolve()
|
||
}
|
||
})
|
||
})
|
||
};
|
||
await setScale()
|
||
mapContext.moveToLocation({
|
||
success: (res) => {
|
||
const timer = setTimeout(() => {
|
||
clearTimeout(timer)
|
||
}, 500)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 请求附近车辆and门店
|
||
getqingqiu() {
|
||
if (this.rtindex == 1) {
|
||
this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/upX2lLilhrRi4tttdHlo'
|
||
} else if (this.rtindex == 2) {
|
||
this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uX0FBv86yDIR5tIqjoe2'
|
||
// this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/uX0FBv86yDIR5tIqjoe2'
|
||
this.$u.get(`/app/device/listNearBy?radius=10000¢er=${this.jingweidu}&areaId=${this.user.areaId == undefined ? null : this.user.areaId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.covers = []
|
||
this.$set(this, 'covers', [...this.covers, ...this.newMarkers])
|
||
if(this.sockedata.latitude){
|
||
this.covers.push({
|
||
latitude: this.sockedata.latitude,
|
||
longitude: this.sockedata.longitude,
|
||
width: 8,
|
||
height: 8,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uow9Zq3edTUYCVHI9H60',
|
||
})
|
||
}
|
||
res.data.forEach(item => {
|
||
const shopCover = {
|
||
// 门店后面拼接1，车辆拼接2，3是导览
|
||
id: this.rtindex == 1 ? parseInt(item.id + "1") : this.rtindex ==
|
||
2 ? parseInt(item.id + "2") : parseInt(item.id + "3"),
|
||
latitude: item.latitude,
|
||
longitude: item.longitude,
|
||
width: 35,
|
||
height: 40,
|
||
iconPath: this.iconPath,
|
||
callout: {
|
||
content: '' + item.vehicleNum, // 修改为你想要显示的文字内容
|
||
color: '#0D75E5', // 修改为文字颜色
|
||
fontSize: 10, // 修改为文字大小
|
||
borderRadius: 10, // 修改为气泡圆角大小
|
||
bgColor: '#fff', // 修改为气泡背景颜色
|
||
padding: 3, // 修改为气泡内边距
|
||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||
}
|
||
}
|
||
this.covers.push(shopCover)
|
||
console.log('111112222');
|
||
})
|
||
}
|
||
})
|
||
} else if (this.rtindex == 3) {
|
||
this.iconPath = 'https://api.ccttiot.com/smartmeter/img/static/un7ecyEN8vsJhlEnXfD4'
|
||
} else {
|
||
this.iconPath = null
|
||
}
|
||
},
|
||
// 获取自身位置
|
||
getMyLocation() {
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
this.latitude = Number(res.latitude) - 0.005
|
||
this.longitude = Number(res.longitude) + 0.005
|
||
this.jingweidu = this.longitude + ',' + this.latitude
|
||
this.getqingqiu()
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
})
|
||
},
|
||
|
||
convertBoundaryToPolyline(boundary) {
|
||
if (!boundary) return null
|
||
const points = JSON.parse(boundary).map(coord => ({
|
||
latitude: coord[1],
|
||
longitude: coord[0]
|
||
}))
|
||
const polyline = {
|
||
points: points,
|
||
fillColor: "#55888820", //填充颜色
|
||
strokeColor: "#22FF00", //描边颜色
|
||
strokeWidth: 1, //描边宽度
|
||
zIndex: 1, //层级
|
||
dottedLine:'true',
|
||
}
|
||
return polyline
|
||
},
|
||
convertBoundaryToPolylines(boundaries, num) {
|
||
if (num == 1) {
|
||
console.log('判断')
|
||
return boundaries.map(boundary => {
|
||
if (!boundary) return null
|
||
let coords
|
||
try {
|
||
coords = JSON.parse(boundary)
|
||
} catch (error) {
|
||
console.error("Error parsing boundary JSON:", error)
|
||
return null
|
||
}
|
||
if (!Array.isArray(coords)) {
|
||
console.error("Parsed boundary is not an array:", coords)
|
||
return null
|
||
}
|
||
console.log(coords, '1111111');
|
||
const points = coords.map(coord => ({
|
||
latitude: coord[1],
|
||
longitude: coord[0]
|
||
}))
|
||
return {
|
||
points: points,
|
||
fillColor: "#88888850", //填充颜色
|
||
strokeColor: "#88888850", //描边颜色
|
||
strokeWidth: 1, //描边宽度
|
||
zIndex: 1, //层级
|
||
}
|
||
}).filter(polyline => polyline !== null)
|
||
} else if (num == 2) {
|
||
return boundaries.map(boundary => {
|
||
if (!boundary) return null
|
||
let coords
|
||
try {
|
||
coords = JSON.parse(boundary)
|
||
} catch (error) {
|
||
console.error("Error parsing boundary JSON:", error)
|
||
return null
|
||
}
|
||
if (!Array.isArray(coords)) {
|
||
console.error("Parsed boundary is not an array:", coords)
|
||
return null
|
||
}
|
||
console.log(coords, '2222222222222')
|
||
const points = coords.map(coord => ({
|
||
latitude: coord[1],
|
||
longitude: coord[0]
|
||
}))
|
||
return {
|
||
points: points,
|
||
fillColor: "#FFF5D640", //填充颜色
|
||
strokeColor: "#FF473E", //描边颜色
|
||
strokeWidth: 2, //描边宽度
|
||
zIndex: 1, //层级
|
||
}
|
||
}).filter(polyline => polyline !== null)
|
||
} else if (num == 3) {
|
||
return boundaries.map(boundary => {
|
||
if (!boundary) return null
|
||
let coords
|
||
try {
|
||
coords = JSON.parse(boundary)
|
||
} catch (error) {
|
||
console.error("Error parsing boundary JSON:", error)
|
||
return null
|
||
}
|
||
if (!Array.isArray(coords)) {
|
||
console.error("Parsed boundary is not an array:", coords)
|
||
return null
|
||
}
|
||
console.log(coords, '333333333333');
|
||
const points = coords.map(coord => ({
|
||
latitude: coord[1],
|
||
longitude: coord[0]
|
||
}));
|
||
return {
|
||
points: points,
|
||
fillColor: "#FFD1CF40", //填充颜色
|
||
strokeColor: "#FFC107", //描边颜色
|
||
strokeWidth: 2, //描边宽度
|
||
zIndex: 1, //层级
|
||
|
||
};
|
||
}).filter(polyline => polyline !== null)
|
||
}
|
||
},
|
||
toggleIconAndCallout() {
|
||
if (this.cheobj == '') {
|
||
uni.showToast({
|
||
title: '请选选择车辆',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
this.showIconAndCallout = !this.showIconAndCallout
|
||
if (this.showIconAndCallout) {
|
||
const newMarkers = []
|
||
this.parkingList.forEach(item => {
|
||
newMarkers.push({
|
||
id: parseFloat(item.id),
|
||
latitude: parseFloat(item.latitude),
|
||
longitude: parseFloat(item.longitude),
|
||
width: 40,
|
||
height: 60,
|
||
iconPath: item.type == 1 ?
|
||
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' :
|
||
item.type == 2 ?
|
||
'https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq' :
|
||
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t',
|
||
callout: {
|
||
content: item.name,
|
||
color: '#ffffff',
|
||
fontSize: 14,
|
||
borderRadius: 10,
|
||
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FF473E' :
|
||
'#FFC107',
|
||
padding: 6,
|
||
display: 'ALWAYS'
|
||
},
|
||
isCalloutVisible: true // 添加标记
|
||
})
|
||
})
|
||
this.newMarkers = newMarkers
|
||
this.$set(this, 'covers', [...this.covers, ...newMarkers])
|
||
} else {
|
||
// 过滤掉所有气泡显示的标记
|
||
this.$set(this, 'covers', this.covers.filter(marker => !marker.isCalloutVisible))
|
||
}
|
||
}
|
||
},
|
||
getParking() {
|
||
// 发送请求获取数据
|
||
this.$u.get(`/app/areaSub/listByArea?areaId=${this.user.areaId}`).then((res) => {
|
||
if (res.code === 200) {
|
||
// 处理接口返回的数据
|
||
const type1Data = []
|
||
const type2Data = []
|
||
const type3Data = []
|
||
res.data.forEach(row => {
|
||
if (row.type == 1) {
|
||
type1Data.push(row)
|
||
} else if (row.type == 2) {
|
||
type2Data.push(row)
|
||
} else if (row.type == 3) {
|
||
type3Data.push(row)
|
||
}
|
||
})
|
||
const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
|
||
typeof boundary === 'string' && boundary.trim() !== '')
|
||
const polylines = this.convertBoundaryToPolylines(validBoundaries, 1)
|
||
const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
|
||
typeof boundary === 'string' && boundary.trim() !== '')
|
||
const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 2)
|
||
const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
|
||
typeof boundary === 'string' && boundary.trim() !== '')
|
||
const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 3)
|
||
// 将处理后的数据添加到 this.polyline 中
|
||
this.polyline = this.polyline.concat(polylines2)
|
||
this.polyline = this.polyline.concat(polylines1)
|
||
this.polyline = this.polyline.concat(polylines)
|
||
this.parkingList = res.data
|
||
}
|
||
})
|
||
},
|
||
// 请求运营区停车点，禁行区，
|
||
getArea() {
|
||
this.polyline = []
|
||
this.$u.get(`/app/area/detail?id=${this.cheobj.areaId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
|
||
this.polyline.push(polylines)
|
||
this.getParking()
|
||
}
|
||
})
|
||
},
|
||
// 第一次请求运营区停车点，禁行区，
|
||
getAone() {
|
||
this.$u.get("/getInfo").then(res =>{
|
||
if(res.code == 200){
|
||
this.user = res.user
|
||
this.polyline = []
|
||
this.$u.get(`/app/area/nearby?id=${res.user.areaId}&radius=1000¢er=${this.jingweidu}`).then((resp) => {
|
||
if (resp.code == 200) {
|
||
const polylines = this.convertBoundaryToPolyline(resp.data.boundaryStr)
|
||
this.polyline.push(polylines)
|
||
this.getParking()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #fff;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.active {
|
||
image {
|
||
z-index: 99 !important;
|
||
}
|
||
|
||
.bike_item {
|
||
border: 1px solid #4297F3 !important;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, .3);
|
||
z-index: 9;
|
||
}
|
||
|
||
.tingchetc {
|
||
width: 624rpx;
|
||
height: 610rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 572rpx;
|
||
z-index: 99;
|
||
padding: 28rpx 36rpx;
|
||
box-sizing: border-box;
|
||
|
||
.btnan {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 40rpx;
|
||
|
||
.fj {
|
||
width: 252rpx;
|
||
height: 72rpx;
|
||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||
border: 2rpx solid #808080;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #808080;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
.qx {
|
||
width: 252rpx;
|
||
height: 72rpx;
|
||
background: #4C97E7;
|
||
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.tcimg {
|
||
width: 552rpx;
|
||
height: 300rpx;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.shuom {
|
||
font-size: 26rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 18rpx;
|
||
|
||
text {
|
||
color: #4C97E7;
|
||
}
|
||
}
|
||
|
||
.topname {
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 14rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.conts_box {
|
||
width: 680rpx;
|
||
height: 360rpx;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 38rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
padding-bottom: 20rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 220rpx;
|
||
|
||
.orderzt {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
margin-top: 20rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
.txtss {
|
||
margin-top: 18rpx;
|
||
padding-left: 20rpx;
|
||
width: 100%;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
}
|
||
|
||
.dh {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
border: 1px solid #333;
|
||
font-size: 28rpx;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.suocheanniu {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.lssc {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
background-color: #0D75E5;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
|
||
.cont_li {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.left {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
|
||
.km {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.speed {
|
||
margin-top: 18rpx;
|
||
width: 226rpx;
|
||
height: 22rpx;
|
||
background: #ccc;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
|
||
.speeds {
|
||
height: 100%;
|
||
background: #4297F3;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
}
|
||
}
|
||
|
||
.NO {
|
||
width: 100%;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 18rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 70%;
|
||
padding-right: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
|
||
image {
|
||
width: 160rpx;
|
||
height: 110rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.picimg {
|
||
width: 46rpx;
|
||
height: 76rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 30%;
|
||
z-index: 99;
|
||
}
|
||
|
||
.kefutc {
|
||
animation: fadeIn 0.5s ease-in-out forwards;
|
||
position: fixed;
|
||
top: 660rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 99;
|
||
|
||
.bot {
|
||
margin-top: 30rpx;
|
||
|
||
.wz {
|
||
margin-top: 10rpx;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.wzs {
|
||
margin-top: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #7C7C7C;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
width: 538rpx;
|
||
height: 122rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 14rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
|
||
.dianhua {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
padding-left: 26rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.boda {
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
text-align: center;
|
||
padding-top: 8rpx;
|
||
box-sizing: border-box;
|
||
|
||
text {
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
|
||
image {
|
||
position: absolute;
|
||
top: -280rpx;
|
||
z-index: -1;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 614rpx;
|
||
height: 748rpx;
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: 98;
|
||
background-color: rgba(0, 0, 0, 0.08);
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.clmask {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: 98;
|
||
background-color: rgba(0, 0, 0, 0.08);
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.biketc {
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 220rpx;
|
||
z-index: 99;
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
width: 700rpx;
|
||
margin: auto;
|
||
padding-bottom: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.topfor {
|
||
width: 100%;
|
||
margin: auto;
|
||
max-height: 664rpx;
|
||
background: #fff;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
padding: 44rpx 34rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.bikeyc {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 32rpx;
|
||
font-size: 70rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.biketaocan {
|
||
display: flex;
|
||
overflow: scroll;
|
||
|
||
.bikelist {
|
||
margin-right: 22rpx;
|
||
|
||
.bike_item {
|
||
border: 1px solid #fff;
|
||
margin-top: 36rpx;
|
||
padding-top: 16rpx;
|
||
padding-left: 24rpx;
|
||
padding-right: 24rpx;
|
||
box-sizing: border-box;
|
||
width: 368rpx;
|
||
height: 280rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 82rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
.name {
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.qibu {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.ckxq {
|
||
width: 368rpx;
|
||
height: 58rpx;
|
||
background: #4297F3;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
text-align: center;
|
||
line-height: 58rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bikesy {
|
||
width: 100%;
|
||
border-top: 1rpx solid #D8D8D8;
|
||
margin-top: 30rpx;
|
||
padding-top: 36rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
|
||
.bikelt {
|
||
width: 50%;
|
||
text-align: center;
|
||
|
||
.bikegongli {
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.bikets {
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 36rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
}
|
||
|
||
.bikert {
|
||
width: 50%;
|
||
text-align: center;
|
||
|
||
.bikegongli {
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.bikets {
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
image {
|
||
width: 22rpx;
|
||
height: 48rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.biketop {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.bikebeep {
|
||
width: 160rpx;
|
||
height: 60rpx;
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
border: 2rpx solid #4C97E7;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #4C97E7;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
margin-left: 80rpx;
|
||
}
|
||
|
||
.bianh {
|
||
view {
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.anniuks {
|
||
width: 100%;
|
||
// height: 184rpx;
|
||
// background: #FFFFFF;
|
||
text-align: center;
|
||
// line-height: 184rpx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 680rpx;
|
||
height: 90rpx;
|
||
background: #4C97E7;
|
||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shoptc {
|
||
position: fixed;
|
||
width: 696rpx;
|
||
max-height: 312rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
bottom: 200rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding: 28rpx 34rpx;
|
||
box-sizing: border-box;
|
||
|
||
.cont {
|
||
margin-top: 40rpx;
|
||
display: flex;
|
||
|
||
.shuoming {
|
||
.name {
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.price {
|
||
font-size: 24rpx;
|
||
color: #FF1C1C;
|
||
margin-top: 20rpx;
|
||
|
||
text {
|
||
font-size: 44rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 166rpx;
|
||
height: 128rpx;
|
||
margin-right: 26rpx;
|
||
}
|
||
}
|
||
|
||
.juli {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 12rpx;
|
||
|
||
.mi {
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
font-size: 24rpx;
|
||
color: #0D75E5;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.dizhi {
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.zu {
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rticon {
|
||
position: fixed;
|
||
right: 28rpx;
|
||
top: 260rpx;
|
||
|
||
image {
|
||
width: 78rpx;
|
||
height: 96rpx;
|
||
display: block;
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
|
||
.lticon {
|
||
position: fixed;
|
||
left: 28rpx;
|
||
top: 300rpx;
|
||
|
||
image {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
display: block;
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
|
||
.map {
|
||
width: 100%;
|
||
height: 130vh;
|
||
position: absolute;
|
||
top: -30vh;
|
||
}
|
||
</style> |