chelvc-custom/src/pagesHome/homeAddress/index.vue

<template>
  <view class="home-address">
    <page-navbar bgColor="#fff" title="地址"></page-navbar>
    <view class="address-update fl-flex-item">
      <view class="fl-flex fl-align-center" @click="handelManual">
        <u--image
          src="/static/pagesHome/payment-success.png"
          width="44rpx"
          height="44rpx"
        ></u--image>
        <view class="f-s-28 text-primary u-m-l-8">地图定位</view>
      </view>
      <view class="address-line"></view>
      <view class="fl-flex fl-align-center" @click="handleUpdateAddress">
        <u--image
          src="/static/pagesHome/payment-success.png"
          width="44rpx"
          height="44rpx"
        ></u--image>
        <view class="f-s-28 text-primary u-m-l-8">刷新定位</view>
      </view>
    </view>
    <base-card padding="24rpx" radius="8rpx">
      <view class="fl-flex-item u-m-b-32">
        <view class="f-s-28 text-333 text-bold">常用地址</view>
        <view
          class="fl-flex fl-align-center"
          @click="$u.route('/PageMine/address/index')"
        >
          <view class="f-s-24 text-666">更多</view>
          <u-icon name="arrow-right" color="#666" size="16"></u-icon>
        </view>
      </view>
      <view
        style="border-bottom: 1rpx solid #d8d8d8"
        class="u-p-b-24 u-m-t-24"
        v-for="(item, index) in 4"
        :key="index"
      >
        <view class="fl-flex u-m-b-16">
          <view class="f-s-28 text-primary u-m-r-16">王忠青</view>
          <view class="f-s-28 text-primary u-m-r-8">18285564342</view>
          <base-text text="常用" padding="3rpx" fontSize="24rpx"></base-text>
        </view>
        <view class="f-s-24 text-666">中国科学院近代物理研究所-东门【详情地址】</view>
      </view>
    </base-card>
  </view>
</template>

<script>
export default {
  name: 'home-address',
  methods: {
    handelManual() {
      uni.chooseLocation({
        success: res => {
          let { longitude, latitude } = res;
          let data = { longitude, latitude };
          this.$store.dispatch('getLocationNow', data);
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/home/index',
            });
          }, 500);
        },
      });
    },
    handleUpdateAddress() {
      uni.getLocation({
        type: 'gcj02',
        success: res => {
          let { longitude, latitude } = res;
          let data = { longitude, latitude };
          this.$store.dispatch('getLocationNow', data).then(res => {
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/home/index',
              });
            }, 500);
          });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-address {
  padding: 24rpx 32rpx;
  .address-update {
    height: 88rpx;
    background-color: #fff;
    border-radius: 8rpx;
    padding: 0 86rpx;
    margin-bottom: 24rpx;
  }
  .address-line {
    height: 40rpx;
    width: 2rpx;
    background-color: #d8d8d8;
  }
}
</style>