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.
373 lines
8.7 KiB
373 lines
8.7 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.name}}</view>
|
||
|
|
<view class="zxcsl">
|
||
|
|
<view class="cwzs">
|
||
|
|
<view class="wz">车位信息</view>
|
||
|
|
<view class="sz">{{el.capacity}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="cwzs">
|
||
|
|
<view class="wz">余位信息</view>
|
||
|
|
<view class="sz">{{el.availBike}}</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="cwzs02">
|
||
|
|
<view class="wz">更新时间</view>
|
||
|
|
<view class="sz">{{el.updateTime}}</view>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
<view class="dizhi">
|
||
|
|
<view class="dz">地址：{{el.address}}</view>
|
||
|
|
<view class="dzimg" @click="daohang(el.jwd)">导航</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.capacity}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="parkNun-item">
|
||
|
|
<view class="parkNun-item-name">余位信息:</view>
|
||
|
|
<view class="parkNun-item-num">{{nowData.availBike}}</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{
|
||
|
|
ggzxcind:0,
|
||
|
|
ggzxclist:[
|
||
|
|
{name:'列表',id:1},
|
||
|
|
{name:'地图',id:2}
|
||
|
|
],
|
||
|
|
isMap: false,
|
||
|
|
latitude: '',
|
||
|
|
longitude: '',
|
||
|
|
markers:[],//列表和图钉数据
|
||
|
|
nowData: {}, //当前选中点
|
||
|
|
token:'',
|
||
|
|
datas: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getToken();
|
||
|
|
myAmapFun = new amapFile.AMapWX({
|
||
|
|
key: 'e40bb317c48b66d558aa77ab126ef8c1'
|
||
|
|
});
|
||
|
|
uni.getLocation({
|
||
|
|
type: 'gcj02',
|
||
|
|
isHighAccuracy:true,
|
||
|
|
complete: (res)=> {
|
||
|
|
console.log(res)
|
||
|
|
this.latitude = res.latitude;
|
||
|
|
this.longitude = res.longitude;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
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) {
|
||
|
|
// console.log(res.data.obj);
|
||
|
|
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(){
|
||
|
|
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_zxc",
|
||
|
|
"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.info;
|
||
|
|
that.getditu();
|
||
|
|
}else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '加载中...',
|
||
|
|
icon:'loading',
|
||
|
|
duration:20000
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
daohang(jwd){
|
||
|
|
var lnglat =jwd.split(",");
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
setLm(id){
|
||
|
|
var that = this;
|
||
|
|
if(id==1){
|
||
|
|
that.ggzxcind=0;
|
||
|
|
}else{
|
||
|
|
that.ggzxcind=1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getditu(){
|
||
|
|
this.isMap = false;
|
||
|
|
var that = this;
|
||
|
|
var pois = [];
|
||
|
|
for (var i = 0; i < that.datas.length; i++) {
|
||
|
|
var tmp = that.datas[i];
|
||
|
|
var lnglat = that.datas[i].jwd.split(",");
|
||
|
|
var p = {
|
||
|
|
id: i,
|
||
|
|
title: tmp.name,
|
||
|
|
address: tmp.address,
|
||
|
|
availBike:tmp.availBike,//余位
|
||
|
|
capacity:tmp.capacity,//总数
|
||
|
|
latitude: Number(lnglat[1]),
|
||
|
|
longitude: Number(lnglat[0]),
|
||
|
|
iconPath: "https://qyly1.csly-travel.com/r/cms/www/m/changshu/icon-dituggzxc.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()
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
},
|
||
|
|
daohan(){
|
||
|
|
uni.openLocation({
|
||
|
|
latitude:this.nowData.latitude,
|
||
|
|
longitude:this.nowData.longitude
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.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>
|