118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<template>
|
|
<view class="search">
|
|
<view class="locat" catchtap="goPagesLink">
|
|
<image class="local_left_icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/User/_assets/location.png"
|
|
mode="" />
|
|
<text class="local_city">{{address}}</text>
|
|
<van-icon name="arrow-down" color="#FF512A " />
|
|
</view>
|
|
<view class='search_bar'>
|
|
<image class="search_icon"
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_36.png" mode="" />
|
|
<input class="search_input" placeholder='输入搜索的社区名称' confirm-type='search' @input="searchInput"
|
|
@confirm="searchInput" :value=" selectKeyWord" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { apiArr } from '../../api/community';
|
|
export default {
|
|
data() {
|
|
return {
|
|
qqmap_key: '',
|
|
address: '定位中',
|
|
selectKeyWord: '',
|
|
shopArea: [],
|
|
lat: '',
|
|
lng: '',
|
|
city: {},
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 网站配置信息
|
|
getHostInfo() {
|
|
// 存在城市信息则取缓存中信息
|
|
if (uni.getStorageSync('city')) {
|
|
this.address = uni.getStorageSync('city');
|
|
return;
|
|
}
|
|
this.qqmap_key = '55NBZ-MUQYW-EAJRL-YIWPA-ZXCR6-4NBPP';
|
|
this.getUserLocation()
|
|
|
|
// uni.request({
|
|
// url: apiArr.get_host_info,
|
|
// method: 'post',
|
|
// header: {
|
|
// 'Content-type': 'application/x-www-form-urlencoded'
|
|
// },
|
|
// dataType: 'json',
|
|
// success: (result) => {
|
|
// console.log(result, 'result');
|
|
// let wxapp = result.data.all.wxapp;
|
|
|
|
// if (wxapp) {
|
|
// this.qqmap_key = wxapp.qqmap_key;
|
|
// this.getUserLocation()
|
|
// }
|
|
// },
|
|
// })
|
|
},
|
|
|
|
getUserLocation() {
|
|
const that = this;
|
|
const { qqmap_key } = this;
|
|
let userlocat = uni.getStorageSync('userlocat');
|
|
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success(res) {
|
|
const latitude = res.latitude
|
|
const longitude = res.longitude
|
|
// const speed = res.speed
|
|
// const accuracy = res.accuracy
|
|
uni.request({
|
|
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' + res.longitude +
|
|
'&key=' + qqmap_key + '&get_poi=0',
|
|
success: function(res) {
|
|
console.log(res, 'rerrrrr');
|
|
var city = res.data.result.address_component.city;
|
|
if (city) {
|
|
that.address = city;
|
|
}
|
|
userlocat = {
|
|
userlat: latitude,
|
|
userlng: longitude,
|
|
city: city,
|
|
};
|
|
that.city = userlocat;
|
|
uni.setStorageSync('userlocat', userlocat);
|
|
uni.setStorageSync('Usercity', city);
|
|
},
|
|
fail(err) {
|
|
console.log(err);
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
searchInput(e) {
|
|
this.selectKeyWord = e.detail.value;
|
|
this.$emit('search', { value: e.detail.value});
|
|
},
|
|
|
|
},
|
|
|
|
mounted () {
|
|
console.log('搜索组件 生命周期');
|
|
this.getHostInfo();
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./search.css');
|
|
</style> |