cfc/cfc-frontend/pages/shop/address/address.vue

<template>
  <view class="container">
    <scroll-view
      scroll-y
      class="address-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view v-if="loading && addressList.length === 0" class="loading-wrap">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="addressList.length === 0" class="empty-wrap">
        <text class="empty-icon">📍</text>
        <text class="empty-text">暂无收货地址</text>
      </view>
      <view v-else>
        <view
          v-for="item in addressList"
          :key="item.id"
          class="address-card"
          @click="onSelect(item)"
        >
          <view class="card-top">
            <view class="name-phone">
              <text class="receiver-name">{{ item.receiverName }}</text>
              <text class="receiver-phone">{{ formatPhone(item.phone) }}</text>
              <text v-if="item.isDefault === 1" class="default-badge">默认</text>
            </view>
          </view>
          <text class="address-detail">
            {{ item.province }}{{ item.city }}{{ item.district }}{{ item.street }}
          </text>
          <view class="card-actions">
            <view class="set-default" v-if="item.isDefault !== 1">
              <text class="set-default-btn" @click.stop="onSetDefault(item.id)">设为默认</text>
            </view>
            <view class="action-right">
              <text class="action-btn edit-btn" @click.stop="onEdit(item.id)">✏️ 编辑</text>
              <text class="action-btn delete-btn" @click.stop="onDelete(item.id)">🗑 删除</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="bottom-bar">
      <button class="add-btn" @click="onAdd">+ 新增地址</button>
    </view>
  </view>
</template>

<script>
import config from '@/config.js'

export default {
  data() {
    return {
      addressList: [],
      loading: false,
      refreshing: false,
      userId: null,
      selectMode: false
    }
  },
  onLoad(options) {
    this.userId = uni.getStorageSync('userId')
    if (options.selectMode) {
      this.selectMode = options.selectMode === '1'
    }
    this.loadAddressList()
  },
  onShow() {
    this.loadAddressList()
  },
  methods: {
    loadAddressList() {
      this.loading = true
      var that = this
      uni.request({
        url: config.api('/api/user/address/list'),
        method: 'POST',
        data: {},
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          that.loading = false
          that.refreshing = false
          if (res.data && res.data.code === 200) {
            that.addressList = res.data.data || []
          }
        },
        fail: function() {
          that.loading = false
          that.refreshing = false
        }
      })
    },
    onRefresh() {
      this.refreshing = true
      this.loadAddressList()
    },
    onSelect(item) {
      if (this.selectMode) {
        var pages = getCurrentPages()
        var prevPage = pages[pages.length - 2]
        if (prevPage) {
          prevPage.selectedAddress = item
        }
        uni.navigateBack()
      }
    },
    onEdit(id) {
      uni.navigateTo({ url: '/pages/shop/address-edit/address-edit?addressId=' + id })
    },
    onAdd() {
      uni.navigateTo({ url: '/pages/shop/address-edit/address-edit' })
    },
    onDelete(id) {
      var that = this
      uni.showModal({
        title: '确认删除',
        content: '确定删除该地址吗？',
        success: function(confirm) {
          if (confirm.confirm) {
            uni.request({
              url: config.api('/api/user/address/delete'),
              method: 'POST',
              data: { id: id },
              header: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + uni.getStorageSync('token')
              },
              success: function(res) {
                if (res.data && res.data.code === 200) {
                  uni.showToast({ title: '已删除', icon: 'success' })
                  that.loadAddressList()
                } else {
                  uni.showToast({ title: res.data.message || '删除失败', icon: 'none' })
                }
              }
            })
          }
        }
      })
    },
    onSetDefault(id) {
      var that = this
      uni.request({
        url: config.api('/api/user/address/setDefault'),
        method: 'POST',
        data: { id: id },
        header: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + uni.getStorageSync('token')
        },
        success: function(res) {
          if (res.data && res.data.code === 200) {
            uni.showToast({ title: '已设为默认', icon: 'success' })
            that.loadAddressList()
          }
        }
      })
    },
    formatPhone(phone) {
      if (!phone) return ''
      if (phone.length === 11) {
        return phone.substr(0, 3) + '****' + phone.substr(7)
      }
      return phone
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}
.address-list {
  flex: 1;
  height: calc(100vh - 120rpx);
}
.loading-wrap,
.empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}
.loading-text {
  font-size: 26rpx;
  color: #999;
}
.empty-icon {
  font-size: 100rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
}
.address-card {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.card-top {
  margin-bottom: 10rpx;
}
.name-phone {
  display: flex;
  align-items: center;
}
.receiver-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-right: 20rpx;
}
.receiver-phone {
  font-size: 26rpx;
  color: #666;
}
.default-badge {
  font-size: 20rpx;
  color: #F97316;
  background: #fff7e6;
  padding: 2rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 12rpx;
}
.address-detail {
  display: block;
  font-size: 26rpx;
  color: #999;
  line-height: 1.5;
  margin-bottom: 16rpx;
}
.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}
.set-default-btn {
  font-size: 24rpx;
  color: #1890ff;
  padding: 4rpx 12rpx;
}
.action-right {
  display: flex;
}
.action-btn {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  margin-left: 12rpx;
}
.edit-btn {
  color: #666;
}
.delete-btn {
  color: #ff4d4f;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx;
  z-index: 100;
}
.add-btn {
  width: 100%;
  height: 72rpx;
  line-height: 72rpx;
  background: #fff;
  color: #F97316;
  font-size: 28rpx;
  font-weight: bold;
  border: 2rpx solid #F97316;
  border-radius: 36rpx;
  text-align: center;
}
.add-btn::after {
  border: none;
}
</style>