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
//     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();

let isLoading = false;
let haveOtherBuilder = true; // 是否有推薦建案

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=${page}`;

  if (haveOtherBuilder) {
    $(".spinners").show();
  }

  try {
    const response = await axios.get(url);

    let data = response.data[0];

    // 判斷是否有取回推薦建案
    if (data.other_builder.length) {
      haveOtherBuilder = true;
    } else {
      haveOtherBuilder = false;
    }

    $("#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);

    // Header
    $('title').text(`${data.name} - 幸福空間`);
    $('meta[name="description"]').attr('content', `${data.detail}`);
    $('meta[property="og:title"]').attr('content', `${data.name} - 幸福空間`);
    $('meta[property="og:description"]').attr('content', `${data.detail}`);
    $('meta[name="twitter:title"]').attr('content', `${data.name} - 幸福空間`);
    $('meta[name="twitter:description"]').attr('content', `${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 = "";

    setTimeout(() => {
      isLoading = false;
    }, 2000)

    // 建案影片
    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(".swiper-list", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

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

    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
    });

    // 推薦建案
    if (data.other_builder.length) {
      let otherBuilder = "";

      // 動態生成卡片內容
      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;
      });

      // 新增內容到現有 Masonry 容器
      let newItems = $(otherBuilder);
      $(".other-list .container .row").append(newItems);

      // 確保圖片載入完成後進行 Masonry 重新排版
      newItems.imagesLoaded(function () {
        $('.other-list .container .row').masonry('appended', newItems); // 重新排列
        $('.other-list .container .row').masonry('layout'); // 重新 layout
      });
    }

    setTimeout(() => {
      $(".spinners").hide();
    }, 1000)
    console.log('getData', data);
  } catch (error) {
    console.log("error", error);
  }
}

getData();

let noData = false; // 無資料

// 判斷是否捲動到底部
$(window).on('scroll', function () {
  // 資料 < 18 筆取消判斷
  // if (noData) {
  //   return;
  // }

  let scrollTop = $(window).scrollTop(); // 捲軸頂部位置
  let windowHeight = $(window).height(); // 視窗高度
  let footerOffset = $('#footer').offset().top; // 取得 footer 位置

  if (!isLoading && scrollTop + windowHeight >= footerOffset - 250) {
    isLoading = true;

    if (haveOtherBuilder) {
      setTimeout(() => {
        page++;
        getData();
      }, 100)
    }
  }
});

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