bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
							<!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="bg-indigo-500 px-3 py-2 rounded">客户</a>
          <a href="/leads" class="hover: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>
      <div class="flex space-x-3">
        <button onclick="exportCustomers()" class="bg-teal-600 text-white px-6 py-3 rounded-lg hover:bg-teal-700 transition flex items-center space-x-2">
          <span>📥</span><span>导出 CSV</span>
        </button>
        <button onclick="showAddModal()" class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition flex items-center space-x-2">
          <span>➕</span><span>添加客户</span>
        </button>
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="bg-white rounded-lg shadow p-4 mb-6">
      <div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0">
        <input 
          type="text" 
          id="searchInput"
          placeholder="搜索客户姓名、公司、电话..." 
          class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
          onkeyup="searchCustomers()"
        >
        <select id="statusFilter" onchange="loadCustomers()" class="border border-gray-300 rounded-lg px-4 py-2">
          <option value="active">活跃客户</option>
          <option value="lost">已流失</option>
          <option value="">全部</option>
        </select>
      </div>
    </div>

    <!-- 客户列表 -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">姓名</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">公司</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">联系方式</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">来源</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">标签</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">创建时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">操作</th>
          </tr>
        </thead>
        <tbody id="customerList" class="bg-white divide-y divide-gray-200">
          <tr>
            <td colspan="6" class="px-6 py-8 text-center text-gray-500">加载中...</td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>

  <!-- 添加/编辑客户弹窗 -->
  <div id="customerModal" 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 id="modalTitle" class="text-xl font-bold">➕ 添加客户</h3>
          <button onclick="hideModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
        </div>
        <form id="customerForm" class="space-y-4">
          <input type="hidden" id="customerId" name="id">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">姓名 *</label>
            <input type="text" id="name" name="name" required class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">公司</label>
            <input type="text" id="company" 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" id="phone" 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>
            <input type="text" id="wechat" name="wechat" 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="email" id="email" name="email" 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>
            <select id="source" name="source" class="w-full border border-gray-300 rounded-lg px-3 py-2">
              <option value="">请选择</option>
              <option value="网站">网站</option>
              <option value="推荐">推荐</option>
              <option value="活动">活动</option>
              <option value="电话">电话</option>
              <option value="其他">其他</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">标签</label>
            <input type="text" id="tags" name="tags" placeholder="多个标签用逗号分隔，如：VIP, 意向客户" class="w-full border border-gray-300 rounded-lg px-3 py-2">
          </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-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- 客户详情弹窗 -->
  <div id="detailModal" 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-2xl mx-4 max-h-[90vh] overflow-y-auto">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-bold">👤 客户详情</h3>
          <button onclick="hideDetailModal()" class="text-gray-500 hover:text-gray-700 text-2xl">&times;</button>
        </div>
        <div id="customerDetail" class="space-y-4">
          <!-- 动态填充 -->
        </div>
        
        <!-- 跟进记录 -->
        <div class="mt-6 pt-6 border-t">
          <h4 class="font-semibold mb-3">📞 跟进记录</h4>
          <div id="followupList" class="space-y-3 mb-4">
            <!-- 动态填充 -->
          </div>
          
          <!-- 添加跟进 -->
          <form id="followupForm" class="space-y-3">
            <input type="hidden" id="followupCustomerId">
            <textarea id="followupContent" name="content" rows="2" placeholder="记录本次跟进内容..." class="w-full border border-gray-300 rounded-lg px-3 py-2" required></textarea>
            <div class="flex space-x-3">
              <select id="followupMethod" name="method" class="border border-gray-300 rounded-lg px-3 py-2">
                <option value="电话">电话</option>
                <option value="微信">微信</option>
                <option value="邮件">邮件</option>
                <option value="面谈">面谈</option>
              </select>
              <select id="followupResult" name="result" class="border border-gray-300 rounded-lg px-3 py-2">
                <option value="有意向">有意向</option>
                <option value="需跟进">需跟进</option>
                <option value="无意向">无意向</option>
              </select>
            </div>
            <button type="submit" class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700">添加跟进记录</button>
          </form>
        </div>
      </div>
    </div>
  </div>

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

    // 加载客户列表
    async function loadCustomers() {
      const search = document.getElementById('searchInput').value;
      const status = document.getElementById('statusFilter').value;
      
      try {
        let url = `${API_BASE}/api/customers?limit=100`;
        if (search) url += `&search=${encodeURIComponent(search)}`;
        if (status) url += `&status=${status}`;
        
        const res = await fetch(url);
        const data = await res.json();
        if (data.success) {
          customersData = data.data;
          renderCustomers(data.data);
        }
      } catch (error) {
        console.error('加载失败:', error);
      }
    }

    // 渲染客户列表
    function renderCustomers(customers) {
      const tbody = document.getElementById('customerList');
      if (customers.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" class="px-6 py-8 text-center text-gray-500">暂无客户数据</td></tr>';
        return;
      }
      
      tbody.innerHTML = customers.map(c => {
        const tags = c.tags ? JSON.parse(c.tags || '[]') : [];
        const tagsHtml = tags.length > 0 
          ? tags.map(t => `<span class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded mr-1">${t}</span>`).join('')
          : '<span class="text-gray-400">-</span>';
        
        return `
        <tr class="hover:bg-gray-50">
          <td class="px-6 py-4">
            <div class="font-medium text-gray-900">${c.name}</div>
          </td>
          <td class="px-6 py-4 text-gray-600">${c.company || '-'}</td>
          <td class="px-6 py-4">
            <div class="text-sm text-gray-600">${c.phone || '-'}</div>
            <div class="text-sm text-gray-500">${c.wechat || ''}</div>
          </td>
          <td class="px-6 py-4 text-gray-600">${c.source || '-'}</td>
          <td class="px-6 py-4">${tagsHtml}</td>
          <td class="px-6 py-4 text-gray-500 text-sm">${new Date(c.created_at).toLocaleDateString('zh-CN')}</td>
          <td class="px-6 py-4">
            <button onclick="viewCustomer(${c.id})" class="text-indigo-600 hover:underline mr-3">详情</button>
            <button onclick="editCustomer(${c.id})" class="text-green-600 hover:underline mr-3">编辑</button>
            <button onclick="deleteCustomer(${c.id})" class="text-red-600 hover:underline">删除</button>
          </td>
        </tr>
      `;
      }).join('');
    }

    // 搜索
    function searchCustomers() {
      loadCustomers();
    }

    // 弹窗控制
    function showAddModal() {
      document.getElementById('modalTitle').textContent = '➕ 添加客户';
      document.getElementById('customerForm').reset();
      document.getElementById('customerId').value = '';
      document.getElementById('customerModal').classList.remove('hidden');
      document.getElementById('customerModal').classList.add('flex');
    }

    function hideModal() {
      document.getElementById('customerModal').classList.add('hidden');
      document.getElementById('customerModal').classList.remove('flex');
    }

    function hideDetailModal() {
      document.getElementById('detailModal').classList.add('hidden');
      document.getElementById('detailModal').classList.remove('flex');
    }

    // 查看客户详情
    async function viewCustomer(id) {
      try {
        const res = await fetch(`${API_BASE}/api/customers/${id}`);
        const data = await res.json();
        if (data.success) {
          const c = data.data;
          document.getElementById('customerDetail').innerHTML = `
            <div class="grid grid-cols-2 gap-4">
              <div><span class="text-gray-500">姓名:</span> <span class="font-medium">${c.name}</span></div>
              <div><span class="text-gray-500">公司:</span> <span class="font-medium">${c.company || '-'}</span></div>
              <div><span class="text-gray-500">电话:</span> <span class="font-medium">${c.phone || '-'}</span></div>
              <div><span class="text-gray-500">微信:</span> <span class="font-medium">${c.wechat || '-'}</span></div>
              <div><span class="text-gray-500">邮箱:</span> <span class="font-medium">${c.email || '-'}</span></div>
              <div><span class="text-gray-500">来源:</span> <span class="font-medium">${c.source || '-'}</span></div>
              <div><span class="text-gray-500">状态:</span> <span class="font-medium">${c.status === 'active' ? '✅ 活跃' : '❌ 流失'}</span></div>
              <div><span class="text-gray-500">创建:</span> <span class="font-medium">${new Date(c.created_at).toLocaleString('zh-CN')}</span></div>
            </div>
          `;
          
          // 加载跟进记录
          loadFollowups(id);
          document.getElementById('followupCustomerId').value = id;
          
          document.getElementById('detailModal').classList.remove('hidden');
          document.getElementById('detailModal').classList.add('flex');
        }
      } catch (error) {
        alert('加载失败：' + error.message);
      }
    }

    // 加载跟进记录
    async function loadFollowups(customerId) {
      try {
        const res = await fetch(`${API_BASE}/api/customers/${customerId}/followups`);
        const data = await res.json();
        if (data.success) {
          const list = document.getElementById('followupList');
          if (data.data.length === 0) {
            list.innerHTML = '<p class="text-gray-500 text-center py-4">暂无跟进记录</p>';
          } else {
            list.innerHTML = data.data.map(f => `
              <div class="bg-gray-50 p-3 rounded-lg">
                <div class="flex justify-between items-start">
                  <p class="text-gray-800">${f.content}</p>
                  <span class="text-xs text-gray-500">${new Date(f.created_at).toLocaleString('zh-CN')}</span>
                </div>
                <div class="mt-2 text-sm text-gray-600">
                  <span class="mr-3">方式：${f.method || '-'}</span>
                  <span>结果：${f.result || '-'}</span>
                </div>
              </div>
            `).join('');
          }
        }
      } catch (error) {
        console.error('加载跟进记录失败:', error);
      }
    }

    // 编辑客户
    async function editCustomer(id) {
      try {
        const res = await fetch(`${API_BASE}/api/customers/${id}`);
        const data = await res.json();
        if (data.success) {
          const c = data.data;
          document.getElementById('modalTitle').textContent = '✏️ 编辑客户';
          document.getElementById('customerId').value = c.id;
          document.getElementById('name').value = c.name;
          document.getElementById('company').value = c.company || '';
          document.getElementById('phone').value = c.phone || '';
          document.getElementById('wechat').value = c.wechat || '';
          document.getElementById('email').value = c.email || '';
          document.getElementById('source').value = c.source || '';
          // 解析标签
          let tagsStr = '';
          if (c.tags) {
            try {
              const tags = JSON.parse(c.tags);
              if (Array.isArray(tags)) tagsStr = tags.join(', ');
            } catch (e) {}
          }
          document.getElementById('tags').value = tagsStr;
          
          document.getElementById('customerModal').classList.remove('hidden');
          document.getElementById('customerModal').classList.add('flex');
        }
      } catch (error) {
        alert('加载失败：' + error.message);
      }
    }

    // 删除客户
    async function deleteCustomer(id) {
      if (!confirm('确定要删除这个客户吗？')) return;
      
      try {
        const res = await fetch(`${API_BASE}/api/customers/${id}`, { method: 'DELETE' });
        const data = await res.json();
        if (data.success) {
          alert('✅ 已删除');
          loadCustomers();
        } else {
          alert('❌ ' + data.error);
        }
      } catch (error) {
        alert('❌ 删除失败：' + error.message);
      }
    }

    // 保存客户
    document.getElementById('customerForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const id = document.getElementById('customerId').value;
      const tagsInput = document.getElementById('tags').value.trim();
      const tags = tagsInput ? tagsInput.split(',').map(t => t.trim()).filter(t => t) : [];
      
      const data = {
        name: document.getElementById('name').value,
        company: document.getElementById('company').value,
        phone: document.getElementById('phone').value,
        wechat: document.getElementById('wechat').value,
        email: document.getElementById('email').value,
        source: document.getElementById('source').value,
        tags: tags
      };
      
      try {
        const url = id ? `${API_BASE}/api/customers/${id}` : `${API_BASE}/api/customers`;
        const method = id ? 'PUT' : 'POST';
        
        const res = await fetch(url, {
          method,
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        
        if (result.success) {
          alert('✅ 保存成功');
          hideModal();
          loadCustomers();
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 保存失败：' + error.message);
      }
    });

    // 添加跟进记录
    document.getElementById('followupForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const customerId = document.getElementById('followupCustomerId').value;
      const data = {
        content: document.getElementById('followupContent').value,
        method: document.getElementById('followupMethod').value,
        result: document.getElementById('followupResult').value
      };
      
      try {
        const res = await fetch(`${API_BASE}/api/customers/${customerId}/followups`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        
        if (result.success) {
          alert('✅ 跟进记录已添加');
          document.getElementById('followupContent').value = '';
          loadFollowups(customerId);
        } else {
          alert('❌ ' + result.error);
        }
      } catch (error) {
        alert('❌ 添加失败：' + error.message);
      }
    });

    // 导出数据
    function exportCustomers() {
      window.open(`${API_BASE}/api/export/customers`, '_blank');
    }

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