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.
381 lines
8.0 KiB
381 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>
|
|
|