994 lines
25 KiB
Vue
994 lines
25 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 地图 -->
|
||
<image class="picimg" v-if="iconflag"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uEAmNMMt65U10qwijrsJ" mode=""></image>
|
||
<map class='map' 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://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" 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="bh">
|
||
车辆编号：{{cheobj.sn == null ? '--' : cheobj.sn}}
|
||
</view>
|
||
<view class="">
|
||
车牌号：{{cheobj.vehicleNum == null ? '--' : cheobj.vehicleNum}}
|
||
</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> {{cheobj.remainingPower == null ? '--' : cheobj.remainingPower}}%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="biketaocan">
|
||
<view :class="['bikelist',tcindex == index ? 'active' : '']" v-for="(item,index) in taocaolist" :key="index" @click="btntcxz(index)">
|
||
<view class="bike_item">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uGddSTtK7UhfNpLzQJDc" mode=""></image>
|
||
<view class="name">
|
||
{{item.name == null ? '--' : item.name}}
|
||
</view>
|
||
<view class="qibu">
|
||
<text>起步价</text> <text>{{item.ridingRule == null ? '--' : item.ridingRule}}元</text>(含免费骑行5分钟)
|
||
</view>
|
||
<view class="qibu">
|
||
<text>时长费</text> <text>1.0元/10分钟</text>
|
||
</view>
|
||
<view class="qibu">
|
||
<text>预存费</text> <text>10元</text>
|
||
</view>
|
||
<view class="ckxq">
|
||
查看详情
|
||
</view>
|
||
</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="top">
|
||
<view class="dianhua">
|
||
平台客服电话：13360332564
|
||
</view>
|
||
<view class="boda" @click.stop="btnptkf">
|
||
<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
|
||
<text>拨打</text>
|
||
</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="clmask" v-if="kefuflag"></view>
|
||
|
||
|
||
<tab-bar :indexs='1'></tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "",
|
||
},
|
||
latitude:'',
|
||
longitude:'',
|
||
rtindex:2,
|
||
covers:[],
|
||
shoptcflag:false,
|
||
iconPath:'',
|
||
tcindex:0,
|
||
taocanflag:false,
|
||
kefuflag:false,
|
||
iconflag:false,
|
||
cheobj:{},
|
||
jingweidu:'',
|
||
taocaolist:[],
|
||
polyline:[]
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getMyLocation()
|
||
},
|
||
methods: {
|
||
// 点击去下单
|
||
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(`/bst/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.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)
|
||
}
|
||
})
|
||
},
|
||
// 点击地图中的店铺操作
|
||
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('车辆')
|
||
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.getArea()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}else if(id.slice(-1) == 3){
|
||
console.log('导览')
|
||
}
|
||
},
|
||
// 请求附近车辆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}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.covers = []
|
||
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,
|
||
label: {
|
||
content: item.vehicleNum,
|
||
anchorX: this.calculateAnchorX(item.vehicleNum),
|
||
fontWeight: 700,
|
||
color: '#0D75E5',
|
||
borderColor: '#fff',
|
||
borderRadius: 5,
|
||
bgColor: '#fff',
|
||
padding:1,
|
||
}
|
||
}
|
||
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.setMapScale()
|
||
this.getqingqiu()
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取位置失败：', err)
|
||
}
|
||
})
|
||
},
|
||
// 均衡地图文字居中
|
||
calculateAnchorX(name) {
|
||
let chineseLength = 0
|
||
let englishLength = 0
|
||
for (let i = 0; i < name.length; i++) {
|
||
const charCode = name.charCodeAt(i)
|
||
if (charCode >= 0x4e00 && charCode <= 0x9fa5) {
|
||
chineseLength++
|
||
} else if (/[a-zA-Z]/.test(name[i])) {
|
||
englishLength = englishLength + 1.2 // 英文长度加1，但视为两个中文字符长度
|
||
}
|
||
}
|
||
const totalLength = chineseLength + englishLength * 2;
|
||
return -totalLength * 6.5 // 假设每个中文字符对应的 anchorX 偏移是 -6.5
|
||
},
|
||
|
||
convertBoundaryToPolyline(boundary) {
|
||
if (!boundary) return null
|
||
const points = JSON.parse(boundary).map(coord => ({
|
||
latitude: coord[1],
|
||
longitude: coord[0]
|
||
}))
|
||
const polyline = {
|
||
points: points,
|
||
fillColor: "#55888840", //填充颜色
|
||
strokeColor: "#22FF00", //描边颜色
|
||
strokeWidth: 2, //描边宽度
|
||
zIndex: 1, //层级
|
||
}
|
||
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: "#3A7EDB40", //填充颜色
|
||
strokeColor: "#3A7EDB", //描边颜色
|
||
strokeWidth: 2, //描边宽度
|
||
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: "#FFC107", //描边颜色
|
||
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: "#FF473E", //描边颜色
|
||
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: 20,
|
||
height: 28.95,
|
||
iconPath: item.type == 1 ?
|
||
'https://lxnapi.ccttiot.com/bike/img/static/up2xXqAgwCX5iER600k3' : item
|
||
.type == 2 ?
|
||
'https://lxnapi.ccttiot.com/bike/img/static/u53BAQcFIX3vxsCzEZ7t' :
|
||
' https://lxnapi.ccttiot.com/bike/img/static/uDNY5Q4zOiZTCBTA2Jdq',
|
||
callout: {
|
||
content: item.name,
|
||
color: '#ffffff',
|
||
fontSize: 14,
|
||
borderRadius: 10,
|
||
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' : '#FF473E',
|
||
padding: 6,
|
||
display: 'ALWAYS'
|
||
},
|
||
isCalloutVisible: true // 添加标记
|
||
})
|
||
})
|
||
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.cheobj.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.$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()
|
||
}
|
||
})
|
||
},
|
||
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
.picimg {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 50%;
|
||
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;
|
||
.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;
|
||
}
|
||
}
|
||
.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: 0;
|
||
bottom: 0;
|
||
z-index: 99;
|
||
.topfor{
|
||
width: 750rpx;
|
||
max-height: 664rpx;
|
||
background: #f9f9f9;
|
||
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: 750rpx;
|
||
height: 184rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
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: 450rpx;
|
||
image{
|
||
width: 78rpx;
|
||
height: 96rpx;
|
||
display: block;
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
.lticon{
|
||
position: fixed;
|
||
left: 28rpx;
|
||
top: 538rpx;
|
||
image{
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
display: block;
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
.map{
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
</style> |