wagoo-douy3/src/page-reser/components/select-address-modal.vue

<template>
  <select-modal @close="closeAction" title="选择服务地址">
    <view class="select-address-container">
      <view v-if="!isLoading && addressList.length" class="address-container">
        <scroll-view class="scroll-view" scroll-y @scrolltolower="loadMoreAction"
                     refresher-background="transparent">
          <view class="address-item" v-for="(item, index) in addressList" :key="item.id"
                @click.stop="changeAddress(item)">
            <view class="address-info-view">
              <view class="address-name-view">
                <text v-if="item.is_default" class="default-address fs-18">默认</text>
                <text class="app-fc-main fs-30 app-font-bold name-text">{{ item.recipient_name }}</text>
                <text class="app-fc-main fs-30 app-font-bold">{{ item.phone }}</text>
              </view>
              <text class="app-fc-normal fs-26">{{ getAddressText(item) }}</text>
            </view>
            <image @click.stop="goToEditAddress(item)"  src="@/static/images/address_edit.png" mode="aspectFit" class="address-edit-icon"/>
          </view>
        </scroll-view>
      </view>
      <view class="address-container flex-center" v-if="isLoading">
        <uni-load-more status="loading" :show-text="false"/>
      </view>
      <view v-if="addressList.length === 0 && !isLoading" class="address-container">
        <image src="https://activity.wagoo.live/no_address.png" class="no-address-img" mode="widthFix"/>
        <!-- <text class="app-fc-normal fs-32 no-text">暂无地址信息</text> -->
      </view>
      <view class="add-btn" @click.stop="gotoAddAddress">
        <image class="add-icon" src="@/static/images/add.png" mode="aspectFit"/>
        <text class="app-fc-white fs-30">添加地址</text>
      </view>
    </view>
  </select-modal>
</template>

<script>
import SelectModal from "@/components/select-modal.vue";
import { getAddressList } from "@/api/address";

export default {
  components: { SelectModal },
  props: {
    selectAddress: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      addressList: [],
      isLoading: true,
      pageNumber: 1,
      pageSize: 10,
      isLoadMore: false,
      isNoMore: false,
    };
  },
  computed: {
    userInfo() {
      return this.$store.state?.user?.userInfo || {};
    }
  },
  mounted() {
    this.pageNumber = 1;
    this.getData();
  },
  methods: {
    closeAction() {
      this.$emit('close');
    },
    changeAddress(address) {
      this.$emit('changeAddress', address);
    },
    loadMoreAction() {
      if (this.isNoMore || this.isLoadMore) {
        return;
      }
      this.pageNumber++;
      this.isLoadMore = true;
      this.getData()
    },
    getData() {
      getAddressList({ user_id: this.userInfo.userID }).then((res) => {
        let list = res?.data || [];
        if (this.pageNumber === 1) {
          this.addressList = list;
        } else {
          this.addressList = [...this.addressList, ...list];
        }
        this.isLoading = false;
        this.isLoadMore = false;
        this.isNoMore = list.length < this.pageSize;
      }).catch(() => {
        if (this.pageNumber !== 1) {
          this.pageNumber--;
        }
        this.isLoading = false;
        this.isLoadMore = false;
      })
    },
    getAddressText(item) {
      // 组合地址信息：省市区 + 详细地址
      const region = [item.province, item.city, item.district].filter(Boolean).join('');
      return region ? `${region}${item.full_address}` : item.full_address;
    },
    gotoAddAddress() {
      uni.navigateTo({
        url: `/pages/client/address/edit?isAdd=1`,
        events: {
          refreshAddress: () => {
            this.isLoading = true;
            this.isNoMore = false;
            this.isLoadMore = false;
            this.pageNumber = 1;
            this.getData();
          },
        },
      })
    },
    goToEditAddress(item){
      uni.navigateTo({
        url: `/pages/client/address/edit?id=${item?.id || ""}`,
        events: {
          refreshAddress: () => {
            this.isLoading = true;
            this.isNoMore = false;
            this.isLoadMore = false;
            this.pageNumber = 1;
            this.getData();
          },
        },
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.select-address-container {
  width: 100%;
  padding: 0 56rpx 10rpx;
  box-sizing: border-box;

  .address-container {
    width: 100%;
    height: 444rpx;
    display: flex;
    flex-direction: column;
    margin-bottom: 18rpx;

    .no-address-img {
      margin-top: 30rpx;
      width: 348rpx;
      align-self: center;
    }

    .no-text {
      margin: 0 0 24rpx;
      align-self: center;
    }

    .scroll-view {
      width: 100%;
      height: 100%;
    }

    .address-item {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 30rpx 0rpx;
      box-sizing: border-box;
      border-bottom: 2rpx solid #F7F3F7;

      .address-info-view {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 30rpx;

        .address-name-view {
          display: flex;
          flex: 1;
          align-items: center;
          margin-bottom: 12rpx;

          .default-address {
            padding: 2rpx 6rpx;
            color: #40ae36;
            background: rgba(64, 174, 54, 0.2);
            border-radius: 6rpx;
            margin-right: 16rpx;
          }

          .name-text {
            margin-right: 16rpx;
          }
        }
      }

      .address-edit-icon {
        width: 48rpx;
        height: 48rpx;
      }


    }
  }

  .add-btn {
    width: 100%;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 45rpx;
    background-color: $app_color_main;

    .add-icon {
      width: 34rpx;
      height: 34rpx;
      flex-shrink: 0;
      margin-right: 18rpx;
    }
  }
}

</style>