medical-mall/pages/mall/consumer/address-list.uvue

<template>
  <view class="address-list-page">
    <view class="address-list">
      <view v-if="addresses.length === 0" class="empty-state">
        <text class="empty-icon">📍</text>
        <text class="empty-text">暂无收货地址</text>
      </view>
      
      <view v-else v-for="(item, index) in addresses" :key="item.id" class="address-item" @click="selectAddress(item)">
        <view class="item-content">
          <view class="item-header">
            <text class="user-name">{{ item.name }}</text>
            <text class="user-phone">{{ item.phone }}</text>
            <text v-if="item.isDefault" class="default-tag">默认</text>
            <text v-if="item.label" class="label-tag">{{ item.label }}</text>
          </view>
          <text class="address-text">{{ getFullAddress(item) }}</text>
        </view>
        <view class="item-actions">
            <view class="action-item" @click.stop="editAddress(item.id)">
                <text class="action-icon">📝</text>
            </view>
            <view class="action-item" @click.stop="deleteAddress(item.id)">
                <text class="action-icon"><3E>️</text>
            </view>
        </view>
      </view>
    </view>
    
    <view class="footer-btn">
      <button class="add-btn" @click="addAddress">新建收货地址</button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { supabaseService, type UserAddress as SupabaseUserAddress } from '@/utils/supabaseService.uts'

type Address = {
  id: string
  name: string
  phone: string
  province: string
  city: string
  district: string
  detail: string
  isDefault: boolean
  label?: string
}

const addresses = ref<Address[]>([])
const selectionMode = ref<boolean>(false)
let openerEventChannel: any = null

onShow(() => {
  loadAddresses()
})

onMounted(() => {
  try {
    const ec = uni.getOpenerEventChannel()
    openerEventChannel = ec
    ec?.on('setSelectMode', (data: any) => {
      if (data && typeof data.selectMode === 'boolean') {
        selectionMode.value = data.selectMode
      }
    })
  } catch (e) {
    // ignore
  }
})

const loadAddresses = async () => {
  try {
    // 从Supabase加载地址数据
    const supabaseAddresses = await supabaseService.getAddresses()
    
    // 转换数据格式以匹配前端界面
    const transformedAddresses = supabaseAddresses.map((item: SupabaseUserAddress) => ({
      id: item.id,
      name: item.recipient_name,
      phone: item.phone,
      province: item.province,
      city: item.city,
      district: item.district,
      detail: item.detail_address,
      isDefault: item.is_default,
      label: '' // Supabase表没有label字段，可以后续考虑添加或使用其他字段
    }))
    
    addresses.value = transformedAddresses
    
    // 同时更新本地存储作为缓存
    uni.setStorageSync('addresses', JSON.stringify(addresses.value))
  } catch (error) {
    console.error('加载地址数据失败:', error)
    // 如果API调用失败，尝试从本地存储加载
    const storedAddresses = uni.getStorageSync('addresses')
    if (storedAddresses) {
      try {
        addresses.value = JSON.parse(storedAddresses as string) as Address[]
      } catch (e) {
        console.error('解析地址数据失败', e)
        addresses.value = []
      }
    } else {
      addresses.value = []
    }
  }
}

const getFullAddress = (item: Address): string => {
  return `${item.province}${item.city}${item.district} ${item.detail}`
}

const addAddress = () => {
  uni.navigateTo({
    url: '/pages/mall/consumer/address-edit'
  })
}

// 删除地址
const deleteAddress = async (id: string) => {
    uni.showModal({
        title: '提示',
        content: '确定要删除该地址吗？',
        success: async (res) => {
            if (res.confirm) {
                // 调用Supabase服务删除地址
                const success = await supabaseService.deleteAddress(id)
                
                if (success) {
                    // 从本地列表移除
                    const index = addresses.value.findIndex(addr => addr.id === id)
                    if (index !== -1) {
                        addresses.value.splice(index, 1)
                        // 更新本地存储缓存
                        uni.setStorageSync('addresses', JSON.stringify(addresses.value))
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        })
                    }
                } else {
                    console.error('删除地址失败')
                    uni.showToast({
                        title: '删除失败',
                        icon: 'none'
                    })
                }
            }
        }
    })
}

const editAddress = (id: string) => {
  uni.navigateTo({
    url: `/pages/mall/consumer/address-edit?id=${id}`
  })
}

const selectAddress = (item: Address) => {
  if (selectionMode.value && openerEventChannel) {
    openerEventChannel.emit('addressSelected', {
      id: item.id,
      recipient_name: item.name,
      phone: item.phone,
      province: item.province,
      city: item.city,
      district: item.district,
      detail: item.detail,
      is_default: item.isDefault
    })
    uni.navigateBack()
  } else {
    editAddress(item.id)
  }
}
</script>

<style>
.item-actions {
  padding: 10px;
  border-left: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column; /* 竖向排列图标 */
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.footer-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 10px 15px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  display: flex;
  justify-content: center; /* 居中显示 */
  align-items: center;
}

.add-btn {
  background-color: #ff5000;
  color: white;
  border-radius: 25px;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  border: none;
  width: 100%; /* 默认占满 */
  max-width: 100%;
}

/* 响应式布局优化 */
@media screen and (min-width: 768px) {
  .address-list {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .address-list-page {
    background-color: #f5f5f5;
  }
  
  .footer-btn {
    max-width: 800px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    border-radius: 12px 12px 0 0; /* 桌面端加点圆角更美观 */
  }
  
  .add-btn {
    width: 300px; /* 桌面端限制宽度 */
  }
}
</style>