|
|
@@ -8,7 +8,7 @@
|
|
|
<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>
|
|
|
+ placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="clearSearchInput"></u-icon>
|
|
|
</view>
|
|
|
<view class="parking-map">
|
|
|
<map
|
|
|
@@ -20,11 +20,11 @@
|
|
|
@markertap="markertap"
|
|
|
:enable-traffic="true"
|
|
|
:enable-zoom="true"
|
|
|
+ :scale="scale"
|
|
|
: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">
|
|
|
+ <view class="parking-current-address" v-if="nearParkingFlag">
|
|
|
<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">
|
|
|
@@ -35,9 +35,9 @@
|
|
|
<text>余位</text>
|
|
|
<text class="yellow-font">{{item.spaceIdle}}</text>
|
|
|
</view>
|
|
|
- <view>
|
|
|
+ <view v-if="item.monthAmount">
|
|
|
<text>包月费用</text>
|
|
|
- <text class="yellow-font">300元</text>
|
|
|
+ <text class="yellow-font">{{item.monthAmount}}元</text>
|
|
|
</view>
|
|
|
<view>
|
|
|
<text>距离</text>
|
|
|
@@ -46,7 +46,7 @@
|
|
|
</view>
|
|
|
<view class="swiper-item-button">
|
|
|
<button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
|
|
|
- <button type="default">办理包月</button>
|
|
|
+ <button type="default" :disabled="!item.monthAmount" :class="{'disabled': !item.monthAmount}" @click="$u.route({url: 'pages/handleMonthly/handleMonthly'})">办理包月</button>
|
|
|
</view>
|
|
|
<view @click="$u.route({url: 'pages/chargeStandard/chargeStandard'})">
|
|
|
<text>点击查看停车规则</text>
|
|
|
@@ -112,9 +112,10 @@
|
|
|
searchContent: '',
|
|
|
page_map:'',
|
|
|
loading: false,
|
|
|
- id: 0, //使用 marker点击事件 需要填写id
|
|
|
+ // id: 0, //使用 marker点击事件 需要填写id
|
|
|
latitude: 26.64969,
|
|
|
longitude: 106.636453,
|
|
|
+ scale: 16,
|
|
|
currentPosition: {
|
|
|
latitude: 26.64969,
|
|
|
longitude: 106.636453,
|
|
|
@@ -133,6 +134,8 @@
|
|
|
// iconPath: require('./../../static/img/parking-icon.png')
|
|
|
// }
|
|
|
],
|
|
|
+ // 附近列表是否显示
|
|
|
+ nearParkingFlag: false,
|
|
|
// 轮播选中
|
|
|
swiperCurrent: 0,
|
|
|
// 附近停车列表
|
|
|
@@ -148,16 +151,12 @@
|
|
|
}
|
|
|
},
|
|
|
onLoad(){
|
|
|
- // this.page_map = uni.createMapContext("pagemap", this);
|
|
|
- // console.log('page_map',this.page_map);
|
|
|
- // this.getNearRoadsl();
|
|
|
- console.log('load')
|
|
|
+ this.getLocation()
|
|
|
},
|
|
|
onShow() {
|
|
|
- console.log('show')
|
|
|
this.isShowSearchParking = false
|
|
|
this.isShowParkingDetail = false
|
|
|
- this.getLocation()
|
|
|
+ // this.getNearRoadsl()
|
|
|
},
|
|
|
methods:{
|
|
|
/*
|
|
|
@@ -165,17 +164,17 @@
|
|
|
*
|
|
|
* */
|
|
|
searchInputChange (value) {
|
|
|
- console.log(value)
|
|
|
+ // 为空时关闭搜索列表
|
|
|
if (value === '') {
|
|
|
- this.isShowParkingDetail = false
|
|
|
this.isShowSearchParking = false
|
|
|
}
|
|
|
+ this.isShowParkingDetail = false
|
|
|
this.getNearRoadsl()
|
|
|
},
|
|
|
getLocation(){
|
|
|
let that = this;
|
|
|
console.log("请求定位")
|
|
|
- // that.loading = true
|
|
|
+ that.loading = true
|
|
|
uni.getLocation({
|
|
|
type:"gcj02",
|
|
|
success : function (res) {
|
|
|
@@ -184,12 +183,14 @@
|
|
|
that.longitude = res.longitude;
|
|
|
that.currentPosition.latitude = res.latitude
|
|
|
that.currentPosition.longitude = res.longitude
|
|
|
- console.log(that.currentPosition)
|
|
|
that.loading = false
|
|
|
that.getNearRoadsl()
|
|
|
},
|
|
|
fail: function(res){
|
|
|
- console.log("请求错误:", res)
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: res,
|
|
|
+ type: 'error',
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
@@ -199,38 +200,60 @@
|
|
|
navigation (lat, lon) {
|
|
|
uni.openLocation({
|
|
|
latitude: parseFloat(lat),
|
|
|
- longitude:parseFloat(lon),
|
|
|
+ longitude: parseFloat(lon),
|
|
|
scale: 18
|
|
|
})
|
|
|
},
|
|
|
- async getNearRoadsl(){
|
|
|
+ clearSearchInput () {
|
|
|
+ this.searchContent = ''
|
|
|
+ this.getNearRoadsl()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * lon,lat 为当前选中点的经纬度
|
|
|
+ * */
|
|
|
+ getNearRoadsl(lon, lat){
|
|
|
// await this.getLocation();
|
|
|
- console.log(this.currentPosition)
|
|
|
this.$u.api.nearRoadsl({
|
|
|
latitude: this.currentPosition.latitude,
|
|
|
longitude:this.currentPosition.longitude,
|
|
|
roadName: this.searchContent
|
|
|
})
|
|
|
.then(res=>{
|
|
|
- const nearParkingList = []
|
|
|
- res.data.forEach((item, index)=>{
|
|
|
+ const nearParkingList = [] // 附近停车场列表
|
|
|
+ this.covers = []
|
|
|
+ res.data.forEach((item, index, arr)=>{
|
|
|
if(item.latitude&&item.longitude){
|
|
|
nearParkingList.push(item)
|
|
|
let marker = {
|
|
|
latitude: item.latitude,
|
|
|
- longitude:item.longitude,
|
|
|
- // id: '1',
|
|
|
- iconPath: require('./../../static/img/parking-icon.png')
|
|
|
+ longitude: item.longitude,
|
|
|
+ id: String(index),
|
|
|
+ iconPath: require('./../../static/img/parking-icon.png'),
|
|
|
+ width: 20,
|
|
|
+ height: 25
|
|
|
+ }
|
|
|
+ if (lon && lat) {
|
|
|
+ if (lon === item.longitude && lat === item.latitude) {
|
|
|
+ marker.width = 40
|
|
|
+ marker.height = 50
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (index === 1) {
|
|
|
+ marker.width = 40
|
|
|
+ marker.height = 50
|
|
|
+ }
|
|
|
}
|
|
|
- this.covers.push(marker);
|
|
|
+ this.covers.push(marker)
|
|
|
}
|
|
|
})
|
|
|
this.nearParkingList = nearParkingList
|
|
|
this.latitude = nearParkingList[0].latitude
|
|
|
this.longitude = nearParkingList[0].longitude
|
|
|
+ this.nearParkingFlag = true
|
|
|
if (this.searchContent) {
|
|
|
this.searchParkingList = nearParkingList
|
|
|
this.isShowSearchParking = true
|
|
|
+ this.nearParkingFlag = false
|
|
|
}
|
|
|
}).catch(err=>{
|
|
|
this.$refs.uToast.show({
|
|
|
@@ -243,22 +266,27 @@
|
|
|
* 点击地图上的标记点触发
|
|
|
* */
|
|
|
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
|
|
|
+ let lon,lat
|
|
|
+ this.covers.forEach((item, index) => {
|
|
|
+ if (e.detail.markerId === item.id) {
|
|
|
+ lon = item.longitude
|
|
|
+ lat = item.latitude
|
|
|
+ this.swiperCurrent = index
|
|
|
}
|
|
|
- }
|
|
|
+ })
|
|
|
+ this.getNearRoadsl(lon, lat)
|
|
|
},
|
|
|
/*
|
|
|
*地址发生变化
|
|
|
*
|
|
|
* */
|
|
|
swiperChange (item) {
|
|
|
- console.log(item.detail)
|
|
|
- this.latitude = this.nearParkingList[item.detail.current].latitude
|
|
|
- this.longitude = this.nearParkingList[item.detail.current].longitude
|
|
|
+ let map = uni.createMapContext('pagemap');
|
|
|
+ map.moveToLocation({
|
|
|
+ longitude: this.nearParkingList[item.detail.current].longitude,
|
|
|
+ latitude: this.nearParkingList[item.detail.current].latitude
|
|
|
+ })
|
|
|
+ this.getNearRoadsl(this.nearParkingList[item.detail.current].longitude, this.nearParkingList[item.detail.current].latitude)
|
|
|
},
|
|
|
/**
|
|
|
* 点击单个停车场看详情
|
|
|
@@ -270,6 +298,8 @@
|
|
|
this.isShowSearchParking = false
|
|
|
this.latitude = item.latitude
|
|
|
this.longitude = item.longitude
|
|
|
+ this.getNearRoadsl(item.longitude, item.latitude)
|
|
|
+ this.scale = 18
|
|
|
}
|
|
|
}
|
|
|
}
|
