2476 lines
59 KiB
Vue
2476 lines
59 KiB
Vue
<template>
|
||
<view class="page">
|
||
<image class="topimg" @click="btnmy" src="https://api.ccttiot.com/smartmeter/img/static/uFaWRkPQOMH42IkfFyFM" mode=""></image>
|
||
<!-- 地图 -->
|
||
<view class="">
|
||
<image class="picimg" 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" :circles="circles" :polygons="polyline" :show-location="true">
|
||
</map>
|
||
<view class="lticon">
|
||
|
||
</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="iconobj.bikertpic"
|
||
@click="btntap(2)" mode=""></image>
|
||
<image v-if="rtindex == 2" :src="iconobj.bikertpicgl"
|
||
@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>
|
||
<image style="width: 80rpx;height: 80rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uDnm3dpbwMh9jLBRMeZw" @click="btnhuiz" mode=""></image> -->
|
||
<image v-if="rtindex != 1" src="https://api.ccttiot.com/smartmeter/img/static/uRtmbcCSrLLZ7hkGFeg2"
|
||
@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/uySqZZMETPWLmP26Qajc"
|
||
@click="btntap(2)" mode=""></image>
|
||
<image v-if="rtindex == 2" :src="iconobj.bikertpicgl"
|
||
@click="btntap(2)" mode=""></image>
|
||
<image v-if="rtindex != 3" src="https://api.ccttiot.com/smartmeter/img/static/unaFMV8lmyqWVyY2uOhR"
|
||
@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/u6r5tQVe2VO6bvxTLeFT" mode=""></image>
|
||
<image style="width: 80rpx;height: 80rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ug1ExhYsZmdWWjVvjjuk" @click="btnhuiz" 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="mask" v-if="fjflag"></view>
|
||
<!-- 公告 -->
|
||
<view class="gonggao" @click="btntopgg">
|
||
<u-icon name="volume-fill" color="#333" style="position: absolute;left: 20rpx;" size="32"></u-icon>
|
||
<view class="container">
|
||
<view class="scroll-text">
|
||
<view class="scroll-item">
|
||
{{announcements.noticeTitle == null ? '暂无最新公告！！！' : announcements.noticeTitle}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-icon name="arrow-right" color="#333" style="position: absolute;right: 10rpx;" size="32"></u-icon>
|
||
</view>
|
||
<!-- 商户中心入口 -->
|
||
<image v-if="guanliflag || adminflag" @click="btngl" class="rukou" src="https://api.ccttiot.com/smartmeter/img/static/utNYsXfdVWHsJBFV6eMV" mode=""></image>
|
||
<!-- 公告弹窗 -->
|
||
<view class="noticetc" v-if="gonggaoflag">
|
||
<view class="name">
|
||
公告
|
||
</view>
|
||
<view class="biaoti">
|
||
{{gonggaoxq.noticeTitle}}
|
||
</view>
|
||
<u-parse :html="gonggaoxq.noticeContent" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
|
||
<view class="btn" @click="btnggtc">
|
||
我知道了
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="gonggaoflag"></view>
|
||
|
||
<view class="botbox" v-if="!taocanflag">
|
||
<view class="saoma" style="font-weight: 400;" v-if="weizhifu == true" @click="btnweizhifu">
|
||
您有订单未支付 <u-icon name="arrow-right" color="#fff" style="margin-left: 20rpx;" size="32"></u-icon>
|
||
</view>
|
||
<view class="" v-else>
|
||
<view class="saoma" style="font-weight: 400;" v-if="orderflag == true" @click="btnjinx">
|
||
您有正在进行中订单 <u-icon name="arrow-right" color="#fff" style="margin-left: 20rpx;" size="32"></u-icon>
|
||
</view>
|
||
<view class="saoma" @click="btnsaoma" v-else>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9WDcr9fAKNdZtew3NMZ" mode=""></image> 扫码开锁
|
||
</view>
|
||
</view>
|
||
<view class="kuaijie">
|
||
<image @click="btnpage(2)" style="height: 100rpx;margin-top: 16rpx;" src="https://api.ccttiot.com/smartmeter/img/static/udUQI8zA1tYUEndx9guO" mode=""></image> <!-- 订单 -->
|
||
<image @click="btntiao(2)" src="https://api.ccttiot.com/smartmeter/img/static/uECTLFe6fzWgzNzVdsPs" mode=""></image> <!-- 使用帮助 -->
|
||
<image @click="btnpage(4)" src="https://api.ccttiot.com/smartmeter/img/static/uPyDAy2sWgh4UkDr3yX4" mode=""></image> <!-- 编号开锁 -->
|
||
<image @click="btntiao(3)" src="https://api.ccttiot.com/smartmeter/img/static/uxLGGshcH6nr557ffO5E" mode=""></image> <!-- 意见反馈 -->
|
||
<image @click="btnkf" src="https://api.ccttiot.com/smartmeter/img/static/up53i8F9cn9wajU8dXuS" mode=""></image> <!-- 客服 -->
|
||
</view>
|
||
<!-- 商户轮播图 广告 -->
|
||
<view class="guanggao">
|
||
<u-swiper :list="lists" @click="btnshangjia"></u-swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 平台客服弹窗 -->
|
||
<view class="kefutc" v-if="kefuflag">
|
||
<image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uTSMnIgvw7eS13LxZjvt" mode="" @click="kefuflag = false"></image>
|
||
<view class="box">
|
||
<view class="" style="max-height: 640rpx;overflow: scroll;">
|
||
<view class="" style="font-weight: 600;color: #3D3D3D;">
|
||
订单要售后:
|
||
</view>
|
||
<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 class="wz">
|
||
工作时间：{{item.startTime}}~{{item.endTime}}
|
||
</view>
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf(item.contact)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwTYS0nZBsoaiY8EFlQA" mode=""></image>
|
||
<text>拨打</text>
|
||
</view>
|
||
</view>
|
||
<view class="" style="margin-top: 20rpx;font-weight: 600;color: #3D3D3D;" v-if="kefuarr.length > 0">
|
||
骑行前咨询:
|
||
</view>
|
||
<view class="top" v-for="(item,index) in kefuarr" :key="index">
|
||
<view class="dianhua">
|
||
{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
|
||
<view class="wz">
|
||
工作时间：{{item.startTime}}~{{item.endTime}}
|
||
</view>
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf(item.contact)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uwTYS0nZBsoaiY8EFlQA" mode=""></image>
|
||
<text>拨打</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="wzs">
|
||
客服电话高峰期可能遇忙，请耐心等待
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="kefuflag"></view>
|
||
|
||
<view class="custom-select" v-if="show">
|
||
<view class="mask" @click="show = false"></view>
|
||
<view class="select-content">
|
||
<view class="select-header">
|
||
<text>选择运营区</text>
|
||
<text class="close" @click="show = false">×</text>
|
||
</view>
|
||
<view class="search-box">
|
||
<input
|
||
type="text"
|
||
v-model="searchKey"
|
||
placeholder="搜索运营区"
|
||
@input="handleSearch"
|
||
/>
|
||
</view>
|
||
<scroll-view scroll-y class="select-list">
|
||
<view class="select-item" v-for="item in displayList" :key="item.value" @click="selectItem(item)"
|
||
:class="{ 'highlight': searchKey && item.label.includes(searchKey) }">
|
||
{{ item.label }}
|
||
<view style="font-size: 24rpx;color: #999;margin-left: auto;"> {{ item.deptName == null ? '--' : item.deptName}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<!-- <tab-bar :indexs='1'></tab-bar> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
iconobj:this.$store.state.iconobj,
|
||
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,
|
||
isPageActive: true,
|
||
deviceMac: '',
|
||
newMarkers: '',
|
||
count: 0,
|
||
timer: null,
|
||
user: {},
|
||
xllat: '',
|
||
xllng: '',
|
||
circles: [],
|
||
nearbyMarkers: [],
|
||
listData: [],
|
||
yyid: '',
|
||
cachedPolyline: [], // 缓存多边形数据
|
||
cachedParkingData: {}, // 缓存停车区域数据
|
||
isFirstLoad: true ,// 是否是首次加载
|
||
|
||
gonggaoxq:{},
|
||
gonggaoflag:false,
|
||
announcements: {},
|
||
lists: [],
|
||
tiaozhuanlist:[],
|
||
kefuflag:false,
|
||
kefulist:[],
|
||
kefuarr:[],
|
||
jinweidu:'',
|
||
parkingList:[],
|
||
qbtype:'',
|
||
adminflag:false,
|
||
guanliflag:false,
|
||
list:[],
|
||
searchKey: '',
|
||
displayList:[],
|
||
show:false,
|
||
weizhifu:false,
|
||
weizhifuid:''
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if(option.qbtype){
|
||
this.qbtype = option.qbtype
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getinfo()
|
||
|
||
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: (res) => {
|
||
this.jinweidu = res.longitude + ',' + res.latitude
|
||
this.xllat = res.latitude
|
||
this.xllng = res.longitude
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
})
|
||
this.getAone()
|
||
this.covers = []
|
||
this.sockedata = ''
|
||
this.getMyLocation()
|
||
setTimeout(()=>{
|
||
this.setMapScale()
|
||
this.getgonggao()
|
||
this.getlunbo()
|
||
this.getkefu()
|
||
},1000)
|
||
this.polyline = []
|
||
this.isFirstLoad = true // 重置首次加载标志
|
||
setTimeout(()=>{
|
||
this.toggleIconAndCallout()
|
||
},3000)
|
||
},
|
||
onUnload() {
|
||
this.clearTimer()
|
||
},
|
||
onHide() {
|
||
this.clearTimer()
|
||
},
|
||
methods: {
|
||
// 点击去支付
|
||
btnweizhifu(){
|
||
uni.navigateTo({
|
||
url:'/page_user/yongche/orderxq?id=' + this.weizhifuid
|
||
})
|
||
},
|
||
// 获取个人信息
|
||
getinfo(){
|
||
this.$u.get("/getInfo").then(res => {
|
||
if(res.code == 200){
|
||
this.user = res.user
|
||
this.getzhifu()
|
||
this.getorderdevice()
|
||
res.roles.filter(item => {
|
||
if(item == 'sys_admin'){
|
||
this.adminflag = true
|
||
}
|
||
})
|
||
if(res.roles != null || res.roles.length > 0){
|
||
this.$u.get('/bst/area/list?pageNum=1&pageSize=999').then((res) => {
|
||
if (res.code == 200) {
|
||
this.guanliflag = true
|
||
this.list = res.rows.map(item => ({
|
||
value: item.id,
|
||
label: item.name,
|
||
deptName: item.userName
|
||
}))
|
||
this.displayList = this.list; // 重置显示列表
|
||
console.log(this.displayList,'0000');
|
||
}
|
||
})
|
||
}
|
||
}else if(res.code == 401){
|
||
this.getlogo()
|
||
}
|
||
})
|
||
},
|
||
// 静默登录
|
||
getlogo(){
|
||
let taht = this
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
let data = {
|
||
loginCode: res.code,
|
||
appId:taht.$store.state.appid
|
||
}
|
||
taht.$u.post('/wxLogin', data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.setStorageSync('token', res.token)
|
||
taht.getinfo()
|
||
taht.getlunbo()
|
||
}else{
|
||
taht.getinfo()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
handleSearch(e) {
|
||
const value = e.detail.value;
|
||
console.log(e,value);
|
||
if (!value) {
|
||
// 搜索框为空时显示全部数据
|
||
this.displayList = this.list;
|
||
} else {
|
||
// 有搜索内容时过滤数据
|
||
this.displayList = this.list.filter(item => {
|
||
const label = String(item.label || '').toLowerCase();
|
||
const deptName = String(item.deptName || '').toLowerCase();
|
||
const searchValue = String(value || '').toLowerCase();
|
||
return label.includes(searchValue) || deptName.includes(searchValue);
|
||
});
|
||
}
|
||
},
|
||
selectItem(item) {
|
||
this.confirm(item)
|
||
this.show = false
|
||
this.searchKey = '' // 选择后清空搜索框
|
||
this.displayList = this.list // 重置显示列表
|
||
},
|
||
// 选择好运营区
|
||
confirm(e) {
|
||
console.log(e,e.value)
|
||
uni.setStorageSync('adminAreaid', e.value)
|
||
uni.navigateTo({
|
||
url: `/page_shanghu/guanli/admin_worke?id=${e.value}`
|
||
})
|
||
},
|
||
// 获取本人正在使用的订单设备
|
||
getorderdevice() {
|
||
this.$u.get("/app/order/mineProcessing").then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.data) {
|
||
this.orderflag = true
|
||
if(this.qbtype == 1){
|
||
console.log('11');
|
||
}else{
|
||
uni.switchTab({
|
||
url:'/pages/index/index'
|
||
})
|
||
}
|
||
}else{
|
||
this.orderflag = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击进行中订单进行跳转
|
||
btnjinx(){
|
||
uni.switchTab({
|
||
url:'/pages/index/index'
|
||
})
|
||
},
|
||
// 点击扫码
|
||
btnsaoma(){
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['qrCode'],
|
||
success: res => {
|
||
console.log(res);
|
||
function getQueryParam(url, paramName) {
|
||
let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
||
let results = regex.exec(url)
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
||
}
|
||
let sceneValue = res.result
|
||
let decodedValue = decodeURIComponent(sceneValue)
|
||
this.sn = getQueryParam(decodedValue, 's')
|
||
this.$u.get("/app/order/mineProcessing").then(res =>{
|
||
if(res.code == 200){
|
||
if(res.data){
|
||
uni.switchTab({
|
||
url:'/pages/nearbystores/index'
|
||
})
|
||
}else{
|
||
this.$u.get(`/app/device/availableDetail?sn=${this.sn}`).then((res) => {
|
||
if (res.code == 200) {
|
||
if(res.data){
|
||
this.modelId = res.data.modelId
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/storedlist/trueorder?modelId=' + this.modelId + '&sn=' + this.sn
|
||
})
|
||
}else{
|
||
console.log('前台');
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '当前车辆不可用',
|
||
showCancel: false,
|
||
confirmText: '知道了'
|
||
})
|
||
}
|
||
}else{
|
||
console.log('系统');
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.msg,
|
||
showCancel: false,
|
||
confirmText: '知道了'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
fail: err => {
|
||
console.error('扫描失败：', err)
|
||
uni.showToast({
|
||
title: '扫描失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 点击显示客服
|
||
btnkf(){
|
||
if(this.kefulist.length > 0){
|
||
this.kefuflag = true
|
||
}else{
|
||
uni.showToast({
|
||
title: '当前暂无客服',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
// 获取客服
|
||
getkefu(){
|
||
this.$u.get(`/app/customerService/indexList?radius=1000¢er=${this.jinweidu}&areaId=${this.user.areaId}`).then(res => {
|
||
if(res.code == 200){
|
||
this.kefulist = res.after
|
||
this.kefuarr = res.before
|
||
}
|
||
})
|
||
},
|
||
// 点击进行跳转页面
|
||
btntiao(num){
|
||
if(num == 2){ //跳转到使用帮助页
|
||
uni.navigateTo({
|
||
url:'/page_user/bangzhu'
|
||
})
|
||
}else if(num == 3){ //跳转到车辆故障上报
|
||
uni.navigateTo({
|
||
url:'/page_user/guzhang/index'
|
||
})
|
||
}
|
||
},
|
||
btnpage(num){
|
||
if(num == 2){ //跳转到我的订单页面
|
||
uni.navigateTo({
|
||
url:'/pages/myorder/index'
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:'/page_fenbao/index'
|
||
})
|
||
}
|
||
},
|
||
// 请求查询是否有未支付订单
|
||
getzhifu(){
|
||
this.$u.get("/app/order/unpaid").then((res) => {
|
||
if (res.code == 200) {
|
||
if(res.data){
|
||
this.weizhifuid = res.data.id
|
||
this.weizhifu = true
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您当前还有未支付订单，是否前去支付？',
|
||
showCancel: true,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url:'/page_user/yongche/orderxq?id=' + that.weizhifuid
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('取消'); // 用户点击取消
|
||
}
|
||
}
|
||
})
|
||
}else{
|
||
this.weizhifu = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取广告轮播图
|
||
getlunbo(){
|
||
this.$u.get("/app/ad").then(res => {
|
||
if(res.code == 200){
|
||
this.lists = []
|
||
this.tiaozhuanlist = res.data
|
||
if(res.data.length > 0 && res.data[0] != null){
|
||
res.data.forEach(item =>{
|
||
this.lists.push({
|
||
image:item.picture,
|
||
title: item.adId
|
||
})
|
||
})
|
||
}else{
|
||
this.lists.push({
|
||
image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
|
||
title: ""
|
||
})
|
||
}
|
||
}else{
|
||
this.lists.push({
|
||
image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
|
||
title: ""
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 点击跳转轮播图跳转
|
||
btnshangjia(e){
|
||
if(this.tiaozhuanlist[e].urlType == 1){
|
||
uni.navigateTo({
|
||
url: '/page_fenbao/webview?url=' + this.tiaozhuanlist[e].url
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url: '/' + this.tiaozhuanlist[e].url
|
||
})
|
||
}
|
||
},
|
||
// 点击跳转到我的
|
||
btnmy(){
|
||
uni.switchTab({
|
||
url:'/pages/my'
|
||
})
|
||
},
|
||
// 点击头部滚动通知
|
||
btntopgg(){
|
||
this.$u.get(`/app/notice/${this.announcements.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
this.gonggaoflag = true
|
||
}
|
||
})
|
||
},
|
||
// 点击公告我知道了
|
||
btnggtc(){
|
||
this.gonggaoflag = false
|
||
uni.setStorageSync('noticeId', this.announcements.noticeId)
|
||
},
|
||
// 获取最新公告
|
||
getgonggao(){
|
||
this.$u.get("/app/notice/new?noticeType=1").then(res =>{
|
||
if(res.code == 200){
|
||
this.announcements = res.data
|
||
if(res.data){
|
||
this.$u.get(`/app/notice/${res.data.noticeId}`).then(resp =>{
|
||
if(resp.code == 200){
|
||
this.gonggaoxq = resp.data
|
||
if(resp.data.noticeId != uni.getStorageSync('noticeId')){
|
||
this.gonggaoflag = true
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 拖动查询中心点的数据
|
||
regionchange(e) {
|
||
this.iconflag = true
|
||
if (e.type == 'end') {
|
||
if (this.rtindex == 2) {
|
||
this.jingweidu = e.detail.centerLocation.longitude + ',' + e.detail.centerLocation.latitude
|
||
this.getAone()
|
||
this.iconflag = false
|
||
}
|
||
}
|
||
},
|
||
debounceUpdate() {
|
||
if (this.updateTimer) {
|
||
clearTimeout(this.updateTimer)
|
||
}
|
||
this.updateTimer = setTimeout(() => {
|
||
this.getAone()
|
||
}, 300) // 延迟300ms执行更新
|
||
},
|
||
getNearbyMarkers(clickedLat, clickedLon) {
|
||
const nearbyMarkers = this.listData.filter(item => {
|
||
if (item.latitude && item.longitude) {
|
||
const distance = this.haversineDistance(
|
||
parseFloat(clickedLat),
|
||
parseFloat(clickedLon),
|
||
parseFloat(item.latitude),
|
||
parseFloat(item.longitude)
|
||
);
|
||
return distance <= 100
|
||
}
|
||
return false
|
||
});
|
||
// 更新 circles 数组来绘制淡灰色的圆形区域
|
||
this.circles = [{
|
||
latitude: clickedLat,
|
||
longitude: clickedLon,
|
||
color: '#fff', // 圆形边框颜色（淡灰色）
|
||
fillColor: '#00000010', // 圆形填充颜色（淡灰色）
|
||
radius: 100, // 圆的半径（单位：米）
|
||
strokeWidth: 1
|
||
}]
|
||
this.nearbyMarkers = nearbyMarkers
|
||
},
|
||
haversineDistance(lat1, lon1, lat2, lon2) {
|
||
const R = 6371e3 // Earth radius in meters
|
||
const toRad = angle => angle * Math.PI / 180
|
||
const dLat = toRad(lat2 - lat1)
|
||
const dLon = toRad(lon2 - lon1)
|
||
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2)
|
||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
|
||
return R * c
|
||
},
|
||
status(item) {
|
||
if (item.status == 0) {
|
||
return '仓库中'
|
||
} else if (item.status == 1) {
|
||
return '待租'
|
||
} else if (item.status == 2) {
|
||
return '预约中'
|
||
} else if (item.status == 3) {
|
||
return '骑行中'
|
||
} else if (item.status == 4) {
|
||
return '临时锁车中'
|
||
} else if (item.status == 6) {
|
||
return '调度中'
|
||
} else if (item.status == 7) {
|
||
return '未绑定'
|
||
} else if (item.status == 8) {
|
||
return '禁用中'
|
||
}
|
||
},
|
||
startTimer() {
|
||
this.timer = setInterval(() => {
|
||
this.count++
|
||
// 这里替换为你的实际逻辑
|
||
this.setMapScale()
|
||
}, 5000)
|
||
},
|
||
|
||
// 清除定时器
|
||
clearTimer() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
console.log("定时器已清除")
|
||
}
|
||
},
|
||
// 点击地图中的店铺操作
|
||
handleMarkerClick(e) {
|
||
if(this.orderflag == true){
|
||
uni.showToast({
|
||
title: '当前已有进行中订单',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}else{
|
||
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) {
|
||
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()
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
console.log('进行中订单');
|
||
uni.showToast({
|
||
title: '当前已有订单',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
} else if (id.slice(-1) == 3) {
|
||
console.log('导览')
|
||
}
|
||
}
|
||
},
|
||
// 点击进入商户中心
|
||
btngl(){
|
||
if (this.list.length < 2) {
|
||
uni.setStorageSync('adminAreaid', this.list[0].value);
|
||
uni.navigateTo({
|
||
url: `/page_shanghu/guanli/admin_worke?id=${this.list[0].value}`
|
||
})
|
||
} else {
|
||
this.show = true
|
||
}
|
||
},
|
||
// 点击去下单
|
||
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}&lat=${this.xllat}&lon=${this.xllng}`).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 = ''
|
||
},
|
||
|
||
// 点击选择骑行套餐
|
||
btntcxz(index) {
|
||
this.tcindex = index
|
||
},
|
||
|
||
// 点击拨打平台客服电话
|
||
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 = this.iconobj.mappic
|
||
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.listData = []
|
||
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.listData = res.data
|
||
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 == null ? item.sn : '' + item.vehicleNum, // 修改为你想要显示的文字内容
|
||
color: '#0D75E5', // 修改为文字颜色
|
||
fontSize: 10, // 修改为文字大小
|
||
borderRadius: 10, // 修改为气泡圆角大小
|
||
bgColor: '#fff', // 修改为气泡背景颜色
|
||
padding: 3, // 修改为气泡内边距
|
||
display: 'ALWAYS', // 修改为气泡的显示策略
|
||
}
|
||
}
|
||
this.covers.push(shopCover)
|
||
})
|
||
}
|
||
})
|
||
} 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,
|
||
isOperationArea: true
|
||
}
|
||
return polyline
|
||
},
|
||
convertBoundaryToPolylines(boundaries, num) {
|
||
if (!Array.isArray(boundaries)) {
|
||
console.error('边界数据不是数组:', boundaries)
|
||
return []
|
||
}
|
||
|
||
const polylines = boundaries.map(boundary => {
|
||
if (!boundary) {
|
||
console.warn('边界数据为空')
|
||
return null
|
||
}
|
||
|
||
let coords
|
||
try {
|
||
coords = JSON.parse(boundary)
|
||
} catch (error) {
|
||
console.error('解析边界JSON失败:', error)
|
||
return null
|
||
}
|
||
|
||
if (!Array.isArray(coords)) {
|
||
console.error('解析后的边界数据不是数组:', coords)
|
||
return null
|
||
}
|
||
|
||
const points = coords.map(coord => {
|
||
if (!Array.isArray(coord) || coord.length < 2) {
|
||
console.warn('坐标数据格式错误:', coord)
|
||
return null
|
||
}
|
||
return {
|
||
latitude: parseFloat(coord[1]),
|
||
longitude: parseFloat(coord[0])
|
||
}
|
||
}).filter(point => point !== null)
|
||
|
||
if (points.length < 3) {
|
||
console.warn('有效坐标点不足3个，无法构成多边形')
|
||
return null
|
||
}
|
||
|
||
// 根据类型设置不同的样式
|
||
let style = {}
|
||
if (num == 1) { // 停车区
|
||
style = {
|
||
fillColor: "#88888850",
|
||
strokeColor: "#88888850",
|
||
strokeWidth: 1,
|
||
zIndex: 1,
|
||
isOperationArea: false
|
||
}
|
||
} else if (num == 2) { // 禁停区
|
||
style = {
|
||
fillColor: "#FFF5D640",
|
||
strokeColor: "#FF473E",
|
||
strokeWidth: 2,
|
||
zIndex: 1,
|
||
isOperationArea: false
|
||
}
|
||
} else if (num == 3) { // 禁行区
|
||
style = {
|
||
fillColor: "#FFD1CF40",
|
||
strokeColor: "#FFC107",
|
||
strokeWidth: 2,
|
||
zIndex: 1,
|
||
isOperationArea: false
|
||
}
|
||
}
|
||
|
||
return {
|
||
points: points,
|
||
...style
|
||
}
|
||
}).filter(polyline => polyline !== null)
|
||
|
||
return polylines
|
||
},
|
||
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() {
|
||
if(!this.yyid) {
|
||
console.warn('用户区域ID不存在，无法获取停车区域数据')
|
||
return
|
||
}
|
||
|
||
// 检查缓存
|
||
if(this.cachedParkingData[this.yyid] && !this.isFirstLoad) {
|
||
this.updatePolylineFromCache()
|
||
return
|
||
}
|
||
|
||
this.$u.get(`/app/areaSub/listByArea?areaId=${this.yyid}`).then((res) => {
|
||
if (res.code === 200 && Array.isArray(res.data)) {
|
||
// 缓存数据
|
||
const filteredData = res.data.filter(item => item.status != 1);
|
||
this.cachedParkingData[this.yyid] = filteredData
|
||
|
||
const type1Data = []
|
||
const type2Data = []
|
||
const type3Data = []
|
||
|
||
filteredData.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 processBoundaries = (data, type) => {
|
||
const validBoundaries = data
|
||
.map(row => row.boundaryStr)
|
||
.filter(boundary => boundary && typeof boundary === 'string' && boundary.trim() !== '')
|
||
|
||
if(validBoundaries.length > 0) {
|
||
const polylines = this.convertBoundaryToPolylines(validBoundaries, type)
|
||
if(polylines && polylines.length > 0) {
|
||
return polylines
|
||
}
|
||
}
|
||
return []
|
||
}
|
||
|
||
// 先处理所有边界数据
|
||
const type1Polylines = processBoundaries(type1Data, 1)
|
||
const type2Polylines = processBoundaries(type2Data, 2)
|
||
const type3Polylines = processBoundaries(type3Data, 3)
|
||
|
||
// 保留现有的运营区边界
|
||
const operationAreaPolylines = this.polyline.filter(p => p.isOperationArea)
|
||
|
||
// 合并所有边界数据
|
||
const allPolylines = [
|
||
...operationAreaPolylines,
|
||
...type1Polylines,
|
||
...type2Polylines,
|
||
...type3Polylines
|
||
]
|
||
|
||
// 缓存多边形数据
|
||
this.cachedPolyline = allPolylines
|
||
|
||
// 更新显示
|
||
this.polyline = allPolylines
|
||
this.parkingList = filteredData
|
||
this.isFirstLoad = false
|
||
}
|
||
})
|
||
},
|
||
updatePolylineFromCache() {
|
||
// 保留现有的运营区边界
|
||
const operationAreaPolylines = this.polyline.filter(p => p.isOperationArea)
|
||
|
||
// 从缓存中获取其他边界数据
|
||
const otherPolylines = this.cachedPolyline.filter(p => !p.isOperationArea)
|
||
|
||
// 合并数据
|
||
const allPolylines = [...operationAreaPolylines, ...otherPolylines]
|
||
|
||
// 更新显示
|
||
this.polyline = allPolylines
|
||
},
|
||
// 请求运营区停车点，禁行区，
|
||
getArea() {
|
||
this.polyline = []
|
||
this.$u.get(`/app/area/detail?id=${this.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.$u.get(`/app/area/nearby?id=${this.user.areaId == null ? '' : this.user.areaId}&radius=1000¢er=${this.jingweidu}`).then((resp) => {
|
||
if (resp.code == 200) {
|
||
if(resp.data){
|
||
this.yyid = resp.data.id
|
||
}
|
||
if(resp.data && resp.data.boundaryStr) {
|
||
const polylines = this.convertBoundaryToPolyline(resp.data.boundaryStr)
|
||
if(polylines) {
|
||
this.polyline = [polylines]
|
||
this.getParking()
|
||
if(resp.data && resp.data.id){
|
||
this.loadNearbyDevices(resp.data.id)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
// }
|
||
// })
|
||
},
|
||
|
||
loadNearbyDevices(areaId) {
|
||
if (this.rtindex == 2) {
|
||
this.$u.get(`/app/device/listNearBy?radius=10000¢er=${this.jingweidu}&areaId=${areaId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.listData = res.data
|
||
this.updateMarkers()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
updateMarkers() {
|
||
const newMarkers = []
|
||
this.listData.forEach(item => {
|
||
if(item.latitude && item.longitude) {
|
||
const marker = {
|
||
id: this.rtindex == 1 ? parseInt(item.id + "1") :
|
||
this.rtindex == 2 ? parseInt(item.id + "2") :
|
||
parseInt(item.id + "3"),
|
||
latitude: parseFloat(item.latitude),
|
||
longitude: parseFloat(item.longitude),
|
||
width: 35,
|
||
height: 40,
|
||
iconPath: this.getIconPath(),
|
||
callout: {
|
||
content: item.vehicleNum || item.sn || '',
|
||
color: '#0D75E5',
|
||
fontSize: 10,
|
||
borderRadius: 10,
|
||
bgColor: '#fff',
|
||
padding: 3,
|
||
display: 'ALWAYS'
|
||
}
|
||
}
|
||
newMarkers.push(marker)
|
||
}
|
||
})
|
||
this.tempCovers = newMarkers
|
||
this.covers = this.tempCovers
|
||
},
|
||
|
||
getIconPath() {
|
||
if (this.rtindex == 1) {
|
||
return 'https://api.ccttiot.com/smartmeter/img/static/upX2lLilhrRi4tttdHlo'
|
||
} else if (this.rtindex == 2) {
|
||
return this.iconobj.mappic
|
||
} else if (this.rtindex == 3) {
|
||
return 'https://api.ccttiot.com/smartmeter/img/static/un7ecyEN8vsJhlEnXfD4'
|
||
}
|
||
return null
|
||
},
|
||
|
||
updatePolyline(newPolylines) {
|
||
// 使用Vue的响应式更新
|
||
this.tempPolyline = [...newPolylines]
|
||
this.polyline = this.tempPolyline
|
||
},
|
||
|
||
updateCovers(newCovers) {
|
||
// 使用Vue的响应式更新
|
||
this.tempCovers = [...newCovers]
|
||
this.covers = this.tempCovers
|
||
},
|
||
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.rukou{
|
||
width: 198rpx;
|
||
height: 56rpx;
|
||
margin-top: 290rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
.custom-select {
|
||
.mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
}
|
||
|
||
.select-content {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
z-index: 1000;
|
||
height: 50vh; // 最大高度
|
||
// min-height: 400rpx; // 添加最小高度
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 20rpx;
|
||
|
||
.select-header {
|
||
padding: 20rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.close {
|
||
font-size: 40rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.search-box {
|
||
padding: 15rpx 20rpx;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
input {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 30rpx;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.select-list {
|
||
flex: 1;
|
||
max-height: calc(50vh - 140rpx);
|
||
min-height: 260rpx; // 为列表添加最小高度
|
||
|
||
.select-item {
|
||
display: flex;
|
||
// flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
border-bottom: 1px solid #eee;
|
||
font-size: 28rpx;
|
||
|
||
&.highlight {
|
||
background-color: #f0f9ff;
|
||
color: #2d8cf0;
|
||
}
|
||
|
||
&:active {
|
||
background: #f5f5f5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.kefutc{
|
||
animation: fadeIn 0.5s ease-in-out forwards;
|
||
position: fixed;
|
||
top: 580rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10;
|
||
.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-size: 24rpx;
|
||
color: #666;
|
||
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;
|
||
image{
|
||
width: 42rpx;
|
||
height: 40rpx;
|
||
}
|
||
text{
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.bj{
|
||
position: absolute;
|
||
top: -280rpx;
|
||
z-index: -1;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 614rpx;
|
||
height: 1140rpx;
|
||
}
|
||
}
|
||
.guanggao{
|
||
width: 700rpx;
|
||
height: 180rpx;
|
||
margin: auto;
|
||
margin-top: 34rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.kefu{
|
||
width: 108rpx;
|
||
height: 146rpx;
|
||
position: absolute;
|
||
bottom: -80rpx;
|
||
right: 10rpx;
|
||
}
|
||
/deep/ .u-swiper-image{
|
||
width: 700rpx !important;
|
||
height: 180rpx !important;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.botbox{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 520rpx;
|
||
background-color: #fff;
|
||
border-radius: 50rpx 50rpx 0 0;
|
||
.saoma{
|
||
image{
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 686rpx;
|
||
height: 90rpx;
|
||
background-color: #4C97E7;
|
||
border-radius: 50rpx;
|
||
margin: auto;
|
||
margin-top: 34rpx;
|
||
}
|
||
.kuaijie{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 26rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 32rpx;
|
||
image{
|
||
width: 96rpx;
|
||
height: 116rpx;
|
||
}
|
||
}
|
||
}
|
||
.topimg{
|
||
width: 136rpx;
|
||
height: 56rpx;
|
||
position: fixed;
|
||
top: 104rpx;
|
||
left: 36rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.noticetc{
|
||
width: 680rpx;
|
||
height: 950rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
top: 340rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 99;
|
||
.btn{
|
||
width: 600rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
border-radius: 50rpx;
|
||
background-color: #4297F3;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin: auto;
|
||
margin-top: 30rpx;
|
||
}
|
||
.name{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin-top: 30rpx;
|
||
}
|
||
.biaoti{
|
||
font-size: 32rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.cont{
|
||
width: 100%;
|
||
height: 620rpx;
|
||
overflow: scroll;
|
||
background-color: #ececec;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.scroll-text {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
animation: scroll 8s linear infinite;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
}
|
||
.scroll-item {
|
||
display: inline-block;
|
||
padding: 0 10px;
|
||
font-size: 16px;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
}
|
||
@keyframes scroll {
|
||
0% {
|
||
transform: translateX(100%);
|
||
}
|
||
100% {
|
||
transform: translateX(-100%);
|
||
}
|
||
}
|
||
.gonggao{
|
||
width: 682rpx;
|
||
height: 72rpx;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.3);
|
||
border-radius: 53rpx 53rpx 53rpx 53rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 99;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
margin: auto;
|
||
margin-top: 186rpx;
|
||
padding-left: 70rpx;
|
||
.container{
|
||
width: 560rpx;
|
||
overflow: hidden;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
}
|
||
}
|
||
.fixdivce {
|
||
padding: 12rpx 22rpx 12rpx 22rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 34vh;
|
||
width: 280rpx;
|
||
height: 40vh;
|
||
background: #FFFFFF10;
|
||
border-radius: 0 40rpx 40rpx 0;
|
||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
|
||
|
||
.scrollable-content::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.scrollable-content {
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
|
||
.divce_li:last-child {
|
||
border-bottom: 1rpx solid #fff;
|
||
}
|
||
|
||
.divce_li {
|
||
padding: 10rpx 0;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #D8D8D8;
|
||
|
||
.left_img {
|
||
image {
|
||
width: 44rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
|
||
.right_cont {
|
||
margin-left: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
|
||
.right_top {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
.right_top_left {
|
||
margin-left: auto;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
image {
|
||
margin-right: 6rpx;
|
||
width: 12rpx;
|
||
height: 26rpx;
|
||
}
|
||
}
|
||
|
||
.right_top_right {}
|
||
}
|
||
|
||
.right_bot {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: space-between;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
box-sizing: border-box;
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.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: 0;
|
||
z-index: 99;
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
width: 100%;
|
||
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;
|
||
z-index: -1;
|
||
.center-marker {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -80%); /* 定位在中心点上方 */
|
||
pointer-events: none; /* 使其不可点击 */
|
||
}
|
||
}
|
||
</style> |