storlead-sasa-platform/ui/smarttrade-platform/src/components/PreviewCustomerModal.vue

<template>
  <div v-if="visible" class="modal-overlay" @click.self="$emit('close')">
    <div class="modal preview-customer-modal">
      <div class="modal-header">
        <div class="modal-title">
          <div class="title-icon bg-primary"><i class="fas fa-eye"></i></div>
          <div>
            <h3>预览客户</h3>
          </div>
        </div>
        <button class="modal-close" type="button" @click="$emit('close')">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <div class="modal-body">
        <div v-if="customers && customers.length" class="customer-list">
          <div v-for="customer in customers" :key="customer.id" class="customer-card">
            <div class="customer-card-left">
              <div class="customer-logo">{{ customer.logoText || customer.customerName.charAt(0) }}</div>
              <div class="customer-meta">
                <div class="customer-name-row">
                  <div class="customer-name">{{ customer.customerName }}</div>
                  <span class="customer-badge">{{ customer.tag || '潜客' }}</span>
                </div>
                <div class="customer-subtitle">{{ customer.role || '采购总监' }} · {{ customer.company }}</div>
                <div class="customer-info-row">
                  <span><i class="fas fa-map-marker-alt"></i> {{ customer.continent }} - {{ customer.country }}</span>
                  <span><i class="fas fa-dollar-sign"></i> {{ customer.annualPurchase }}</span>
                </div>
              </div>
            </div>
            <div class="customer-card-right">
              <div class="customer-score">{{ customer.score }}</div>
              <div class="customer-score-label">意向分</div>
            </div>
          </div>
        </div>
        <div v-else class="empty-state">暂无客户数据</div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" @click="$emit('close')">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  visible: { type: Boolean, default: false },
  customers: { type: Array, default: () => [] }
})
</script>

<style scoped>
.preview-customer-modal {
  max-width: 760px;
}

.customer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 18px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.customer-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.customer-logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(56, 189, 248, 0.15);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.customer-meta {
  min-width: 0;
  flex: 1;
}

.customer-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.customer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}

.customer-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.5;
}

.customer-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.customer-info-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.customer-info-row i {
  width: 14px;
  text-align: center;
  color: var(--text-secondary);
}

.customer-card-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 92px;
}

.customer-score {
    width: 54px;
    height: 54px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
}

.customer-score-label {
  margin-top: 8px;
  font-size: 12px;
  color: #64748B;
}

.empty-state {
  padding: 60px 0;
  text-align: center;
  color: var(--text-secondary);
}
</style>