nk-shop2.0/pages/select_address/select_address.vue

<template>
  <view class="">
    <u-sticky customNavHeight="0">
      <view class="head_top">
        <u-search placeholder="搜索小区、办公楼等" :showAction="false"></u-search>
        <view style="height: 20rpx;"></view>
        <u-tabs :list="tabsList" itemStyle="font-size: 32rpx;height: 74rpx;" :current="current" @change="changeCurrent"
          lineColor="#FF6D20" lineWidth="105rpx" height="7rpx"></u-tabs>
        </u-tabs>
      </view>
    </u-sticky>
    <view style="background-color: #f4f4f4;height: 30rpx;"></view>
    <view class="address-box" v-if="current==0" style="padding: 0;">
      <map 
        style="width: 750rpx;height: 750rpx;"
        :longitude="longitude"
        :latitude="latitude"
        show-location
        @controltap="handleMapTap"
      ></map>
      <!-- <Amap></Amap> -->
      <view class="head_item" style="padding: 20rpx;">
        <view class="re-location">
          <view class="re-title">当前位置: </view>
          <view>{{street}}</view>
        </view>
        <view class="re-btn" @click="reGetLocation">
          <image class="re-address-img" src="@/static/images/re_address.png"></image>重新定位
        </view>
      </view>
    </view>
    <view class="address-box" v-if="current==1">
      <view class="head_item_tips">
        <view>泸州区县</view>
      </view>
      <view class="area">
        <view class="area-item" :class="{'area-item-on': item.code==area_change}" v-for="(item, index) in areaList"
          :key="index" @click="changeArea(item)">
          {{item.name}}
        </view>
      </view>
      <view class="head_item_tips">
        <view>选择街道/镇</view>
      </view>
      <view class="street">
        <view class="letter-item" v-for="key in mapKey" :key="key">
          <view class="letter">{{key}}</view>
          <view class="item-box">
            <view class="street-item" v-for="item in mapList[key]" :key="item.code" @click="changeStreet(item)">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getGeocoder,
    merClassifly,
    getProductslist
  } from '@/api/store.js';
  import {
    getArea,
    getStreet
  } from "@/api/article.js";
  import { Toast } from '@/libs/uniApi';
  // import Amap from "./map.nvue";
  export default {
    // components:{
    //   Amap
    // },
    data() {
      return {
        tabsList: [{
          name: '地图定位',
        }, {
          name: '泸州区县',
        }, ],
        current: 0,
        latitude: '28.87',
        longitude: '105.44',
        town: '',
        street_id: '',
        street: '',
        areaList: [],
        streetList: [],
        mapList: {},
        area_change: '',
        street_change: '',
      }
    },
    onLoad() {
      this.getLoaction();
      this.loadArea();
    },
    onShow() {},
    computed: {
      mapKey() {
        return Object.keys(this.mapList).sort()
      }
    },
    methods: {
      changeCurrent(e) {
        this.current = e.index;
      },
      getLoaction() {
        this.street = '定位中'
        uni.getLocation({
          type: 'wgs84',
          timeout: '10',
          success: (res) => {
            let latitude, longitude;
            latitude = res.latitude.toString();
            longitude = res.longitude.toString();
            this.latitude = res.latitude.toFixed(6);
            this.longitude = res.longitude.toFixed(6);
            this.$store.commit('setLocation', {
              lat: res.latitude.toFixed(6),
              long: res.longitude.toFixed(6),
            });
            getGeocoder({
              lat: latitude,
              long: longitude
            }).then(res => {
              this.town = res.data.address_reference.town.title
              this.street_id = res.data.address_reference.town.id
              this.street = res.data.address_reference.town.title;
            }).catch(err => {
              uni.showToast({
                title: err,
                icon: 'none'
              })
              this.street = '定位失败'
            })
          },
          fail: (err) => {
            console.log('定位失败');
            this.isshow = false
            uni.setStorageSync("RejectTarget", true)
            Toast('定位失败,请检查定位权限是否开启')
            this.street = '定位失败'

            // uni.showToast({
            // 	title: "获取定位超时",
            // 	icon: 'none',
            // 	duration: 2000
            // });
          }
        });
      },
      reGetLocation() {
        this.getLoaction()
      },
      loadArea() {
        getArea({
          city_code: 510500
        }).then((res) => {
          this.areaList = res.data;
          this.changeArea(this.areaList[0]);
        })
      },
      loadStreet(area_code) {
        this.street_change = '';
        getStreet({
          area_code
        }).then((res) => {
          this.streetList = res.data;
          this.initPinyin();
        })
      },
      initPinyin() {
        this.mapList = {};
        this.streetList.forEach((item) => {
          let str = item.pinyin?.toUpperCase();
          str = str ? str : '#';
          if (this.mapList[str]) {
            this.mapList[str].push(item);
          } else {
            this.mapList[str] = [];
            this.mapList[str].push(item)
          }
        })
      },
      changeArea(item) {
        this.area_change = item.code;
        this.loadStreet(this.area_change);
      },
      // 选择位置
      changeStreet(item){
        uni.navigateBack({
          success: () => {
            uni.$emit('changeAddress', {
              area: this.area_change,
              street: item
            })
          }
        })
      },
      // 点击地图
      handleMapTap(e){
        console.log('点击', e);
        
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .head_top {
    background-color: #fff;
    padding: 28rpx;
  }

  .address-box {
    // background-color: red;
    border-radius: 21rpx 21rpx 0rpx 0rpx;
    padding: 30rpx 28rpx;

    .head_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 28rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;

      .re-location {
        display: flex;

        .re-title {
          flex-shrink: 0;
          padding-right: 14rpx;
        }
      }

      .re-address-img {
        width: 38.55rpx;
        height: 38.55rpx;
        margin-right: 14rpx;
      }

      .re-btn {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding-left: 14rpx;
      }
    }

    .head_item_tips {
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #737373;
    }

    .address-list {
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      height: 80rpx;
      line-height: 75rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    }

    .area {
      display: flex;
      flex-wrap: wrap;
      padding-top: 30rpx;

      .area-item {
        // width: 158rpx;
        height: 64rpx;
        // background: #F4F4F4;
        background-color: #fff;
        border-radius: 11rpx 11rpx 11rpx 11rpx;
        border: 2rpx solid #B3B3B3;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #737373;
        margin-bottom: 22rpx;
        margin-right: 22rpx;
      }

      .area-item-on {
        // background-color: #F4F4F4;
        color: #ff6d20;
        // font-weight: bold;
        border: 2rpx solid #ff6d20;
      }
    }

    .street {
      padding-top: 28rpx;

      .letter-item {
        display: flex;

        .letter {
          flex-shrink: 0;
          margin-right: 28rpx;
          font-size: 25rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          width: 40rpx;
          text-align: center;
          color: #737373;
        }

        .item-box {
          flex: 1;

          .street-item {
            width: 100%;
            padding-bottom: 28rpx;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
</style>