bindbox-mini/pages/address/index.vue

<template>
  <view class="wrap">
    <view class="header">
      <button class="add" @click="toAdd">新增地址</button>
    </view>
    <view v-if="error" class="error">{{ error }}</view>
    <view v-if="list.length === 0 && !loading" class="empty">暂无地址</view>
    <view v-for="item in list" :key="item.id" class="addr">
      <view class="addr-main">
        <view class="addr-row">
          <text class="name">姓名：{{ item.name || item.realname }}</text>
        </view>
        <view class="addr-row">
          <text class="phone">手机号：{{ item.phone || item.mobile }}</text>
        </view>
        <view class="addr-row" v-if="item.is_default">
          <text class="default">默认</text>
        </view>
        <view class="addr-row">
          <text class="region">省市区：{{ item.province }}{{ item.city }}{{ item.district }}</text>
        </view>
        <view class="addr-row">
          <text class="detail">详细地址：{{ item.address || item.detail }}</text>
        </view>
      </view>
      <view class="addr-actions">
        <button size="mini" @click="toEdit(item)">编辑</button>
        <button size="mini" type="warn" @click="onDelete(item)">删除</button>
        <button size="mini" :disabled="item.is_default" @click="onSetDefault(item)">设为默认</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { listAddresses, deleteAddress, setDefaultAddress } from '../../api/appUser'

const list = ref([])
const loading = ref(false)
const error = ref('')

async function fetchList() {
  const user_id = uni.getStorageSync('user_id')
  const token = uni.getStorageSync('token')
  const phoneBound = !!uni.getStorageSync('phone_bound')
  if (!user_id || !token || !phoneBound) {
    uni.showModal({
      title: '提示',
      content: '请先登录并绑定手机号',
      confirmText: '去登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({ url: '/pages/login/index' })
        }
      }
    })
    return
  }
  loading.value = true
  error.value = ''
  try {
    const data = await listAddresses(user_id)
    list.value = Array.isArray(data) ? data : (data && (data.list || data.items)) || []
  } catch (e) {
    error.value = e && (e.message || e.errMsg) || '获取地址失败'
  } finally {
    loading.value = false
  }
}

function toAdd() {
  uni.removeStorageSync('edit_address')
  uni.navigateTo({ url: '/pages/address/edit' })
}

function toEdit(item) {
  uni.setStorageSync('edit_address', item)
  uni.navigateTo({ url: `/pages/address/edit?id=${item.id}` })
}

function onDelete(item) {
  const user_id = uni.getStorageSync('user_id')
  uni.showModal({
    title: '确认删除',
    content: '确定删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await deleteAddress(user_id, item.id)
          fetchList()
        } catch (e) {
          uni.showToast({ title: '删除失败', icon: 'none' })
        }
      }
    }
  })
}

async function onSetDefault(item) {
  try {
    const user_id = uni.getStorageSync('user_id')
    await setDefaultAddress(user_id, item.id)
    fetchList()
  } catch (e) {
    uni.showToast({ title: '设置失败', icon: 'none' })
  }
}

onLoad(() => {
  fetchList()
})
</script>

<style scoped>
/* ============================================
   奇盒潮玩 - 地址管理页面
   采用暖橙色调的卡片列表设计
   ============================================ */

.wrap {
  padding: 24rpx;
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8F3 0%, #FFFFFF 100%);
}

.header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20rpx;
}
.add {
  font-size: 28rpx;
  background: linear-gradient(135deg, #FF9F43, #FF6B35) !important;
  color: #FFFFFF !important;
  border-radius: 999rpx;
  padding: 0 32rpx;
  height: 72rpx;
  line-height: 72rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 16rpx rgba(255, 107, 53, 0.35);
}
.add:active {
  transform: scale(0.96);
}

/* 地址卡片 */
.addr {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
}

.addr-main {
  margin-bottom: 16rpx;
}

.addr-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.addr-row:last-child {
  margin-bottom: 0;
}

.name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1F2937;
}
.phone {
  font-size: 28rpx;
  color: #6B7280;
}
.default {
  font-size: 22rpx;
  color: #FFFFFF;
  background: linear-gradient(135deg, #FF9F43, #FF6B35);
  padding: 4rpx 12rpx;
  border-radius: 999rpx;
  font-weight: 500;
}
.region {
  font-size: 26rpx;
  color: #6B7280;
}
.detail {
  font-size: 26rpx;
  color: #1F2937;
  line-height: 1.5;
}

/* 操作按钮 */
.addr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12rpx;
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #F3F4F6;
}
.addr-actions button {
  font-size: 26rpx;
  height: 56rpx;
  line-height: 56rpx;
  padding: 0 24rpx;
  border-radius: 28rpx;
  margin: 0;
}
.addr-actions button[type="warn"] {
  background: #FEE2E2 !important;
  color: #EF4444 !important;
}
.addr-actions button:not([type]) {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}
.addr-actions button:not([type]):active {
  background: #E5E7EB !important;
}

/* 空状态 */
.empty {
  text-align: center;
  color: #9CA3AF;
  margin-top: 120rpx;
  font-size: 28rpx;
}

/* 错误提示 */
.error {
  color: #EF4444;
  font-size: 26rpx;
  margin-bottom: 16rpx;
  padding: 16rpx;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 12rpx;
  text-align: center;
}
</style>