353 lines
8.4 KiB
Vue
353 lines
8.4 KiB
Vue
<template>
|
||
<view class="search-address-page">
|
||
<custom-navbar title="搜索地址" :showBack="true" backgroundColor="#FFFFFF"></custom-navbar>
|
||
<view class="search-container">
|
||
<text class="search-container-text" @click="goSelectCity">
|
||
{{ city.name }}
|
||
</text>
|
||
<image src="/static/images/Fill.jpg" mode="aspectFit" class="text-img"></image>
|
||
<!-- <view class="address-header">
|
||
<image src="/static/images/search.png" mode="aspectFit" class="search-icon"></image>
|
||
<text class="search-text">请输入你的服务地址</text>
|
||
</view> -->
|
||
<!-- 搜索 -->
|
||
<view class="hao-search">
|
||
<view class="hao-searchCent">
|
||
<image src="/static/images/search_1.png" class="hao-searchImg"></image>
|
||
<input type="text" v-model="inputKey" @input="searchInput" placeholder="请输入你的服务地址"
|
||
class="hao-searchInput" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="address-list" v-if="searchResults" style="height: 200px;"
|
||
:style="'height: ' + listHeight + 'px'">
|
||
<view class="address-item" v-for="(item, index) in searchResults" :key="index" @click="selectAddress(item)">
|
||
<view class="address-info">
|
||
<text class="address-name">{{item.name}}</text>
|
||
<text class="address-detail">{{item.address}}</text>
|
||
</view>
|
||
<view class="address-distance" v-if="item.distance">
|
||
<text class="distance-text" v-if="item.distance<10000">{{item.distance}}m</text>
|
||
<text class="distance-text" v-else>{{item.distance/1000}}km</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
city: {
|
||
center: '',
|
||
name: '',
|
||
},
|
||
inputKey: '', //搜索关键字
|
||
searchResults: [],
|
||
latitude: 0, // 38.351942
|
||
longitude: 0, // 117.320266
|
||
listHeight: 0,
|
||
}
|
||
},
|
||
onShow() {
|
||
//判断缓存中是否存有城市数据
|
||
let searchCity = uni.getStorageSync('searchCity')
|
||
if (searchCity) {
|
||
this.city = searchCity
|
||
} else {
|
||
this.city = {
|
||
center: '117.330043,38.372266',
|
||
name: '黄骅'
|
||
}
|
||
}
|
||
this.getCurrentLocation()
|
||
|
||
},
|
||
onLoad() {
|
||
// 获取视图高度
|
||
this.pageHeight = uni.getWindowInfo().safeArea.height;
|
||
this.listHeight = parseInt(this.pageHeight) - 44 - 75
|
||
},
|
||
methods: {
|
||
// 选择地址
|
||
selectAddress(item) {
|
||
// 返回上一页并传递选中的地址信息
|
||
const pages = getCurrentPages()
|
||
const prevPage = pages[pages.length - 3]
|
||
prevPage.$vm.isNeedLocation = false;
|
||
prevPage.$vm.updateAddress(item)
|
||
|
||
uni.navigateBack({
|
||
delta: 2 // 返回的页面数，2表示返回上上个页面
|
||
});
|
||
getApp().updateAddress(item);
|
||
|
||
},
|
||
// 将角度转换为弧度
|
||
rad(d) {
|
||
return d * Math.PI / 180;
|
||
},
|
||
//计算两点间距离
|
||
getDistance(lat1, lng1, lat2, lng2, kilometreFlag = false) {
|
||
// 将经纬度从角度转换为弧度
|
||
const radLat1 = this.rad(lat1);
|
||
const radLat2 = this.rad(lat2);
|
||
|
||
// 计算纬度和经度的差值（弧度）
|
||
const a = radLat1 - radLat2;
|
||
const b = this.rad(lng1) - this.rad(lng2);
|
||
|
||
// 使用哈弗辛公式计算两点间的球面距离
|
||
let s = 2 * Math.asin(
|
||
Math.sqrt(
|
||
Math.pow(Math.sin(a / 2), 2) +
|
||
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
|
||
)
|
||
);
|
||
|
||
// 乘以地球半径（6378.137公里）得到距离（公里）
|
||
s = s * 6378.137;
|
||
|
||
// 根据单位标识返回不同单位和精度的结果
|
||
if (kilometreFlag) {
|
||
// 返回公里单位，保留1位小数
|
||
s = s.toFixed(1);
|
||
} else {
|
||
// 返回米单位，四舍五入取整
|
||
s = Math.round(s * 1000).toFixed(0);
|
||
}
|
||
return s;
|
||
},
|
||
//跳转城市选择页
|
||
goSelectCity() {
|
||
uni.navigateTo({
|
||
url: '/pages/address/selectCity'
|
||
})
|
||
},
|
||
// 获取当前位置
|
||
async getCurrentLocation() {
|
||
let that = this;
|
||
let longitude = '';
|
||
let latitude = '';
|
||
// const locationRes = await that.getLocation();
|
||
|
||
let searchCity = uni.getStorageSync('searchCity')
|
||
if (searchCity) {
|
||
let locationRes = searchCity.center.split(','); //调用默认地址
|
||
that.longitude = locationRes[0];
|
||
that.latitude = locationRes[1];
|
||
} else {
|
||
let locationRes = getApp().globalData.addressRes; //调用默认地址
|
||
that.longitude = locationRes.longitude;
|
||
that.latitude = locationRes.latitude;
|
||
}
|
||
|
||
that.markers = [{
|
||
latitude: that.latitude,
|
||
longitude: that.longitude,
|
||
iconPath: '/static/images/position_icon_3x.png'
|
||
}]
|
||
// 请求附近地址
|
||
// types: '060000|070000|080000|090000|100000|120000|170000'
|
||
that.getPlaceAround();
|
||
},
|
||
getPlaceAround() {
|
||
let that = this;
|
||
let data;
|
||
if (!that.searchKeyword) {
|
||
data = {
|
||
key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
|
||
location: `${that.longitude},${that.latitude}`,
|
||
page: 1,
|
||
offset: 20
|
||
}
|
||
} else {
|
||
data = {
|
||
key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
|
||
location: `${that.longitude},${that.latitude}`,
|
||
keywords: that.searchKeyword,
|
||
page: 1,
|
||
offset: 20
|
||
}
|
||
}
|
||
return new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: 'https://restapi.amap.com/v5/place/around',
|
||
method: "GET",
|
||
data: data,
|
||
success(res) {
|
||
console.log(res)
|
||
that.searchResults = res.data.pois;
|
||
}
|
||
})
|
||
})
|
||
},
|
||
//搜索输入
|
||
searchInput() {
|
||
if (!this.inputKey) {
|
||
this.getCurrentLocation()
|
||
return
|
||
}
|
||
let that = this;
|
||
let data = {
|
||
key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
|
||
keywords: this.inputKey,
|
||
region: this.city.name,
|
||
page: 1,
|
||
offset: 20
|
||
}
|
||
return new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: 'https://restapi.amap.com/v5/place/text',
|
||
method: "GET",
|
||
data: data,
|
||
success(res) {
|
||
let pois = res.data.pois
|
||
let cityLt = that.city.center.split(',')
|
||
pois.forEach(item => {
|
||
let loc = item.location.split(',')
|
||
item.distance = that.getDistance(cityLt[1], cityLt[0], loc[1], loc[
|
||
0])
|
||
})
|
||
that.searchResults = pois;
|
||
}
|
||
})
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
::v-deep .uni-input-placeholder{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #CCCCCC;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.search-address-page {
|
||
flex: 1;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.search-container {
|
||
// background-color: #FFFFFF;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding: 32rpx 30rpx 20rpx 30rpx;
|
||
|
||
.search-container-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.text-img {
|
||
width: 20rpx;
|
||
height: 12rpx;
|
||
margin-left: 8rpx;
|
||
margin-right: 26rpx;
|
||
}
|
||
|
||
/* 搜索 */
|
||
.hao-search {
|
||
// width: 100%;
|
||
flex: 1;
|
||
height: 68rpx;
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
|
||
.hao-searchCent {
|
||
flex: 1;
|
||
height: 68rpx;
|
||
background: #FFFFFF;
|
||
border: 2rpx solid #E8101E;
|
||
background-color: #fafafa;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 68rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.hao-searchImg {
|
||
width: 29rpx;
|
||
height: 32rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.hao-searchInput {
|
||
flex: 1;
|
||
height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.address-list {
|
||
box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.address-item {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx;
|
||
border-bottom: 1rpx solid #EEEEEE;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.address-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
margin-right: 24rpx;
|
||
|
||
&__user {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
}
|
||
|
||
.address-name {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.address-detail {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 34rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.distance-text {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
</style> |