OpportunityDetail.vue

<template>
  <div class="opportunity-detail">
    <div class="page-header">
      <el-page-header @back="goBack" content="商机详情">
      </el-page-header>
    </div>

    <el-card class="detail-card">
      <div class="card-header">
        <h3>基本信息</h3>
      </div>
      <div class="card-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">商机ID：</span>
              <span class="info-value">{{ opportunity.id }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">创建时间：</span>
              <span class="info-value">{{ opportunity.createTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">当前状态：</span>
              <span class="info-value">
                <el-tag :type="getStatusType(opportunity.status)">
                  {{ getStatusLabel(opportunity.status) }}
                </el-tag>
              </span>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">客户地址：</span>
              <span class="info-value">{{ opportunity.customerAddress }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">用户账号：</span>
              <span class="info-value">{{ opportunity.customerPhone }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">最新跟进：</span>
              <span class="info-value">{{ opportunity.lastFollowTime || '-' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="detail-card">
      <div class="card-header">
        <h3>人员信息</h3>
      </div>
      <div class="card-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">装维师傅：</span>
              <span class="info-value">{{ opportunity.installerName }} ({{ opportunity.installerId }})</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">联系电话：</span>
              <span class="info-value">{{ opportunity.installerPhone }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">营销人员：</span>
              <span class="info-value">{{ opportunity.assignedToName || '-' }} ({{ opportunity.assignedTo || '-' }})</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-card class="detail-card">
      <div class="card-header">
        <h3>商机详情</h3>
      </div>
      <div class="card-content">
        <div class="info-item">
          <span class="info-label">商机标签：</span>
          <span class="info-value">
            <el-tag 
              v-for="tag in opportunity.tags" 
              :key="tag" 
              size="small"
              style="margin-right: 8px;"
            >
              {{ tag }}
            </el-tag>
          </span>
        </div>
        
        <div class="info-item" style="margin-top: 15px;">
          <span class="info-label">商机描述：</span>
          <span class="info-value">{{ opportunity.description }}</span>
        </div>
      </div>
    </el-card>

    <el-card class="detail-card">
      <div class="card-header">
        <h3>跟进记录</h3>
      </div>
      <div class="card-content">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
            :type="activity.type"
          >
            <div class="activity-content">
              <p>{{ activity.content }}</p>
              <p v-if="activity.operator" class="operator">操作人：{{ activity.operator }}</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-card>

    <div class="actions">
      <el-button @click="goBack">返回</el-button>
      <el-button type="primary" @click="handleFollowUp">跟进</el-button>
      <el-button type="success" @click="handleComplete">成单</el-button>
    </div>
  </div>
</template>

<script>
// 商机状态映射
const statusMap = {
  'assigned': { label: '待跟进', type: 'info' },
  'following': { label: '跟进中', type: 'warning' },
  'pending_review': { label: '成单待审核', type: 'primary' },
  'completed': { label: '已成单', type: 'success' },
  'closed': { label: '已关闭', type: 'info' }
}

// 模拟商机数据
const mockOpportunity = {
  id: 'OP202500001',
  createTime: '2025-09-27 10:30:00',
  customerAddress: '南京市玄武区中山路123号',
  installerId: 'INS001',
  installerName: '王师傅',
  installerPhone: '13987654321',
  tags: ['网络升级', '家庭安防'],
  status: 'following',
  assignedTo: 'SALE001',
  assignedToName: '张营销',
  lastFollowTime: '2025-09-28 14:20:00',
  customerPhone: '138****5678',
  description: '用户反馈家中网络卡顿，希望升级宽带套餐，同时对家庭监控摄像头很感兴趣',
  region: '南京市玄武区',
  gridName: 'A网格'
}

// 模拟跟进记录
const mockActivities = [
  {
    content: '商机创建',
    timestamp: '2025-09-27 10:30:00',
    type: 'primary',
    operator: '王师傅'
  },
  {
    content: '首次跟进，联系客户确认需求',
    timestamp: '2025-09-27 15:45:00',
    type: 'success',
    operator: '张营销'
  },
  {
    content: '预约上门时间',
    timestamp: '2025-09-28 09:30:00',
    type: 'success',
    operator: '张营销'
  },
  {
    content: '上门服务完成，客户有意向办理套餐升级',
    timestamp: '2025-09-28 14:20:00',
    type: 'success',
    operator: '张营销'
  }
]

export default {
  name: 'OpportunityDetail',
  data() {
    return {
      opportunity: mockOpportunity,
      activities: mockActivities
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getStatusType(status) {
      return statusMap[status]?.type || 'info'
    },
    getStatusLabel(status) {
      return statusMap[status]?.label || status
    },
    handleFollowUp() {
      this.$message.info('跟进功能开发中')
    },
    handleComplete() {
      this.$message.info('成单功能开发中')
    }
  }
}
</script>

<style lang="scss" scoped>
.opportunity-detail {
  .page-header {
    margin-bottom: 24px;
  }

  .detail-card {
    margin-bottom: 24px;

    .card-header {
      margin-bottom: 20px;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }

    .card-content {
      .info-item {
        display: flex;
        margin-bottom: 15px;
        
        .info-label {
          width: 100px;
          color: #606266;
          font-weight: 500;
        }
        
        .info-value {
          flex: 1;
          color: #303133;
        }
      }
      
      .activity-content {
        p {
          margin: 0 0 5px 0;
        }
        
        .operator {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  .actions {
    text-align: center;
    padding: 20px 0;
    
    .el-button {
      margin: 0 10px;
    }
  }
}
</style>