180 lines
4.1 KiB
Vue
180 lines
4.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="search-box">
|
|
<view class="search-box-input">
|
|
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
|
|
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
|
|
<template slot="suffix">
|
|
<view style="display: flex;align-items: center;">
|
|
<u-icon name="map-fill" color="#329866" size="22"></u-icon>
|
|
<text class="position">{{position}}</text>
|
|
</view>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
<u-swiper :list="headerBgList" height="300rpx" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
|
|
export default {
|
|
name: "inputAndSwiper",
|
|
props: {
|
|
headerBgList: {
|
|
type: Array,
|
|
default () {
|
|
return [
|
|
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
|
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",
|
|
"https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
position: ''
|
|
};
|
|
},
|
|
options: {
|
|
styleIsolation: 'shared', // 解除样式隔离
|
|
},
|
|
created() {
|
|
console.log('createsd');
|
|
this.open()
|
|
},
|
|
methods: {
|
|
getLocation1() {
|
|
var that = this
|
|
let qqmapsdk = new QQMapWX({
|
|
key: 'ZRKBZ-Q7FWL-GVZPK-MCRBU-4XFB5-ATBDB'
|
|
});
|
|
uni.getFuzzyLocation({
|
|
type: 'wgs84',
|
|
success(res) {
|
|
console.log('res.latitude', res.latitude);
|
|
console.log('res.longitude', res.longitude);
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
},
|
|
success: (re) => {
|
|
console.log("解析地址成功", re);
|
|
console.log(re.result.ad_info.city,);
|
|
console.log(re.result.ad_info.district, );
|
|
let city=re.result.ad_info.city
|
|
let district=re.result.ad_info.district
|
|
that.position = city.slice(0,2) + district.slice(0,2)
|
|
},
|
|
fail: (re) => {
|
|
console.log(re, '失败信息');
|
|
}
|
|
})
|
|
},
|
|
fail(err) {
|
|
console.log("获取经纬度失败", err);
|
|
},
|
|
});
|
|
},
|
|
//提示用户开启定位服务
|
|
open() {
|
|
var that = this
|
|
uni.authorize({
|
|
scope: 'scope.userFuzzyLocation',
|
|
success: function() {
|
|
console.log('授权成功');
|
|
that.getLocation1()
|
|
},
|
|
fail: function() {
|
|
console.log('授权失败');
|
|
uni.showModal({
|
|
content: '检测到您没打开获取信息功能权限，是否去设置打开？',
|
|
confirmText: "确认",
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.openSetting({
|
|
success: (res) => {
|
|
console.log(res);
|
|
that.getLocation1();
|
|
}
|
|
})
|
|
} else {
|
|
console.log('取消');
|
|
return false;
|
|
}
|
|
}
|
|
})
|
|
return false;
|
|
}
|
|
})
|
|
// wx.getSetting({
|
|
// success: (res) => {
|
|
// if (res.authSetting['scope.userLocation'] === false) {
|
|
// wx.showModal({
|
|
// title: '提示',
|
|
// content: '请打开定位服务后重新进入该页面',
|
|
// confirmText: '去设置',
|
|
// success: (res) => {
|
|
// if (res.confirm) {
|
|
// wx.openSetting()
|
|
// }
|
|
// }
|
|
// })
|
|
// }
|
|
// }
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-box {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 50%;
|
|
width: 84.6%;
|
|
transform: translateX(-50%);
|
|
|
|
.search-box-input {
|
|
border-radius: 12rpx;
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
opacity: 0.85;
|
|
|
|
.u-border {
|
|
border: none;
|
|
|
|
.u-input__content {
|
|
height: 62rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #fff;
|
|
|
|
.u-input__content__field-wrapper__field {
|
|
font-size: 26rpx !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.position {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #232323;
|
|
line-height: 33rpx;
|
|
}
|
|
|
|
.u-swiper {
|
|
border-radius: 0 !important;
|
|
|
|
.u-swiper__wrapper__item__wrapper__image {
|
|
border-radius: 0 !important;
|
|
}
|
|
}
|
|
</style> |