clue-list.html 26.5 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绿纤新客线索池</title>
  <script src="config.js"></script>
  <script src="auth-utils.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
      padding: 20px;
    }

    .container {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
    }

    h2 {
      text-align: center;
      color: #388e3c;
      margin-bottom: 24px;
      letter-spacing: 2px;
      font-size: 1.2em;
    }

    .search-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px 0 rgba(76, 175, 80, 0.12);
      border: 1px solid #e8f5e9;
      padding: 20px;
      margin-bottom: 20px;
    }

    .search-input {
      width: 100%;
      padding: 14px 16px;
      border: 1.5px solid #c8e6c9;
      border-radius: 12px;
      font-size: 1em;
      background: #f9fff9;
      color: #2e7d32;
      transition: all 0.2s ease;
    }

    .search-input:focus {
      outline: none;
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
      background: #fff;
    }

    .search-input::placeholder {
      color: #6a9c6a;
    }

    /* 合并的筛选卡片样式 */
    .filter-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px 0 rgba(76, 175, 80, 0.12);
      border: 1px solid #e8f5e9;
      padding: 20px;
      margin-bottom: 20px;
    }

    /* 跨店开关样式 */
    .cross-store-toggle {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e8f5e9;
    }

    .toggle-label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 0.9em;
      color: #388e3c;
    }

    .toggle-input {
      display: none;
    }

    .toggle-slider {
      position: relative;
      width: 40px;
      height: 20px;
      background-color: #c8e6c9;
      border-radius: 10px;
      margin-right: 8px;
      transition: background-color 0.3s;
    }

    .toggle-slider::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: white;
      top: 2px;
      left: 2px;
      transition: transform 0.3s;
    }

    .toggle-input:checked + .toggle-slider {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .toggle-input:checked + .toggle-slider::before {
      transform: translateX(20px);
    }

    .toggle-text {
      font-weight: 500;
    }

    /* Tab筛选样式 */
    .tab-filter {
      margin: 0;
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
    }

    .tab-list {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
      /* 隐藏滚动条 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
    }

    .tab-list::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }

    .tab-item {
      flex: 1;
      min-width: 60px;
      padding: 10px 12px;
      background: #f8fdf8;
      border: 1px solid #e8f5e9;
      border-radius: 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 0.9em;
      font-weight: 500;
      color: #388e3c;
      white-space: nowrap;
    }

    .tab-item:hover {
      background: #e8f5e9;
      transform: translateY(-1px);
    }

    .tab-item.active {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      color: #fff;
      border-color: #43e97b;
      box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
    }

    .clue-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 20px 0 rgba(76, 175, 80, 0.12);
      border: 1px solid #e8f5e9;
      padding: 20px;
      margin-bottom: 16px;
      transition: all 0.2s ease;
    }

    .clue-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px 0 rgba(76, 175, 80, 0.18);
    }

    .clue-row {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 12px;
      gap: 8px;
    }

    .clue-row:last-child {
      margin-bottom: 0;
    }

    .clue-item {
      flex: 1 1 calc(50% - 4px);
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: #f8fdf8;
      border-radius: 8px;
      border: 1px solid #e8f5e9;
    }

    .clue-label {
      color: #388e3c;
      font-weight: 600;
      font-size: 0.9em;
      white-space: nowrap;
      /* min-width: 80px; */
      margin-right: 15px;
      text-align: center;
    }

    .clue-value {
      color: #2e7d32;
      font-size: 0.95em;
      font-weight: 500;
      word-break: break-all;
      flex: 1;
    }

    .invite-btn {
      display: block;
      width: 100%;
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 14px 20px;
      font-size: 1em;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      letter-spacing: 1px;
      box-shadow: 0 4px 16px rgba(67, 233, 123, 0.3);
      margin-top: 16px;
    }

    .invite-btn:hover {
      box-shadow: 0 6px 24px rgba(67, 233, 123, 0.4);
      transform: translateY(-2px);
    }

    .invite-btn:active {
      transform: translateY(0);
    }

    .view-invite-btn {
      display: block;
      width: 100%;
      background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 14px 20px;
      font-size: 1em;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      letter-spacing: 1px;
      box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
      margin-top: 12px;
    }

    .view-invite-btn:hover {
      box-shadow: 0 6px 24px rgba(33, 150, 243, 0.4);
      transform: translateY(-2px);
    }

    .view-invite-btn:active {
      transform: translateY(0);
    }

    .button-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px;
    }

    .loading {
      text-align: center;
      padding: 40px 20px;
      color: #6a9c6a;
      font-size: 1.1em;
    }

    .loading-more {
      text-align: center;
      padding: 20px;
      color: #6a9c6a;
      font-size: 0.9em;
    }

    .loading-more::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #c8e6c9;
      border-top: 2px solid #43a047;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-right: 8px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .no-more-data {
      text-align: center;
      padding: 20px;
      color: #6a9c6a;
      font-size: 0.9em;
      opacity: 0.8;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #6a9c6a;
    }

    .empty-state-icon {
      font-size: 3em;
      margin-bottom: 16px;
      opacity: 0.6;
    }

    .empty-state-text {
      font-size: 1.1em;
      margin-bottom: 8px;
    }

    .empty-state-subtext {
      font-size: 0.9em;
      opacity: 0.8;
    }

    .error-state {
      text-align: center;
      padding: 40px 20px;
      color: #d32f2f;
      background: #ffebee;
      border-radius: 12px;
      border: 1px solid #ffcdd2;
      margin: 20px 0;
    }

    .retry-btn {
      background: #d32f2f;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      margin-top: 12px;
      cursor: pointer;
      font-size: 0.9em;
    }

    /* 移除重复的样式 */
    .cross-store-card {
      display: none;
    }

    @media (max-width: 520px) {
      .container {
        max-width: 100%;
        padding: 0;
      }

      .search-card,
      .clue-card {
        /* margin-left: 8px;
        margin-right: 8px; */
      }

      .clue-item {
        flex: 1 1 100%;
      }

      .clue-label {
        min-width: 50px;
        font-size: 0.85em;
      }

      .clue-value {
        font-size: 0.9em;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤新客线索池</h2>

    <div class="search-card">
      <input
        type="text"
        id="clueSearchInput"
        class="search-input"
        placeholder="搜索顾客姓名"
      >
    </div>

    <!-- 合并的筛选区域 -->
    <div class="filter-card">
      <!-- 跨店开关 -->
      <div class="cross-store-toggle">
        <label class="toggle-label">
          <input type="checkbox" id="crossStoreToggle" class="toggle-input">
          <span class="toggle-slider"></span>
          <span class="toggle-text">跨店获取数据</span>
        </label>
      </div>

      <!-- 客户类型筛选 -->
      <div class="tab-filter">
        <div class="tab-list">
          <div class="tab-item active" data-type="">全部</div>
          <div class="tab-item" data-type="新客">新客</div>
          <div class="tab-item" data-type="老客">老客</div>
          <div class="tab-item" data-type="潜客">潜客</div>
          <div class="tab-item" data-type="线索">线索</div>
        </div>
      </div>
    </div>

    <div id="clueCardList">
      <div class="loading">正在加载客户数据...</div>
    </div>
  </div>

  <script>
    // 分页相关变量
    let allClues = [];
    let filteredClues = [];
    let currentPage = 1;
    let pageSize = 20;
    let isLoading = false;
    let hasMoreData = true;
    let isSearching = false;
    let searchKeyword = ''; // 添加搜索关键词变量
    let currentFilterType = ''; // 添加当前筛选类型变量
    let isCrossStore = false; // 添加跨店开关变量
    let userInfo = null;

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      initializePage();
      bindEvents();
    });

    // 初始化页面
    async function initializePage() {
      try {
      // 获取当前登录用户 通过接口获取
      userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (!userInfo || Object.keys(userInfo).length === 0) {
        // 没有登录，跳转到登录页面
        window.location.href = 'login.html';
        return;
      }
      console.log(userInfo);
        await loadCustomerData(true);
        bindScrollEvent();
      } catch (error) {
        console.error('页面初始化失败:', error);
        showErrorState('数据加载失败，请检查网络连接');
      }
    }

    // 绑定事件
    function bindEvents() {
      const searchInput = document.getElementById('clueSearchInput');
      const crossStoreToggle = document.getElementById('crossStoreToggle');
      let searchTimeout;

      searchInput.addEventListener('input', function() {
        const keyword = this.value.trim();

        // 清除之前的定时器
        clearTimeout(searchTimeout);

        // 设置防抖，500ms后执行搜索
        searchTimeout = setTimeout(() => {
          if (keyword) {
            isSearching = true;
            searchKeyword = keyword;
            // 重置分页状态
            currentPage = 1;
            hasMoreData = true;
            loadCustomerData(true);
          } else {
            isSearching = false;
            searchKeyword = '';
            // 重置分页状态
            currentPage = 1;
            hasMoreData = true;
            loadCustomerData(true);
          }
        }, 500);
      });

      // 绑定跨店开关事件
      crossStoreToggle.addEventListener('change', function() {
        isCrossStore = this.checked;
        // 重置分页状态
        currentPage = 1;
        hasMoreData = true;
        // 重新加载数据
        loadCustomerData(true);
      });

      // 绑定tab点击事件
      const tabItems = document.querySelectorAll('.tab-item');
      tabItems.forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除所有active类
          tabItems.forEach(t => t.classList.remove('active'));
          // 添加active类到当前点击的tab
          this.classList.add('active');

          // 更新筛选类型
          currentFilterType = this.getAttribute('data-type');

          // 重置分页状态
          currentPage = 1;
          hasMoreData = true;

          // 重新加载数据
          loadCustomerData(true);
        });
      });
    }

    // 绑定滚动事件
    function bindScrollEvent() {
      window.addEventListener('scroll', function() {
        // 检查是否滚动到底部
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
          loadMoreData();
        }
      });
    }

    // 加载客户数据
    async function loadCustomerData(isFirstLoad = false) {
      if (isLoading) return;

      try {
        isLoading = true;

        if (isFirstLoad) {
          showLoading();
          if (!isSearching) {
            currentPage = 1;
            hasMoreData = true;
          }
        } else {
          showLoadingMore();
        }

        const clues = await getCustomerClues(currentPage, pageSize, searchKeyword, currentFilterType, isCrossStore);

        if (isFirstLoad) {
          allClues = clues;
          filteredClues = [...clues];
        } else {
          allClues = [...allClues, ...clues];
          filteredClues = [...filteredClues, ...clues];
        }

        // 检查是否还有更多数据
        hasMoreData = clues.length === pageSize;

        if (isFirstLoad && clues.length === 0) {
          if (isSearching) {
            showSearchEmptyState();
          } else {
            showEmptyState();
          }
        } else {
          renderClues();
        }

        currentPage++;
      } catch (error) {
        console.error('加载客户数据失败:', error);
        if (isFirstLoad) {
          showErrorState('数据加载失败，请稍后重试');
        }
      } finally {
        isLoading = false;
      }
    }

    // 加载更多数据
    async function loadMoreData() {
      if (isLoading || !hasMoreData) return;
      await loadCustomerData(false);
    }

    // 获取客户线索数据
    async function getCustomerClues(page = 1, size = 20, khmc = '', khlx = '', isCrossStore = false) {
      try {
        // 构建API URL，添加khmc、khlx和跨店参数
        let apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx?page=${page}&pageSize=${size}`;
        if (khmc) {
          apiUrl += `&khmc=${encodeURIComponent(khmc)}`;
        }
        if (khlx) {
          console.log('khlx', khlx);
          console.log('khlx', encodeURIComponent(khlx));
          apiUrl += `&khlx=${encodeURIComponent(khlx)}`;
        }
        // 添加跨店参数
        if (!isCrossStore) {
          apiUrl += `&gsmd=`+userInfo.mdid;
        }

        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          }
        });

        if (response.ok) {
          const result = await response.json();
          if (result.code === 200 && result.data && result.data.list) {
            return result.data.list.map(item => ({
              id: item.id,
              name: item.khmc || '未知客户',
              phone: item.sjh || '无电话',
              store: item.gsmd || '未知门店',
              date: formatDate(item.zcsj),
              staff: item.fzgw || '未知员工',
              type: item.khlx || '未知客户类型'
            }));
          }
        }

        console.warn('获取客户列表失败，使用默认数据');
        return getDefaultClues(page, size, khmc, khlx);
      } catch (error) {
        console.error('获取客户列表出错:', error);
        return getDefaultClues(page, size, khmc, khlx);
      }
    }

    // 默认测试数据（支持分页和搜索）
    function getDefaultClues(page = 1, size = 20, khmc = '', khlx = '') {
      const allTestData = [
        { id: 'GK001', name: '张三', phone: '13800138001', store: '468店', date: '2025/3/29', staff: '张华', type: '新客户' },
        { id: 'GK002', name: '李四', phone: '13800138002', store: '468店', date: '2025/3/29', staff: '张华', type: '老客户' },
        { id: 'GK003', name: '王五', phone: '13800138003', store: '468店', date: '2025/3/29', staff: '张华', type: '潜在客户' },
        { id: 'GK004', name: '赵六', phone: '13800138004', store: '468店', date: '2025/3/29', staff: '张华', type: '线索' },
        { id: 'GK005', name: '钱七', phone: '13800138005', store: '468店', date: '2025/3/29', staff: '张华', type: '新客户' },
        { id: 'GK006', name: '孙八', phone: '13800138006', store: '468店', date: '2025/3/28', staff: '李梅', type: '老客户' },
        { id: 'GK007', name: '周九', phone: '13800138007', store: '468店', date: '2025/3/28', staff: '李梅', type: '潜在客户' },
        { id: 'GK008', name: '吴十', phone: '13800138008', store: '468店', date: '2025/3/28', staff: '李梅', type: '线索' },
        { id: 'GK009', name: '郑十一', phone: '13800138009', store: '468店', date: '2025/3/27', staff: '王强', type: '新客户' },
        { id: 'GK010', name: '王十二', phone: '13800138010', store: '468店', date: '2025/3/27', staff: '王强', type: '老客户' },
        { id: 'GK011', name: '冯十三', phone: '13800138011', store: '468店', date: '2025/3/27', staff: '王强', type: '潜在客户' },
        { id: 'GK012', name: '陈十四', phone: '13800138012', store: '468店', date: '2025/3/26', staff: '刘丽', type: '线索' },
        { id: 'GK013', name: '褚十五', phone: '13800138013', store: '468店', date: '2025/3/26', staff: '刘丽', type: '新客户' },
        { id: 'GK014', name: '卫十六', phone: '13800138016', store: '468店', date: '2025/3/26', staff: '刘丽', type: '老客户' },
        { id: 'GK015', name: '蒋十七', phone: '13800138015', store: '468店', date: '2025/3/25', staff: '张华', type: '潜在客户' },
        { id: 'GK016', name: '沈十八', phone: '13800138016', store: '468店', date: '2025/3/25', staff: '张华', type: '线索' },
        { id: 'GK017', name: '韩十九', phone: '13800138017', store: '468店', date: '2025/3/25', staff: '张华', type: '新客户' },
        { id: 'GK018', name: '杨二十', phone: '13800138018', store: '468店', date: '2025/3/24', staff: '李梅', type: '老客户' },
        { id: 'GK019', name: '朱二一', phone: '13800138019', store: '468店', date: '2025/3/24', staff: '李梅', type: '潜在客户' },
        { id: 'GK020', name: '秦二二', phone: '13800138020', store: '468店', date: '2025/3/24', staff: '李梅', type: '线索' },
        { id: 'GK021', name: '尤二三', phone: '13800138021', store: '468店', date: '2025/3/23', staff: '王强', type: '新客户' },
        { id: 'GK022', name: '许二四', phone: '13800138022', store: '468店', date: '2025/3/23', staff: '王强', type: '老客户' },
        { id: 'GK023', name: '何二五', phone: '13800138023', store: '468店', date: '2025/3/23', staff: '王强', type: '潜在客户' },
        { id: 'GK024', name: '吕二六', phone: '13800138024', store: '468店', date: '2025/3/22', staff: '刘丽', type: '线索' },
        { id: 'GK025', name: '施二七', phone: '13800138025', store: '468店', date: '2025/3/22', staff: '刘丽', type: '新客户' },
        // 添加其他门店的测试数据
        { id: 'GK026', name: '跨店客户1', phone: '13900139001', store: '万达店', date: '2025/3/29', staff: '李经理', type: '新客户' },
        { id: 'GK027', name: '跨店客户2', phone: '13900139002', store: '万达店', date: '2025/3/28', staff: '李经理', type: '老客户' },
        { id: 'GK028', name: '跨店客户3', phone: '13900139003', store: '银泰店', date: '2025/3/27', staff: '王经理', type: '潜在客户' },
        { id: 'GK029', name: '跨店客户4', phone: '13900139004', store: '银泰店', date: '2025/3/26', staff: '王经理', type: '线索' },
        { id: 'GK030', name: '跨店客户5', phone: '13900139005', store: '万象城店', date: '2025/3/25', staff: '刘经理', type: '新客户' }
      ];

      // 如果有搜索关键词，先过滤数据
      let filteredData = allTestData;
      if (khmc) {
        filteredData = allTestData.filter(item =>
          item.name.toLowerCase().includes(khmc.toLowerCase())
        );
      }

      // 如果有客户类型筛选，过滤数据
      if (khlx) {
        filteredData = filteredData.filter(item =>
          item.type === khlx
        );
      }

      // 根据跨店开关过滤数据
      if (!isCrossStore) {
        // 默认只显示468店的数据
        filteredData = filteredData.filter(item =>
          item.store === '468店'
        );
      }

      // 分页处理
      const startIndex = (page - 1) * size;
      const endIndex = startIndex + size;
      return filteredData.slice(startIndex, endIndex);
    }

    // 格式化日期
    function formatDate(date) {
      if (typeof date === 'string') {
        return date;
      }
      if (date instanceof Date) {
        return date.toLocaleDateString('zh-CN');
      }
      // 处理时间戳格式
      if (typeof date === 'number') {
        const dateObj = new Date(date);
        return dateObj.toLocaleDateString('zh-CN');
      }
      return '未知日期';
    }

    // 渲染线索列表
    function renderClues() {
      const cardList = document.getElementById('clueCardList');

      if (filteredClues.length === 0) {
        if (isSearching) {
          showSearchEmptyState();
        } else {
          showEmptyState();
        }
        return;
      }

      cardList.innerHTML = filteredClues.map(clue => `
        <div class="clue-card">
          <div class="clue-row">
            <div class="clue-item">
              <span class="clue-label">归属门店</span>
              <span class="clue-value">${clue.store}</span>
            </div>
            <div class="clue-item">
              <span class="clue-label">注册时间</span>
              <span class="clue-value">${clue.date}</span>
            </div>
          </div>
          <div class="clue-row">
            <div class="clue-item">
              <span class="clue-label">负责顾问</span>
              <span class="clue-value">${clue.staff}</span>
            </div>
            <div class="clue-item">
              <span class="clue-label">客户类型</span>
              <span class="clue-value">${clue.type}</span>
            </div>
          </div>
          <div class="clue-row">
            <div class="clue-item">
              <span class="clue-label">姓名</span>
              <span class="clue-value">${clue.name}</span>
            </div>
            <div class="clue-item">
              <span class="clue-label">电话</span>
              <span class="clue-value">${clue.phone}</span>
            </div>
          </div>
          <div class="button-group">
            <button class="invite-btn" onclick="invite('${encodeURIComponent(clue.name)}','${encodeURIComponent(clue.phone)}','${encodeURIComponent(clue.id)}')">
              邀约
            </button>
            <button class="view-invite-btn" onclick="viewUserInviteList('${encodeURIComponent(clue.id)}', '${encodeURIComponent(clue.name)}')">
              查看邀约列表
            </button>
          </div>
        </div>
      `).join('');

      // 如果还有更多数据，显示加载更多提示
      if (hasMoreData) {
        cardList.innerHTML += '<div class="loading-more">正在加载更多...</div>';
      } else if (!hasMoreData && allClues.length > 0) {
        cardList.innerHTML += '<div class="no-more-data">已加载全部数据</div>';
      }
    }

    // 显示加载状态
    function showLoading() {
      const cardList = document.getElementById('clueCardList');
      cardList.innerHTML = '<div class="loading">正在加载客户数据...</div>';
    }

    // 显示加载更多状态
    function showLoadingMore() {
      const cardList = document.getElementById('clueCardList');
      const existingContent = cardList.innerHTML;
      cardList.innerHTML = existingContent + '<div class="loading-more">正在加载更多...</div>';
    }

    // 显示空状态
    function showEmptyState() {
      const cardList = document.getElementById('clueCardList');
      cardList.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">📋</div>
          <div class="empty-state-text">暂无客户数据</div>
          <div class="empty-state-subtext">请稍后再试或联系管理员</div>
        </div>
      `;
    }

    // 显示搜索空状态
    function showSearchEmptyState() {
      const cardList = document.getElementById('clueCardList');
      cardList.innerHTML = `
        <div class="empty-state">
          <div class="empty-state-icon">🔍</div>
          <div class="empty-state-text">未找到匹配的客户</div>
          <div class="empty-state-subtext">请尝试其他搜索关键词</div>
        </div>
      `;
    }

    // 显示错误状态
    function showErrorState(message) {
      const cardList = document.getElementById('clueCardList');
      cardList.innerHTML = `
        <div class="error-state">
          <div>${message}</div>
          <button class="retry-btn" onclick="loadCustomerData(true)">重试</button>
        </div>
      `;
    }

    // 邀约功能
    window.invite = function(name, phone, id) {
      // 跳转到邀约页面并带参数
      const url = `invite.html?name=${name}&phone=${phone}&id=${id}`;
      window.location.href = url;
    }

    // 查看用户邀约列表
    function viewUserInviteList(userId, customerName) {
      if (userId) {
        // 跳转到用户邀约列表页面，传递用户ID和顾客姓名参数
        const url = `user-invite-list.html?userId=${userId}&customerName=${customerName}`;
        window.location.href = url;
      } else {
        showMessage('用户ID获取失败', 'error');
      }
    }
  </script>
</body>
</html>