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.

382 lines
8.0 KiB

<template>
<view class="container">
<view class="search-bar">
<view class="search-bar-form">
<view class="navLeft" @tap="gocity">
<view class="localName">{{city}}</view>
<text class="cuIcon-unfold"></text>
</view>
<view class="search-bar-box">
<icon class="icon-search-in-box" type="search" size="16"></icon>
<input disabled="false" class="search-bar-input" placeholder="搜索地址" @click="dingwei" />
</view>
</view>
</view>
<view class="tui-list search-result" v-if="weizhi.names">
<view class="current-city">
<view class="current-left" @tap="saveAddress">
<view class="positionT">{{weizhi.names}}</view>
<view class="positionJ">{{weizhi.dizhi}}</view>
</view>
<view class="current-right" @tap="dingwei">
<image class="dw" mode="widthFix" src="../../static/img/home/dw.png"></image><span>重新定位</span>
</view>
</view>
</view>
</view>
</template>
<script>
import ZhToPinYin from '@/js_sdk/tui-zh-pinyin/tui-zh-pinyin.js';
var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
var qqmapsdk;
// #ifdef MP-WEIXIN
var citySelector = requirePlugin('citySelector');
// #endif
export default {
data() {
return {
inputVal: '', // 搜索框输入的内容
inputShowed: false, // 输入框是否显示
list: [],
latitude: '',
longitude: '',
searchResult: [], // 搜索城市的结果
weizhi: {
names: "",
dizhi: ""
},
city: ''
}
},
onLoad: function(options) {
const that = this;
// #ifdef MP-WEIXIN
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'J5FBZ-XCUKI-UFEG2-5KOJJ-XD4L3-KNFNG'
});
// #endif
if (options.name && options.name != '') {
that.weizhi.names = options.name;
that.weizhi.dizhi = options.dizhi;
}
},
onShow() {
// #ifdef MP-WEIXIN
const item = citySelector.getCity();
if(item){
citySelector.clearCity();
this.$queue.setData('latitude', item.location.latitude);
this.$queue.setData('longitude', item.location.longitude);
this.$queue.setData('city', item.name);
this.$queue.setData('localCampus', item.name);
}
// #endif
var city = this.$queue.getData("city")
if (city != '') {
this.city = city
}
},
methods: {
gocity() {
const key = 'YXDBZ-P5LWW-375RH-OCVNQ-B2HY7-U6FBG'; // 使用在腾讯位置服务申请的key
const referer = '番茄饭团霸王餐'; // 调用插件的app的名称
const hotCitys = ''; // 用户自定义的的热门城市
wx.navigateTo({
url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
})
// uni.navigateTo({
// url: '/pages/index/citys'
// });
},
saveAddress() {
console.log("this.city____:" + this.city)
this.$queue.setData('latitude', this.latitude);
this.$queue.setData('longitude', this.longitude);
this.$queue.setData('city', this.city);
this.$queue.setData('localCampus', this.weizhi.names);
uni.navigateBack();
},
initLocation(latitude, longitude) {
var that = this;
qqmapsdk.reverseGeocoder({
location: latitude + ',' + longitude || '',
success: function(res) { //成功后的回调
if (res.status == 0) {
console.log(res)
let s = res.result.ad_info.city.substring(0, res.result.ad_info.city.length - 1);
that.city = s;
console.log(that.city)
// that.province = res.result.address_component.province;
// that.city = res.result.address_component.city;
// that.district = res.result.address_component.district;
// that.address = that.province + that.city + that.district;
}
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
})
},
dingwei() {
const that = this;
const lat = this.$queue.getData('latitude');
const lon = this.$queue.getData('longitude');
uni.chooseLocation({
latitude: lat,
longitude: lon,
success: function(res) {
console.log(res)
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
if (res.name && res.address) {
// #ifdef H5
that.loAcquire(res.longitude,res.latitude)
// #endif
// #ifdef MP-WEIXIN
that.initLocation(res.latitude, res.longitude);
// #endif
that.latitude = res.latitude;
that.longitude = res.longitude;
that.weizhi.names = res.name;
that.weizhi.dizhi = res.address
} else {
that.$queue.showToast('请选择正确地址信息!');
}
}
});
},
loAcquire(longitude,latitude){
let that = this;
uni.showLoading({
title: '加载中',
mask:true
});
let str = `output=jsonp&key=J5FBZ-XCUKI-UFEG2-5KOJJ-XD4L3-KNFNG&location=${latitude},${longitude}`
this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
uni.hideLoading();
if(res.status == 0){
console.log(res)
let s = res.result.ad_info.city.substring(0, res.result.ad_info.city.length - 1);
that.city = s;
console.log(that.city)
}
})
},
}
}
</script>
<style lang="scss">
page {
height: 100%;
}
.page {
height: 100%;
overflow: hidden;
}
.search-bar {
display: flex;
align-items: center;
padding: 27rpx 30rpx 35rpx;
background-color: #fff;
}
.search-bar-form {
display: flex;
align-items: center;
}
.search-bar-box {
display: flex;
align-items: center;
position: relative;
padding-left: 20rpx;
padding-right: 20rpx;
width: 538rpx;
height: 64rpx;
z-index: 1;
border-radius: 32rpx;
background: #f2f5f7;
margin-left: 20rpx;
}
.search-bar-input {
line-height: normal;
width: 100%;
padding-left: 20rpx;
font-size: 30rpx;
color: #333;
}
.phcolor {
font-size: 30rpx;
}
.icon-clear {
height: 38rpx;
}
.icon-clear .tui-icon-class {
display: block
}
.search-bar-label {
height: 64rpx;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
border-radius: 32rpx;
color: #ccc;
background: #f2f5f7;
}
.icon-search {
position: relative;
height: 26rpx;
margin-right: 20rpx;
font-size: inherit;
}
.search-bar-text {
font-size: 30rpx;
line-height: 32rpx;
}
.cancel-btn {
padding-left: 30rpx;
}
.search-result::before {
display: none;
}
.search-result::after {
display: none;
}
.tui-list-cell {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.tui-list-cell-hover {
background-color: #eee !important;
}
.tui-list-cell-navigate {
width: 100%;
position: relative;
padding: 30rpx 0 30rpx 30rpx;
font-size: 28rpx;
color: #333;
}
.tui-list-cell-navigate::after {
content: '';
position: absolute;
border-bottom: 1rpx solid #eaeef1;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
bottom: 0;
right: 0;
left: 30rpx;
}
.current-city {
padding: 0 30rpx 30rpx;
background: #fff;
position: relative;
}
.current-city1 {
margin-top: 15px;
}
.current-left {
width: 70%;
}
.current-left1 {
width: 100%;
padding: 30upx 0;
border-bottom: 1px solid #efefef;
}
.positionT {
font-size: 15px;
font-weight: 600;
}
.positionJ {
font-size: 12px;
color: #999;
}
.current-right {
position: absolute;
right: 0;
top: 20%;
width: 30%;
text-align: center;
font-size: 12px;
color: #FF4701;
}
.dw {
width: 30upx;
position: relative;
top: 6upx
}
.current-city .title {
padding-top: 30upx;
font-size: 24rpx;
line-height: 24rpx;
color: #999;
}
.localName {
float: left;
}
.bns {
position: fixed;
bottom: 0;
width: 100%;
height: 100upx;
line-height: 100upx;
text-align: center;
background: #fff;
font-size: 36upx;
color: #333;
}
.tj {
width: 40upx;
position: relative;
top: 6upx;
right: 6upx;
}
</style>