<template>
<view class="content">
<view class="topView">
<!-- 搜索 -->
<view class="searchBoxBg">
<searchBox placeholder="请输入城市名称" @search='search($event)'></searchBox>
</view>
</view>
<!-- 城市列表 -->
<scroll-view class="scroll-view" scroll-y scroll-with-animation="true" enable-back-to-top="true"
:scroll-into-view="toIndex" v-if="!searchValue">
<!-- 您所在的地区 -->
<view class="nowArea">
<view class="area">定位城市</view>
<view class="dingwBox">
<view v-if="locationCity.cityName" @click="selectDingCity(locationCity)" class="dingweiCity">
{{locationCity.cityName}}
</view>
<view v-else class="dingweiCity" style="color: #999999;">未获取</view>
<view class="dingBg" @click="againDingWei()">
<image src='../../static/img/icon_location.png' class="icon"></image>
<text class="text">重新定位</text>
</view>
</view>
</view>
<view class="listContent">
<view class="city-list">
<!-- 城市列表 -->
<view v-for="(item, index) in cityData">
<view class="c-title">{{item['首字母']}}</view>
<view class="item" v-for="(city,index2) in item['城市列表']" @click="selectCity(city)">
{{city.city}}
</view>
</view>
</view>
<!-- 字母列表 -->
<view>
<view v-for="(item, index) in alphabet">
<view class="alphabet" :class="{select:toIndex == item}" @click="tap(item)">
{{item}}
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 搜索列表 -->
<view class="reach-content" v-show="searchValue">
<block v-show="searchData.length">
<view v-for="(item, index) in cityData">
<view class="item" v-for="(city,index2) in item['城市列表']" @click="selectCity(city)">
{{city.city}}
</view>
</view>
</block>
<!-- 无数据空白页 -->
<view class="nodataBox" v-if="searchData.length == 0">
<image src="../../static/img/pic_empty_def.png" mode="widthFix" class="nodataImg"></image>
<view class="noTxt">暂无数据</view>
</view>
</view>
</view>
</template>
<script>
import searchBox from '@/components/searchBox/searchBox.vue'
export default {
components: {
searchBox
},
data() {
return {
searchValue: '',
cityData: [],
alphabet: [],
toIndex: '', //跳转的索引的字母
searchData:[],
locationCity: {
cityName: '',
cityCode: '',
lng: '',
lat: '',
},
}
},
onLoad() {
this.getData();
},
onShow() {
var nowCity = uni.getStorageSync("locationCity");
if (nowCity) {
this.locationCity = nowCity
} else {
this.getLocation()
}
this.getData();
},
methods: {
tap(item) {
console.log('字母点击', item);
this.toIndex = item
},
againDingWei() {
console.log('重新定位');
this.getLocation();
},
getLocation() {
const that = this
uni.getLocation({
type: 'gcj02',
success: function(res) {
console.log('定位', res)
that.locationCity.lng = res.longitude
that.locationCity.lat = res.latitude
that.getAdress();
},
fail(err) {
console.log(err)
}
});
},
getAdress() {
// 根据经纬度 逆城市地理编码 获取城市信息
var location = this.locationCity.lng + ',' + this.locationCity.lat
uni.request({
url: 'https://restapi.amap.com/v3/place/around',
data: {
key: '064b6a4a8ade55656edcde2f528876de',
location: location,
types: "190000",
extensions: "all",
radius: 100
},
dataType: "json",
success: (res) => {
console.log('定位城市', res);
let cityname = res.data.pois[0].cityname;
var cityCode = res.data.pois[0].adcode
cityCode = cityCode.slice(0, -2)
cityCode = cityCode + '00'
this.locationCity.cityName = cityname
this.locationCity.cityCode = cityCode
uni.setStorage({
key: 'locationCity',
data: this.locationCity,
success: function() {
console.log('定位城市,保存成功');
}
})
}
});
},
search(val) {
// console.log(val);
this.searchValue = val
this.getData()
},
getData() {
uni.showLoading({
title: '加载中'
})
let url = 'worldKeepCar/worldHome/queryCityRole',
params = {
city: this.searchValue ? this.searchValue : '',
}
this.$http(url, params, 'GET').then(res => {
uni.hideLoading()
if (res.code == 0) {
this.cityData = res.data
var arr = []
this.cityData.forEach((item, index) => {
arr.push(item.首字母)
});
}
this.alphabet = arr
})
},
selectDingCity(locationCity){
console.log('选择了定位城市：', locationCity);
var city={}
city.city = locationCity.cityName
city.code = locationCity.cityCode
uni.setStorage({
key: 'selectCity',
data: city,
success: function() {
console.log('选择了定位城市,保存成功');
}
})
uni.navigateBack({
})
},
selectCity(city) {
console.log('选择的城市：', city);
uni.setStorage({
key: 'selectCity',
data: city,
success: function() {
console.log('选择的城市,保存成功');
}
})
uni.navigateBack({
})
},
},
onPullDownRefresh() {
this.getData()
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style>
.content {
background: #FFFFFF;
min-height: 100vh;
}
.topView {
background: #FFFFFF;
position: fixed;
width: 100%;
height: 120rpx;
z-index: 99;
}
.searchBoxBg {
width: 100%;
background-color: #FFFFFF;
border-top: 1rpx solid #EEEEEE;
}
.searchBox {
display: flex;
height: 72rpx;
margin: 24rpx;
background-color: #F4F5F7;
border-radius: 36rpx;
}
.scroll-view {
width: 100%;
height: calc(100vh - 120rpx);
box-sizing: border-box;
padding: 120rpx 24rpx 20rpx;
}
.nowArea {
width: 100%;
height: 147rpx;
}
.area {
color: #999999;
font-size: 24rpx;
margin-bottom: 20rpx;
}
.dingwBox {
display: flex;
justify-content: space-between;
}
.dingweiCity {
background-color: #F4F5F7;
border-radius: 49rpx;
width: 140rpx;
height: 64rpx;
text-align: center;
line-height: 64rpx;
font-size: 26rpx;
}
.dingBg {
display: flex;
align-items: center;
color: #3F90F7;
font-size: 26rpx;
}
.icon {
width: 33rpx;
height: 33rpx;
margin-right: 5rpx;
}
.listContent {
display: flex;
justify-content: space-between;
}
.city-list {
display: flex;
flex-direction: column;
width: 95%;
}
.c-title {
color: #999999;
font-size: 24rpx;
height: 33rpx;
line-height: 33rpx;
padding-top: 30rpx;
}
.item {
width: 100%;
height: 46rpx;
padding: 30rpx 13rpx;
color: #3C3C3C;
font-size: 28rpx;
border-bottom: 1rpx solid #EEEEEE;
}
.alphabet {
font-size: 22rpx;
font-weight: bold;
color: #999999;
width: 4%;
margin: 20rpx 0;
text-align: center;
}
.select {
color: #FF4F00;
}
.reach-content{
width: 100%;
height: calc(100vh - 120rpx);
box-sizing: border-box;
padding: 120rpx 24rpx 20rpx;
}
/* 空白页css */
.nodataBox {
text-align: center;
}
.nodataImg {
width: 400rpx;
padding-top: 300rpx;
}
.noTxt {
font-size: 30rpx;
color: #999999;
padding-top: 50rpx;
}
</style>