|
|
@@ -9,141 +9,153 @@ 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 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=1`;
|
|
|
- console.log(id); // 顯示 "2058"
|
|
|
+ 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);
|
|
|
@@ -151,6 +163,14 @@ async function getData() {
|
|
|
$("#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 {
|
|
|
@@ -204,6 +224,10 @@ async function getData() {
|
|
|
|
|
|
let sliderDom = "";
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
+ isLoading = false;
|
|
|
+ }, 2000)
|
|
|
+
|
|
|
// 建案影片
|
|
|
if (data.yt.length) {
|
|
|
// let dom = "";
|
|
|
@@ -276,18 +300,14 @@ async function getData() {
|
|
|
// '<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", {
|
|
|
+ var swiper = new Swiper(".swiper-list", {
|
|
|
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> 標籤
|
|
|
@@ -372,33 +392,41 @@ async function getData() {
|
|
|
});
|
|
|
|
|
|
// 推薦建案
|
|
|
- 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;
|
|
|
- });
|
|
|
+ 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 += "</div>";
|
|
|
- $(".other-list .container").html(otherBuilder);
|
|
|
+ otherBuilder += dom;
|
|
|
+ });
|
|
|
|
|
|
- // 確保圖片都載入完成，避免造成剛進入頁面時圖片被覆蓋
|
|
|
- $('.other-list .row').imagesLoaded().progress(function () {
|
|
|
- $('.other-list .row').masonry(); // 渲染整體畫面
|
|
|
- });
|
|
|
+ // 新增內容到現有 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);
|
|
|
@@ -407,6 +435,31 @@ async function getData() {
|
|
|
|
|
|
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%");
|
