hhh_new/builder/lists/js/main.js

// 載入共用 template
$('#navbar').load('../../template/navbar.html');
$('#footer').load('../../template/footer.html');
$('#btn-box').load('../../template/button.html');
$('#topCarousel').load('../../template/top_carousel.html');

let page = 1; // 當前頁數
let pageSize = 18; // 每頁數量
let isFirstLoad = true; // 初始載入

// 列表篩選
async function dataSearch() {
  let url;
  $('#builderSpinner').show();
  $('#builderList').hide();

  if (isFirstLoad) {
    // 第一次載入使用本地 JSON 文件
    // url = './json/designers_lists_data.json';
    url = `https://m3.hhh.com.tw:18673/builder_search?page=${page}&page_size=${pageSize}`;
  } else {
    // 後續使用 API (預設排序為 recommend)
    url = `https://m3.hhh.com.tw:18673/builder_search?page=${page}&page_size=${pageSize}`;

    let input = $(".keywords").val();

    if (input !== "") {
      let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字

      const newItem = {
        id: "keyword",
        text: "關鍵字",
        value: input
      };

      if (!isExist) {
        filterList.push(newItem);
        createFilterHtml(newItem);
      } else {
        // 移除原本關鍵字
        $('.budget p.me-1').each(function () {
          if ($(this).text().includes('關鍵字')) {
            $(this).closest('.me-3').remove();
          }
        });

        if (filterList.length === 0) {
          $('#removeResultBtn').hide();
        }

        filterList = filterList.filter(item => item.text !== "關鍵字");

        filterList.push(newItem);
        createFilterHtml(newItem);

      }
      $(".keywords").val("")
      // url += `&keyword=${input}`;
    }

    if (filterList.length) {
      filterList.map(item => {
        url += `&${item.id}=${item.value}`;
      });
    }
  }

  try {
    const response = await axios.get(url);
    console.log('response.data', response.data);
    // console.log('response.data.videos', response.data.videos);

    let totalCount = response.data.total_count;
    let totalPages = Math.ceil(totalCount / pageSize);

    $("#totalCount").html(totalCount);

    if (totalPages) {
      $('.filter-list .pagination').show();
      setPagination(totalPages); // 分頁處理
    } else {
      $('.filter-list .pagination').hide();
    }

    let resultHtml = '';

    if (response.data.videos.length) {
      response.data.videos.forEach((item) => {
        resultHtml += `
          <div class="col-md-4 mb-4">
            <a href="${item.DesignerLink}">
              <div class="card lists-card">
                <div class="position-relative">
                  <img src="../../img/icon/play.svg" class="play-img${item.Is_video === '0' ? ' d-none' : ''}" alt="play-img">
                    <img src="${item.BuilderCoverImg}" class="cover-img" alt="${item.BuilderTitle}">
                    </div>
                    <div class="card-body p-4">
                      <section>
                        <h5 class="text-dark">${item.BuilderTitle}</h5>
                        <p class="text-dark my-3">${item.BuilderDescr}</p>
                        <h6 class="mb-0 text-muted fw-normal">
                          ${item.BuilderAddress}
                        </h6>
                      </section>
                    </div>
                </div>
            </a>
          </div>`;
      });
    } else {
      resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
    }

    $('#builderList').html(resultHtml);

    setTimeout(() => {
      $('#builderList').show();
      $('#builderSpinner').hide();
    }, 100)

    // 更新初始載入狀態
    if (isFirstLoad) {
      isFirstLoad = false;
    }
  } catch (error) {
    console.log("error", error);
  }
}

dataSearch();