bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>线索管理 - 轻量 CRM</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <!-- 顶部导航 -->
  <nav class="bg-indigo-600 text-white shadow-lg">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <div class="flex items-center space-x-3">
          <span class="text-2xl">📊</span>
          <h1 class="text-xl font-bold">轻量 CRM</h1>
        </div>
        <div class="flex space-x-4">
          <a href="/" class="hover:bg-indigo-500 px-3 py-2 rounded">首页</a>
          <a href="/customers" class="hover:bg-indigo-500 px-3 py-2 rounded">客户</a>
          <a href="/leads" class="bg-indigo-500 px-3 py-2 rounded">线索</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 py-8">
    <!-- 页面标题和操作 -->
    <div class="flex justify-between items-center mb-8">
      <div>
        <h2 class="text-3xl font-bold text-gray-800">线索管理</h2>
        <p class="text-gray-600 mt-2">跟踪潜在客户需求，转化为成交客户</p>
      </div>
      <button onclick="showAddModal()" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition flex items-center space-x-2">
        <span>🎯</span><span>添加线索</span>
      </button>
    </div>

    <!-- 状态筛选 -->
    <div class="bg-white rounded-lg shadow p-4 mb-6">
      <div class="flex space-x-4">
        <button onclick="filterStatus('')" class="px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200">全部</button>
        <button onclick="filterStatus('new')" class="px-4 py-2 rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200">🆕 新建</button>
        <button onclick="filterStatus('contacting')" class="px-4 py-2 rounded-lg bg-yellow-100 text-yellow-700 hover:bg-yellow-200">📞 联系中</button>
        <button onclick="filterStatus('converted')" class="px-4 py-2 rounded-lg bg-green-100 text-green-700 hover:bg-green-200">✅ 已转化</button>
        <button onclick="filterStatus('closed')" class="px-4 py-2 rounded-lg bg-gray-200 text-gray-600 hover:bg-gray-300">❌ 已关闭</button>
      </div>
    </div>

    <!-- 线索列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="leadsList">
      <div class="col-span-full text-center text-gray-500 py-8">加载中...</div>
    </div>
  </main>

  <!-- 添加线索弹窗 -->
  <div id="addModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold">🎯 添加线索</h3>
          <button onclick="hideModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
        </div>
        <form id="leadForm" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">姓名 *</label>
            <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-500">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">公司</label>
            <input type="text" name="company" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
            <input type="text" name="phone" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">需求描述</label>
            <textarea name="requirement" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2" placeholder="描述客户的具体需求..."></textarea>
          </div>
          <div class="flex space-x-3 pt-4">
            <button type="button" onclick="hideModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300">取消</button>
            <button type="submit" class="flex-1 bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script>
    const API_BASE = '';
    let leadsData = [];

    // 加载线索列表
    async function loadLeads(status = '') {
      try {
        let url = `${API_BASE}/api/leads`;
        if (status) url += `?status=${status}`;
        
        const res = await fetch(url);
        const data = await res.json();
        if (data.success) {
          leadsData = data.data;
          renderLeads(data.data);
        }
      } catch (error) {
        console.error('加载失败:', error);
      }
    }

    // 渲染线索列表
    function renderLeads(leads) {
      const container = document.getElementById('leadsList');
      if (leads.length === 0) {
        container.innerHTML = '<div class="col-span-full text-center text-gray-500 py-8">暂无线索数据</div>';
        return;
      }
      
      const statusConfig = {
        'new': { bg: 'bg-blue-50', border: 'border-blue-200', text: 'text-blue-700', label: '🆕 新建' },
        'contacting': { bg: 'bg-yellow-50', border: 'border-yellow-200', text: 'text-yellow-700', label: '📞 联系中' },
        'converted': { bg: 'bg-green-50', border: 'border-green-200', text: 'text-green-700', label: '✅ 已转化' },
        'closed': { bg: 'bg-gray-50', border: 'border-gray-200', text: 'text-gray-600', label: '❌ 已关闭' }
      };
      
      container.innerHTML = leads.map(lead => {
        const config = statusConfig[lead.status] || statusConfig['new'];
        return `
          <div class="${config.bg} border ${config.border} rounded-lg p-5 hover:shadow-md transition">
            <div class="flex justify-between items-start mb-3">
              <h3 class="text-lg font-bold text-gray-800">${lead.name}</h3>
              <span class="${config.text} text-sm font-medium">${config.label}</span>
            </div>
            ${lead.company ? `<p class="text-gray-600 mb-2">🏢 ${lead.company}</p>` : ''}
            ${lead.phone ? `<p class="text-gray-600 mb-2">📱 ${lead.phone}</p>` : ''}
            ${lead.requirement ? `<p class="text-gray-700 text-sm mt-3 p-3 bg-white rounded">${lead.requirement}</p>` : ''}
            <p class="text-xs text-gray-500 mt-3">创建：${new Date(lead.created_at).toLocaleString('zh-CN')}</p>
            
            <div class="mt-4 pt-4 border-t ${config.border} flex space-x-2">
              ${lead.status === 'new' || lead.status === 'contacting' ? `
                <button onclick="updateStatus(${lead.id}, 'contacting')" class="flex-1 bg-yellow-500 text-white py-1.5 rounded text-sm hover:bg-yellow-600">📞 联系</button>
                <button onclick="convertLead(${lead.id})" class="flex-1 bg-green-600 text-white py-1.5 rounded text-sm hover:bg-green-700">✅ 转化</button>
              ` : ''}
              ${lead.status === 'new' || lead.status === 'contacting' ? `
                <button onclick="closeLead(${lead.id})" class="flex-1 bg-gray-400 text-white py-1.5 rounded text-sm hover:bg-gray-500">❌ 关闭</button>
              ` : ''}
              ${lead.status === 'converted' ? `
                <a href="/customers?id=${lead.customer_id}" class="flex-1 bg-indigo-600 text-white py-1.5 rounded text-sm hover:bg-indigo-700 text-center">查看客户</a>
              ` : ''}
            </div>
          </div>
        `;
      }).join('');
    }

    // 筛选状态
    function filterStatus(status) {
      loadLeads(status);
    }

    // 弹窗控制
    function showAddModal() {
      document.getElementById('addModal').classList.remove('hidden');
      document.getElementById('addModal').classList.add('flex');
    }
    function hideModal() {
      document.getElementById('addModal').classList.add('hidden');
      document.getElementById('addModal').classList.remove('flex');
      document.getElementById('leadForm').reset();
    }

    // 添加线索
    document.getElementById('leadForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      
      try {
        const res = await fetch(`${API_BASE}/api/leads`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        if (result.success) {
          alert('✅ 线索添加成功');
          hideModal();
          loadLeads();
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 添加失败：' + error.message);
      }
    });

    // 更新状态
    async function updateStatus(id, status) {
      try {
        const res = await fetch(`${API_BASE}/api/leads/${id}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ status })
        });
        const result = await res.json();
        if (result.success) {
          loadLeads();
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 更新失败：' + error.message);
      }
    }

    // 转化线索
    async function convertLead(id) {
      if (!confirm('确定要将此线索转化为客户吗？')) return;
      
      try {
        const res = await fetch(`${API_BASE}/api/leads/${id}/convert`, {
          method: 'PUT'
        });
        const result = await res.json();
        if (result.success) {
          alert('✅ 已转化为客户，客户 ID: ' + result.data.customerId);
          loadLeads();
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 转化失败：' + error.message);
      }
    }

    // 关闭线索
    async function closeLead(id) {
      if (!confirm('确定要关闭此线索吗？')) return;
      
      try {
        const res = await fetch(`${API_BASE}/api/leads/${id}`, {
          method: 'DELETE'
        });
        const result = await res.json();
        if (result.success) {
          loadLeads();
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 操作失败：' + error.message);
      }
    }

    // 页面加载
    document.addEventListener('DOMContentLoaded', () => loadLeads());
  </script>
</body>
</html>