bot_ym
/
water-management-system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
							<!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">
        <h1 class="text-2xl font-bold">📊 中小企业 CRM 系统</h1>
        <button onclick="showAddModal()" class="bg-white text-indigo-600 px-4 py-2 rounded-lg hover:bg-indigo-50 font-medium">
          ➕ 添加客户
        </button>
      </div>
    </div>
  </nav>

  <!-- 统计卡片 -->
  <div class="container mx-auto px-4 py-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div class="bg-white p-4 rounded-lg shadow">
        <div class="text-gray-500 text-sm">总客户数</div>
        <div class="text-3xl font-bold text-indigo-600" id="stat-total">-</div>
      </div>
      <div class="bg-white p-4 rounded-lg shadow">
        <div class="text-gray-500 text-sm">潜在客户</div>
        <div class="text-3xl font-bold text-yellow-600" id="stat-potential">-</div>
      </div>
      <div class="bg-white p-4 rounded-lg shadow">
        <div class="text-gray-500 text-sm">跟进中</div>
        <div class="text-3xl font-bold text-blue-600" id="stat-contacting">-</div>
      </div>
      <div class="bg-white p-4 rounded-lg shadow">
        <div class="text-gray-500 text-sm">成交客户</div>
        <div class="text-3xl font-bold text-green-600" id="stat-customer">-</div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="bg-white p-4 rounded-lg shadow mb-6">
      <div class="flex gap-4">
        <input type="text" id="search-keyword" placeholder="搜索客户名称、公司、电话..." 
          class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500">
        <select id="filter-status" class="border border-gray-300 rounded-lg px-4 py-2">
          <option value="">全部状态</option>
          <option value="potential">潜在客户</option>
          <option value="contacting">跟进中</option>
          <option value="customer">成交客户</option>
        </select>
        <button onclick="loadCustomers()" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700">
          搜索
        </button>
      </div>
    </div>

    <!-- 客户列表 -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
      <div class="px-6 py-4 border-b">
        <h2 class="text-lg font-semibold">客户列表</h2>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <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>
            </tr>
          </thead>
          <tbody id="customer-list" class="divide-y divide-gray-200">
            <tr><td colspan="6" class="px-6 py-8 text-center text-gray-500">加载中...</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- 添加客户模态框 -->
  <div id="add-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
      <h3 class="text-xl font-bold mb-4">添加客户</h3>
      <form id="add-form" 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-4 py-2">
        </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-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">电话</label>
          <input type="tel" name="phone" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
          <input type="email" name="email" class="w-full border border-gray-300 rounded-lg px-4 py-2">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">来源</label>
          <select name="source" class="w-full border border-gray-300 rounded-lg px-4 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>
          <textarea name="notes" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2"></textarea>
        </div>
        <div class="flex gap-4 pt-4">
          <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700">保存</button>
          <button type="button" onclick="hideAddModal()" class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300">取消</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    const API_BASE = window.location.hostname === 'localhost' ? 'http://localhost:3002/api' : '/api';

    // 加载统计数据
    async function loadStats() {
      try {
        const res = await fetch(`${API_BASE}/stats`);
        const data = await res.json();
        if (data.success) {
          document.getElementById('stat-total').textContent = data.data.total;
          document.getElementById('stat-potential').textContent = data.data.potential;
          document.getElementById('stat-contacting').textContent = data.data.contacting;
          document.getElementById('stat-customer').textContent = data.data.customer;
        }
      } catch (error) {
        console.error('加载统计失败:', error);
      }
    }

    // 加载客户列表
    async function loadCustomers() {
      const keyword = document.getElementById('search-keyword').value;
      const status = document.getElementById('filter-status').value;
      
      let url = `${API_BASE}/customers?`;
      if (keyword) url += `keyword=${encodeURIComponent(keyword)}&`;
      if (status) url += `status=${status}&`;
      
      try {
        const res = await fetch(url);
        const data = await res.json();
        const tbody = document.getElementById('customer-list');
        
        if (data.success && data.data.length > 0) {
          tbody.innerHTML = data.data.map(c => `
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 font-medium">${c.name}</td>
              <td class="px-6 py-4 text-gray-600">${c.company || '-'}</td>
              <td class="px-6 py-4">
                <div class="text-sm">${c.phone || '-'}</div>
                <div class="text-gray-500 text-xs">${c.email || ''}</div>
              </td>
              <td class="px-6 py-4 text-gray-600">${c.source || '-'}</td>
              <td class="px-6 py-4">
                <span class="px-2 py-1 rounded-full text-xs ${
                  c.status === 'customer' ? 'bg-green-100 text-green-800' :
                  c.status === 'contacting' ? 'bg-blue-100 text-blue-800' :
                  'bg-yellow-100 text-yellow-800'
                }">${
                  c.status === 'customer' ? '成交客户' :
                  c.status === 'contacting' ? '跟进中' : '潜在客户'
                }</span>
              </td>
              <td class="px-6 py-4">
                <button onclick="viewCustomer(${c.id})" class="text-indigo-600 hover:text-indigo-800 mr-3">详情</button>
                <button onclick="deleteCustomer(${c.id})" class="text-red-600 hover:text-red-800">删除</button>
              </td>
            </tr>
          `).join('');
        } else {
          tbody.innerHTML = '<tr><td colspan="6" class="px-6 py-8 text-center text-gray-500">暂无客户数据</td></tr>';
        }
      } catch (error) {
        console.error('加载客户失败:', error);
      }
    }

    // 查看客户详情
    function viewCustomer(id) {
      alert('客户详情功能开发中...\n客户 ID: ' + id);
    }

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

    // 显示添加模态框
    function showAddModal() {
      document.getElementById('add-modal').classList.remove('hidden');
      document.getElementById('add-modal').classList.add('flex');
    }

    // 隐藏添加模态框
    function hideAddModal() {
      document.getElementById('add-modal').classList.add('hidden');
      document.getElementById('add-modal').classList.remove('flex');
      document.getElementById('add-form').reset();
    }

    // 添加客户表单提交
    document.getElementById('add-form').addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = new FormData(e.target);
      const data = Object.fromEntries(formData);
      
      try {
        const res = await fetch(`${API_BASE}/customers`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(data)
        });
        const result = await res.json();
        
        if (result.success) {
          alert('客户添加成功！');
          hideAddModal();
          loadCustomers();
          loadStats();
        }
      } catch (error) {
        alert('添加失败：' + error.message);
      }
    });

    // 初始化
    loadStats();
    loadCustomers();
  </script>
</body>
</html>