Book_system/app/static/js/book-list.js

// 图书列表页面脚本
$(document).ready(function() {
  // 处理分类筛选
  function setFilter(button, categoryId) {
    // 移除所有按钮的活跃状态
    $('.filter-btn').removeClass('active');
    // 为当前点击的按钮添加活跃状态
    $(button).addClass('active');
    // 设置隐藏的分类ID输入值
    $('#category_id').val(categoryId);
    // 提交表单
    $(button).closest('form').submit();
  }

  // 处理排序方向切换
  function toggleSortDirection(button) {
    const $button = $(button);
    const isAsc = $button.hasClass('asc');

    // 切换方向类
    $button.toggleClass('asc desc');

    // 更新图标
    if (isAsc) {
      $button.find('i').removeClass('fa-sort-amount-up').addClass('fa-sort-amount-down');
      $('#sort_order').val('desc');
    } else {
      $button.find('i').removeClass('fa-sort-amount-down').addClass('fa-sort-amount-up');
      $('#sort_order').val('asc');
    }

    // 提交表单
    $button.closest('form').submit();
  }

  // 将函数暴露到全局作用域
  window.setFilter = setFilter;
  window.toggleSortDirection = toggleSortDirection;

  // 处理删除图书
  let bookIdToDelete = null;

  $('.delete-btn').click(function(e) {
    e.preventDefault();
    bookIdToDelete = $(this).data('id');
    const bookTitle = $(this).data('title');
    $('#deleteBookTitle').text(bookTitle);
    $('#deleteModal').modal('show');
  });

  $('#confirmDelete').click(function() {
    if (!bookIdToDelete) return;

    $.ajax({
      url: `/book/delete/${bookIdToDelete}`,
      type: 'POST',
      success: function(response) {
        if (response.success) {
          $('#deleteModal').modal('hide');
          // 显示成功消息
          showNotification(response.message, 'success');
          // 移除图书卡片
          setTimeout(() => {
            location.reload();
          }, 800);
        } else {
          showNotification(response.message, 'error');
        }
      },
      error: function() {
        showNotification('删除操作失败，请稍后重试', 'error');
      }
    });
  });

  // 处理借阅图书
  $('.borrow-btn').click(function(e) {
    e.preventDefault();
    const bookId = $(this).data('id');

    $.ajax({
      url: `/borrow/add/${bookId}`,
      type: 'POST',
      success: function(response) {
        if (response.success) {
          showNotification(response.message, 'success');
          // 可以更新UI显示，比如更新库存或禁用借阅按钮
          setTimeout(() => {
            location.reload();
          }, 800);
        } else {
          showNotification(response.message, 'error');
        }
      },
      error: function() {
        showNotification('借阅操作失败，请稍后重试', 'error');
      }
    });
  });

  // 显示通知
  function showNotification(message, type) {
    // 移除可能存在的旧通知
    $('.notification-alert').remove();

    const alertClass = type === 'success' ? 'notification-success' : 'notification-error';
    const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

    const notification = `
      <div class="notification-alert ${alertClass}">
        <div class="notification-icon">
          <i class="fas ${iconClass}"></i>
        </div>
        <div class="notification-message">${message}</div>
        <button class="notification-close">
          <i class="fas fa-times"></i>
        </button>
      </div>
    `;

    $('body').append(notification);

    // 显示通知
    setTimeout(() => {
      $('.notification-alert').addClass('show');
    }, 10);

    // 通知自动关闭
    setTimeout(() => {
      $('.notification-alert').removeClass('show');
      setTimeout(() => {
        $('.notification-alert').remove();
      }, 300);
    }, 4000);

    // 点击关闭按钮
    $('.notification-close').click(function() {
      $(this).closest('.notification-alert').removeClass('show');
      setTimeout(() => {
        $(this).closest('.notification-alert').remove();
      }, 300);
    });
  }

  // 添加通知样式
  const notificationCSS = `
    .notification-alert {
      position: fixed;
      top: 20px;
      right: 20px;
      min-width: 280px;
      max-width: 350px;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
      display: flex;
      align-items: center;
      padding: 15px;
      transform: translateX(calc(100% + 20px));
      transition: transform 0.3s ease;
      z-index: 9999;
    }
    
    .notification-alert.show {
      transform: translateX(0);
    }
    
    .notification-success {
      border-left: 4px solid var(--success-color);
    }
    
    .notification-error {
      border-left: 4px solid var(--danger-color);
    }
    
    .notification-icon {
      margin-right: 15px;
      font-size: 24px;
    }
    
    .notification-success .notification-icon {
      color: var(--success-color);
    }
    
    .notification-error .notification-icon {
      color: var(--danger-color);
    }
    
    .notification-message {
      flex: 1;
      font-size: 0.95rem;
      color: var(--text-color);
    }
    
    .notification-close {
      background: none;
      border: none;
      color: var(--text-lighter);
      cursor: pointer;
      padding: 5px;
      margin-left: 10px;
      font-size: 0.8rem;
    }
    
    .notification-close:hover {
      color: var(--text-color);
    }
    
    @media (max-width: 576px) {
      .notification-alert {
        top: auto;
        bottom: 20px;
        left: 20px;
        right: 20px;
        min-width: auto;
        max-width: none;
        transform: translateY(calc(100% + 20px));
      }
      
      .notification-alert.show {
        transform: translateY(0);
      }
    }
  `;

  // 将通知样式添加到头部
  $('<style>').text(notificationCSS).appendTo('head');

  // 修复图书卡片布局的高度问题
  function adjustCardHeights() {
    // 重置所有卡片高度
    $('.book-card').css('height', 'auto');

    // 在大屏幕上应用等高布局
    if (window.innerWidth >= 768) {
      // 分组按行
      const rows = {};
      $('.book-card').each(function() {
        const offsetTop = $(this).offset().top;
        if (!rows[offsetTop]) {
          rows[offsetTop] = [];
        }
        rows[offsetTop].push($(this));
      });

      // 为每行设置相同高度
      Object.keys(rows).forEach(offsetTop => {
        const cards = rows[offsetTop];
        let maxHeight = 0;

        // 找出最大高度
        cards.forEach(card => {
          const height = card.outerHeight();
          if (height > maxHeight) {
            maxHeight = height;
          }
        });

        // 应用最大高度
        cards.forEach(card => {
          card.css('height', maxHeight + 'px');
        });
      });
    }
  }

  // 初始调整高度
  $(window).on('load', adjustCardHeights);

  // 窗口大小变化时调整高度
  $(window).on('resize', adjustCardHeights);

  // 为封面图片添加加载错误处理
  $('.book-cover').on('error', function() {
    const $this = $(this);
    const title = $this.attr('alt') || '图书';

    // 替换为默认封面
    $this.replaceWith(`
      <div class="default-cover">
        <i class="fas fa-book"></i>
        <span class="default-cover-text">${title.charAt(0)}</span>
      </div>
    `);
  });

  // 添加初始动画效果
  $('.book-card').each(function(index) {
    $(this).css({
      'opacity': '0',
      'transform': 'translateY(20px)'
    });

    setTimeout(() => {
      $(this).css({
        'opacity': '1',
        'transform': 'translateY(0)',
        'transition': 'opacity 0.5s ease, transform 0.5s ease'
      });
    }, 50 * index);
  });
});