OfficeSystem/components/customer/CustomerSummaryBrief.vue

<template>
  <view class="summary-brief">
    <!-- 名称区域（与列表页一致，支持可选编辑按钮） -->
<!--    <view class="customer-header">-->

<!--    </view>-->

    <!-- 标签区域（与列表页一致） -->
    <view class="tags-section">
      <!-- 状态标签 -->
      <view class="customer-name-wrapper">
        <text class="customer-name">{{ displayName }}</text>
      </view>

      <view 
        class="status-tag" 
        :class="getStatusTagClass(status)"
      >
        {{ getCustomerStatusText(status) }}
      </view>
      
      <!-- 意向强度标签 -->
      <view 
        class="intent-level-tag" 
        v-if="intentLevel"
      >
        {{ getIntentLevelText(intentLevel) }}
      </view>

      <!-- 客户意向标签 -->
      <view 
        v-for="(intent, index) in intentsArray" 
        :key="index"
        class="intent-tag"
      >
        {{ intent }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { 
  getCustomerStatusText, 
  getIntentLevelText 
} from '@/utils/customerMappings';

const props = defineProps({
  name: { type: String, default: '' },
  intents: { type: [Array, String], default: () => [] },
  intentLevel: { type: [String, Number], default: '' },
  status: { type: [String, Number], default: '' },
  showEdit: { type: Boolean, default: false }
});

const displayName = computed(() => props.name || '--');

const intentsArray = computed(() => {
  if (!props.intents) return [];
  if (Array.isArray(props.intents)) {
    return props.intents;
  }
  if (typeof props.intents === 'string') {
    return props.intents
      .split(',')
      .map(s => s.trim())
      .filter(Boolean);
  }
  return [];
});

// 与客户管理列表页一致的状态样式映射
const getStatusTagClass = (status) => {
  const statusStr = String(status ?? '');
  return {
    'status-tag-potential': statusStr === '1',  // 潜在
    'status-tag-intent': statusStr === '2',     // 意向
    'status-tag-deal': statusStr === '3',       // 成交
    'status-tag-invalid': statusStr === '4',    // 失效
    'status-tag-low-intent': statusStr === '5'  // 低意向
  };
};
</script>

<style scoped lang="scss">
.summary-brief {
  display: flex;
  flex-direction: column;
}

.customer-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.customer-name-wrapper {
  display: flex;
  align-items: center;

  gap: 8px;
}

.customer-name {
  font-size: 16px;
  font-weight: 600;
  color: #2885ff;
  line-height: 1.4;
}

.edit-icon {
  color: #909399;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  
  &:active {
    opacity: 1;
  }
}

/* 标签区域（复用列表页视觉） */
.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

/* 状态标签 */
.status-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 12px;
  white-space: nowrap;
  
  &.status-tag-potential {
    color: #e6a23c;
    background-color: #fdf6ec;
    border: 1px solid #f5dab1;
  }
  
  &.status-tag-intent {
    color: #409eff;
    background-color: #ecf5ff;
    border: 1px solid #b3d8ff;
  }
  
  &.status-tag-deal {
    color: #67c23a;
    background-color: #f0f9ff;
    border: 1px solid #b3e19d;
  }
  
  &.status-tag-invalid {
    color: #f56c6c;
    background-color: #fef0f0;
    border: 1px solid #fbc4c4;
  }
  
  &.status-tag-low-intent {
    color: #909399;
    background-color: #f4f4f5;
    border: 1px solid #d3d4d6;
  }
}

/* 意向强度标签 */
.intent-level-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #e6a23c;
  background-color: #fef9e7;
  border: 1px solid #f5dab1;
  border-radius: 12px;
  white-space: nowrap;
}

/* 客户意向标签 */
.intent-tag {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #67c23a;
  background-color: #f0f9ff;
  border: 1px solid #b3e19d;
  border-radius: 12px;
  white-space: nowrap;
}
</style>