You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
412 lines
9.1 KiB
412 lines
9.1 KiB
6 months ago
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="leixing">
|
||
|
|
<view :class="['ggzxclist',ggzxcind===ind?'active':'']" v-for="(el,ind) in ggzxclist" :key="ind"
|
||
|
|
@click="setLm(el.id)">{{el.name}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="zxclist" v-show="ggzxcind==0">
|
||
|
|
<view class="item" v-for="(el,ind) in datas" :key="ind">
|
||
|
|
<view class="tit">{{el.parkName}}</view>
|
||
|
|
<view class="zxcsl">
|
||
|
|
<view class="cwzs">
|
||
|
|
<view class="wz">车位信息</view>
|
||
|
|
<view class="sz">{{el.totalPlace}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="cwzs">
|
||
|
|
<view class="wz">余位信息</view>
|
||
|
|
<view class="sz">{{el.leftPlace}}</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="cwzs02">
|
||
|
|
<view class="wz">更新时间</view>
|
||
|
|
<view class="sz">{{el.updateTime}}</view>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
<view class="dizhi">
|
||
|
|
<view class="dz">地址：{{el.parkName}}</view>
|
||
|
|
<view class="dzimg" @click="daohang(el.lngLat)">导航</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="zxclistditu" v-show="ggzxcind==1">
|
||
|
|
<view class="mparq">
|
||
|
|
<map class="map" v-if="isMap" @markertap="getMarker" :latitude="latitude" :longitude="longitude"
|
||
|
|
:markers="markers" show-location></map>
|
||
|
|
</view>
|
||
|
|
<view class="des">
|
||
|
|
<view class="des-left">
|
||
|
|
<!-- <view class="des-left-item">
|
||
|
|
<view class="name">{{nowData.title}}</view>
|
||
|
|
<view class="address">{{nowData.address}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="des-left-item">
|
||
|
|
<view class="name">车位信息</view>
|
||
|
|
<view class="address">{{nowData.capacity}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="des-left-item">
|
||
|
|
<view class="name">剩余车位</view>
|
||
|
|
<view class="address">{{nowData.availBike}}</view>
|
||
|
|
</view> -->
|
||
|
|
<view class="name">{{nowData.title}}</view>
|
||
|
|
<view class="parkNun">
|
||
|
|
<view class="parkNun-item">
|
||
|
|
<view class="parkNun-item-name">车位信息:</view>
|
||
|
|
<view class="parkNun-item-num">{{nowData.totalPlace}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="parkNun-item">
|
||
|
|
<view class="parkNun-item-name">余位信息:</view>
|
||
|
|
<view class="parkNun-item-num">{{nowData.leftPlace}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="address">{{nowData.address}}</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="des-right" @click="daohan()">导航</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var amapFile = require('@/static/js/amap-wx.js'); //如：../../libs/amap-wx.js
|
||
|
|
var myAmapFun;
|
||
|
|
var poiDatas = [];
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
token: '',
|
||
|
|
datas: [],
|
||
|
|
lng: '',
|
||
|
|
lat: '',
|
||
|
|
ggzxcind: 0,
|
||
|
|
latitude: '31.266909',
|
||
|
|
longitude: '120.633401',
|
||
|
|
markers: [], //列表和图钉数据
|
||
|
|
nowData: {}, //当前选中点
|
||
|
|
ggzxclist: [{
|
||
|
|
name: '列表',
|
||
|
|
id: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '地图',
|
||
|
|
id: 2
|
||
|
|
}
|
||
|
|
],
|
||
|
|
isMap: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getToken();
|
||
|
|
myAmapFun = new amapFile.AMapWX({
|
||
|
|
key: 'e40bb317c48b66d558aa77ab126ef8c1'
|
||
|
|
});
|
||
|
|
// 在小程序代码中获取个人定位信息并在地图上标注
|
||
|
|
wx.getLocation({
|
||
|
|
type: 'gcj02',
|
||
|
|
isHighAccuracy:true,
|
||
|
|
success: (res)=> {
|
||
|
|
console.log(res)
|
||
|
|
this.latitude = res.latitude;
|
||
|
|
this.longitude = res.longitude;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setLm(id) {
|
||
|
|
var that = this;
|
||
|
|
if (id == 1) {
|
||
|
|
that.ggzxcind = 0;
|
||
|
|
} else {
|
||
|
|
that.ggzxcind = 1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getToken() {
|
||
|
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon';
|
||
|
|
var url =
|
||
|
|
'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon';
|
||
|
|
var para = {};
|
||
|
|
var that = this;
|
||
|
|
that.httpGetxin(that, url, para, function(res) {
|
||
|
|
that.token = res.data.obj;
|
||
|
|
if (res.data.success == false) {
|
||
|
|
that.sxToken();
|
||
|
|
} else {
|
||
|
|
that.getdata();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
sxToken() {
|
||
|
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken?accessToken='+this.token;
|
||
|
|
var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/refreshToken?accessToken=' +
|
||
|
|
this.token;
|
||
|
|
var para = {};
|
||
|
|
var that = this;
|
||
|
|
that.httpGetxin(that, url, para, function(res) {
|
||
|
|
that.token = res.data.obj;
|
||
|
|
that.getdata();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getdata() {
|
||
|
|
console.log('0000000000');
|
||
|
|
uni.showToast({
|
||
|
|
title: '加载中...',
|
||
|
|
icon: 'loading',
|
||
|
|
});
|
||
|
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token;
|
||
|
|
var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/aggregation?accessToken=' + this
|
||
|
|
.token;
|
||
|
|
var para = {
|
||
|
|
"code": "0001_parking",
|
||
|
|
"params": {},
|
||
|
|
"page": 0,
|
||
|
|
"size": 0,
|
||
|
|
"result": {},
|
||
|
|
"orders": []
|
||
|
|
};
|
||
|
|
var that = this;
|
||
|
|
that.httpPostxin(that, url, para, function(res) {
|
||
|
|
if (res.data.success) {
|
||
|
|
uni.hideToast();
|
||
|
|
that.datas = [];
|
||
|
|
that.datas = res.data.obj.data;
|
||
|
|
that.getditu();
|
||
|
|
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '加载中...',
|
||
|
|
icon: 'loading',
|
||
|
|
duration: 20000
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
daohang(jwd) {
|
||
|
|
var lnglat = jwd.split(",");
|
||
|
|
// console.log(lnglat[0]);
|
||
|
|
// console.log(lnglat[1]);
|
||
|
|
|
||
|
|
this.lng = lnglat[0];
|
||
|
|
this.lat = lnglat[1];
|
||
|
|
|
||
|
|
var that = this;
|
||
|
|
uni.openLocation({
|
||
|
|
latitude: Number(that.lat),
|
||
|
|
longitude: Number(that.lng),
|
||
|
|
complete(e) {
|
||
|
|
console.log(e);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
getMarker(e) {
|
||
|
|
this.ismap = false;
|
||
|
|
var id = e.detail.markerId;
|
||
|
|
for (var i = 0; i < this.markers.length; i++) {
|
||
|
|
if (this.markers[i].id == id) {
|
||
|
|
this.nowData = this.markers[i];
|
||
|
|
this.markers[i].width = 38;
|
||
|
|
this.markers[i].height = 38;
|
||
|
|
} else {
|
||
|
|
this.markers[i].width = 28;
|
||
|
|
this.markers[i].height = 28;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.ismap = true;
|
||
|
|
},
|
||
|
|
getditu() {
|
||
|
|
this.isMap = false;
|
||
|
|
var that = this;
|
||
|
|
var pois = [];
|
||
|
|
// "jwd":"120.744188,31.64254",
|
||
|
|
for (var i = 0; i < that.datas.length; i++) {
|
||
|
|
var tmp = that.datas[i];
|
||
|
|
var lnglat = that.datas[i].lngLat.split(",");
|
||
|
|
var p = {
|
||
|
|
id: i,
|
||
|
|
title: tmp.parkName,
|
||
|
|
address: tmp.address,
|
||
|
|
leftPlace: tmp.leftPlace, //余位
|
||
|
|
totalPlace: tmp.totalPlace, //总数
|
||
|
|
latitude: Number(lnglat[1]),
|
||
|
|
longitude: Number(lnglat[0]),
|
||
|
|
iconPath: "http://tumaoss-backups.oss-cn-hangzhou.aliyuncs.com/fusheng-xcx/icon-tingchechang.png",
|
||
|
|
width: 38,
|
||
|
|
height: 38,
|
||
|
|
label: {
|
||
|
|
color: '#4A9AF9 ',
|
||
|
|
fontSize: 12,
|
||
|
|
content: tmp.name,
|
||
|
|
anchorX: -35,
|
||
|
|
anchorY: 0
|
||
|
|
}
|
||
|
|
};
|
||
|
|
pois.push(p);
|
||
|
|
}
|
||
|
|
that.markers = pois;
|
||
|
|
that.nowData = that.markers[0];
|
||
|
|
that.isMap = true;
|
||
|
|
uni.hideToast()
|
||
|
|
},
|
||
|
|
daohan() {
|
||
|
|
uni.openLocation({
|
||
|
|
latitude: this.nowData.latitude,
|
||
|
|
longitude: this.nowData.longitude
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
view {
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
.leixing {
|
||
|
|
display: flex;
|
||
|
|
width: 200px;
|
||
|
|
margin: 15px auto;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 30px;
|
||
|
|
|
||
|
|
.ggzxclist {
|
||
|
|
width: 100px;
|
||
|
|
padding: 10px 0;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
color: #ffffff;
|
||
|
|
background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.zxclistditu {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.mparq {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.map {
|
||
|
|
width: 100%;
|
||
|
|
height: 85vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.zxclist {
|
||
|
|
width: 90%;
|
||
|
|
margin: 30upx auto;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
margin-bottom: 7%;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0rpx 0rpx 15rpx 10rpx #eee;
|
||
|
|
background: #fff;
|
||
|
|
line-height: 2;
|
||
|
|
color: #666666;
|
||
|
|
|
||
|
|
.tit {
|
||
|
|
font-size: 36rpx;
|
||
|
|
background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%);
|
||
|
|
padding: 10upx 30upx;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dizhi {
|
||
|
|
padding: 10rpx 30rpx 30rpx 30rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.dzimg {
|
||
|
|
padding: 0 30upx;
|
||
|
|
background: #2dc15c;
|
||
|
|
color: #ffffff;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.zxcsl {
|
||
|
|
padding: 0rpx 30rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
text-align: center;
|
||
|
|
margin: 10rpx 0 0rpx 0;
|
||
|
|
|
||
|
|
.cwzs {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sz {
|
||
|
|
color: #333333;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.des {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 80px;
|
||
|
|
background: #fff;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0px;
|
||
|
|
|
||
|
|
&-left {
|
||
|
|
|
||
|
|
margin-left: 15rpx;
|
||
|
|
width: 600rpx;
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.address {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #000;
|
||
|
|
font-weight: bold;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-right {
|
||
|
|
width: 100rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background: #438BF8;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
line-height: 60rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.parkNun {
|
||
|
|
display: flex;
|
||
|
|
padding: 10rpx 0;
|
||
|
|
|
||
|
|
&-item {
|
||
|
|
display: flex;
|
||
|
|
font-size: 24rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #000;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
|
||
|
|
&-num {
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|