mrr.sj.front/pages/address/selectCity.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>