540 lines
12 KiB
Vue
540 lines
12 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar title="选择城市" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='40' id="navbar">
|
||
</u-navbar>
|
||
<view class="header w100 flexw">
|
||
<view class="placeholder"></view>
|
||
<view class="flex w100">
|
||
<input class="input" :focus="true" @confirm="doneInput" v-model="value" type="text" confirm-type="search" :adjust-position="false" placeholder="请输入城市名称" />
|
||
<view style="color: #333;border: 1px solid #ccc;border-radius: 10rpx;margin-left: 20rpx;" class="back_div fsmall bold blue" @tap="onInput()">
|
||
搜索
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view class="w100" scroll-y="true" :scroll-into-view="scrollIntoId" :style="{height:scrollHeight}" @touchmove.stop.prevent>
|
||
<view v-if="disdingwei" id="hot">
|
||
<!-- 定位模块 -->
|
||
<view class="dingwei">
|
||
<view class="grey flexa fsmall">
|
||
当前定位城市
|
||
</view>
|
||
<view class="dingwei_city">
|
||
<view class="dingwei_city_one" @tap="btncity(cityId,position)">
|
||
{{position}}
|
||
</view>
|
||
<view class="bold blue fmiddle" @click="getWarpweft">
|
||
<text style="color:#6a7ef8 ;">{{po_tips}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最近模块 -->
|
||
<!-- <view class="dingwei" v-if="cacheLocation">
|
||
<view class="grey flexa fsmall">
|
||
历史浏览城市
|
||
</view>
|
||
<view class="dingwei_city dingwei_city_zuijin">
|
||
<view class="dingwei_city_one" v-for="(item,index) in cacheLocation" :key="index" @tap="back_city(item)">
|
||
{{item.city_name}}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 热门 -->
|
||
<!-- <view class="dingwei" v-if="hotCity">
|
||
<view class="grey flexa fsmall">
|
||
热门城市
|
||
</view>
|
||
<view class="dingwei_city dingwei_city_zuijin">
|
||
<view class="dingwei_city_one" v-for="(item,index) in hotCity" :key="index" @tap="back_city(item)">
|
||
{{item.city_name}}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
</view>
|
||
|
||
|
||
<!-- 城市列表 -->
|
||
<view v-if="searchValue == ''" v-for="(item, index) in list" :key="index" @click="btncity(item.cityId,item.cityName)">
|
||
<view class="letter-header bold"></view>
|
||
<view class="contents">
|
||
<view class="city-div">
|
||
<text class="city">{{ item.cityName }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="placeholder footer"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Citys from '@/components/city.js';
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
statusBar:'0px',
|
||
customBar:'45px',
|
||
|
||
winHeight: 0,
|
||
itemHeight: 0,
|
||
winOffsetY: 0,
|
||
touchmove:false,
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
|
||
scrollHeight: this.statusBarHeight,
|
||
ImgUrl: this.ImgUrl,
|
||
letter: [],
|
||
|
||
searchValue: '',
|
||
scrollIntoId: '',
|
||
list: [],
|
||
tId: null,
|
||
searchList: [],
|
||
showMask: false,
|
||
disdingwei: true,
|
||
cacheLocation: [
|
||
{'city_name':'北京'}
|
||
], //最近访问
|
||
position: '', //定位获取的位置
|
||
cityId:'',
|
||
po_tips: '重新定位',
|
||
hotCity:[
|
||
{'city_name':'北京市'},
|
||
{'city_name':'杭州市'},
|
||
{'city_name':'上海市'},
|
||
{'city_name':'温州市'},
|
||
{'city_name':'长沙市'},
|
||
{'city_name':'成都市'},
|
||
{'city_name':'义乌市'},
|
||
{'city_name':'金华市'},
|
||
{'city_name':'厦门市'},
|
||
{'city_name':'广州市'},
|
||
{'city_name':'深圳市'}
|
||
],
|
||
value:'',
|
||
type:''
|
||
}
|
||
},
|
||
watch:{
|
||
// list(){
|
||
// setTimeout(()=>{
|
||
// this.setList()
|
||
// },100)
|
||
// }
|
||
},
|
||
|
||
onLoad(option) {
|
||
if(option.type){
|
||
this.type = option.type
|
||
}
|
||
this.getcity()
|
||
this.scrollHeight = uni.getSystemInfoSync().windowHeight - parseInt(this.customBar) +'px'
|
||
//获取存储的最近访问
|
||
var that = this
|
||
// uni.getStorage({
|
||
// key: 'location_key',
|
||
// success: function(res) {
|
||
// that.cacheLocation = res.data
|
||
// }
|
||
// });
|
||
//获取定位 经度纬度
|
||
that.getWarpweft()
|
||
|
||
// let cityLen = Citys.data.city_nav
|
||
// this.letter = Citys.index;
|
||
// this.list = Citys.list;
|
||
// this.hotCity = Citys.data.hot_city;
|
||
},
|
||
methods: {
|
||
// 搜索城市
|
||
onInput() {
|
||
this.getcity()
|
||
},
|
||
// 点击选择城市返回首页
|
||
btncity(cityId,cityName){
|
||
if(this.type == 100){
|
||
uni.reLaunch({
|
||
url:'/page_fenbaotwo/hexiao/xzdp?cityId=' + cityId + '&cityName=' + cityName
|
||
})
|
||
}else{
|
||
uni.reLaunch({
|
||
url:'/pages/nearbystores/index?cityId=' + cityId + '&cityName=' + cityName
|
||
})
|
||
}
|
||
},
|
||
// 查询所有级城市
|
||
getcity(){
|
||
this.$u.get(`/app/allCity/list?cityName=`+ this.value).then(res => {
|
||
if(res.code == 200){
|
||
this.list = res.data
|
||
}
|
||
})
|
||
},
|
||
back(){
|
||
//你自己实现 返回上一页
|
||
},
|
||
setList() {
|
||
uni.createSelectorQuery()
|
||
.in(this)
|
||
.select('#list')
|
||
.boundingClientRect()
|
||
.exec(ret => {
|
||
this.winOffsetY = ret[0].top
|
||
this.winHeight = ret[0].height
|
||
this.itemHeight = this.winHeight / this.list.length
|
||
})
|
||
|
||
},
|
||
touchStart(e) {
|
||
this.touchmove = true
|
||
let pageY = e.touches[0].pageY
|
||
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||
if (this.list[index]) {
|
||
this.scrollIntoId = this.list[index].idx
|
||
}
|
||
},
|
||
touchMove(e) {
|
||
let pageY = e.touches[0].pageY
|
||
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
|
||
if (this.list[index] && this.list[index].idx === this.scrollIntoId) {
|
||
return false
|
||
}
|
||
if (this.list[index]) {
|
||
this.scrollIntoId = this.list[index].idx
|
||
}
|
||
},
|
||
touchEnd() {
|
||
this.touchmove = false
|
||
this.touchmoveIndex = -1
|
||
},
|
||
|
||
doneInput(){
|
||
uni.hideKeyboard()
|
||
},
|
||
move(e){
|
||
console.log(111,e);
|
||
},
|
||
getId(index) {
|
||
return this.letter[index];
|
||
},
|
||
query(source, text) {
|
||
let res = [];
|
||
var self = this;
|
||
let len = source.length
|
||
var text = text.toLowerCase()
|
||
for (let i = 0; i < len; i++) {
|
||
//单字母搜索
|
||
if(text.length == 1 && /^[a-zA-Z]$/.test(text)){
|
||
let arr = []
|
||
let idx = text.toUpperCase()
|
||
if(idx == source[i].idx){
|
||
console.log(222,source[i]);
|
||
return source[i].cities
|
||
}
|
||
}
|
||
//其它搜索
|
||
if(source[i].cities){
|
||
let _len = source[i].cities.length
|
||
for (var n = 0; n < _len; n++) {
|
||
let _item = source[i].cities[n]
|
||
if(new RegExp('^' + text).test(_item.city_name)){
|
||
res.push(_item);
|
||
continue;
|
||
}
|
||
if(new RegExp('^' + text).test(_item.city_pinyin)){
|
||
res.push(_item);
|
||
continue;
|
||
}
|
||
if(new RegExp('^' + text).test(_item.py)){
|
||
res.push(_item);
|
||
continue;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
return res;
|
||
},
|
||
|
||
isString(obj) {
|
||
return typeof obj === 'string';
|
||
},
|
||
|
||
|
||
|
||
back_city(item,hasLocation = false) {
|
||
console.log(333,item);
|
||
// this.$store.commit('getCity',item.city_name)
|
||
uni.request({
|
||
url: 'https://apis.map.qq.com/ws/geocoder/v1',
|
||
data: {
|
||
key: 'ZQLBZ-UWQCZ-PCJXC-ZPGDU-LNVX5-MDF6T',
|
||
address: item.city_name,
|
||
output: 'json',
|
||
},
|
||
success:res=>{
|
||
console.log(res)
|
||
}
|
||
})
|
||
// uni.reLaunch({
|
||
// url:'/pages/nearbystores/index'
|
||
// })
|
||
if (item) {
|
||
//是否是定位
|
||
if(hasLocation){
|
||
item = {city_name:item.city,location:item}
|
||
}
|
||
uni.$emit('selectCity', item);
|
||
//unshift 把数据插入到首位，与push相反
|
||
if(!this.cacheLocation)this.cacheLocation = []
|
||
this.cacheLocation.unshift(item)
|
||
this.searchValue = "";
|
||
this.disdingwei = true
|
||
var arr = this.cacheLocation
|
||
//数组去重
|
||
function distinct(arr) {
|
||
let newArr = []
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (newArr.indexOf(arr[i]) < 0) {
|
||
newArr.push(arr[i])
|
||
}
|
||
}
|
||
return newArr
|
||
}
|
||
this.cacheLocation = distinct(arr).slice(0,5)
|
||
uni.setStorage({
|
||
key: 'location_key',
|
||
data: this.cacheLocation
|
||
});
|
||
}
|
||
this.back()
|
||
},
|
||
getWarpweft() {
|
||
let that = this
|
||
that.position = '定位中...'
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: res => {
|
||
this.$u.get(`app/getCity?lon=${res.longitude}&lat=${res.latitude}`).then(res => {
|
||
if(res.code == 200){
|
||
that.position = res.data.cityName
|
||
that.cityId = res.data.cityId
|
||
}
|
||
})
|
||
},
|
||
fail: err => {
|
||
// 获取失败，err为错误信息
|
||
console.log('getLocation err:', err);
|
||
that.position = '定位失败'
|
||
}
|
||
})
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fsmall{
|
||
font-size: 26rpx;
|
||
}
|
||
.fmiddle{
|
||
font-size: 28rpx;
|
||
}
|
||
.blue{
|
||
color: #007AFF;
|
||
}
|
||
.bold{
|
||
/* font-weight: 600; */
|
||
color: #ccc;
|
||
margin: 20rpx 20rpx 20rpx 0;
|
||
line-height: 60rpx;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.mask {
|
||
position: fixed;
|
||
z-index: 3;
|
||
top: 40%;
|
||
left: 40%;
|
||
}
|
||
|
||
.mask-r {
|
||
height: 120rpx;
|
||
width: 120rpx;
|
||
border-radius: 60rpx;
|
||
display: flex;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(5px);
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF
|
||
}
|
||
|
||
.content {
|
||
height: 100%;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
position: relative;
|
||
z-index: 8;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
|
||
.back_div {
|
||
width: 100rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.back_img {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
|
||
.input {
|
||
font-size: 26rpx;
|
||
width: 580rpx;
|
||
height: 60rpx;
|
||
max-height: 60rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #F5F5F5;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
color: white;
|
||
}
|
||
|
||
.show {
|
||
left: 0;
|
||
width: 100%;
|
||
transition: left 0.3s ease;
|
||
}
|
||
|
||
.hide {
|
||
left: 100%;
|
||
width: 100%;
|
||
transition: left 0.3s ease;
|
||
}
|
||
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
color: white;
|
||
}
|
||
.letters {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 50rpx;
|
||
color: #cccccc;
|
||
top: 25%;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-weight: 510;
|
||
}
|
||
.letters .fmin{
|
||
|
||
}
|
||
|
||
|
||
.letter-header {
|
||
font-size: 28rpx;
|
||
padding-left: 40rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.city-div {
|
||
display: inline-block;
|
||
/* width: 660rpx; */
|
||
margin: auto;
|
||
padding: 20rpx 0;
|
||
/* border-bottom-width: 0.5rpx; */
|
||
/* border-bottom-color: #ebedef; */
|
||
/* border-bottom-style: solid; */
|
||
/* display: flex; */
|
||
align-items: center;
|
||
}
|
||
|
||
.city {
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
padding-left: 30rpx;
|
||
}
|
||
|
||
.dingwei {
|
||
/* width: 90%;
|
||
margin: auto; */
|
||
padding-top: 25rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 26rpx;
|
||
}
|
||
.dingwei .grey{
|
||
margin-bottom: 25rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.dingwei_city {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #fff;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.dingwei_city_one {
|
||
height: 60rpx;
|
||
/* background-color: #F5F5F5; */
|
||
/* border-radius: 30rpx; */
|
||
font-size: 26rpx;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 20rpx 20rpx 20rpx 0;
|
||
}
|
||
|
||
|
||
.dingweis {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.dingwei_city_zuijin {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
}
|
||
.contents{
|
||
/* display: flex; */
|
||
background-color: #fff;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
|