shop-applet/pages/select_address/select_address_n.nvue

<template>
  <view class="" style="background-color: #fff;">
   <u-sticky customNavHeight="0">
      <view class="head_top">
       <!-- <u-search placeholder="搜索小区、办公楼等" @custom="searchMap"></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" :markers="[markers]"
        show-location @tap="handleMapTap"></map>
      <view class="head_item" style="padding: 10rpx 20rpx;">
        <view class="re-location">
          <view style="width: 120rpx;"><text class="text">当前位置: </text></view>
          <view style="flex: 1;">
            <text
              class="text">{{locationInfo.formatted_addresses?locationInfo.formatted_addresses.recommend:locationInfo.address}}</text>
          </view>
        </view>
        <view class="re-btn" @click="reGetLocation">
          <image class="re-address-img" src="@/static/images/re_address.png"></image><text class="text">重新定位</text>
        </view>
      </view>
      <u-button text="确认" @click="submitAddress"></u-button>
    </view>
  </view>
</template>

<script>
  import {
    getGeocoder,
    merClassifly,
    getProductslist
  } from '@/api/store.js';
  import {
    getArea,
    getStreet
  } from "@/api/article.js";
  import { Toast } from '@/libs/uniApi';
  export default {
    data() {
      return {
        tabsList: [{
          name: '地图定位',
        }],
        current: 0,
        latitude: '28.87',
        longitude: '105.44',
        markers: {
          id: 1,
          longitude: '28.87',
          latitude: '105.44',
          iconPath: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/cbbd5202311241523412538.png',
          width: 28,
          height: 28
        },
        locationInfo: {},
        town: '',
        street_id: '',
        street: '',
        areaList: [],
        streetList: [],
        mapList: {},
        area_change: '',
        street_change: '',
      }
    },
    onLoad(options) {
      this.getLoaction();
      this.loadArea();
    },
    onShow() {},
    computed: {
      mapKey() {
        return Object.keys(this.mapList).sort()
      }
    },
    methods: {
      changeCurrent(e) {
        this.current = e.index;
      },
      getLoaction() {
        this.street = '定位中'
        this.locationInfo = {};
        this.locationInfo.formatted_addresses = {};
        this.locationInfo.formatted_addresses.recommend = '定位中'
        uni.getLocation({
          type: 'gcj02',
          timeout: '4',
          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.locationInfo = res.data;
              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
            Toast('定位失败,请检查定位权限是否开启')
            this.street = '定位失败'
            this.locationInfo.formatted_addresses.recommend = '定位失败'

            // 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);
        // #ifdef H5
        return Toast('H5暂不支持选择坐标');
        // #endif
        let longitude = e.detail.longitude;
        let latitude = e.detail.latitude;
        this.markers.longitude = longitude;
        this.markers.latitude = latitude;
        // console.log('修改成功', this.markers);
        getGeocoder({
          lat: latitude,
          long: longitude
        }).then(res => {
          // console.log(res);
          this.locationInfo = res.data;
        }).catch(err => {
          uni.showToast({
            title: err,
            icon: 'none'
          })
          this.locationInfo = {};
          this.locationInfo.formatted_addresses = {};
          this.locationInfo.formatted_addresses.recommend = '定位失败'
        })
      },
      submitAddress() {
        console.log({...this.locationInfo});
        try {
          this.town = this.locationInfo.address_reference.town.title;
          this.street_id = this.locationInfo.address_reference.town.id;
          this.street = this.locationInfo.address_reference.town.title;
          let obj = {
            area: this.locationInfo.ad_info.adcode,
            street: {
              name: this.street,
              code: this.street_id
            },
            latitude: this.latitude,
            longitude: this.longitude,
            formatted_addresses: this.locationInfo.formatted_addresses
          }
          console.log({...obj});
          uni.navigateBack({
            success: () => {
              uni.$emit('changeAddress', obj)
            }
          })
        } catch (e) {
          return Toast('地址有误,请重新选择')
        }
      },
      searchMap(){
        uni.request({
          url: 'https://restapi.amap.com/v3/place/text?keywords=北京大学&city=beijing&offset=20&page=1&key=0799f37420c0784f1e6cba230a68bdb1&extensions=all',
          success: (res) => {
            console.log(res);
          },
          fail: (e) => {
            console.log(e);
          }
        })
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style>
  /* page {
    background-color: #fff;
  } */

  .text {
    font-size: 28rpx;
    white-space: normal;
  }

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

  .address-box {
    border-radius: 21rpx 21rpx 0rpx 0rpx;
    padding: 30rpx 28rpx;
    width: 750rpx;
  }

  .head_item {
    width: 750rpx;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 28rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .re-location {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 480rpx;
    align-items: center;
  }

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

  .re-btn {
    flex-direction: row;
    padding-left: 10rpx;
    width: 200rpx;
    height: 100rpx;
    align-items: center;
  }

  .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 {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 30rpx;
    justify-content: flex-start;
  }

  .area-item {
    height: 64rpx;
    /* width: 100px; */
    background-color: #fff;
    border-radius: 11rpx 11rpx 11rpx 11rpx;
    border: 2rpx solid #B3B3B3;
    flex-direction: row;
    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 {
    color: #ff6d20;
    border: 2rpx solid #ff6d20;
  }

  .street {
    padding-top: 28rpx;


  }

  .letter-item {
    flex-direction: row;
  }

  .letter {
    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>