|
|
|
|
@ -92,7 +92,7 @@
|
|
|
|
|
</u-row> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="map-container" :style="{display:(tabCheck === 'room'?'flex':'none')}"> |
|
|
|
|
<view class="map-container" :style="{display:(tabCheck === 'room'?'flex':'none')}" v-if="(tabCheck === 'room')"> |
|
|
|
|
<view class="top-map" :style="{marginTop:size.height+'px'}"> |
|
|
|
|
<view id="map" class="map"> |
|
|
|
|
<map id="shopMap" style="width:100%;height:1000rpx;" class="map" :show-location="true" :latitude="lat" |
|
|
|
|
@ -126,7 +126,7 @@
|
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="room-container" :style="{display:(tabCheck === 'room'?'block':'none')}"> |
|
|
|
|
<view class="room-container" :style="{display:(tabCheck === 'room'?'block':'none')}" v-if="(tabCheck === 'room')"> |
|
|
|
|
<uv-waterfall ref="waterfall" |
|
|
|
|
v-model="listWater" |
|
|
|
|
left-gap="26rpx" |
|
|
|
|
@ -220,7 +220,7 @@
|
|
|
|
|
</uv-waterfall> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
<view class="room-container item-container" :style="{display:(tabCheck === 'item'?'block':'none')}"> |
|
|
|
|
<view class="room-container item-container" :style="{display:(tabCheck === 'item'?'block':'none')}" v-if="(tabCheck === 'item')"> |
|
|
|
|
<uv-waterfall ref="waterfallItem" |
|
|
|
|
v-model="listWaterItem" |
|
|
|
|
left-gap="26rpx" |
|
|
|
|
@ -293,9 +293,9 @@
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<u-loadmore :custom-style="{display:(tabCheck === 'room'?'flex':'none')}" :status="status" fontSize="28" |
|
|
|
|
marginBottom="30" marginTop="30" @loadmore="getRoomList()"/> |
|
|
|
|
marginBottom="30" marginTop="30" @loadmore="getRoomList()" v-if="(tabCheck === 'room')"/> |
|
|
|
|
<u-loadmore :custom-style="{display:(tabCheck === 'item'?'flex':'none')}" :status="statusItem" fontSize="28" |
|
|
|
|
marginBottom="30" marginTop="30" @loadmore="getItemList()"/> |
|
|
|
|
marginBottom="30" marginTop="30" @loadmore="getItemList()" v-if="(tabCheck === 'item')"/> |
|
|
|
|
<uv-picker |
|
|
|
|
ref="streetPicker" |
|
|
|
|
:show="streetShow" |
|
|
|
|
@ -361,6 +361,7 @@
|
|
|
|
|
import api from "@/utils/functions.js"; |
|
|
|
|
import {goodsList, goodsType, roomList, streetList} from "@/api/shop"; |
|
|
|
|
import MzCard from "@/components/MzCard/index.vue"; |
|
|
|
|
import {imghost} from "@/config/host"; |
|
|
|
|
|
|
|
|
|
const img = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png'; |
|
|
|
|
export default { |
|
|
|
|
@ -433,6 +434,17 @@ export default {
|
|
|
|
|
lat: 23.099994, |
|
|
|
|
mapContext: {}, |
|
|
|
|
popMapShow: false, |
|
|
|
|
isGetLocal:false, |
|
|
|
|
roomCoordinate:[ |
|
|
|
|
{ |
|
|
|
|
latitude:30.810122, |
|
|
|
|
longitude:104.194078, |
|
|
|
|
},{ |
|
|
|
|
latitude:30.57447, |
|
|
|
|
longitude:103.92377, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
mapIcon:imghost+'/static/image/map-icon.png' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad(option) { |
|
|
|
|
@ -447,7 +459,6 @@ export default {
|
|
|
|
|
this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
showStreetPicker(){ |
|
|
|
|
this.$refs.streetPicker.open(); |
|
|
|
|
@ -456,17 +467,27 @@ export default {
|
|
|
|
|
this.$refs.rentPicker.open(); |
|
|
|
|
}, |
|
|
|
|
getLocal() { |
|
|
|
|
let that = this; |
|
|
|
|
uni.getLocation({ |
|
|
|
|
type: 'wgs84', |
|
|
|
|
success: function (res) { |
|
|
|
|
this.lng = res.longitude; |
|
|
|
|
this.lat = res.latitude; |
|
|
|
|
} |
|
|
|
|
that.isGetLocal = true; |
|
|
|
|
that.lng = res.longitude; |
|
|
|
|
that.lat = res.latitude; |
|
|
|
|
that.initMap(); |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
tabsChange(e) { |
|
|
|
|
console.log(e) |
|
|
|
|
this.tabCheck = e.id |
|
|
|
|
if(this.tabCheck === 'room'){ |
|
|
|
|
this.getRoomList(true); |
|
|
|
|
}else{ |
|
|
|
|
this.getItemList(true); |
|
|
|
|
} |
|
|
|
|
if(this.tabCheck === 'room' && !this.isGetLocal){ |
|
|
|
|
this.getLocal(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
getRoomList(clear) { |
|
|
|
|
if (clear) { |
|
|
|
|
@ -476,11 +497,17 @@ export default {
|
|
|
|
|
this.$refs.waterfall.clear(); |
|
|
|
|
this.list1 = []; |
|
|
|
|
this.list2 = []; |
|
|
|
|
this.roomCoordinate = []; |
|
|
|
|
} |
|
|
|
|
if (this.status === 'nomore') { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
roomList(this.pages).then(res => { |
|
|
|
|
res.data.forEach(item => { |
|
|
|
|
// const {lat,lng} = item.coordinate.split(','); |
|
|
|
|
// this.roomCoordinate.push({latitude:lat,longitude:lng}); |
|
|
|
|
}); |
|
|
|
|
this.addMarkers(); |
|
|
|
|
this.listWater.push.apply(this.listWater, res.data); |
|
|
|
|
if (res.data.length === 0) { |
|
|
|
|
this.status = 'nomore' |
|
|
|
|
@ -558,23 +585,34 @@ export default {
|
|
|
|
|
url: url |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
addMarkers() { |
|
|
|
|
initMap(){ |
|
|
|
|
console.log(this.lat,this.lng) |
|
|
|
|
this.mapContext = uni.createMapContext("shopMap", this); |
|
|
|
|
|
|
|
|
|
const positions = [ |
|
|
|
|
{ |
|
|
|
|
latitude: 23.099994, |
|
|
|
|
longitude: 113.324520, |
|
|
|
|
}, { |
|
|
|
|
latitude: 23.099994, |
|
|
|
|
longitude: 113.322520, |
|
|
|
|
}, { |
|
|
|
|
latitude: 23.099994, |
|
|
|
|
longitude: 113.326520, |
|
|
|
|
}, { |
|
|
|
|
latitude: 23.096994, |
|
|
|
|
longitude: 113.329520, |
|
|
|
|
// // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {}) |
|
|
|
|
|
|
|
|
|
this.mapContext.initMarkerCluster({ |
|
|
|
|
enableDefaultStyle: false, |
|
|
|
|
zoomOnClick: true, |
|
|
|
|
gridSize: 60, |
|
|
|
|
complete(res) { |
|
|
|
|
console.log('initMarkerCluster', res) |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.mapContext.on("markerClusterCreate", (e) => { |
|
|
|
|
console.log("markerClusterCreate", e); |
|
|
|
|
}); |
|
|
|
|
this.mapContext.moveToLocation({ |
|
|
|
|
latitude: this.lat, |
|
|
|
|
longitude: this.lng, |
|
|
|
|
}) |
|
|
|
|
this.addMarkers(); |
|
|
|
|
this.afterCreateMap(); |
|
|
|
|
}, |
|
|
|
|
addMarkers() { |
|
|
|
|
let that = this; |
|
|
|
|
let positions = this.roomCoordinate; |
|
|
|
|
|
|
|
|
|
const markers = [] |
|
|
|
|
|
|
|
|
|
@ -583,44 +621,46 @@ export default {
|
|
|
|
|
markers.push( |
|
|
|
|
Object.assign({}, { |
|
|
|
|
id: i + 1, |
|
|
|
|
iconPath: img, |
|
|
|
|
iconPath: that.mapIcon, |
|
|
|
|
width: 50, |
|
|
|
|
height: 50, |
|
|
|
|
joinCluster: true, // 指定了该参数才会参与聚合 |
|
|
|
|
joinCluster: false, // 指定了该参数才会参与聚合 |
|
|
|
|
|
|
|
|
|
}, p) |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
this.mapContext.addMarkers({ |
|
|
|
|
that.mapContext.addMarkers({ |
|
|
|
|
markers, |
|
|
|
|
clear: false, |
|
|
|
|
complete(res) { |
|
|
|
|
console.log('addMarkers', res) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
this.mapContext.addCustomLayer({ |
|
|
|
|
layerId: 'popMap', |
|
|
|
|
success: (res => { |
|
|
|
|
console.log(res) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
markerTap(e) { |
|
|
|
|
// let that = this |
|
|
|
|
// var id = e.markerId; |
|
|
|
|
let that = this |
|
|
|
|
var id = e.markerId; |
|
|
|
|
let coordinate = that.roomCoordinate[id-1]; |
|
|
|
|
console.log(id) |
|
|
|
|
console.log(e.markerId) |
|
|
|
|
console.log(that.roomCoordinate) |
|
|
|
|
console.log(that.roomCoordinate[id-1]) |
|
|
|
|
//页面数据逻辑 |
|
|
|
|
//根据项目调用请求方法或uni.request方法 |
|
|
|
|
//弹框控制与<uni-popup ref="popup" type="bottom">对应 |
|
|
|
|
// this.$refs.popup.open('bottom') |
|
|
|
|
this.popMapShow = true; |
|
|
|
|
this.mapContext.moveToLocation({ |
|
|
|
|
latitude: 23.099994, |
|
|
|
|
longitude: 113.324520, |
|
|
|
|
latitude: coordinate.latitude, |
|
|
|
|
longitude: coordinate.longitude, |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
mapTap() { |
|
|
|
|
this.popMapShow = false; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
afterCreateMap(){ |
|
|
|
|
this.getRoomList(); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
onPageScroll(res) { |
|
|
|
|
|
|
|
|
|
@ -629,28 +669,13 @@ export default {
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.getRoomList(); |
|
|
|
|
|
|
|
|
|
this.getItemList(); |
|
|
|
|
this.getStreet(); |
|
|
|
|
this.getGoodsType(); |
|
|
|
|
this.getLocal(); |
|
|
|
|
this.mapContext = uni.createMapContext("shopMap", this); |
|
|
|
|
|
|
|
|
|
// // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {}) |
|
|
|
|
|
|
|
|
|
this.mapContext.initMarkerCluster({ |
|
|
|
|
enableDefaultStyle: false, |
|
|
|
|
zoomOnClick: true, |
|
|
|
|
gridSize: 60, |
|
|
|
|
complete(res) { |
|
|
|
|
console.log('initMarkerCluster', res) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.mapContext.on("markerClusterCreate", (e) => { |
|
|
|
|
console.log("markerClusterCreate", e); |
|
|
|
|
}); |
|
|
|
|
this.addMarkers(); |
|
|
|
|
if(this.tabCheck === 'room'){ |
|
|
|
|
this.getLocal(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
