inquiryMachine-booklist-1080/js/index.js

let sBoxID = ''
let sSortmark = ''
let page = 0
let pageSize = 30
let hasNextPage = true
let searchKeyWord = ''  // 搜索keyword
let isSearch = false

// 默认初始化会有限制选择图书借阅的数量的值
// public string getReader()
// 读者信息 {"Barcode":"700008","Name":"测试卡","nMaxNum":2}
let lendNum = 0

setInterval(function() {
  $('.lending-btn img').css('animation-duration', '1s').addClass('animate__animated animate__tada');
  setTimeout(function() {
    $('.lending-btn img').removeClass('animate__animated animate__tada');
  }, 1000);
}, 5000);

getBaseInfoReader()
function getBaseInfoReader(){
  let readerJson = JSON.parse(boundObject.getReader())
  console.log('readerJson',readerJson)
  console.log('readerJson-Barcode',readerJson.Barcode)
  console.log('readerJson-Name',readerJson.Name)
  console.log('readerJson-nMaxNum',readerJson.nMaxNum)
  lendNum = readerJson.nMaxNum
}

// 假设书籍数据
let books = [];

// 动态生成左侧分类的项
createHtmlLeftNav();
function createHtmlLeftNav() {
  // let LeftLocaltionJSON = [{"BoxID":"*","BoxName":"全部"},{"BoxID":"1","BoxName":"1号书盒"},{"BoxID":"2","BoxName":"2号书盒"},{"BoxID":"3","BoxName":"3号书盒"},{"BoxID":"4","BoxName":"4号书盒"},{"BoxID":"5","BoxName":"5号书盒"},{"BoxID":"6","BoxName":"6号书盒"},{"BoxID":"7","BoxName":"7号书盒"},{"BoxID":"8","BoxName":"8号书盒"},{"BoxID":"9","BoxName":"9号书盒"},{"BoxID":"10","BoxName":"10号书盒"},{"BoxID":"11","BoxName":"11号书盒"},{"BoxID":"12","BoxName":"12号书盒"},{"BoxID":"13","BoxName":"13号书盒"},{"BoxID":"14","BoxName":"14号书盒"},{"BoxID":"15","BoxName":"15号书盒"},{"BoxID":"16","BoxName":"16号书盒"},{"BoxID":"17","BoxName":"17号书盒"},{"BoxID":"18","BoxName":"18号书盒"}];
  // let LeftCategoriesJSON = [{"SortIndex":"I","SortName":"文学","BookNum":2},{"SortIndex":"K","SortName":"历史、地理","BookNum":1}];

  // LeftLocaltionJSON / LeftCategoriesJSON  c#执行得返回值
  // boundObject c#端注册类得名称
  // cshareFunction c#端注册类boundObject下的函数

  let LeftLocaltionJSON = boundObject.getBoxs('1')
  let locations  = JSON.parse(LeftLocaltionJSON)
  console.log('LeftLocaltionJSON',LeftLocaltionJSON)

  let LeftCategoriesJSON = boundObject.getSortmarks('2')
  let categories  = JSON.parse(LeftCategoriesJSON)
  console.log('LeftCategoriesJSON',LeftCategoriesJSON)

  // 图书位置
  let locationsHtml = '<div class="left-item"><h4>图书位置</h4><ul class="left-filter filter-location">';
  locations.forEach((location, index) => {
      let activeClass = index === 0 ? 'class="active"' : '';
      locationsHtml += `<li ${activeClass} data-id=${location.BoxID}>${location.BoxName}</li>`;
  });
  locationsHtml += '</ul></div>';
  
  // 图书分类
  let categoriesHtml = '<div class="left-item"><h4>图书分类</h4><ul class="left-filter filter-sort">';
  categories.forEach(category => {
      categoriesHtml += `<li data-id=${category.SortIndex}>${category.SortName}</li>`;
  });
  categoriesHtml += '</ul></div>';

  document.getElementById('lib-book-left').innerHTML = `${locationsHtml}${categoriesHtml}`
}

// 为图书位置和分类的每个li元素添加点击事件
document.querySelectorAll('.left-filter li').forEach(item => {
  item.addEventListener('click', function(event) {
    
    document.querySelectorAll('.left-filter li').forEach(li => {
        li.classList.remove('active');
    });
    const clickedLi = event.target;
    const dataId = clickedLi.getAttribute('data-id');
    
    // 判断点击的是图书位置还是分类，并分别处理
    if (clickedLi.closest('.filter-location')) {
      if(dataId === '*'){
        sBoxID = '';
      }else{
        sBoxID = dataId;
      }
      sSortmark = ''
    } else if (clickedLi.closest('.filter-sort')) {
      sSortmark = dataId;
      sBoxID = ''
    }
    this.classList.add('active');

    document.querySelector('.book-list-wrapper').scrollTop = 0
    document.querySelector('.book-list-wrapper').innerHTML = ''

    page = 0
    hasNextPage = true
    document.querySelector('input[name="keyword"]').value = ''
    searchKeyWord = ''
    isSearch = false

    FetchRightBookList()
  });
});

let scrollTimeout = null;

function debouncedOnScroll() {
  if (scrollTimeout !== null) {
    clearTimeout(scrollTimeout);
  }
  scrollTimeout = setTimeout(onScroll, 200); // 延迟1秒执行onScroll
}

// 滚动事件处理函数
function onScroll() {
  const element = document.querySelector('.book-list-wrapper')
  if (element.scrollTop  + element.offsetHeight > element.scrollHeight - 100) {
    FetchRightBookList();
  }
}

// 添加节流后的滚动监听
document.querySelector('.book-list-wrapper').addEventListener('scroll', debouncedOnScroll);

FetchRightBookList()
function FetchRightBookList(){
    if (!hasNextPage) return; // 如果没有下一页，停止加载
    if (isSearch) {
      page = 0
      sBoxID = ''
      sSortmark = ''
      document.querySelector('.book-list-wrapper').innerHTML = ''
    }

    const params = {
      'sName': searchKeyWord,
      'sBoxID': sBoxID,
      'sSortmark': sSortmark,
      'nPageIndex': page,
      'nPageMaxNum': pageSize
    }
    // js传参给 c#端
    console.log(params)
    console.log('sName',searchKeyWord)
    console.log('sBoxID',sBoxID)
    console.log('sSortmark',sSortmark)
    console.log('nPageIndex',page)
    console.log('nPageMaxNum',pageSize)

    // ----- ----- ----- js调用c#的函数
    let booksRightJson = boundObject.getBooks(searchKeyWord,sBoxID,sSortmark,page,pageSize)
    var correctedJsonStr = booksRightJson.replace(/"status":\s*"0",\s*/, '');
    // 去除字符串的头尾空白
    correctedJsonStr = correctedJsonStr.trim();
    // 去掉字符串的头花括号
    correctedJsonStr = correctedJsonStr.substring(1);
    books = JSON.parse(correctedJsonStr).data

    const totalPages = JSON.parse(correctedJsonStr).totalPages
    console.log('totalPages',totalPages)
    if (page > totalPages || books.length === 0) {
      hasNextPage = false;
    }
    createRightBooklist(books);
    page += 1;
}

// 有图书封面的时候
function createRightBooklist(books){
  console.log('books.length',books.length)
  let bookListHtml = ''
  let bookList = document.querySelector('.book-list-wrapper').querySelector('.book-list');
  let emptyBook = document.querySelector('.book-list-wrapper').querySelector('.empty-book-list');

  if(books.length === 0){
    document.querySelector(".lib-search-result").style.display = 'none'
    document.querySelector(".lib-search-result span").innerHTML = 0
    
    bookListHtml = `
      <div class="empty-book-list">
        <img src="images/empty.png" alt="" />
        <span>暂无相关数据</span>
      </div>
    `;
    document.querySelector('.book-list-wrapper').innerHTML = bookListHtml;
    if (bookList) {
      bookList.remove()
    }
  }else{
    // getBooks(string sName,string sBoxID,string sSortmark,int nPageIndex,int nPageMaxNum)
    // getBookDetail(string sBarcode)

    // books =  [{"Barcode":"000131034","Name":"好人难做","Author":"周磊","ISBN":"9787541566431","Sortmark":"I235/50","BoxID":"1"},{"Barcode":"000134847","Name":"仙逆","Author":"","ISBN":"","Sortmark":"I32","BoxID":"1"},{"Barcode":"1007700","Name":"红楼梦","Author":"","ISBN":"","Sortmark":"K543/20","BoxID":"1"}]
    

    books.forEach(book => {
      let booksCoverJson = boundObject.getBookDetail(book.Barcode)
      let cover = JSON.parse(booksCoverJson)
      let booksCover = cover[0].BookCover !== null ? `data:image/jpeg;base64,${cover[0].BookCover}` : 'images/default-img.png'
      bookListHtml += `
        <li data-id="${book.Barcode}">
          <div class="book-list-img">
            <img src="${booksCover}" alt="" />
          </div>
          <h4>${book.Name}</h4>
          <span>${(book.Author !== '' && book.Author !== 'NULL') ? book.Author : ''}</span>
        </li>
      `;
    });

    if(emptyBook !== null){
      emptyBook.remove()
    }

    if (!bookList) {
      bookList = document.createElement('ul');
      bookList.className = 'book-list';
      document.querySelector('.book-list-wrapper').appendChild(bookList);
    }

    if(!hasNextPage){
      const existingEndMarker = document.querySelector('.book-list-wrapper .book-noData');
      if (!existingEndMarker) {
        const bookDataEnd = `<div class="book-noData">暂无更多数据啦~</div>`;
        document.querySelector('.book-list-wrapper').insertAdjacentHTML('beforeend', bookDataEnd);
      }
    }else{
      document.querySelector('.book-list-wrapper').querySelector('.book-list').innerHTML += bookListHtml;

      // 为图书列表的每个li元素添加点击事件
      document.querySelectorAll('.book-list li').forEach(item => {
        item.addEventListener('click', function() {
          this.classList.toggle('active');
        });
      });
    }
  }

  if(isSearch){
    document.querySelector(".lib-search-result").style.display = 'block'
    document.querySelector(".lib-search-result span").innerHTML = books.length
  }else{
    document.querySelector(".lib-search-result").style.display = 'none'
    document.querySelector(".lib-search-result span").innerHTML = 0
  }
}
// 创建借阅书籍弹框
function createlendDialog(books) {
  // 借阅书籍列表
  const listItems = books.map(function(book,index) {
    return `
      <li class="lib-lending-item">
        <span class="lending-num">${index+1}</span>
        <div class="lending-img">
          <img src="${book.image}" alt="" />
        </div>
        <span class="lending-author">${book.barcode}</span>
        <h4>${book.title}</h4>
      </li>
    `;
  }).join('');

  //  <span class="lending-author">${book.author !== null ? book.author : ''}</span>

  // 弹框的HTML字符串
  const dialogHTML = `
    <div class="lib-dialog" id="lib-dialog">
      <div class="lib-dialog-mask"></div>
      <div class="lib-dialog-main">
        <div class="lib-dialog-header">
          <div class="lib-dialog-title">图书借阅</div>
        </div>
        <ul class="lib-lending-list">
          ${listItems}
        </ul>
        <div class="lib-dialog-bottom">
          <span class="cancel-btn">取消</span>
          <span class="confirm-btn">确定</span>
        </div>
      </div>
    </div>
  `;

  // 将弹框添加到body
  document.body.insertAdjacentHTML('beforeend', dialogHTML);

  // 获取弹框元素
  const dialog = document.getElementById('lib-dialog');
  const cancelButton = dialog.querySelector('.cancel-btn');
  const confirmButton = dialog.querySelector('.confirm-btn');

  // 取消
  cancelButton.addEventListener('click', function() {
    removeSelected(dialog)
  });
  // 确定
  confirmButton.addEventListener('click', function() {
    // ----- ----- ----- js调用c#的函数 假设需要借阅得书籍id集
    // public string beginLendBooks(string sData)
    const bookBarcodes = books.map(function(book) {
      return book.barcode
    })
    console.log('bookBarcodes',bookBarcodes)
    const params = bookBarcodes.join(',')
    let lendBookComfirmed = boundObject.beginLendBooks(params)
    if(lendBookComfirmed){
      removeSelected(dialog)
    }
  });
}

function removeSelected(dialog){
  const bookListItems = document.querySelectorAll('.book-list li');
  bookListItems.forEach(function(item) {
    item.classList.remove('active');
  });
  dialog.remove()
}

// 图书借阅弹框 show
document.querySelector(".lending-btn").addEventListener("click", function() {
  const selectedBooks = [];
  document.querySelectorAll('.book-list li.active').forEach(activeLi => {
    const bookData = {
      barcode: activeLi.getAttribute('data-id'),
      title: activeLi.querySelector('h4').textContent,
      image: activeLi.querySelector('img').src
    };
    selectedBooks.push(bookData);
  });

  if(selectedBooks.length === 0){
    layer.alert('请先选择需要借阅的图书！');
    return false
  }else if(selectedBooks.length > lendNum){
    layer.alert('最多只可借阅'+lendNum+'本图书!');
    return false
  }{
    createlendDialog(selectedBooks);
  }
});

// 搜索按钮点击搜索
document.querySelector(".search-btn").addEventListener("click", function() {
  isSearch = true
  searchKeyWord = document.querySelector('input[name="keyword"]').value
  if(searchKeyWord === ''){
    layer.alert('请输入关键词进行搜索！');
    return false
  }
  
  hasNextPage = true
  // document.querySelector('.book-list-wrapper').scrollTop = 0
  let bookNoData= document.querySelector('.book-list-wrapper').querySelector('.book-noData');
  if(bookNoData){
    bookNoData.remove()
  }
  document.querySelectorAll('.left-filter li').forEach(item => {
    item.classList.remove('active');
  });

  FetchRightBookList()
});