cfc/cfc-frontend/pages/shop/consignee-list/consignee-list.vue

<template>
  <view class="container">
    <view v-if="loading" class="loading-wrap">
      <text>加载中...</text>
    </view>

    <view v-else-if="list.length === 0" class="empty-wrap">
      <text class="empty-icon">📍</text>
      <text class="empty-text">暂无收货人信息</text>
      <text class="empty-desc">添加收货人后可在购买时快速选择</text>
      <button class="add-btn" @click="goAdd">添加收货人</button>
    </view>

    <view v-else class="list-wrap">
      <view
        v-for="item in list"
        :key="item.id"
        class="consignee-card"
        @click="goEdit(item.id)"
      >
        <view class="card-header">
          <text class="card-name">{{ item.name || '未填写' }}</text>
          <text class="card-phone">{{ item.phone || '' }}</text>
          <text v-if="item.isDefault === 1" class="default-tag">默认</text>
        </view>
        <view class="card-body">
          <text v-if="item.idCard" class="card-info">身份证: {{ maskIdCard(item.idCard) }}</text>
          <text v-if="item.ethnicity" class="card-info">民族: {{ item.ethnicity }}</text>
          <text v-if="item.bloodType" class="card-info">血型: {{ item.bloodType }}</text>
          <text v-if="item.handSignature" class="card-info">已设置手签名</text>
          <text v-if="!item.idCard && !item.ethnicity && !item.bloodType && !item.handSignature" class="card-info card-info-muted">暂无详细信息</text>
        </view>
        <view class="card-footer">
          <text class="delete-btn" @click.stop="handleDelete(item.id)">删除</text>
          <text class="arrow">›</text>
        </view>
      </view>

      <button class="add-btn add-btn-bottom" @click="goAdd">添加收货人</button>
    </view>
  </view>
</template>

<script>
import { consigneeList, consigneeDelete } from '../../../utils/api.js'

export default {
  data() {
    return {
      loading: false,
      list: []
    }
  },
  onShow() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        const res = await consigneeList()
        if (res.code === 200) {
          this.list = res.data || []
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.loading = false
      }
    },
    goAdd() {
      uni.navigateTo({ url: '/pages/shop/consignee-edit/consignee-edit' })
    },
    goEdit(id) {
      uni.navigateTo({ url: '/pages/shop/consignee-edit/consignee-edit?id=' + id })
    },
    handleDelete(id) {
      var that = this
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该收货人吗？',
        success: function(res) {
          if (res.confirm) {
            that.doDelete(id)
          }
        }
      })
    },
    async doDelete(id) {
      try {
        const res = await consigneeDelete(id)
        if (res.code === 200) {
          uni.showToast({ title: '删除成功', icon: 'success' })
          this.loadList()
        }
      } catch (e) {
        console.error(e)
      }
    },
    maskIdCard(card) {
      if (!card || card.length < 8) return card
      return card.substring(0, 4) + '********' + card.substring(card.length - 4)
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20rpx;
}
.loading-wrap, .empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 60rpx;
}
.empty-icon {
  font-size: 100rpx;
  margin-bottom: 30rpx;
}
.empty-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}
.empty-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 60rpx;
}
.add-btn {
  width: 60%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 50rpx;
  font-size: 30rpx;
  padding: 24rpx;
  line-height: 1.5;
}
.consignee-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.card-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}
.card-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.card-phone {
  font-size: 28rpx;
  color: #666;
}
.default-tag {
  font-size: 22rpx;
  color: #F97316;
  background: #FFF7ED;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  border: 1rpx solid #FED7AA;
}
.card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
}
.card-info {
  font-size: 24rpx;
  color: #999;
  background: #f5f5f5;
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
}
.card-info-muted {
  color: #ccc;
  background: transparent;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16rpx;
  border-top: 1rpx solid #f5f5f5;
}
.delete-btn {
  font-size: 26rpx;
  color: #f56c6c;
  padding: 8rpx 16rpx;
}
.arrow {
  font-size: 28rpx;
  color: #ccc;
}
.add-btn-bottom {
  margin-top: 20rpx;
  width: 80%;
}
</style>