wx-qhb/pageC/addressManagement/addressManagement.vue

<template>
  <view>
    <view class="top-tab">
      <view :class="{ select: manage == 1 }" @click="switchTab(1)">
        {{ i18n.inland }}
      </view>
      <view :class="{ select: manage == 0 }" @click="switchTab(0)">
        {{ i18n.international }}
      </view>
    </view>
    <view class="content" v-if="addressList.length != 0">
      <addressVue
        @deleteAddress="deleteAddress"
        @setDefault="setDefault"
        @toDetail="toDetail"
        v-for="item in addressList"
        :itemInfo="item"
        :key="item.id"
      />
    </view>
    <view class="empty" v-else> 空空如也~ </view>
    <view class="footer" v-if="manage == 1">
      <button class="wx">{{ i18n.wx }}</button>
      <button
        class="add"
        @click="toAddRess('/pageC/addEditAddress/addEditAddress')"
      >
        {{ i18n.add }}
      </button>
    </view>
    <view class="footer" v-else>
      <button
        class="add-international"
        @click="toAddRess('/pageC/internationalAddress/internationalAddress')"
      >
        {{ i18n.add }}
      </button>
    </view>
  </view>
</template>

<script>
import addressVue from "./component/address.vue";
export default {
  components: {
    addressVue,
  },
  data() {
    return {
      manage: 1,
      addressList: [],
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    switchTab(num) {
      this.manage = num;
      this.getAddressList(num);
    },
    //设置默认地址
    setDefault(value) {
      uni.$u.http
        .post(`/api/address/default/${value.id}`)
        .then((res) => {
          this.getAddressList(this.manage);
        })
        .catch(() => {});
    },
    //跳转地址详情页
    toDetail(id) {
      if (this.manage) {
        uni.navigateTo({
          url: `/pageC/addEditAddress/addEditAddress?id=${id}`,
        });
      } else {
        uni.navigateTo({
          url: `/pageC/internationalAddress/internationalAddress?id=${id}`,
        });
      }
    },
    //删除地址
    deleteAddress(value) {
      uni.$u.http.delete(`/api/address/${value.id}`).then((res) => {
        this.getAddressList(this.manage);
      });
    },
    toAddRess(url) {
      uni.navigateTo({
        url,
      });
    },
    getAddressList(num) {
      uni.$u.http
        .get(
          `/api/address?is_page=0&page=1&limit=10&is_domestic=${num}&is_default=`
        )
        .then((res) => {
          this.addressList = res;
        });
    },
  },
  onShow() {
    this.getAddressList(this.manage);
  },
  mounted() {
    // this.getAddressList(1);
    uni.setNavigationBarTitle({
      title: this.i18n.address,
    });
  },
};
</script>

<style scoped lang="scss">
.top-tab {
  display: flex;
  font-size: 32rpx;
  color: rgba(34, 34, 34, 0.8);
  justify-content: space-around;
  background-color: #fff;
  height: 80rpx;
  align-items: center;

  .select {
    position: relative;
    font-weight: 600;
  }

  .select::before {
    content: "";
    display: block;
    width: 50%;
    height: 4rpx;
    background-color: #f83224;
    position: absolute;
    bottom: -20rpx;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.content {
  padding: 20rpx 24rpx;
  padding-bottom: 200rpx;
}

.empty {
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(51, 51, 51, 0.7);
  margin-top: 200rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  width: 750rpx;
  padding: 20rpx 0 66rpx;

  .wx {
    width: 338rpx;
    background-color: #fff;
    border-radius: 40rpx;
    height: 80rpx;
    font-size: 32rpx;
    color: #222;
    padding: 0;
    margin: 0;
    border: 2rpx solid #979797;
  }

  .add {
    width: 338rpx;
    background-color: #f83224;
    border-radius: 40rpx;
    height: 80rpx;
    font-size: 32rpx;
    color: #fff;
    padding: 0;
    margin: 0;
  }

  .add-international {
    width: 702rpx;
    background-color: #f83224;
    border-radius: 40rpx;
    height: 80rpx;
    font-size: 32rpx;
    color: #fff;
    margin: 0 auto;
  }
}
</style>