|
@@ -1,15 +1,106 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <map
|
|
|
- id="pagemap"
|
|
|
- style="width: 100%; height: 100vh;"
|
|
|
- :show-location="true"
|
|
|
- :latitude="latitude"
|
|
|
- :longitude="longitude"
|
|
|
- @markertap="markertap"
|
|
|
- :markers="covers"></map>
|
|
|
- <!-- <u-empty src="/static/img/empty.png" icon-size="335" text="正在建设中" color="#878787" mode="search"></u-empty> -->
|
|
|
+ <view class="parking">
|
|
|
+ <view class="loading" v-show="loading">
|
|
|
+ <u-loading size="36" mode="flower"></u-loading>
|
|
|
+ </view>
|
|
|
+ <view class="parking-header">
|
|
|
+ <u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange"></u-search>
|
|
|
+ <u-icon v-if="!searchContent" class="icon" name="list" size="44" color="#ffffff"
|
|
|
+ placeholder-color="#B5B5B5" search-icon-color="#B3B3B3"></u-icon>
|
|
|
+ <u-icon v-if="searchContent" class="icon" name="close" size="36" color="#ffffff"
|
|
|
+ placeholder-color="#B5B5B5" search-icon-color="#B3B3B3"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="parking-map">
|
|
|
+ <map
|
|
|
+ id="pagemap"
|
|
|
+ style="width: 100%; height: calc(100vh - 240rpx);"
|
|
|
+ :show-location="true"
|
|
|
+ :latitude="latitude"
|
|
|
+ :longitude="longitude"
|
|
|
+ @markertap="markertap"
|
|
|
+ :enable-traffic="true"
|
|
|
+ :enable-zoom="true"
|
|
|
+ :markers="covers"></map>
|
|
|
+ </view>
|
|
|
|
|
|
+ <!-- <u-empty src="/static/img/empty.png" icon-size="335" text="正在建设中" color="#878787" mode="search"></u-empty> -->
|
|
|
+ <view class="parking-current-address" v-if="searchParkingList.length === 0">
|
|
|
+ <swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :autoplay="false" previous-margin="30rpx" next-margin="30rpx" @change="swiperChange">
|
|
|
+ <swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
|
|
|
+ <view class="swiper-item">
|
|
|
+ <view>{{item.roadName}}</view>
|
|
|
+ <view>{{item.areaName}}</view>
|
|
|
+ <view class="swiper-item-font">
|
|
|
+ <view>
|
|
|
+ <text>余位</text>
|
|
|
+ <text class="yellow-font">{{item.spaceIdle}}</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>包月费用</text>
|
|
|
+ <text class="yellow-font">300元</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text>距离</text>
|
|
|
+ <text>{{item.distance}}m</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="swiper-item-button">
|
|
|
+ <button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
|
|
|
+ <button type="default">办理包月</button>
|
|
|
+ </view>
|
|
|
+ <view @click="$u.route({url: 'pages/chargeStandard/chargeStandard'})">
|
|
|
+ <text>点击查看停车规则</text>
|
|
|
+ <u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="parking-address-list" v-if="searchParkingList.length > 0 && isShowSearchParking">
|
|
|
+ <view class="parking-address-list-item" v-for="(item, index) in searchParkingList" :key="index + 's'" @click="clickSearchParking(item)">
|
|
|
+ <view class="pali-left">
|
|
|
+ <view>{{item.roadName}}</view>
|
|
|
+ <view>{{item.areaName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="pali-right">
|
|
|
+ <image src="../../static/img/distance-icon.png" mode="" @click="navigation(item.latitude, item.longitude)"></image>
|
|
|
+ <view>路线</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-address-details" v-if="isShowParkingDetail">
|
|
|
+ <view class="parking-address-details-title">
|
|
|
+ <view class="padt-header">
|
|
|
+ <view class="padt-header-title">
|
|
|
+ <view>{{parkingDetailData.roleName}}</view>
|
|
|
+ <view>贵阳市云岩区北京东路与贵阳绕城高速交叉…</view>
|
|
|
+ </view>
|
|
|
+ <view class="padt-header-icon">
|
|
|
+ <image src="../../static/img/distance-icon.png" mode=""></image>
|
|
|
+ <view>{{parkingDetailData.distance}}m</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="padt-timeline">服务时间<text>7:00-21:00</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-address-details-numer">
|
|
|
+ <view>
|
|
|
+ <view>120</view>
|
|
|
+ <view>共有车位</view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view>30</view>
|
|
|
+ <view>空闲车位</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-address-details-price">
|
|
|
+ <view>
|
|
|
+ <text>10</text>
|
|
|
+ <text>元/小时 包月费用:300元</text>
|
|
|
+ </view>
|
|
|
+ <view @click="$u.route({url: 'pages/chargeStandard/chargeStandard'})">点击查看停车规则</view>
|
|
|
+ </view>
|
|
|
+ <view class="parking-address-details-button">办理包月</view>
|
|
|
+ </view>
|
|
|
<u-toast ref="uToast" />
|
|
|
</view>
|
|
|
</template>
|
|
@@ -18,68 +109,121 @@
|
|
|
export default{
|
|
|
data(){
|
|
|
return{
|
|
|
+ searchContent: '',
|
|
|
page_map:'',
|
|
|
+ loading: false,
|
|
|
id: 0, //使用 marker点击事件 需要填写id
|
|
|
latitude: 26.64969,
|
|
|
longitude: 106.636453,
|
|
|
- covers: [{
|
|
|
- latitude: 26.597864,
|
|
|
- longitude: 106.72947,
|
|
|
- iconPath: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
|
|
|
- }],
|
|
|
-
|
|
|
+ currentPosition: {
|
|
|
+ latitude: 26.64969,
|
|
|
+ longitude: 106.636453,
|
|
|
+ },
|
|
|
+ covers: [
|
|
|
+ {
|
|
|
+ latitude: 26.597864,
|
|
|
+ longitude: 106.72947,
|
|
|
+ id: '0',
|
|
|
+ iconPath: require('./../../static/img/parking-icon.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ latitude: 26.497864,
|
|
|
+ longitude: 106.72947,
|
|
|
+ id: '1',
|
|
|
+ iconPath: require('./../../static/img/parking-icon.png')
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 轮播选中
|
|
|
+ swiperCurrent: 0,
|
|
|
+ // 附近停车列表
|
|
|
+ nearParkingList: [],
|
|
|
+ // 是否显示停车场列表
|
|
|
+ isShowSearchParking: false,
|
|
|
+ // 搜索停车场列表
|
|
|
+ searchParkingList: [],
|
|
|
+ // 显示单个停车场数据
|
|
|
+ isShowParkingDetail: false,
|
|
|
+ // 单个停车场数据
|
|
|
+ parkingDetailData: {}
|
|
|
}
|
|
|
},
|
|
|
onLoad(){
|
|
|
- this.page_map = uni.createMapContext("pagemap",this);
|
|
|
+ // this.page_map = uni.createMapContext("pagemap", this);
|
|
|
// console.log('page_map',this.page_map);
|
|
|
- this.getNearRoadsl();
|
|
|
+ // this.getNearRoadsl();
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getLocation();
|
|
|
-
|
|
|
},
|
|
|
methods:{
|
|
|
+ /*
|
|
|
+ * 查询输入框发生变化
|
|
|
+ *
|
|
|
+ * */
|
|
|
+ searchInputChange (value) {
|
|
|
+ console.log(value)
|
|
|
+ if (value === '') {
|
|
|
+ this.isShowParkingDetail = false
|
|
|
+ this.isShowSearchParking = false
|
|
|
+ }
|
|
|
+ this.getNearRoadsl()
|
|
|
+ },
|
|
|
getLocation(){
|
|
|
let that = this;
|
|
|
// console.log("请求定位")
|
|
|
uni.getLocation({
|
|
|
type:"gcj02",
|
|
|
success : function (res) {
|
|
|
- // console.log("定位返回信息:", res);
|
|
|
+ console.log("定位返回信息:", res);
|
|
|
that.latitude = res.latitude;
|
|
|
that.longitude = res.longitude;
|
|
|
- // console.log('that.latitude',that.latitude)
|
|
|
- // console.log(res.longitude + "," + res.latitude )
|
|
|
+ that.currentPosition.latitude = res.latitude
|
|
|
+ that.currentPosition.longitude = res.longitude
|
|
|
+ console.log(that.currentPosition)
|
|
|
+ // that.getNearRoadsl()
|
|
|
},
|
|
|
fail: function(res){
|
|
|
console.log("请求错误:", res)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ navigation (lat, lon) {
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: parseFloat(lat),
|
|
|
+ longitude:parseFloat(lon),
|
|
|
+ scale: 18
|
|
|
+ })
|
|
|
+ },
|
|
|
async getNearRoadsl(){
|
|
|
- await this.getLocation();
|
|
|
- this.$u.api.nearRoadsl({latitude:this.latitude,longitude:this.longitude})
|
|
|
+ // await this.getLocation();
|
|
|
+ console.log(this.currentPosition)
|
|
|
+ this.$u.api.nearRoadsl({
|
|
|
+ latitude: this.currentPosition.latitude,
|
|
|
+ longitude:this.currentPosition.longitude,
|
|
|
+ roadName: this.searchContent
|
|
|
+ })
|
|
|
.then(res=>{
|
|
|
- // this.$refs.uToast.show({
|
|
|
- // title: res.msg,
|
|
|
- // type: 'success',
|
|
|
- // });
|
|
|
- // this.covers = res.data;
|
|
|
- // console.log('this.covers',this.covers)
|
|
|
- res.data.forEach(item=>{
|
|
|
+ const nearParkingList = []
|
|
|
+ res.data.forEach((item, index)=>{
|
|
|
if(item.latitude&&item.longitude){
|
|
|
+ nearParkingList.push(item)
|
|
|
let marker = {
|
|
|
latitude: item.latitude,
|
|
|
longitude:item.longitude,
|
|
|
- // id:'0',
|
|
|
- iconPath: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
|
|
|
+ id: '1',
|
|
|
+ iconPath: require('./../../static/img/parking-icon.png')
|
|
|
}
|
|
|
this.covers.push(marker);
|
|
|
}
|
|
|
})
|
|
|
- // this.covers =
|
|
|
- // console.log('getNearRoadsl',res)
|
|
|
+ this.nearParkingList = nearParkingList
|
|
|
+ this.latitude = nearParkingList[0].latitude
|
|
|
+ this.longitude = nearParkingList[0].longitude
|
|
|
+ this.loading = false
|
|
|
+ if (this.searchContent) {
|
|
|
+ this.searchParkingList = nearParkingList
|
|
|
+ this.isShowSearchParking = true
|
|
|
+ }
|
|
|
}).catch(err=>{
|
|
|
this.$refs.uToast.show({
|
|
|
title: err.msg,
|
|
@@ -88,10 +232,38 @@
|
|
|
console.log('getNearRoadsl ',err)
|
|
|
});
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 点击地图上的标记点触发
|
|
|
+ * */
|
|
|
markertap(e){
|
|
|
- console.log('markertap',e)
|
|
|
+ console.log(e)
|
|
|
+ for (let i = 0; i < this.nearParkingList.length; i++) {
|
|
|
+ let item = this.nearParkingList[i]
|
|
|
+ if (item.latitude === e.latitude && item.longitude === e.longitude) {
|
|
|
+ this.swiperCurrent = i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /*
|
|
|
+ *地址发生变化
|
|
|
+ *
|
|
|
+ * */
|
|
|
+ swiperChange (item) {
|
|
|
+ console.log(item.detail)
|
|
|
+ this.latitude = this.nearParkingList[item.detail.current].latitude
|
|
|
+ this.longitude = this.nearParkingList[item.detail.current].longitude
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击单个停车场看详情
|
|
|
+ * item 为选中项参数
|
|
|
+ * */
|
|
|
+ clickSearchParking (item) {
|
|
|
+ this.parkingDetailData = item
|
|
|
+ this.isShowParkingDetail = true
|
|
|
+ this.isShowSearchParking = false
|
|
|
+ this.latitude = item.latitude
|
|
|
+ this.longitude = item.longitude
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</script>
|