vist_go_uniApp/packageShop/pages/address/index.vue

<template>
  <view class="address-container">
    <u-empty v-if="addressList.length === 0" mode="address" icon="/static/images/empty/address.png">
      <view class="empty-tips">暂无收货地址</view>
    </u-empty>
    
    <view v-else class="address-list">
      <view v-for="(item, index) in addressList" :key="index" class="address-item">
        <view class="address-info" @click="selectAddress(item)">
          <view class="user-info">
            <text class="name">{{item.name}}</text>
            <text class="phone">{{item.phone}}</text>
            <text v-if="item.isDefault" class="default-tag">默认</text>
          </view>
          <view class="address-detail">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
        </view>
        <view class="operation">
          <view class="edit" @click="editAddress(item)">
            <u-icon name="edit-pen" size="40rpx"></u-icon>
          </view>
          <view class="delete" @click="deleteAddress(item)">
            <u-icon name="trash" size="40rpx"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="add-btn">
      <u-button type="primary" text="新增收货地址" @click="addAddress" color="#D93025"></u-button>
    </view>

    <u-modal
      :show="showDeleteModal"
      @confirm="confirmDelete"
      @cancel="showDeleteModal = false"
      title="删除确认"
      content="确定要删除该收货地址吗？"
      showCancelButton>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [],
      showDeleteModal: false,
      currentAddress: null
    }
  },
  onShow() {
    this.getAddressList()
  },
  methods: {
    async getAddressList() {
      try {
        const res = await this.$api.address.list()
        this.addressList = res.data || []
      } catch (e) {
        this.$u.toast('获取地址列表失败')
      }
    },
    addAddress() {
      uni.navigateTo({
        url: '/packageShop/pages/address-edit/index'
      })
    },
    editAddress(item) {
      uni.navigateTo({
        url: '/packageShop/pages/address-edit/index?id=' + item.id
      })
    },
    deleteAddress(item) {
      this.currentAddress = item
      this.showDeleteModal = true
    },
    async confirmDelete() {
      if (!this.currentAddress) return
      try {
        await this.$api.address.delete(this.currentAddress.id)
        this.$u.toast('删除成功')
        this.getAddressList()
      } catch (e) {
        this.$u.toast('删除失败')
      }
      this.showDeleteModal = false
      this.currentAddress = null
    },
    selectAddress(item) {
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      if (prevPage && prevPage.$vm.setSelectedAddress) {
        prevPage.$vm.setSelectedAddress(item)
        uni.navigateBack()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.address-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  
  .address-list {
    padding: 20rpx;
    
    .address-item {
      background: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .address-info {
        .user-info {
          margin-bottom: 16rpx;
          
          .name {
            font-size: 32rpx;
            font-weight: bold;
            margin-right: 20rpx;
          }
          
          .phone {
            font-size: 28rpx;
            color: #666;
          }
          
          .default-tag {
            background: #D93025;
            color: #fff;
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
            margin-left: 20rpx;
          }
        }
        
        .address-detail {
          font-size: 28rpx;
          color: #333;
          line-height: 1.4;
        }
      }
      
      .operation {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;
        border-top: 1rpx solid #eee;
        padding-top: 20rpx;
        
        .edit, .delete {
          padding: 10rpx 20rpx;
        }
      }
    }
  }
  
  .add-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 40rpx;
    background: #fff;
  }
  
  .empty-tips {
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
  }
}
</style>