integral-shop/single_uniapp22miao/pages/sub-pages/address/index.vue

<template>
  <view class="address-list-page">
    <!-- 地址列表 -->
    <view class="address-list">
      <view 
        v-for="(item, index) in addressList" 
        :key="item.id"
        class="address-item"
      >
        <view class="item-content" @click="selectAddress(item)">
          <view class="top-row">
            <view class="user-info">
              <text class="name">{{ item.name }}</text>
              <text class="phone">{{ item.mobile }}</text>
            </view>
            <view class="default-tag" v-if="item.is_default == 1">默认</view>
          </view>
          
          <view class="address-detail">
            <text class="icon">📍</text>
            <text class="text">{{ item.province }} {{ item.city }} {{ item.district }} {{ item.detail }}</text>
          </view>
        </view>
        
        <view class="item-actions">
          <button class="action-btn" @click="editAddress(item)">编辑</button>
          <button class="action-btn delete" @click="deleteAddress(item, index)">删除</button>
          <button 
            class="action-btn" 
            v-if="item.is_default != 1"
            @click="setDefault(item)"
          >
            设为默认
          </button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="addressList.length === 0 && !loading">
        <text class="icon">📍</text>
        <text class="text">暂无收货地址</text>
      </view>
    </view>
    
    <!-- 添加地址按钮 -->
    <view class="add-btn-container">
      <button class="add-btn" @click="addAddress">
        <text class="icon">+</text>
        <text>新增收货地址</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [],
      loading: false,
      fromOrderPage: false
    }
  },
  
  onLoad(options) {
    this.fromOrderPage = options.from === 'order';
    this.loadAddressList();
  },
  
  onShow() {
    // 从编辑页返回时刷新列表
    if (this.addressList.length > 0) {
      this.loadAddressList();
    }
  },
  
  methods: {
    // 加载地址列表
    async loadAddressList() {
      this.loading = true;
      
      try {
        const res = await this.$http.get('/api/address/list');
        if (res.code === 0) {
          this.addressList = res.data.list || [];
        }
      } catch (error) {
        console.error('加载地址列表失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    // 选择地址（用于订单页）
    selectAddress(item) {
      if (this.fromOrderPage) {
        uni.$emit('selectAddress', item);
        uni.navigateBack();
      }
    },
    
    // 新增地址
    addAddress() {
      uni.navigateTo({
        url: '/pages/sub-pages/address/detail'
      });
    },
    
    // 编辑地址
    editAddress(item) {
      uni.navigateTo({
        url: `/pages/sub-pages/address/detail?id=${item.id}`
      });
    },
    
    // 删除地址
    deleteAddress(item, index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该地址吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await this.$http.post('/api/address/delete', {
                id: item.id
              });
              
              if (result.code === 0) {
                this.addressList.splice(index, 1);
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                });
              }
            } catch (error) {
              uni.showToast({
                title: error.msg || '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 设为默认
    async setDefault(item) {
      try {
        const res = await this.$http.post('/api/address/default', {
          id: item.id
        });
        
        if (res.code === 0) {
          // 更新列表
          this.addressList.forEach(addr => {
            addr.is_default = addr.id === item.id ? 1 : 0;
          });
          
          uni.showToast({
            title: '设置成功',
            icon: 'success'
          });
        }
      } catch (error) {
        uni.showToast({
          title: error.msg || '设置失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.address-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.address-list {
  padding: 20rpx 30rpx;
}

.address-item {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  
  .item-content {
    padding: 30rpx;
    
    .top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      
      .user-info {
        display: flex;
        align-items: center;
        
        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-right: 20rpx;
        }
        
        .phone {
          font-size: 28rpx;
          color: #666;
        }
      }
      
      .default-tag {
        padding: 4rpx 16rpx;
        background-color: #FF4757;
        color: #fff;
        font-size: 22rpx;
        border-radius: 20rpx;
      }
    }
    
    .address-detail {
      display: flex;
      align-items: flex-start;
      
      .icon {
        font-size: 28rpx;
        margin-right: 10rpx;
      }
      
      .text {
        flex: 1;
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
      }
    }
  }
  
  .item-actions {
    display: flex;
    border-top: 1px solid #f5f5f5;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #fff;
      color: #666;
      font-size: 26rpx;
      border: none;
      border-right: 1px solid #f5f5f5;
      
      &:last-child {
        border-right: none;
      }
      
      &.delete {
        color: #FF4757;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
  
  .icon {
    font-size: 120rpx;
    margin-bottom: 20rpx;
  }
  
  .text {
    font-size: 28rpx;
    color: #999;
  }
}

.add-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.add-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(90deg, #FF6B6B, #FF4757);
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .icon {
    font-size: 40rpx;
    margin-right: 10rpx;
  }
}
</style>