OfficeSystem/components/customer-detail/InfoTab.vue

<template>
  <view class="tab-content">
    <view class="info-section">
      <view class="section-title">
        <view class="title-line"></view>
        <text>基础信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户名称</text>
        <text class="info-value">{{ customerDetail.name || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">联系电话</text>
        <text class="info-value">{{ customerDetail.mobile || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">微信号</text>
        <text class="info-value">{{ customerDetail.wechat || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户来源</text>
        <text class="info-value">{{ customerDetail.source || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户意向</text>
        <text class="info-value">{{ formatIntents(customerDetail.intents) }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">意向强度</text>
        <text class="info-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户地区</text>
        <text class="info-value">{{ customerDetail.regionName || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">工作微信</text>
        <text class="info-value">{{ customerDetail.wechatId || '--' }}</text>
      </view>
    </view>

    <view class="info-section">
      <view class="section-title">
        <view class="title-line"></view>
        <text>其他信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">客户星级</text>
        <view class="info-value-stars">
          <text 
            class="star" 
            v-for="i in 5" 
            :key="i"
            :class="{ 'filled': i <= getRatingFromIntentLevel(customerDetail.intentLevel) }"
          >★</text>
        </view>
      </view>
      <view class="info-item">
        <text class="info-label">备注</text>
        <text class="info-value">{{ customerDetail.remark || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">顾虑点</text>
        <text class="info-value">{{ customerDetail.concern || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">痛点</text>
        <text class="info-value">{{ customerDetail.pain || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">关注点</text>
        <text class="info-value">{{ customerDetail.attention || '--' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">需求点</text>
        <text class="info-value">{{ customerDetail.demand || '--' }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  customerDetail: {
    type: Object,
    default: () => ({})
  }
});

// 根据意向等级获取星级
const getRatingFromIntentLevel = (intentLevel) => {
  const levelMap = {
    '1': 5,
    '2': 3
  };
  return levelMap[intentLevel] || 0;
};

// 格式化客户意向（数组转字符串）
const formatIntents = (intents) => {
  if (!intents || !Array.isArray(intents) || intents.length === 0) return '--';
  return intents.join('、');
};

// 获取意向强度文本
const getIntentStrengthText = (intentLevel) => {
  const levelMap = {
    '1': '高',
    '2': '中',
    '3': '低'
  };
  return levelMap[intentLevel] || '--';
};
</script>

<style lang="scss" scoped>
.tab-content {
  padding: 16px;
}

// 客户信息样式
.info-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.title-line {
  width: 3px;
  height: 16px;
  background-color: #1976d2;
  margin-right: 8px;
}

.section-title text {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.info-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  width: 100px;
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  font-size: 14px;
  color: #333;
  text-align: right;
}

.info-value-stars {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}

.star {
  font-size: 14px;
  color: #ddd;
  
  &.filled {
    color: #ffc107;
  }
}
</style>