hhh_new/builder/detail/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(type = "") {
  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();

async function getData() {

  // 取得當前網址的查詢字串部分
  let urlParams = new URLSearchParams(window.location.search);

  // 從查詢字串中取得 'id' 的值
  let id = urlParams.get('id');
  let url = `https://m3.hhh.com.tw:18674/genbuilder?id=${id}&page=1`;
  console.log(id); // 顯示 "2058"
  try {
    const response = await axios.get(url);


    let data = response.data[0];

    $("#name").text(data.name);
    $("#city").text(data.city);
    $("#builder_name").text(data.name);
    $("#service_phone").text(data.service_phone);
    $("#service_phone").attr("href", "tel:" + data.service_phone);
    $("#detail").text(data.detail);

    if (data.detail_data.unit_price !== "") {
      $("#unit_price span").text(data.detail_data.unit_price);
    } else {
      $("#unit_price").hide();
    }

    // 判斷是否有值，若無則隱藏
    if (data.detail_data.construction_company !== "") {
      $("#construction_company span").text(data.detail_data.construction_company);
    } else {
      $("#construction_company").hide();
    }

    if (data.detail_data.builder_type !== "") {
      $("#builder_type span").text(data.detail_data.builder_type);
    } else {
      $("#builder_type").hide();
    }

    if (data.detail_data.configuration !== "") {
      $("#configuration span").text(data.detail_data.configuration);
    } else {
      $("#configuration").hide();
    }

    if (data.detail_data.house_type !== "") {
      $("#house_type span").text(data.detail_data.house_type);
    } else {
      $("#house_type").hide();
    }

    if (data.detail_data.address !== "") {
      $("#address a").text(data.detail_data.address);
      $("#address a").attr("href", "https://maps.google.com.tw/maps?q=" + data.detail_data.address);
    } else {
      $("#address").hide();
    }

    if (data.detail_data.phone !== "") {
      $("#phone span").text(data.detail_data.phone);
    } else {
      $("#phone").hide();
    }

    if (data.detail_data.website !== "") {
      $("#website a").text(data.detail_data.website);
      $("#website a").attr("href", data.detail_data.website);
    } else {
      $("#website").hide();
    }

    let sliderDom = "";

    // 建案影片
    if (data.yt.length) {
      // let dom = "";
      data.yt.map((item) => {
        sliderDom += `
          <div class="swiper-slide">
            <button class="video-item" data-yt-id="${item.yt_id}">
              <img src="${item.imgUrl}" alt="">
              <img src="../../img/icon/play.svg" class="play-img" alt="play-img">
            </button>
          </div>`;
      });

      $(document).on('click', '.video-item', function () {
        const videoId = $(this).data('yt-id'); // 取得 data-yt-id
        const videoUrl = `https://www.youtube.com/embed/${videoId}`; // 影片 url
        $('#videoFrame').attr('src', videoUrl); // 設置 iframe src

        $('#videoModal').modal('show');  // 顯示影片彈跳視窗
      });

      // 當 modal 關閉時清空 iframe src
      $('#videoModal').on('hidden.bs.modal', function () {
        $('#videoFrame').attr('src', '');
      });
    }

    // 建案圖片
    if (data.img.length) {
      data.img.map((item) => {
        sliderDom += `
         <div class="swiper-slide">
          <a href="${item.name}" data-src="${item.name}">
            <img src="${item.name}" alt="">
          </a>
          </div>`;

        // sliderDom += `
        //   <a href="${item.name}" data-src="${item.name}">
        //     <img src="${item.name}" alt="">
        //   </a>`;
      })
    }

    $(".slider-list").append(sliderDom);

    // 標籤
    if (data.tags.length) {
      let dom = "";
      data.tags.map((item) => {
        dom += ` <a href="/builder/lists/${item}-keyword/" target="_blank">${item}</a>`;
      })

      $(".tag-list").html(dom);
    }

    // 輪播
    // $(".slider-list").slick({
    //   dots: false,
    //   infinite: false,
    //   speed: 500,
    //   autoplay: true,
    //   autoplaySpeed: 3000,
    //   slidesToScroll: 1,
    //   arrows: true,
    //   draggable: false, // 禁用鼠標拖曳功能
    //   prevArrow:
    //     '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 36px;color: #D4D4D4;transform: translateY(-10px);"></i></button>',
    //   nextArrow:
    //     '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 36px;color: #D4D4D4;transform: translateY(-10px);"></i></button>',
    // });

    var swiper = new Swiper(".mySwiper", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    console.log('$("#lightgallery")', $("#lightgallery"));
    console.log('$("#lightgallery length")', $("#lightgallery").length);

    const container = document.querySelector('.slider-list');
    console.log('container', container);

    window.lightGallery(container, {
      selector: 'a', // 對應圖片的 <a> 標籤
      plugins: [lgZoom, lgThumbnail],
      preload: 4
    });

    // 雷達圖繪製 Chart.js
    let chartRadarDOM;
    let chartRadarData;
    let chartRadarOptions;

    //載入雷達圖
    Chart.defaults.global.legend.display = false;
    Chart.defaults.global.defaultFontColor = 'rgba(0,0,74, 1)';
    chartRadarDOM = document.getElementById("radar-pc");
    chartRadarData;
    chartRadarOptions =
    {
      scale:
      {
        ticks:
        {
          fontSize: 12,
          beginAtZero: true,
          maxTicksLimit: 5,
          min: 0,
          max: 5,
          backdropPaddingX: 5,
          backdropPaddingY: 5,
        },
        pointLabels:
        {
          fontSize: 16,
          fontColor: '#AAA',
          fontStyle: 'bold',
          lineHeight: 'normal',
        },
        gridLines:
        {
          color: '#AAA'
        },
      }
    };

    let graphData = new Array();
    graphData.push(data.traffic_level);
    graphData.push(data.life_level);
    graphData.push(data.building_level);
    graphData.push(data.price_level);
    graphData.push(data.space_level);

    console.log(graphData);

    // CreateData
    chartRadarData = {
      labels: ['交通', '生活機能', '建材公設', '總價', '空間坪數'],
      datasets: [{
        label: data.name,
        backgroundColor: "rgba(238, 120, 0, 0.7)",
        borderColor: "rgba(238, 120, 0, 1)",
        pointBackgroundColor: "rgba(238, 120, 0, 1)",
        pointBorderWidth: 5,
        borderWidth: 1,
        layout: {
          padding: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0
          }
        },
        data: graphData
      }]
    };

    // Draw
    var chartRadar = new Chart(chartRadarDOM, {
      type: 'radar',
      data: chartRadarData,
      options: chartRadarOptions
    });

    // 推薦建案
    let otherBuilder = '<div class="row" data-masonry="{" percentPosition": true }">';

    data.other_builder.map(item => {
      let dom = `
                <div class="col-6 col-md-4 mb-3">
                  <div class="card">
                    <a href="${item.link}">
                      <img src="../../img/icon/play.svg" class="play-img${item.is_video === '0' ? ' d-none' : ''}" alt="play-img">
                        <img src="${item.img}" alt="" class="img-fluid card-img-top">
                          <div class="card-body">
                            <h5 class="card-title">${item.title}</h5>
                          </div>
                        </a>
                      </div>
                  </div>
                  `;
      otherBuilder += dom;
    });

    otherBuilder += "</div>";
    $(".other-list .container").html(otherBuilder);

    // 確保圖片都載入完成，避免造成剛進入頁面時圖片被覆蓋
    $('.other-list .row').imagesLoaded().progress(function () {
      $('.other-list .row').masonry(); // 渲染整體畫面
    });

    console.log('getData', data);
  } catch (error) {
    console.log("error", error);
  }
}

getData();

// 閱讀更多
$(".article-read-more").on("click", () => {
  $(".article-content").css("height", "100%");
  $(".article-read-more").hide();
});