<template>
<view class="content">
<!-- 城市列表 -->
<scroll-view class="scroll-view" scroll-y scroll-with-animation="true" enable-back-to-top="true"
:scroll-into-view="toIndex" >
<view class="listContent">
<view class="city-list">
<!-- 城市列表 -->
<view v-for="(item, index) in cityData">
<view class="c-title" :id="item['首字母']">{{item['首字母']}}</view>
<view class="item" v-for="(city,index2) in item['城市列表']" @click="selectCity(city)">
{{city.city}}
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 字母列表 -->
<view class="zhimubox">
<view v-for="(item, index) in alphabet">
<view class="alphabet" :class="{select:toIndex == item}" @click="tap(item)">
{{item}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
searchValue: '',
cityData: [],
alphabet: [],
toIndex: '', //跳转的索引的字母
searchData:[],
locationCity: {
cityName: '',
cityCode: '',
lng: '',
lat: '',
},
type:'',
id:'',
}
},
onLoad(opt) {
this.type=opt.type
this.id=opt.id
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: 'wgs84',
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/geocode/regeo',
data: {
key: '389a059efa3f499d9145eb84b1c3248d',
location: location,
//location: '117.06533,36.68013',
//types: "190000",
//extensions: "all",
//radius: 100
},
dataType: "json",
success: (res) => {
console.log('定位城市', res);
if(res.data.regeocode){
console.log("城市名称")
console.log(res.data.regeocode.addressComponent.city)
// console.log(res.data.pois[0].cityname)
let cityname = res.data.regeocode.addressComponent.city;
var cityCode = res.data.regeocode.addressComponent.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('定位城市,保存成功');
}
})
}else{
console.log("接口获取失败")
}
}
});
},
search(val) {
// console.log(val);
this.searchValue = val
this.getData()
},
getData() {
uni.showLoading({
title: '加载中'
})
var params = {
}
if(this.type==2){
//项目商品下单
var url = 'openMall/shop-city-list'
params.id=this.id
}else if(this.type==3){
//板金喷漆
var url = 'openSheetMetalSprayPaint/shop-city-list'
}else if(this.type==1){
//门店列表
var url = 'opencarOwnerHome/shop-city-list'
}else if(this.type==4){
//积分商城
var url = 'openIntegralMall/shop-city-list'
params.id=this.id
}else if(this.type==5){
//集客
var url = 'openHome/shop-city-list'
params.collectingID=this.id
}
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 scoped>
.zhimubox{
position: fixed;
right: 30rpx;
top: 200rpx;
height: 80vh;
overflow-y: scroll;
}
.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 - 80rpx); */
height: 100vh;
box-sizing: border-box;
}
.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;
padding: 20rpx 24rpx 20rpx;
}
.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: 2rpx 0;
text-align: center;
padding: 10rpx 10rpx 10rpx 15rpx;
}
.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>