appointment-list.html 18.4 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;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .back-btn {
      background: #fff;
      border: none;
      border-radius: 12px;
      padding: 8px 12px;
      color: #388e3c;
      font-size: 0.9em;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
      transition: all 0.2s ease;
    }

    .back-btn:hover {
      box-shadow: 0 4px 16px rgba(76, 175, 80, 0.25);
      transform: translateY(-1px);
    }

    h2 {
      text-align: center;
      color: #388e3c;
      margin: 10px 0;
      letter-spacing: 2px;
      flex: 1;
    }

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

    .search-input {
      width: 100%;
      padding: 12px 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;
    }

    .toolbar {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
      padding: 20px;
      margin-bottom: 20px;
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn {
      padding: 12px 20px;
      border: none;
      border-radius: 10px;
      font-size: 1em;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s ease;
      letter-spacing: 1px;
      text-decoration: none;
      display: inline-block;
      text-align: center;
    }

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

    .btn-primary:hover {
      box-shadow: 0 4px 16px rgba(67, 233, 123, 0.4);
      transform: translateY(-1px);
    }

    .btn-secondary {
      background: #f5f5f5;
      color: #666;
      border: 1.5px solid #ddd;
    }

    .btn-secondary:hover {
      background: #e8e8e8;
      border-color: #ccc;
    }

    .list-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
      overflow: hidden;
      max-height: 70vh;
    }

    .list-header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      padding: 16px 20px;
      color: #fff;
      font-weight: 600;
      letter-spacing: 1px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .total-count {
      font-size: 0.9em;
      opacity: 0.9;
    }

    .list-content {
      max-height: calc(70vh - 60px);
      overflow-y: auto;
    }

    .list-item {
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .list-item:hover {
      background: #f8fff8;
      transform: translateX(4px);
    }

    .list-item:last-child {
      border-bottom: none;
    }

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .customer-name {
      font-weight: 600;
      color: #2e7d32;
      font-size: 1.05em;
    }

    .appointment-time {
      font-size: 0.85em;
      color: #6a9c6a;
    }

    .item-details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }

    .detail-item {
      display: flex;
      align-items: center;
      font-size: 0.9em;
      color: #555;
    }

    .detail-label {
      color: #6a9c6a;
      margin-right: 6px;
      font-size: 0.85em;
    }

    .item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85em;
    }

    .appointment-status {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 0.8em;
      font-weight: 500;
    }

    .status-pending {
      background: #fff3cd;
      color: #856404;
    }

    .status-confirmed {
      background: #d4edda;
      color: #155724;
    }

    .status-completed {
      background: #d1ecf1;
      color: #0c5460;
    }

    .status-cancelled {
      background: #f8d7da;
      color: #721c24;
    }

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

    .loading::after {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #c8e6c9;
      border-radius: 50%;
      border-top-color: #43a047;
      animation: spin 1s linear infinite;
      margin-left: 10px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

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

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

    .error-state {
      text-align: center;
      padding: 40px 20px;
      color: #c62828;
    }

    .retry-btn {
      background: #43a047;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      margin-top: 12px;
      cursor: pointer;
      font-size: 0.9em;
      transition: all 0.2s ease;
    }

    .retry-btn:hover {
      background: #388e3c;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 20px;
      border-top: 1px solid #e0e0e0;
    }

    .page-btn {
      padding: 8px 12px;
      border: 1px solid #ddd;
      background: #fff;
      color: #666;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .page-btn:hover {
      background: #f5f5f5;
      border-color: #43a047;
    }

    .page-btn.active {
      background: #43a047;
      color: #fff;
      border-color: #43a047;
    }

    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* 消息提示样式 */
    .message-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      max-width: 300px;
      padding: 16px 20px;
      border-radius: 10px;
      color: #fff;
      font-weight: 500;
      z-index: 2000;
      transform: translateX(200%);
      transition: all 0.3s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .message-toast.show {
      transform: translateX(0);
    }

    .message-toast.success {
      background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    }

    .message-toast.error {
      background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
    }

    .message-toast.warning {
      background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    }

    .message-toast.info {
      background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
    }

    @media (max-width: 520px) {
      .container { max-width: 100%; }
      .list-card { max-height: 65vh; }
      .list-content { max-height: calc(65vh - 60px); }
      .toolbar { flex-direction: column; align-items: stretch; }
      .item-details { grid-template-columns: 1fr; }
      .item-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <button class="back-btn" onclick="goBack()">← 返回</button>
      <div></div>
    </div>
    <h2>预约列表</h2>

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


    <div class="list-card">
      <div class="list-header">
        <span>预约记录</span>
        <span class="total-count" id="listCount">共 0 条记录</span>
      </div>

      <div class="list-content" id="listContent">
        <div class="loading">正在加载预约数据...</div>
      </div>

      <div class="pagination" id="pagination" style="display: none;">
        <button class="page-btn" id="prevBtn" onclick="changePage(-1)">上一页</button>
        <span id="pageInfo">第 1 页，共 1 页</span>
        <button class="page-btn" id="nextBtn" onclick="changePage(1)">下一页</button>
      </div>
    </div>
  </div>

  <!-- 消息提示 -->
  <div id="messageToast" class="message-toast"></div>

  <script>
    // 全局变量
    let currentPage = 1;
    let pageSize = 10;
    let totalPages = 1;
    let totalCount = 0;
    let appointmentList = [];
    let filteredList = [];
    let searchTerm = '';
    let userInfo = JSON.parse(localStorage.getItem('userInfo'));
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      initializePage();
      bindEvents();
    });

    // 初始化页面
    async function initializePage() {
      await loadAppointmentList();
    }

    // 绑定事件
    function bindEvents() {
      // 搜索输入框事件 - 使用防抖处理
      let searchTimeout;
      document.getElementById('searchInput').addEventListener('input', function(e) {
        searchTerm = e.target.value;

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

        // 设置新的定时器，500ms后执行搜索
        searchTimeout = setTimeout(() => {
          handleSearch();
        }, 500);
      });
    }

    // 加载预约列表
    async function loadAppointmentList() {
      try {
        showLoading();

        // 构建API URL，包含搜索参数
        let apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqYyjl?page=${currentPage}&pageSize=${pageSize}&yyr=${userInfo.userId}`;

        // 如果有搜索条件，添加到URL参数中
        if (searchTerm && searchTerm.trim()) {
          apiUrl += `&gkxm=${encodeURIComponent(searchTerm.trim())}`;
        }

        console.log('请求URL:', apiUrl);

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

        console.log('响应状态:', response.status);

        if (response.ok) {
          const result = await response.json();
          console.log('接口返回数据:', result);

          // 检查不同的数据结构可能性
          if (result.code == 200) {
            // 情况1: result.data 存在
            if (result.data) {
              appointmentList = result.data.list || result.data || [];
              totalCount = result.data.pagination.total || 0;
              console.log('使用 result.data 结构');
            }


            totalPages = Math.ceil(totalCount / pageSize);

            console.log('解析后的数据:', {
              appointmentList: appointmentList,
              totalCount: totalCount,
              totalPages: totalPages
            });

            // 更新列表计数
            document.getElementById('listCount').textContent = `共 ${totalCount} 条记录`;

            // 直接渲染列表，不再进行前端筛选
            renderAppointmentList();

            // 更新分页
            updatePagination();
          } else {
            console.log('接口返回错误:', result);
            showEmptyState(`获取预约列表失败: ${result.message || '未知错误'}`);
          }
        } else {
          const errorText = await response.text();
          console.log('HTTP错误:', response.status, errorText);
          showEmptyState(`网络请求失败: ${response.status}`);
        }
      } catch (error) {
        console.error('加载预约列表出错:', error);
        showEmptyState('加载失败，请检查网络连接');
      }
    }

    // 搜索处理函数（替换原来的过滤函数）
    function handleSearch() {
      // 重置到第一页
      currentPage = 1;
      // 重新加载数据
      loadAppointmentList();
    }

    // 渲染预约列表（简化版本，直接使用appointmentList）
    function renderAppointmentList() {
      const listContent = document.getElementById('listContent');

      if (!appointmentList || appointmentList.length === 0) {
        if (searchTerm) {
          showEmptyState('没有找到匹配的预约记录');
        } else {
          showEmptyState('暂无预约记录');
        }
        return;
      }

      listContent.innerHTML = '';

      appointmentList.forEach(item => {
        const listItem = createAppointmentItem(item);
        listContent.appendChild(listItem);
      });
    }

    // 创建预约项
    function createAppointmentItem(item) {
      const div = document.createElement('div');
      div.className = 'list-item';
      div.onclick = () => viewAppointmentDetail(item);

      const status = getAppointmentStatus(item);
      const statusText = getStatusText(status);
      const appointmentTime = formatDateTime(item.createTime);

      // 格式化开始时间和结束时间
      const startTime = formatDateTime(item.yysj);
      const endTime = formatDateTime(item.yyjs);

      div.innerHTML = `
        <div class="item-header">
          <span class="customer-name">${item.gkxm || '未知顾客'}</span>
          <span class="customer-name">${item.F_Status || '未知状态'}</span>
        </div>
        <div class="item-details">
          <div class="detail-item">
            <span class="detail-label">开始时间:</span>
            <span>${startTime}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">结束时间:</span>
            <span>${endTime}</span>
          </div>
        </div>
      `;

      return div;
    }

    // 获取预约状态
    function getAppointmentStatus(item) {
      // 这里可以根据实际业务逻辑判断状态
      // 暂时使用简单的逻辑
      if (item.status === 'completed') return 'completed';
      if (item.status === 'cancelled') return 'cancelled';
      if (item.status === 'confirmed') return 'confirmed';
      return 'pending';
    }

    // 获取状态文本
    function getStatusText(status) {
      const statusMap = {
        'pending': '待确认',
        'confirmed': '已确认',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || '未知';
    }

    // 格式化日期时间
    function formatDateTime(dateTime) {
      if (!dateTime) return '未知';

      try {
        const date = new Date(dateTime);
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        });
      } catch (error) {
        return dateTime;
      }
    }

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

    // 显示空状态
    function showEmptyState(message) {
      const listContent = document.getElementById('listContent');
      listContent.innerHTML = `
        <div class="empty-state">
          <div class="empty-icon">📅</div>
          <div>${message}</div>
          ${searchTerm ? `<div style="margin-top: 8px; font-size: 0.9em; opacity: 0.7;">未找到匹配"${searchTerm}"的记录</div>` : ''}
        </div>
      `;
    }

    // 更新分页
    function updatePagination() {
      const pagination = document.getElementById('pagination');
      const pageInfo = document.getElementById('pageInfo');
      const prevBtn = document.getElementById('prevBtn');
      const nextBtn = document.getElementById('nextBtn');

      if (totalPages <= 1) {
        pagination.style.display = 'none';
        return;
      }

      pagination.style.display = 'flex';
      pageInfo.textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;

      prevBtn.disabled = currentPage <= 1;
      nextBtn.disabled = currentPage >= totalPages;
    }

    // 切换页面
    async function changePage(direction) {
      const newPage = currentPage + direction;

      if (newPage < 1 || newPage > totalPages) {
        return;
      }

      currentPage = newPage;
      await loadAppointmentList();
    }

    // 刷新列表
    async function refreshList() {
      currentPage = 1;
      await loadAppointmentList();
      showMessage('列表已刷新', 'success');
    }

    // 查看预约详情
    function viewAppointmentDetail(item) {
      if (item && item.id) {
        // 跳转到详情页面，传递ID参数
        window.location.href = `appointment-detail.html?id=${item.id}`;
      } else {
        showMessage('无法获取预约ID', 'error');
      }
    }

    // 返回上一页
    function goBack() {
      if (window.history.length > 1) {
        window.history.back();
      } else {
        window.location.href = 'index.html';
      }
    }

    // 显示消息提示
    function showMessage(message, type = 'info') {
      const toast = document.getElementById('messageToast');
      toast.textContent = message;
      toast.className = `message-toast ${type}`;

      // 显示提示
      setTimeout(() => {
        toast.classList.add('show');
      }, 100);

      // 自动隐藏
      setTimeout(() => {
        toast.classList.remove('show');
      }, 3000);
    }
  </script>
</body>
</html>