Explorar o código

新增建案列表頁

SyuanYu hai 8 meses
pai
achega
c9ebfca6a1

+ 14 - 0
builder/detail/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>

+ 548 - 0
builder/lists/index.html

@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <!-- Google Tag Manager -->
+  <script>(function (w, d, s, l, i) {
+      w[l] = w[l] || []; w[l].push({
+        'gtm.start':
+          new Date().getTime(), event: 'gtm.js'
+      }); var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
+          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-W3RJHTZ');</script>
+  <!-- End Google Tag Manager -->
+
+  <script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-W3RJHTZ"></script>
+  <!-- <script src="https://connect.facebook.net/signals/config/585285442299590?v=2.9.100&amp;r=stable" async=""></script> -->
+
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1" />
+  <meta http-equiv="Cache-Control" content="no-cache" />
+  <meta name="copyright" content="2021 © 幸福空間 │ All Rights Reserved." />
+  <meta name="creation-date" content="2021-08-05 12:00:04 GTM+8" />
+  <meta name="description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問
+    題!幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我
+    們一定能幫助你!" />
+  <meta name="distribution" content="Taiwan" />
+  <meta name="keywords" content="" />
+  <meta name="revisit-after" content="1 days" />
+  <meta name="robots" content="all" />
+  <meta name="format-detection" content="telephone=no" />
+
+  <meta property="og:description" content="讓幸福室內設計,走進您的生活,解決您的裝潢問題!
+    幸福空間是台灣最大的室內設計、設計師與設計個案影音平台之一,找尋室內設計點子與案例我們一定能幫助
+    你!" />
+  <meta property="og:site_name" content="幸福空間" />
+  <meta property="og:title" content="幸福空間 - 台灣最大的室內設計、設計師與設計個案影音平台" />
+  <meta property="og:type" content="website" />
+  <meta property="og:locale" content="zh_TW" />
+
+  <title>幸福空間 - 室內設計、裝潢、居家生活、影音平台</title>
+
+  <link rel="icon" href="../../img/favicon.ico" />
+
+  <!-- Fontawesome -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
+  <!-- Bootstrap -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
+  <!-- axios -->
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <!-- Google Font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600&display=swap" rel="stylesheet" />
+  <!-- Slick -->
+  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+  <!-- CSS -->
+  <link rel="stylesheet" href="../../css/reset.css" />
+  <link rel="stylesheet" href="../../css/lists.css" />
+  <link rel="stylesheet" href="../../css/all.css" />
+  <!-- 結構化資料 -->
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "LocalBusiness",
+        "@id": "https://hhh.com.tw/",
+        "image": ["https://hhh.com.tw/_nuxt/img/def1b0a.svg"],
+        "name": "幸福空間股份有限公司",
+        "address": "110台北市信義區菸廠路88號五樓之6",
+        "url": "https://hhh.com.tw/",
+        "telephone": "+886-2-6617-0123"
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "url": "https://hhh.com.tw/",
+        "logo": "https://hhh.com.tw/_nuxt/img/def1b0a.svg",
+        "name": "幸福空間",
+        "sameAs": [
+          "https://www.facebook.com/hhhfb/",
+          "https://page.line.me/ovs4341s",
+          "https://www.youtube.com/user/gorgeousspace",
+          "https://www.instagram.com/gorgeous_space/"
+        ],
+        "contactPoint": [
+          {
+            "@type": "ContactPoint",
+            "areaServed": "TW",
+            "telephone": "+886-2-6617-0123",
+            "contactType": "customer service",
+            "availableLanguage": "Chinese"
+          }
+        ]
+      }
+    </script>
+
+  <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "幸福空間-室內設計、裝潢、居家生活、影音平台",
+        "author": "幸福空間",
+        "url": "https://hhh.com.tw/",
+        "potentialAction": {
+          "@type": "SearchAction",
+          "target": "https://hhh.com.tw/search/lists/case/{search_term_string}-keyword/",
+          "query-input": "required name=search_term_string"
+        }
+      }
+    </script>
+
+  <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+        "@type": "BreadcrumbList",
+          "itemListElement": [
+            {
+              "@type": "ListItem",
+              "position": 1,
+              "name": "幸福空間",
+              "item": "https://hhh.com.tw/"
+            },
+            {
+              "@type": "ListItem",
+              "position": 2,
+              "name": "設計師列表頁",
+              "item": "https://hhh.com.tw/designers/lists/"
+            }
+          ]
+    }
+	</script>
+</head>
+
+<body>
+  <!-- 動態載入 -->
+  <div id="topCarousel"></div>
+  <div id="navbar"></div>
+
+  <!-- searchModal -->
+  <div class="modal fade search-modal" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+      <div class="modal-content">
+        <div class="modal-body">
+          <div class="input-group">
+            <input type="text" class="form-control keyword" placeholder="請輸入關鍵字" aria-label="Please enter keywords"
+              aria-describedby="search-input" />
+            <span class="input-group-text" id="search-input">全站搜尋</span>
+          </div>
+        </div>
+        <section class="keyword-list">
+          <span>熱搜關鍵字:</span>
+          <ul>
+            <li>客變</li>
+            <li>小坪數</li>
+            <li>老屋翻新</li>
+            <li>收納</li>
+            <li>軟裝佈置</li>
+            <li>新手裝修</li>
+            <li>風水</li>
+            <li>北歐風</li>
+          </ul>
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <div class="container d-flex flex-column align-items-center justify-content-center list-content">
+    <h2 class="list-headline">新建案鑑賞選購&nbsp;&nbsp;建案推薦</h2>
+
+    <!-- 搜尋 -->
+    <div class="row w-100 justify-content-center mt-5">
+      <div class="col-md-10">
+        <div class="card search-card">
+          <div class="card-body p-4">
+            <div class="input-group input-group-lg mb-2">
+              <input type="text" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
+                class="form-control border-primary keywords" autocomplete="off">
+              <div class="input-group-append">
+                <button onclick="designerSearch()" type="button" data-ga="View_Search_Results"
+                  class="input-group-text">搜尋</button>
+              </div>
+            </div>
+
+            <div class="search-bar-keyword d-flex mt-3 pl-4">
+              <p class="ms-3 text-muted">熱搜關鍵字</p>
+              <ul class="d-flex flex-wrap ps-3">
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">客變</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">小坪數</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">老屋翻新</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">收納</a>
+                </li>
+                <li>
+                  <a href="javascript:void(0)" data-ga="Click_Promo_Keyword">北歐風</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 篩選 -->
+    <div class="row w-100 mt-5 filter-list">
+      <div class="col-12">
+        <p class="mb-3 text-muted">
+          總共 <span id="totalCount" class="text-primary font-weight-bold fs-4">254</span> 筆全國室內設計師符合條件
+        </p>
+
+        <div class="card text-dark bg-light border-0 mb-3 w-100 shadow-sm">
+          <div class="card-body d-flex flex-wrap">
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="city" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                所在縣市
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="city">
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taipei_city">
+                    <label class="form-check-label" for="taipei_city">
+                      台北市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="new_taipei_city">
+                    <label class="form-check-label" for="new_taipei_city">
+                      新北市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="keelung_city">
+                    <label class="form-check-label" for="keelung_city">
+                      基隆市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taoyuan_city">
+                    <label class="form-check-label" for="taoyuan_city">
+                      桃園市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_city">
+                    <label class="form-check-label" for="hsinchu_city">
+                      新竹市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hsinchu_county">
+                    <label class="form-check-label" for="hsinchu_county">
+                      新竹縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="miaoli_county">
+                    <label class="form-check-label" for="miaoli_county">
+                      苗栗縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taichung_city">
+                    <label class="form-check-label" for="taichung_city">
+                      台中市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="changhua_county">
+                    <label class="form-check-label" for="changhua_county">
+                      彰化縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="nantou_county">
+                    <label class="form-check-label" for="nantou_county">
+                      南投縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="yunlin_county">
+                    <label class="form-check-label" for="yunlin_county">
+                      雲林縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_city">
+                    <label class="form-check-label" for="chiayi_city">
+                      嘉義市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="chiayi_county">
+                    <label class="form-check-label" for="chiayi_county">
+                      嘉義縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="tainan_city">
+                    <label class="form-check-label" for="tainan_city">
+                      台南市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="kaohsiung_city">
+                    <label class="form-check-label" for="kaohsiung_city">
+                      高雄市
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="pingtung_county">
+                    <label class="form-check-label" for="pingtung_county">
+                      屏東縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="yilan_county">
+                    <label class="form-check-label" for="yilan_county">
+                      宜蘭縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="hualien_county">
+                    <label class="form-check-label" for="hualien_county">
+                      花蓮縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="taitung_county">
+                    <label class="form-check-label" for="taitung_county">
+                      台東縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="penghu_county">
+                    <label class="form-check-label" for="penghu_county">
+                      澎湖縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="kinmen_county">
+                    <label class="form-check-label" for="kinmen_county">
+                      金門縣
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="city" id="lienchiang_county">
+                    <label class="form-check-label" for="lienchiang_county">
+                      連江縣
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+            <div class="dropdown">
+              <button class="btn dropdown-toggle fw-bold search-tab" type="button" id="builder_type"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                類型
+              </button>
+
+              <ul class="dropdown-menu" aria-labelledby="builder_type">
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typemrt">
+                    <label class="form-check-label" for="search_typemrt">
+                      捷運宅
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typefunction">
+                    <label class="form-check-label" for="search_typefunction">
+                      機能宅
+                    </label>
+                  </div>
+                </li>
+                <li>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio" name="d_type" id="search_typeking">
+                    <label class="form-check-label" for="search_typeking">
+                      帝王宅
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+
+          </div>
+        </div>
+
+
+        <div class="row">
+          <div class="col-md-9">
+            <div class="d-flex flex-wrap align-items-center">
+              <div class="text-primary d-flex flex-wrap align-items-center search-tab-result">
+                <!-- <span class="me-3">
+                <span class="budget">
+                  接案地區:不拘
+                  <img src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
+                </span>
+              </span> -->
+
+                <!-- <button type="button" class="btn btn-light btn-sm text-muted px-3">全部清除</button> -->
+              </div>
+
+              <button type="button" id="removeResultBtn" class="btn btn-light btn-sm text-muted px-3">全部清除</button>
+            </div>
+          </div>
+
+          <!-- <div class="col-md-3">
+            <div class="d-flex justify-content-end search-btn-filter">
+              <button id="hot">
+                人氣
+              </button>
+
+              <span class="mx-1">|</span>
+
+              <button id="new">
+                最新
+              </button>
+
+              <span class="mx-1">|</span>
+
+              <button id="recommend" class="active">
+                推薦
+              </button>
+            </div>
+          </div> -->
+        </div>
+
+        <!-- 讀取圖示 -->
+        <div class="text-center my-5" id="builderSpinner">
+          <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
+
+        <!-- 設計師列表 -->
+        <div class="row mt-5" id="builderList">
+          <!-- 動態載入 -->
+        </div>
+
+        <!-- 分頁 -->
+        <div class="d-flex justify-content-center my-5">
+          <nav aria-label="Page navigation example">
+            <ul class="pagination border list-pagination">
+              <li class="page-item">
+                <a class="page-link" href="#" aria-label="Previous">
+                  <span aria-hidden="true"><</span>
+                </a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#">1</a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#">2</a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#">3</a>
+              </li>
+              <li class="page-item">
+                <a class="page-link" href="#" aria-label="Next">
+                  <span aria-hidden="true">></span>
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 動態載入 -->
+  <div id="btn-box"></div>
+  <div id="footer" class="d-none d-lg-block"></div>
+
+  <!-- jQuery -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <!-- Slick -->
+  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <!-- Bootstrap -->
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.1/dist/umd/popper.min.js"
+    integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
+    integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+    crossorigin="anonymous"></script>
+  <script src="./js/main.js"></script>
+</body>
+
+</html>

+ 358 - 0
builder/lists/js/main.js

@@ -0,0 +1,358 @@
+// 載入共用 template
+$('#navbar').load('../../template/navbar.html');
+$('#footer').load('../../template/footer.html');
+$('#btn-box').load('../../template/button.html');
+$('#topCarousel').load('../../template/top_carousel.html');
+
+$('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+
+// 處理 radio 選取狀態
+$('.filter-list .form-check').click(function (e) {
+  e.preventDefault();
+  $(this).find('.form-check-input').prop('checked', true);
+
+  // 取得 radio 按鈕的 label
+  let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
+
+  // 取上一層 search-tab 按鈕文字
+  let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
+  let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
+
+  updateSelectedOptions(buttonId, buttonValue, radioLabel);
+});
+
+let filterList = []; // 篩選條件
+
+// 更新篩選狀態
+function updateSelectedOptions(id, button, radio) {
+  page = 1;
+  console.log('更新篩選狀態', button, radio);
+
+  if (filterList.length) {
+    let exists = false; // 判斷是否已存在
+
+    for (let index = 0; index < filterList.length; index++) {
+      const element = filterList[index];
+
+      // 如有重複 button 只改 radio 狀態
+      if (element.text === button) {
+        element.value = radio;
+        exists = true;
+        // 更新篩選的值
+        $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}:${radio}`);
+      }
+    }
+
+    // 如果 filterList 中不存在則新增
+    if (!exists) {
+      const newItem = {
+        id: id,
+        text: button,
+        value: radio
+      };
+
+      filterList.push(newItem);
+      createFilterHtml(newItem);
+    }
+
+
+  } else {
+    // 儲存篩選條件
+    filterList.push({
+      id: id,
+      text: button,
+      value: radio
+    })
+
+    for (let index = 0; index < filterList.length; index++) {
+      const element = filterList[index];
+      createFilterHtml(element);
+    }
+  }
+
+  builderSearch(); // 搜尋
+
+  console.log('filterList', filterList);
+
+  // 切換按鈕選取狀態
+  $('.dropdown').each(function () {
+    let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
+    $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
+  });
+}
+
+// 新增篩選條件 HTML
+function createFilterHtml(item) {
+  let dom = `
+    <div class="me-3">
+      <span class="d-flex budget">
+        <p class="me-1">${item.text}:${item.value}</p>
+        <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
+      </span>
+    </div>`;
+
+  $('.search-tab-result').append(dom);
+  $('#removeResultBtn').show();
+}
+
+// 清除單一篩選條件
+function removeBtn(element, id, val) {
+  console.log('id, val', id, val);
+  filterList = filterList.filter(item => item.text !== val);
+
+  ; // 移除 div & active
+  $(element).closest('.me-3').remove();
+  $(`#${id}`).removeClass('active');
+  // 移除同一層級 ul 內所有 radio 的選取狀態
+  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
+
+  if (filterList.length === 0) {
+    $('#removeResultBtn').hide();
+  }
+
+  builderSearch();
+}
+
+let assignOrder = ""; // 當前排序
+
+// new, hot, recommend 排序 (預設推薦)
+// $(".search-btn-filter button").click(function () {
+//   // 切換選取狀態
+//   $('.search-btn-filter').find('.active').removeClass('active');
+//   $(this).addClass('active');
+//   assignOrder = $(this).attr('id');
+//   builderSearch("order_by");
+// });
+
+let page = 1; // 當前頁數
+let pageSize = 18; // 每頁數量
+let isFirstLoad = true; // 初始載入
+
+// 列表篩選
+async function builderSearch() {
+  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}`;
+
+    // if (type === "order_by") {
+    //   url += `&${type}=${assignOrder}`;
+    // }
+
+    // if (assignOrder === "") {
+    //   url += "&order_by=recommend";
+    // }
+
+    let input = $(".keywords").val();
+
+    if (input !== "") {
+      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);
+  }
+}
+
+builderSearch();
+
+let maxPagesMobile = 5; // 手機板最多顯示 5 頁
+let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
+
+// 分頁
+function setPagination(pages) {
+  let screenWidth = $(window).width();
+  let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
+
+  function renderPagination(currentPage) {
+    let dom = `
+      <li class="page-item" onclick="handlePagination(this, 'previous')">
+        <a class="page-link previous hidden" href="#" aria-label="Previous">
+          <span aria-hidden="true"><</span>
+        </a>
+      </li>`;
+
+    let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
+    let endPage = Math.min(startPage + maxPages - 1, pages);
+
+    if (endPage - startPage < maxPages) {
+      startPage = Math.max(endPage - maxPages + 1, 1);
+    }
+
+    for (let index = startPage; index <= endPage; index++) {
+      dom += `
+        <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
+          <a class="page-link" href="#">${index}</a>
+        </li>`;
+    }
+
+    dom += `
+      <li class="page-item" onclick="handlePagination(this, 'next')">
+        <a class="page-link next" href="#" aria-label="Next">
+          <span aria-hidden="true">></span>
+        </a>
+      </li>`;
+
+    $('.filter-list .pagination').html(dom);
+    updateVisibility(currentPage, pages);
+  }
+
+  // 更新上頁 & 下頁的按鈕顯示狀態
+  function updateVisibility(page, pages) {
+    if (page === 1) {
+      $('.page-link.previous').addClass('hidden');
+    } else {
+      $('.page-link.previous').removeClass('hidden');
+    }
+
+    if (page === pages) {
+      $('.page-link.next').addClass('hidden');
+    } else {
+      $('.page-link.next').removeClass('hidden');
+    }
+  }
+
+  window.handlePagination = function (item, type = "") {
+    if (type === "previous" && page > 1) {
+      page--;
+    } else if (type === "next" && page < pages) {
+      page++;
+    } else if (!type) {
+      page = parseInt($(item).find('.page-link').text());
+    }
+    renderPagination(page);
+    builderSearch();
+  }
+
+  renderPagination(page);
+
+  $(window).on('resize', function () {
+    let newScreenWidth = $(window).width();
+    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
+      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
+      maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
+      renderPagination(page);
+    }
+  });
+}
+
+// 頁碼處理
+function handlePagination(item, type = "") {
+  if (type === "previous") {
+    // 往前一頁
+    if (page > 1) {
+      page--;
+    }
+    console.log(page);
+  } else if (type === "next") {
+    // 往後一頁
+    page++;
+    console.log(page);
+  } else {
+    // 直接點擊頁碼
+    page = parseInt($(item).find('.page-link')[0].innerText);
+  }
+
+  // 切換選取狀態
+  $('.filter-list .page-item').removeClass('active');
+  $('.filter-list .page-item').eq(page).addClass('active');
+
+  // 設定上一頁按鈕的顯示狀態
+  if (page === 1) {
+    $('.page-link.previous').addClass('hidden');
+  } else {
+    $('.page-link.previous').removeClass('hidden');
+  }
+
+  builderSearch(); // 搜尋
+}
+
+// 熱搜關鍵字搜尋
+$(".search-bar-keyword a").click(function () {
+  let keyword = $(this).text();
+  $('.keywords').val(keyword);
+  builderSearch();
+});
+
+// 全部清除
+$("#removeResultBtn").click(function () {
+  console.log('全部清除');
+  filterList.length = 0; // 清空篩選陣列
+  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
+  $('.search-tab-result').empty(); // 清空篩選條件 dom
+  // 取消選取狀態
+  $('.filter-list input[type="radio"]').prop('checked', false);
+  $('.search-tab').removeClass('active');
+  builderSearch();
+});

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 0 - 0
builder/lists/json/designers_lists_data.json


+ 2 - 2
css/all.css

@@ -717,8 +717,8 @@ body {
   white-space: nowrap;
 }
 #btn-box .calculator-btn.show {
-  width: 120px;
-  margin-left: -75px;
+  width: 130px;
+  margin-left: -85px;
 }
 #btn-box .shop-btn.show {
   width: 95px;

+ 2 - 2
css/all.scss

@@ -861,8 +861,8 @@ body {
 
   .calculator-btn {
     &.show {
-      width: 120px;
-      margin-left: -75px;
+      width: 130px;
+      margin-left: -85px;
     }
   }
 

+ 20 - 5
css/lists.css

@@ -125,6 +125,7 @@
   }
 }
 .filter-list .lists-card .cover-img {
+  width: 100%;
   height: 235px;
   -o-object-fit: cover;
      object-fit: cover;
@@ -169,13 +170,11 @@
     height: 48.5vw;
   }
 }
-.filter-list .lists-card .card-body section {
-  width: 70%;
-}
 .filter-list .lists-card .card-body h5,
 .filter-list .lists-card .card-body h6,
+.filter-list .lists-card .card-body p,
 .filter-list .lists-card .card-body .video-title {
-  line-height: 1.25;
+  line-height: 1.5;
   font-size: 1rem;
   -webkit-box-orient: vertical;
   overflow: hidden;
@@ -183,12 +182,14 @@
   display: -webkit-box;
 }
 .filter-list .lists-card .card-body h5 {
-  height: 1.09375rem;
   -webkit-line-clamp: 1;
 }
 .filter-list .lists-card .card-body h6 {
   -webkit-line-clamp: 2;
 }
+.filter-list .lists-card .card-body p {
+  font-weight: 400;
+}
 .filter-list .lists-card .card-body .video-title {
   font-weight: bold;
   color: #43484C;
@@ -202,4 +203,18 @@
   font-size: 0.75rem;
   color: #EE7800;
   border: 1px solid #EE7800;
+}
+
+#builderList .card h5 {
+  font-size: 1.125rem;
+}
+#builderList .card h6 {
+  -webkit-line-clamp: 1;
+}
+#builderList .card .play-img {
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }/*# sourceMappingURL=lists.css.map */

+ 1 - 1
css/lists.css.map

@@ -1 +1 @@
-{"version":3,"sources":["lists.css","lists.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,YAAA;AAEA;EACE,kBAAA;EACA,gBAAA;EACA,qBAAA;ADCF;;ACEA;EACE,eAAA;EACA,gBAAA;ADCF;;ACGE;EACE,cAAA;ADAJ;ACGE;EACE,eAAA;ADDJ;ACIM;EADF;IAEI,eAAA;IACA,eAAA;EDDN;AACF;ACII;EACE,kBAAA;ADFN;ACIM;EAHF;IAII,sBAAA;EDDN;AACF;ACKE;EACE,mBAAA;EACA,yBAAA;ADHJ;ACME;EACE,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kCAAA;ADJJ;;ACSE;EACE,aAAA;EACA,mBAAA;ADNJ;ACSE;EACE,iBAAA;ADPJ;ACUE;EACE,YAAA;EACA,qBAAA;EACA,uBAAA;ADRJ;ACUI;EACE,cAAA;EACA,qBAAA;ADRN;ACWI;EACE,cAAA;EACA,qBAAA;ADTN;ACaE;EACE,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,gBAAA;ADXJ;ACaI;EACE,wBAAA;EACA,6CAAA;ADXN;ACaM;;EAEE,eAAA;ADXR;ACiBI;EACE,YAAA;EACA,uBAAA;ADfN;ACiBM;EACE,cAAA;ADfR;ACkBM;EACE,cAAA;ADhBR;ACqBE;EACE,eAAA;ADnBJ;ACqBI;EACE,eAAA;EACA,oBAAA;ADnBN;ACqBM;EACE,YAAA;ADnBR;ACwBE;EACE,YAAA;ADtBJ;ACwBI;EACE,WAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,iDAAA;ADtBN;ACwBM;EATF;IAUI,YAAA;IACA,eAAA;EDrBN;AACF;ACuBM;EAdF;IAeI,YAAA;IACA,eAAA;EDpBN;AACF;ACuBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADrBN;ACuBM;EAJF;IAKI,aAAA;EDpBN;AACF;ACsBM;EARF;IASI,aAAA;EDnBN;AACF;ACsBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADpBN;ACsBM;EAJF;IAKI,aAAA;EDnBN;AACF;ACqBM;EARF;IASI,aAAA;EDlBN;AACF;ACoBM;EAZF;IAaI,aAAA;EDjBN;AACF;ACmBM;EAhBF;IAiBI,aAAA;EDhBN;AACF;ACkBM;EApBF;IAqBI,cAAA;EDfN;AACF;ACmBM;EACE,UAAA;ADjBR;ACoBM;;;EAGE,iBAAA;EACA,eAAA;EAEA,4BAAA;EACA,gBAAA;EACA,uBAAA;EACA,oBAAA;ADnBR;ACsBM;EACE,kBAAA;EACA,qBAAA;ADpBR;ACuBM;EACE,qBAAA;ADrBR;ACwBM;EACE,iBAAA;EACA,cAAA;EACA,qBAAA;ADtBR;AC0BQ;EACE,qBAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;EACA,yBAAA;ADxBV","file":"lists.css"}
+{"version":3,"sources":["lists.css","lists.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,YAAA;AAEA;EACE,kBAAA;EACA,gBAAA;EACA,qBAAA;ADCF;;ACEA;EACE,eAAA;EACA,gBAAA;ADCF;;ACGE;EACE,cAAA;ADAJ;ACGE;EACE,eAAA;ADDJ;ACIM;EADF;IAEI,eAAA;IACA,eAAA;EDDN;AACF;ACII;EACE,kBAAA;ADFN;ACIM;EAHF;IAII,sBAAA;EDDN;AACF;ACKE;EACE,mBAAA;EACA,yBAAA;ADHJ;ACME;EACE,kBAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,yBAAA;EACA,kCAAA;ADJJ;;ACSE;EACE,aAAA;EACA,mBAAA;ADNJ;ACSE;EACE,iBAAA;ADPJ;ACUE;EACE,YAAA;EACA,qBAAA;EACA,uBAAA;ADRJ;ACUI;EACE,cAAA;EACA,qBAAA;ADRN;ACWI;EACE,cAAA;EACA,qBAAA;ADTN;ACaE;EACE,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,gBAAA;ADXJ;ACaI;EACE,wBAAA;EACA,6CAAA;ADXN;ACaM;;EAEE,eAAA;ADXR;ACiBI;EACE,YAAA;EACA,uBAAA;ADfN;ACiBM;EACE,cAAA;ADfR;ACkBM;EACE,cAAA;ADhBR;ACqBE;EACE,eAAA;ADnBJ;ACqBI;EACE,eAAA;EACA,oBAAA;ADnBN;ACqBM;EACE,YAAA;ADnBR;ACwBE;EACE,YAAA;ADtBJ;ACwBI;EACE,WAAA;EACA,YAAA;EACA,eAAA;EACA,sBAAA;EACA,wBAAA;EACA,kBAAA;EACA,iDAAA;ADtBN;ACwBM;EATF;IAUI,YAAA;IACA,eAAA;EDrBN;AACF;ACuBM;EAdF;IAeI,YAAA;IACA,eAAA;EDpBN;AACF;ACuBI;EACE,WAAA;EACA,aAAA;EACA,oBAAA;KAAA,iBAAA;ADrBN;ACuBM;EALF;IAMI,aAAA;EDpBN;AACF;ACsBM;EATF;IAUI,aAAA;EDnBN;AACF;ACsBI;EACE,aAAA;EACA,oBAAA;KAAA,iBAAA;ADpBN;ACsBM;EAJF;IAKI,aAAA;EDnBN;AACF;ACqBM;EARF;IASI,aAAA;EDlBN;AACF;ACoBM;EAZF;IAaI,aAAA;EDjBN;AACF;ACmBM;EAhBF;IAiBI,aAAA;EDhBN;AACF;ACkBM;EApBF;IAqBI,cAAA;EDfN;AACF;ACoBM;;;;EAIE,gBAAA;EACA,eAAA;EAEA,4BAAA;EACA,gBAAA;EACA,uBAAA;EACA,oBAAA;ADnBR;ACsBM;EACE,qBAAA;ADpBR;ACuBM;EACE,qBAAA;ADrBR;ACwBM;EACE,gBAAA;ADtBR;ACyBM;EACE,iBAAA;EACA,cAAA;EACA,qBAAA;ADvBR;AC2BQ;EACE,qBAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,cAAA;EACA,yBAAA;ADzBV;;ACkCI;EACE,mBAAA;AD/BN;ACkCI;EACE,qBAAA;ADhCN;ACmCI;EACE,WAAA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;ADjCN","file":"lists.css"}

+ 27 - 5
css/lists.scss

@@ -147,6 +147,7 @@
     }
 
     .cover-img {
+      width: 100%;
       height: 235px;
       object-fit: cover;
 
@@ -185,14 +186,12 @@
     }
 
     .card-body {
-      section {
-        width: 70%;
-      }
 
       h5,
       h6,
+      p,
       .video-title {
-        line-height: 1.25;
+        line-height: 1.5;
         font-size: 1rem;
         // 換行
         -webkit-box-orient: vertical;
@@ -202,7 +201,6 @@
       }
 
       h5 {
-        height: 1.09375rem;
         -webkit-line-clamp: 1;
       }
 
@@ -210,6 +208,10 @@
         -webkit-line-clamp: 2;
       }
 
+      p {
+        font-weight: 400;
+      }
+
       .video-title {
         font-weight: bold;
         color: #43484C;
@@ -229,4 +231,24 @@
       }
     }
   }
+}
+
+#builderList {
+  .card {
+    h5 {
+      font-size: 1.125rem;
+    }
+
+    h6 {
+      -webkit-line-clamp: 1;
+    }
+
+    .play-img {
+      width: 50px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
 }

+ 2 - 2
designers/lists/js/main.js

@@ -218,8 +218,8 @@ async function designerSearch(type = "") {
                 <div class="card-body d-flex align-items-center">
                   <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
                   <section>
-                    <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
-                    <h6 class="card-title mb-0 text-dark">
+                    <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
+                    <h6 class="mb-0 text-dark">
                       <span class="font-weight-bold">
                         ${item.DesignerName}
                       </span>

+ 1 - 0
img/icon/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112" height="112" viewBox="0 0 112 112"><defs><style>.a{fill:#fff;opacity:0.849;}.b{filter:url(#a);}</style><filter id="a" x="0" y="0" width="112" height="112" filterUnits="userSpaceOnUse"><feOffset dy="3" input="SourceAlpha"/><feGaussianBlur stdDeviation="3" result="b"/><feFlood flood-opacity="0.161"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter></defs><g class="b" transform="matrix(1, 0, 0, 1, 0, 0)"><path class="a" d="M47,94a47.012,47.012,0,0,1-18.3-90.307A47.012,47.012,0,0,1,65.295,90.307,46.7,46.7,0,0,1,47,94ZM35.89,30.764V64.945L64.945,47.854Z" transform="translate(9 6)"/></g></svg>

+ 31 - 22
template/button.html

@@ -1,11 +1,11 @@
 <!-- 右下角按鈕區塊 -->
 
-  <button data-gt-target="#top" data-gt-duration="100" data-gt-offset="0" class="gotop-btn" title="GoTop">
-    <!-- <span class="top_img"></span> -->
-    <img src="https://hhh.com.tw/hhh_index/images/icon/feather-chevron-right.svg" alt="">
-  </button>
+<button data-gt-target="#top" data-gt-duration="100" data-gt-offset="0" class="gotop-btn" title="GoTop">
+  <!-- <span class="top_img"></span> -->
+  <img src="https://hhh.com.tw/hhh_index/images/icon/feather-chevron-right.svg" alt="">
+</button>
 
-  <!-- <button title="為我推薦設計師" class="d-none d-md-inline" data-ga="Go_To_Request">
+<!-- <button title="為我推薦設計師" class="d-none d-md-inline" data-ga="Go_To_Request">
     <a href="https://hhh.com.tw/about/request/" target="_blank">
       <img src="./hhh_index/images/icon/feather-file-text.svg" alt="">
     </a>
@@ -29,23 +29,23 @@
     </a>
   </button> -->
 
-  <button title="裝修預算諮詢" class="d-none d-md-inline calculator-btn" data-ga="Go_To_Calculator">
-    <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
-      <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-calculator.svg" alt=""
-        style="width: 22px; margin-left: 3px;">
-      <p>裝修計算機</p>
-    </a>
-  </button>
-
-  <button title="+好物商城" class="d-none d-md-inline shop-btn" data-ga="Go_To_Shop">
-    <a href="https://shop.hhh.com.tw/" target="_blank">
-      <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="">
-      <p>+好物</p>
-    </a>
-  </button>
-
-  <!-- 暫時隱藏 -->
-  <!-- <button title="線上諮詢">
+<button title="裝修預算諮詢" class="d-none d-md-inline calculator-btn" data-ga="Go_To_Calculator">
+  <a href="https://hhh.com.tw/calculator_request/index.html" target="_blank">
+    <img src="https://hhh.com.tw/hhh_index/images/icon/ionic-ios-calculator.svg" alt=""
+      style="width: 22px; margin-left: 3px;">
+    <p>裝修計算機</p>
+  </a>
+</button>
+
+<button title="+好物商城" class="d-none d-md-inline shop-btn" data-ga="Go_To_Shop">
+  <a href="https://shop.hhh.com.tw/" target="_blank">
+    <img src="https://hhh.com.tw/hhh_index/images/icon/feather-shopping-cart.svg" alt="">
+    <p>+好物</p>
+  </a>
+</button>
+
+<!-- 暫時隱藏 -->
+<!-- <button title="線上諮詢">
     <a href="https://hhh.com.tw/about/contact/" target="_blank">
       <img src="./images/icon/simple-hipchat.svg" alt="">
     </a>
@@ -111,6 +111,15 @@
     $(".shop-btn").removeClass("show");
   });
 
+  // 判斷按鈕顯示 or 隱藏
+  $(window).scroll(function () {
+    if ($(this).scrollTop()) {
+      $('#btn-box').fadeIn();
+    } else {
+      $('#btn-box').fadeOut();
+    }
+  });
+
   // 滑到 footer 區塊隱藏下方選單
   // let footerHeight = $("#footer").height();
   // let bodyHeight = $("body").height()

+ 1 - 1
videos/lists/js/main.js

@@ -199,7 +199,7 @@ async function videoSearch(type = "") {
                   <div class="card-body d-flex flex-column align-items-center">
                     <section class="d-flex align-items-center w-100">
                       <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
-                      <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
+                      <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
                     </section>
                     <h3 class="my-3 video-title">${item.VideoTitle}</h3>
                     <div class="tags-container mt-2 me-auto">${tagsHtml}</div>

Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio