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.
363 lines
7.3 KiB
363 lines
7.3 KiB
3 years ago
|
<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>
|
||
|
|
<veiw class="current-right" @tap="dingwei">
|
||
|
|
<image class="dw" mode="widthFix" src="../../static/img/home/dw.png"></image><span>重新定位</span>
|
||
|
|
</veiw>
|
||
|
|
</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;
|
||
|
|
var citySelector = requirePlugin('citySelector');
|
||
|
|
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: 'XOWBZ-CN5KJ-YKWF6-K24NB-JFRFF-CQBO4'
|
||
|
|
});
|
||
|
|
// #endif
|
||
|
|
if (options.name && options.name != '') {
|
||
|
|
that.weizhi.names = options.name;
|
||
|
|
that.weizhi.dizhi = options.dizhi;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
var city = this.$queue.getData("city")
|
||
|
|
if (city != '') {
|
||
|
|
this.city = city
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
gocity() {
|
||
|
|
const key = 'XOWBZ-CN5KJ-YKWF6-K24NB-JFRFF-CQBO4'; // 使用在腾讯位置服务申请的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;
|
||
|
|
uni.chooseLocation({
|
||
|
|
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) {
|
||
|
|
that.initLocation(res.latitude, res.longitude);
|
||
|
|
that.latitude = res.latitude;
|
||
|
|
that.longitude = res.longitude;
|
||
|
|
that.weizhi.names = res.name;
|
||
|
|
that.weizhi.dizhi = res.address
|
||
|
|
} else {
|
||
|
|
that.$queue.showToast('请选择正确地址信息！');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page {
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
padding: 27rpx 30rpx 35rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar-form {
|
||
|
|
flex: 1;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar-box {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
padding-left: 20rpx;
|
||
|
|
padding-right: 20rpx;
|
||
|
|
height: 64rpx;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navLeft {
|
||
|
|
align-items: center;
|
||
|
|
width: 20%;
|
||
|
|
position: absolute;
|
||
|
|
top: 20upx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.localName {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-bar-box {
|
||
|
|
margin-left: 20%;
|
||
|
|
border-radius: 32rpx;
|
||
|
|
background: #f2f5f7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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>
|