<template>
|
<view class="content">
|
<u-navbar height="44" :is-back="false" title="获取地址" title-color="#fff" :background="{background: '#103289'}">
|
<u-button class="slot-wrap" type="primary" size="mini" @click="returnPage">确定</u-button>
|
</u-navbar>
|
|
<map id="SignLocationMap" style="position: absolute; left: 0; width: 100%; z-index: 99;"
|
:style="{height: screenHeight + 'px'}" @regionchange="regionChange" :latitude="latitude"
|
:longitude="longitude" :scale="scale">
|
|
<cover-view class="dingwBut">
|
<cover-image class="location-log" src="../../static/img/location.png">
|
</cover-image>
|
</cover-view>
|
|
</map>
|
|
<scroll-view id="LocationListBox" class="location-list-box" scroll-y="true">
|
<u-loading color="#103289" class="load" :show="loadShow" size="54"></u-loading>
|
<view class="location-list-item" v-for="(item, index) in locationList" :key="index"
|
v-show="locationList.length > 0"
|
@click="selectLocation(item)">
|
<view class="item-box">
|
<view class="item-name">{{item.name}}</view>
|
<view class="item-address">{{item.address}}</view>
|
</view>
|
<view class="slection-icon">
|
<u-icon :name="item.iconName" color="#103289" size="44"></u-icon>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import util from "../../static/WSCoordinate.js"
|
|
export default {
|
data() {
|
return {
|
loadShow: true,
|
// 位置列表
|
locationList: [],
|
|
screenHeight: 0,
|
mapLocationName: '',
|
mapLocationLatitude: '',
|
mapLocationLongitude: '',
|
|
regionID: '',
|
|
longitude: 115.84414205551147,
|
latitude: 28.678983439095823,
|
scale: 18 //缩放级别
|
}
|
},
|
onLoad(options) {
|
var that = this
|
if (options.lng != '' && options.lat != '') {
|
that.longitude = Number(options.lng)
|
that.latitude = Number(options.lat)
|
} else {
|
uni.getLocation({
|
type: 'gcj02',
|
isHighAccuracy: true,
|
success: function(res) {
|
that.longitude = Number(res.longitude)
|
that.latitude = Number(res.latitude)
|
}
|
});
|
}
|
},
|
onReady() {
|
var that = this
|
|
uni.getSystemInfo({
|
success(res) {
|
let {
|
windowWidth,
|
windowHeight,
|
safeArea
|
} = res;
|
const query = uni.createSelectorQuery().in(that);
|
|
query
|
.select('#LocationListBox')
|
.boundingClientRect(data => {
|
|
that.screenHeight = (safeArea.bottom - safeArea.top - data.height - 44);
|
|
})
|
|
.exec();
|
}
|
});
|
|
},
|
methods: {
|
// 选择位置
|
selectLocation(param) {
|
this.locationList.forEach((item) => {
|
item.iconName = ''
|
})
|
param.iconName = 'checkbox-mark'
|
|
this.parentPageParam(param)
|
},
|
|
parentPageParam(param) {
|
this.mapLocationName = param.address
|
this.mapLocationLongitude = param.point.longitude
|
this.mapLocationLatitude = param.point.latitude
|
},
|
|
regionChange() { // 移动地图后重新获取门店
|
this.loadShow = true
|
this.locationList = []
|
var that = this
|
uni.createMapContext('SignLocationMap', this).getCenterLocation({
|
success: res => {
|
that.getLocationInfor(res.longitude, res.latitude)
|
},
|
fail: res => {
|
uni.showModal({
|
content: '获取位置失败',
|
showCancel: false
|
})
|
}
|
})
|
},
|
|
getLocationInfor(longitude, latitude) {
|
var that = this
|
var point = new plus.maps.Point(longitude, latitude);
|
var map = plus.maps.getMapById('SignLocationMap');
|
var searchObj = new plus.maps.Search(map);
|
|
searchObj.onPoiSearchComplete = function(state, result) {
|
if (state == 0) {
|
if (result.currentNumber <= 0) {
|
that.locationList = []
|
} else {
|
result.poiList.forEach((item) => {
|
item.iconName = ''
|
})
|
result.poiList[0].iconName = 'checkbox-mark'
|
that.parentPageParam(result.poiList[0])
|
that.locationList = result.poiList
|
that.loadShow = false
|
that.getRegionId()
|
}
|
} else {
|
alert("检索失败");
|
}
|
}
|
searchObj.poiSearchNearBy(' ', point, 1000)
|
},
|
|
returnPage() {
|
var that = this
|
uni.$emit('getLocation', {
|
mapLocationName: that.mapLocationName,
|
regionID: that.regionID,
|
mapLocationLongitude: that.mapLocationLongitude,
|
mapLocationLatitude: that.mapLocationLatitude
|
});
|
//关闭当前窗口
|
uni.navigateBack({});
|
},
|
|
getRegionId() {
|
var that = this
|
var position = util.transformFromGCJToWGS(that.mapLocationLatitude, that.mapLocationLongitude)
|
uni.request({
|
url: that.$store.state.piAPI + '/jurisdiction/isOnArea',
|
method: 'get',
|
data: {
|
jd: position.longitude,
|
wd: position.latitude
|
},
|
success: (res) => {
|
that.regionID = res.data.data[0].id
|
}
|
});
|
}
|
|
},
|
watch: {
|
|
|
}
|
};
|
</script>
|
</script>
|
|
<style lang="scss" scoped>
|
.slot-wrap {
|
position: absolute;
|
top: 0;
|
left: auto;
|
right: 10px;
|
bottom: 0;
|
margin: auto;
|
color: #fff;
|
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
/* flex: 1; */
|
/* 如果您想让slot内容与导航栏左右有空隙 */
|
/* padding: 0 30rpx; */
|
}
|
|
.dingwBut {
|
width: 48px;
|
height: 48px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
z-index: 9999;
|
transform: translateY(-22px);
|
}
|
|
.location-list-box {
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
|
width: 100%;
|
height: 40%;
|
|
border-radius: 5px;
|
z-index: 99999;
|
|
.load {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
}
|
|
.location-list-item {
|
display: flex;
|
padding: 4px 6px;
|
height: 60px;
|
align-items: center;
|
|
.item-box {
|
padding: 0 4px;
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
|
.item-name {
|
font-size: 14px;
|
flex: 1;
|
}
|
|
.item-address {
|
height: 20px;
|
font-size: 0.675rem;
|
color: #bebebe !important;
|
}
|
}
|
|
.slection-icon {
|
width: 36px;
|
}
|
}
|
}
|
</style>
|
