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.
383 lines
10 KiB
383 lines
10 KiB
<template>
|
|
<view class='app'>
|
|
<!-- 当前选择地址 -->
|
|
<view class="current-address row b-b">
|
|
<view class="left">
|
|
<view class="row">
|
|
<text class="red">[当前]</text>
|
|
<text class="title">{{currentAddress.title}}</text>
|
|
</view>
|
|
<text class="addr clamp">{{currentAddress.address}}</text>
|
|
</view>
|
|
<!-- 搜索图标 -->
|
|
<image
|
|
class="ser-icon"
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAENElEQVRoQ+2a/1XcMAzHlQkKExQmaJmAMgHtBJQJqkzQMsGpExQm6HWCHhMUJihMUJjAfd97znuucc6Sklxf4PwXjzixPtYPS/I19MJG88J4aQf83DW+0/BOw89sByY3aWbea5rmDREdhBAO0v1rmmYVQrgXkbtt7eskwMz8lojOiOgdEeHv2nggolXTNMvFYnFVmzzk+ajAbduehhA4gnrlArwQ0VcRwd+jjlGAo0YXA0FzsDW4iFyMSTwYmJk/E9GXDULdEtGSiOCnqa/uRXOHX78nolc937ghog9j+bkbGMGIiKDVjwVB7+MmLLVmGa0E7gDfL2n7REQAP2i4gCPsz0JAWoOKyKVXKmaGxmExJfDzId+GTF5gwCICp+MHtK3VaG1DmBlmjo1LTR1+PUjTZmBmRgT9lAl8ISKb/LjGV3wezRz+/zqZAOhD78aagOOuf8+kaxFKXUSKl6L7INilml6JyIni9SdT1MBx4V/ImJKvXIlIKWh5ZOl9J2p6lUG7/NkCDJPFEdSNWxHRZFGjwDMzIjhOhW64TFsFHLX7m4hwFHUDwQO7vrXBzFjvOFnQrGUtMMz2W7LQtYjkUXpycGbGmjghunEnIoeWhbXAiJSnyYePxkgCLIJ2c5kZyQeqr26YZKkCR3P+kyyAcu6fMs8juPedgi+bjkQNcG5GW4nMfRsSMzHEk26Y3EsDnEdnJPIw8f82MrN+EJF9rTAaYKR3aV679eicw+TRWkSqHN03qhMLR8G+N63TaqE2j5ndSjADW3azJrj3OTPnbqa2urkC5wUMiglVI1ADnJ/B6t30arD23tQ+7DafmuDe51MD52nlpOVgbRMKidDo5zCyqvSgvxGRo5pgUz0v1ORo56KSUo2qD+MrzIyAkHYd1EFCJYVh0pAjCctogXM/NuWvBp6NU2NaiSZEV6Y+ikhaslaX0gLnZo3iG1WK6iioSqGcUNCuOa9XAUezzrMb82JKruK0QtHwiHaTNeuzAOdahmDmjoMHuqcP7nIrNXDUcu7L+LepAHcCo1OKPnU3XNpVB61UyELHYXBzfNMmMDNaS3ln1L3JJg1HLcO00WbJbwSQkLivWHLoDdc5gxIfM3CERns27xPjEYAh0KB73bZtz0IIKBDyI8fctMs30gVcgXZfaMeuJHrfmzqilyJy7okFLh/O/BnmjWoq7SKmU5bxdxzId59cdcbffxyHEBCQAKltDrqh3RrOwEvRu08JAAeYJkO6jgGrdH3qgh4FOAlmffe6Vgt8cs9cyLLWMcNq3qMBd0QxI0L1AjNNCw4NNO6YcRlZvMIZA3p04IKPd75ZCkTd7z5w/am6pxoKPSmwRqWeOUOgZwkcY0ZezODf1WbAbIH7oGtt5FkDF6Cr/a3ZA0fodWDU5PLPAtgS+HbAlt2a49ydhueoNYvMOw1bdmuOc/8C4xLETHORTG0AAAAASUVORK5CYII="
|
|
@click="navTo('search?city='+curCity)"
|
|
></image>
|
|
</view>
|
|
<!-- 补充详细地址 -->
|
|
<view class="confirm-wrap row">
|
|
<input class="input" placeholder="补充详细地址：楼号、门牌等(选填)" placeholder-class="placeholder" v-model="room" @confirm='submit'></input>
|
|
<view class="btn" @click="submit">确定</view>
|
|
</view>
|
|
<map
|
|
id="map"
|
|
class="map"
|
|
:scale="15"
|
|
:show-location="true"
|
|
:longitude="map.longitude"
|
|
:latitude="map.latitude"
|
|
@regionchange="onRegionchange"
|
|
>
|
|
<cover-image class="map-center-icon" src="https://7478-tx-cloud-mix-mall-d6944c-1302673523.tcb.qcloud.la/5bfbd58b18200d8e16f6b17a02e6ed9.png"></cover-image>
|
|
</map>
|
|
<!-- 结果集 -->
|
|
<scroll-view scroll-y class="addr-list-scroll">
|
|
<view class="addr-list">
|
|
<view class="addr-item b-b row" v-for="(item, index) in list" :key="index" @click="chooseAddress(index)">
|
|
<view class="left">
|
|
<text class="title">{{item.title}}</text>
|
|
<text class="addr">{{item.address}}</text>
|
|
</view>
|
|
<icon type="success" color="#ff536f" size="18" class="icon_circle" v-if='checked === index' />
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/config'
|
|
const QQMapWX = require('./js/qqmap-wx-jssdk.min.js')
|
|
const qqmapsdk = new QQMapWX({
|
|
key: config.qqmapWxKey
|
|
})
|
|
let _mapCtx = null;
|
|
export default {
|
|
data() {
|
|
return {
|
|
curCity: '',
|
|
mapStatus: 1,
|
|
map: {
|
|
longitude: 116.39742,
|
|
latitude: 39.909,
|
|
},
|
|
room: '', //补充地址 门牌号、房间号
|
|
list: [], //地址列表
|
|
checked: 0, //当前选择选择地址下标
|
|
tempAddress: null, //编辑或者搜索到地址时，需要手动将结果添加到poi集
|
|
}
|
|
},
|
|
computed: {
|
|
currentAddress(){
|
|
if(this.list.length === 0){
|
|
return {};
|
|
}
|
|
return this.list[this.checked];
|
|
}
|
|
},
|
|
created() {
|
|
_mapCtx = uni.createMapContext('map');
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.submit();
|
|
},
|
|
async onLoad(options) {
|
|
//编辑地址时参数
|
|
let optionData = options.data;
|
|
let lng, lat;
|
|
if(optionData){
|
|
//编辑地址时
|
|
this.tempAddress = JSON.parse(optionData);
|
|
this.room = this.tempAddress.room;
|
|
lng = this.tempAddress.location.lng;
|
|
lat = this.tempAddress.location.lat;
|
|
}else{
|
|
//没有传坐标时获取用户当前定位
|
|
const userLocation = await this.getLocation();
|
|
lng = +userLocation.longitude;
|
|
lat = +userLocation.latitude;
|
|
}
|
|
this.map = {
|
|
longitude: lng,
|
|
latitude: lat
|
|
}
|
|
this.position = {
|
|
longitude: lng,
|
|
latitude: lat
|
|
}
|
|
this.getAddressList(1)
|
|
},
|
|
methods: {
|
|
//确定选择
|
|
submit() {
|
|
const {currentAddress, room} = this;
|
|
const {ad_info, address, location, title} = currentAddress;
|
|
/* if(!room){
|
|
this.$util.msg('请补充详细地址');
|
|
return;
|
|
} */
|
|
this.$util.prePage().setAddress(Object.assign({}, {
|
|
ad_info, address, location, title,room
|
|
}));
|
|
uni.navigateBack();
|
|
},
|
|
//获取poi列表
|
|
getAddressList(s = 0) {
|
|
//在ios下防止搜索返回时多次加载地址列表的问题
|
|
if(this.isSetTempAddress === 1){
|
|
return;
|
|
}
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: this.position.latitude,
|
|
longitude: this.position.longitude
|
|
},
|
|
get_poi: 1,
|
|
poi_options: "page_size=30;page_index=1",
|
|
success: res=> {
|
|
//有搜索结果时，手动追加到列表顶部
|
|
if(this.tempAddress){
|
|
if(this.tempAddress.title != res.result.pois[0].title){
|
|
res.result.pois.unshift(this.tempAddress);
|
|
}
|
|
this.tempAddress = null;
|
|
this.isSetTempAddress = 1;
|
|
setTimeout(()=>{
|
|
this.isSetTempAddress = 0;
|
|
}, 500)
|
|
}
|
|
if (s) {
|
|
const ad_info = res.result.pois[0].ad_info;
|
|
this.curCity = ad_info.city || '';
|
|
res.result.pois[0].select = 1
|
|
this.list = res.result.pois;
|
|
this.checked = 0;
|
|
} else {
|
|
this.list = res.result.pois;
|
|
}
|
|
},
|
|
fail: err=> {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
//地图区域改变
|
|
onRegionchange(e) {
|
|
clearTimeout(this.timer)
|
|
this.timer = setTimeout(() => {
|
|
//h5 end 安卓 regionchange
|
|
if (e.type === 'end' || e.type === 'regionchange') {
|
|
_mapCtx.getCenterLocation({
|
|
success: res => {
|
|
this.position = {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
}
|
|
if (this.mapStatus == 1) { // 防止地图点击时 进行多次加载
|
|
this.getAddressList(1)
|
|
}
|
|
},
|
|
fail: err=>{
|
|
console.log(err);
|
|
}
|
|
})
|
|
}
|
|
}, 200)
|
|
},
|
|
//地址列表点击
|
|
chooseAddress(index) {
|
|
let list = this.list
|
|
this.map = {
|
|
longitude: list[index].location.lng,
|
|
latitude: list[index].location.lat
|
|
}
|
|
this.checked = index;
|
|
this.mapStatus = 0;
|
|
//防止ios下触发多次加载列表的bug
|
|
clearTimeout(this.mapStatusTimer);
|
|
this.mapStatusTimer = setTimeout(()=>{
|
|
this.mapStatus = 1;
|
|
}, 1000)
|
|
},
|
|
//获取用户定位
|
|
getLocation (){
|
|
return new Promise(resolve=> {
|
|
// #ifndef H5
|
|
uni.getLocation({
|
|
type: 'gcj02',
|
|
success: res=> {
|
|
resolve({
|
|
longitude: res.longitude,
|
|
latitude: res.latitude
|
|
})
|
|
},
|
|
err: err=> {
|
|
console.log(err)
|
|
resolve({
|
|
longitude: 116.39742,
|
|
latitude: 39.909,
|
|
})
|
|
},
|
|
complete(res) {
|
|
console.log(res);
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
//h5的定位没有写，这里直接默认天安门，可以根据项目需求使用对应jssdk获取定位
|
|
resolve({
|
|
longitude: 116.39742,
|
|
latitude: 39.909,
|
|
})
|
|
// #endif
|
|
})
|
|
},
|
|
navTo(url){
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
height: 100%;
|
|
background: #F6F6F6;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.app{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.row{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.b-b{
|
|
position: relative;
|
|
|
|
&:after{
|
|
position: absolute;
|
|
z-index: 3;
|
|
left: 0;
|
|
top: auto;
|
|
bottom: 0;
|
|
right: 0;
|
|
height: 0;
|
|
content: '';
|
|
transform: scaleY(.5);
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
}
|
|
.clamp {
|
|
/* #ifdef APP-PLUS-NVUE */
|
|
lines: 1;
|
|
/* #endif */
|
|
/* #ifndef APP-PLUS-NVUE */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: block;
|
|
/* #endif */
|
|
}
|
|
.current-address{
|
|
height: 120rpx;
|
|
padding: 0 24rpx;
|
|
background-color: #fff;
|
|
|
|
.left{
|
|
width: 634rpx;
|
|
}
|
|
.red{
|
|
flex-shrink: 0;
|
|
margin-right: 6rpx;
|
|
font-size: 28rpx;
|
|
color: $base-color;
|
|
line-height: 36rpx;
|
|
}
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
line-height: 36rpx;
|
|
}
|
|
.addr{
|
|
width: 700rpx;
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
color: #909399;
|
|
line-height: 1.4;
|
|
}
|
|
.ser-icon{
|
|
flex-shrink: 0;
|
|
width: 66rpx;
|
|
height: 66rpx;
|
|
padding: 12rpx 4rpx 12rpx 20rpx;
|
|
}
|
|
}
|
|
.confirm-wrap{
|
|
height: 88rpx;
|
|
padding: 0 24rpx;
|
|
background-color: #fff;
|
|
|
|
.input{
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #303133;
|
|
}
|
|
.btn{
|
|
padding: 0 24rpx;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
line-height: 50rpx;
|
|
background-color: $base-color;
|
|
border-radius: 100rpx;
|
|
}
|
|
}
|
|
.map{
|
|
width: 750rpx;
|
|
height: 700rpx;
|
|
|
|
.map-center-icon{
|
|
position: absolute;
|
|
left: 339rpx;
|
|
top: 264rpx;
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
.addr-list-scroll{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
|
|
.addr-list{
|
|
background-color: #fff;
|
|
}
|
|
.addr-item{
|
|
padding: 24rpx;
|
|
}
|
|
.left{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-right: 50rpx;
|
|
}
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #303133;
|
|
}
|
|
.addr{
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #909399;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
</style>
|