261 lines
6.5 KiB
Vue
261 lines
6.5 KiB
Vue
|
<template>
|
||
|
|
<view class="search-address-page">
|
||
|
|
<!-- 自定义导航栏 -->
|
||
|
|
<custom-navbar
|
||
|
|
title="选择城市"
|
||
|
|
:showBack="true"
|
||
|
|
backgroundColor="#FAFAFA"
|
||
|
|
></custom-navbar>
|
||
|
|
<!-- <view class="search-container">
|
||
|
|
<search-box v-model="searchKeyword" placeholder="请输入你的服务地址" width="690rpx" height="68rpx"
|
||
|
|
border="1px solid #E8101E" style="padding: 0;" @confirm="onSearch" :showBack="false"></search-box>
|
||
|
|
</view>
|
||
|
|
<scroll-view scroll-y class="hao-scroll">
|
||
|
|
<view class="hot-citys">
|
||
|
|
<view class="hot-citys__title">热门城市</view>
|
||
|
|
<view class="hot-citys__citys">
|
||
|
|
<view class="hot-citys__citys__city" v-for="(item,index) in hotCitys" :key="index">{{ item }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view> -->
|
||
|
|
<hao-indexList
|
||
|
|
:letters="letters"
|
||
|
|
idValue="adcode"
|
||
|
|
nameValue="name"
|
||
|
|
:currentCity="currentCity"
|
||
|
|
:hotCity="hotCity"
|
||
|
|
:cityList="cityList"
|
||
|
|
@haoTap="haoTap"
|
||
|
|
>
|
||
|
|
</hao-indexList>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import haoIndexList from "@/components/hao-indexList/hao-indexList/hao-indexList.vue";
|
||
|
|
import ChinaCitys from '../../static/data/newChinaCitys.json'
|
||
|
|
import citysList from "../../static/data/cistysList.json";
|
||
|
|
import searchBox from "@/components/search/search-box.vue";
|
||
|
|
import request from '@/utils/request'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
searchBox,
|
||
|
|
haoIndexList,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
//索引
|
||
|
|
letters: [
|
||
|
|
"A",
|
||
|
|
"B",
|
||
|
|
"C",
|
||
|
|
"D",
|
||
|
|
"E",
|
||
|
|
"F",
|
||
|
|
"G",
|
||
|
|
"H",
|
||
|
|
"J",
|
||
|
|
"K",
|
||
|
|
"L",
|
||
|
|
"M",
|
||
|
|
"N",
|
||
|
|
"O",
|
||
|
|
"P",
|
||
|
|
"Q",
|
||
|
|
"R",
|
||
|
|
"S",
|
||
|
|
"T",
|
||
|
|
"W",
|
||
|
|
"X",
|
||
|
|
"Y",
|
||
|
|
"Z",
|
||
|
|
],
|
||
|
|
//当前城市
|
||
|
|
currentCity: {
|
||
|
|
adcode: "430100",
|
||
|
|
name: "长沙市",
|
||
|
|
},
|
||
|
|
//热门城市
|
||
|
|
hotCity: [
|
||
|
|
{
|
||
|
|
adcode: "510100",
|
||
|
|
name: "成都市",
|
||
|
|
center: "104.066301,30.572961",
|
||
|
|
citycode: "028",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
citycode: "0317",
|
||
|
|
adcode: "130983",
|
||
|
|
name: "黄骅市",
|
||
|
|
center: "117.330043,38.372266",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
citycode: "0633",
|
||
|
|
adcode: "371100",
|
||
|
|
name: "日照市",
|
||
|
|
center: "119.52685,35.416912",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
citycode: "0833",
|
||
|
|
adcode: "511100",
|
||
|
|
name: "乐山市",
|
||
|
|
center: "103.766085,29.552275",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
//城市列表
|
||
|
|
cityList: citysList,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
async onLoad() {
|
||
|
|
await this.getHotCity()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getHotCity(){
|
||
|
|
await request.post('/user/getHotCity').then(res=>{
|
||
|
|
if(res.code == 200){
|
||
|
|
// let hotCity = []
|
||
|
|
// res.data.list.forEach(item=>{
|
||
|
|
// let numStr = item.toString();
|
||
|
|
// let provinceCode = `${numStr.slice(0,2)}0000`
|
||
|
|
// let province = ChinaCitys.districts[0].districts.find(item=>item.adcode==provinceCode)
|
||
|
|
// let cityCode = `${numStr.slice(0,4)}00`
|
||
|
|
// let city = province.districts.find(item=>item.adcode==cityCode)
|
||
|
|
// if(numStr==cityCode){
|
||
|
|
// hotCity.push(city)
|
||
|
|
// }else{
|
||
|
|
// let districtCode = numStr
|
||
|
|
// let district= city.districts.find(item=>item.adcode==districtCode)
|
||
|
|
// hotCity.push(district)
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// this.hotCity =hotCity
|
||
|
|
this.hotCity =res.data.obj_list
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
haoTap(data) {
|
||
|
|
let nameList = data.name.split(",");
|
||
|
|
let searchCity = {
|
||
|
|
center: data.center,
|
||
|
|
name: nameList[0],
|
||
|
|
};
|
||
|
|
uni.setStorageSync("searchCity", searchCity);
|
||
|
|
uni.navigateBack();
|
||
|
|
|
||
|
|
// let nameList = data.name.split(',')
|
||
|
|
// let centerList = data.center.split(',')
|
||
|
|
|
||
|
|
// //获取城市信息
|
||
|
|
// new Promise((resolve, reject) => {
|
||
|
|
// uni.request({
|
||
|
|
// url: 'https://restapi.amap.com/v3/geocode/geo',
|
||
|
|
// method: "GET",
|
||
|
|
// data: {
|
||
|
|
// key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
|
||
|
|
// address: nameList.at(0),
|
||
|
|
// city: nameList.at(-1),
|
||
|
|
// },
|
||
|
|
// success(res) {
|
||
|
|
// let geocode = res.data.geocodes[0]
|
||
|
|
// //获取城市中心点位置信息
|
||
|
|
// new Promise((resolve, reject) => {
|
||
|
|
// uni.request({
|
||
|
|
// url: 'https://restapi.amap.com/v3/geocode/regeo',
|
||
|
|
// method: "GET",
|
||
|
|
// data: {
|
||
|
|
// key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
|
||
|
|
// location: data.center,
|
||
|
|
// poitype: '商务写字楼',
|
||
|
|
// radius: 1000,
|
||
|
|
// extensions: 'base',
|
||
|
|
// roadlevel: 1
|
||
|
|
// },
|
||
|
|
// success(res2) {
|
||
|
|
// let streetNumber = res2.data.regeocode.addressComponent.streetNumber
|
||
|
|
// let obj = {
|
||
|
|
// "type": "gcj02",
|
||
|
|
// "altitude": 0,
|
||
|
|
// "latitude": centerList.at(-1),
|
||
|
|
// "longitude": centerList.at(0),
|
||
|
|
// "speed": 0,
|
||
|
|
// "accuracy": 30,
|
||
|
|
// "address": {
|
||
|
|
// "country": geocode.country,
|
||
|
|
// "province": geocode.province,
|
||
|
|
// "city": nameList.at(-1),
|
||
|
|
// "district": geocode.district,
|
||
|
|
// "street": streetNumber.street,
|
||
|
|
// "streetNum": streetNumber.number,
|
||
|
|
// "poiName": res2.data.regeocode.formatted_address,
|
||
|
|
// "cityCode": data.citycode
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// getApp().globalData.addressRes = obj
|
||
|
|
// console.log(getApp().globalData.addressRes)
|
||
|
|
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// })
|
||
|
|
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.search-container {
|
||
|
|
background-color: #fafafa;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
padding: 32rpx 30rpx 20rpx 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hao-scroll {
|
||
|
|
.hot-citys {
|
||
|
|
padding: 20rpx 30rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
|
||
|
|
&__title {
|
||
|
|
font-family: PingFangSC, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #666666;
|
||
|
|
line-height: 40rpx;
|
||
|
|
text-align: left;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__citys {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
column-gap: 22rpx;
|
||
|
|
|
||
|
|
&__city {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
width: 156rpx;
|
||
|
|
height: 58rpx;
|
||
|
|
background: #efefef;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 平台适配 */
|
||
|
|
/* #ifdef H5 */
|
||
|
|
.search-address-page {
|
||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* #endif */
|
||
|
|
</style>
|