<template>
<view style="background-color: #f5f5f5">
<!-- 头部开始 -->
<view
style="
position: fixed;
left: -5rpx;
right: -5rpx;
z-index: 99;
top: -5rpx;
width: 101vw;
"
>
<view style="position: relative">
<view :style="{ height: rpxNavStatusBarHeight + 5 + 'rpx' }">
<text
style="
position: absolute;
bottom: 0;
line-height: 40px;
width: 100%;
z-index: 50;
color: rgb(59, 59, 59);
"
class="text_c font-size-14"
>地图选点</text
>
<view @click="goBack()" class="back_icon">
<i v-if="pagesLength > 1" class="iconfont"></i>
<i v-else class="iconfont"></i>
</view>
</view>
</view>
</view>
<!-- 头部结束 -->
<!-- 确定按钮 -->
<view @click.stop.prevent="submit" class="btn-sub" type="success"
>确定位置</view
>
<!-- 底部内容部分 -->
<view
:style="{
'padding-top': rpxNavStatusBarHeight + 'rpx',
}"
>
<view
style="width: 100%; position: relative"
:style="{ height: 'calc( 100vh - ' + rpxNavStatusBarHeight + 'rpx)' }"
><view
style="width: 100%; height: calc(100% - 300px); position: relative"
>
<map
id="tmap"
:scale="scale"
style="width: 100%; height: 100%"
:latitude="latitude"
:longitude="longitude"
:covers="covers"
show-location
@regionchange="regionDidChange"
></map>
<image
src="/static/images/datouzhen.png"
style="
width: 100rpx;
height: 100rpx;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
margin-top: -100rpx;
margin-left: -50rpx;
"
/>
</view>
<view class="bot">
<view class="inp1">
<image
src="http://image.qiniu.fangdadi.com/wxapp/aYuYue/sousuo.png"
/><input
type="text"
placeholder="搜索地点"
:value="searchKey"
@input="search"
style="flex: 1"
/>
<image
@click.stop.prevent="clearVal"
v-show="searchKey"
src="http://image.qiniu.fangdadi.com/wxapp/aYuYue/shanchu.png"
/>
</view>
<view style="margin-top: 20rpx">
<view
v-for="(item, index) in list"
:key="item.id"
@click.stop.prevent="changPoint(item, index)"
class="list-item"
:style="{ background: index == indexPoint ? '#f7f7f7' : 'white' }"
>
<view class="list-tit">{{ item.title }}</view>
<view style="color: gray" class="list-add">{{
item.address
}}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 底部内容结束 -->
</view>
</template>
<script>
import { suggestion, geocoderPoi, getDistance } from "../../api/booking";
var QQMapWX = require("static/qqmap-wx-jssdk.js");
var self;
var qqmapsdk = new QQMapWX({
key: "123",
});
export default {
name: "Rent",
data() {
return {
pagesLength: 0,
searchKey: "",
rpxNavStatusBarHeight: "",
latitude: 0,
longitude: 0,
scale: 16,
list: [],
newhouselng: 0,
newhouseId: 0,
newhouselat: 0,
indexPoint: 0,
areaCode: 0,
isSearch: false,
lng: 0,
lat: 0,
};
},
created() {
this.key = getApp().globalData.TXMap;
},
onLoad(option) {
self = this;
self.mapCtx = wx.createMapContext("tmap");
self.getAuthorizeInfo();
qqmapsdk.key = getApp().globalData.TXMap;
this.winWidth = wx.getSystemInfoSync().windowWidth;
this.divWidth = this.winWidth * 0.96 * 0.48;
let systemInfo = wx.getSystemInfoSync();
let clientWidth = systemInfo.windowWidth;
var changeHeight = 750 / clientWidth;
let statusBarHeight = Number(systemInfo.statusBarHeight);
let menu = wx.getMenuButtonBoundingClientRect();
let navStatusBarHeight =
statusBarHeight + (menu.height + (menu.top - statusBarHeight) * 2);
this.rpxNavStatusBarHeight = navStatusBarHeight * changeHeight;
if (option) {
this.newhouseId = option.newhouseId;
this.newhouselng = option.newhouselng;
this.newhouselat = option.newhouselat;
this.areaCode = option.areaCode;
}
},
onShow() {
const pages = getCurrentPages();
this.pagesLength = pages.length;
},
methods: {
getLocationInfo() {
let that = this;
uni.getLocation({
type: "gcj02",
success(res) {
that.latitude = res.latitude;
that.longitude = res.longitude;
that.lng = res.longitude;
that.lat = res.latitude;
let data = { lat: res.latitude, lng: res.longitude };
geocoderPoi({ data }).then((res2) => {
that.list = [];
that.list = [...res2.data];
});
},
});
},
changPoint(item, index) {
this.indexPoint = index;
this.latitude = item.location.lat;
this.longitude = item.location.lng;
this.lat = item.location.lat;
this.lng = item.location.lng;
self.mapCtx.moveToLocation({
longitude: item.location.lng,
latitude: item.location.lat,
success: (res) => {
const time = setInterval(() => {
this.scale = 16;
clearInterval(time);
}, 300);
},
});
},
regionDidChange(e) {
this.getCenterLocation(e);
},
getCenterLocation: function (e) {
let that = this;
if (e.type == "end" && e.causedBy == "drag") {
let data = {
lat: e.detail.centerLocation.latitude,
lng: e.detail.centerLocation.longitude,
};
that.lat = e.detail.centerLocation.latitude;
that.lng = e.detail.centerLocation.longitude;
geocoderPoi({ data }).then((res2) => {
that.indexPoint = 0;
that.list = [];
that.list = [...res2.data];
that.num = 1;
});
}
},
search: function (e) {
if (this.isSearch) {
return;
}
let that = this;
self.searchKey = e.detail.value;
let data = {
keyword: e.detail.value,
areaCode: this.areaCode.split(",")[0],
};
this.isSearch = true;
suggestion({ data }).then((res2) => {
that.indexPoint = 0;
that.list = [];
that.list = [...res2.data.data];
that.latitude = that.list[0].location.lat;
that.longitude = that.list[0].location.lng;
that.lat = that.list[0].location.lat;
that.lng = that.list[0].location.lng;
this.isSearch = false;
});
},
clearVal: function (item) {
this.searchKey = "";
this.list = [];
},
getAuthorizeInfo() {
uni.authorize({
scope: "scope.userLocation",
success() {
self.getLocationInfo();
},
fail() {
self.openConfirm();
console.log("你拒绝了授权，无法获得周边信息");
},
});
},
openConfirm() {
uni.showModal({
title: "请求授权当前位置",
content: "需要获取您的地理位置，请确认授权",
success: (res) => {
if (res.confirm) {
uni.openSetting();
} else if (res.cancel) {
uni.showToast({
title: "你拒绝了授权，无法获得周边信息",
icon: "none",
duration: 1000,
});
}
},
});
},
async submit() {
let data = {
lng: this.lng,
lat: this.lat,
newhouseLng: this.newhouselng,
newhouseLat: this.newhouselat,
};
let res = await getDistance({ data });
if (res) {
if (res.msg == "yes") {
let userinfo = this.list[this.indexPoint];
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.$vm.userinfo = userinfo;
prevPage.setData({
userinfo,
});
uni.navigateBack();
} else {
uni.showToast({
title: res.data,
icon: "none",
duration: 2000,
});
}
}
},
Cancel: function () {},
goBack() {
if (this.pagesLength > 1) {
uni.navigateBack({
delta: 1,
});
} else {
uni.switchTab({
url: "/pages/home/home",
});
}
},
},
};
</script>
<style lang="scss" scoped>
.bot {
width: 100%;
height: 300px;
background: white;
z-index: 10000;
position: absolute;
padding: 20rpx;
bottom: 0;
left: 0;
border-radius: 40rpx 40rpx 0 0;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.inp1 {
padding: 0 20rpx;
width: 100%;
line-height: 80rpx;
display: flex;
height: 80rpx;
border-radius: 10rpx;
align-items: center;
box-sizing: border-box;
background: #f5f5f5;
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
}
}
.list-item {
width: 100%;
border-bottom: 1px solid #e9e9e9;
padding: 6rpx 10rpx;
box-sizing: border-box;
.list-tit {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-add {
color: gray;
overflow: hidden;
font-size: 24rpx;
margin: 10rpx 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.btn-sub {
position: absolute;
right: 20px;
top: 100px;
z-index: 1;
background: #67e376;
color: white;
width: 160rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 30rpx;
text-align: center;
border-radius: 5px;
}
</style>
