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-edit" @click.stop="editAddress(item.id)">
          <text class="edit-icon">📝</text>
        </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'

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 = () => {
  const storedAddresses = uni.getStorageSync('addresses')
  if (storedAddresses) {
    try {
      addresses.value = JSON.parse(storedAddresses as string) as Address[]
    } catch (e) {
      console.error('Failed to parse addresses', e)
      addresses.value = []
    }
  } else {
    // 初始Mock数据
    addresses.value = [
      {
        id: 'addr_001',
        name: '张三',
        phone: '13800138000',
        province: '北京市',
        city: '北京市',
        district: '朝阳区',
        detail: '三里屯SOHO A座',
        isDefault: true,
        label: '公司'
      }
    ]
    uni.setStorageSync('addresses', JSON.stringify(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 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>
.address-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 80px;
}

.address-list {
  padding: 15px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.empty-text {
  color: #999;
  font-size: 16px;
}

.address-item {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-content {
  flex: 1;
  margin-right: 15px;
}

.item-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-right: 10px;
}

.user-phone {
  font-size: 14px;
  color: #666;
  margin-right: 10px;
}

.default-tag {
  background-color: #ff5000;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 5px;
}

.label-tag {
  background-color: #e0f2f1;
  color: #00796b;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.address-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.item-edit {
  padding: 10px;
  border-left: 1px solid #f0f0f0;
}

.edit-icon {
  font-size: 20px;
  color: #999;
}

.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);
}

.add-btn {
  background-color: #ff5000;
  color: white;
  border-radius: 25px;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  border: none;
}
</style>