main.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. // $( document ).ready(function() {
  2. // });
  3. // 載入共用 template
  4. $('#navbar').load('../../template/navbar.html');
  5. $('#footer').load('../../template/footer.html');
  6. $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
  7. // 處理 radio 選取狀態
  8. $('.filter-list .form-check').click(function (e) {
  9. e.preventDefault();
  10. $(this).find('.form-check-input').prop('checked', true);
  11. // 取得 radio 按鈕的 label
  12. let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白
  13. // 取上一層 search-tab 按鈕文字
  14. let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
  15. let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');
  16. updateSelectedOptions(buttonId, buttonValue, radioLabel);
  17. });
  18. let filterList = []; // 篩選條件
  19. // 更新篩選狀態
  20. function updateSelectedOptions(id, button, radio) {
  21. page = 1;
  22. console.log('更新篩選狀態', button, radio);
  23. if (filterList.length) {
  24. let exists = false; // 判斷是否已存在
  25. for (let index = 0; index < filterList.length; index++) {
  26. const element = filterList[index];
  27. // 如有重複 button 只改 radio 狀態
  28. if (element.text === button) {
  29. element.value = radio;
  30. exists = true;
  31. // 更新篩選的值
  32. $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}:${radio}`);
  33. }
  34. }
  35. // 如果 filterList 中不存在則新增
  36. if (!exists) {
  37. const newItem = {
  38. id: id,
  39. text: button,
  40. value: radio
  41. };
  42. filterList.push(newItem);
  43. createFilterHtml(newItem);
  44. }
  45. } else {
  46. // 儲存篩選條件
  47. filterList.push({
  48. id: id,
  49. text: button,
  50. value: radio
  51. })
  52. for (let index = 0; index < filterList.length; index++) {
  53. const element = filterList[index];
  54. createFilterHtml(element);
  55. }
  56. }
  57. designerSearch(); // 搜尋
  58. console.log('filterList', filterList);
  59. // 切換按鈕選取狀態
  60. $('.dropdown').each(function () {
  61. let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
  62. $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
  63. });
  64. }
  65. // 新增篩選條件 HTML
  66. function createFilterHtml(item) {
  67. let dom = `
  68. <div class="me-3">
  69. <span class="d-flex budget">
  70. <p class="me-1">${item.text}:${item.value}</p>
  71. <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">
  72. </span>
  73. </div>`;
  74. $('.search-tab-result').append(dom);
  75. $('#removeResultBtn').show();
  76. }
  77. // 清除單一篩選條件
  78. function removeBtn(element, id, val) {
  79. console.log('id, val', id, val);
  80. filterList = filterList.filter(item => item.text !== val);
  81. ; // 移除 div & active
  82. $(element).closest('.me-3').remove();
  83. $(`#${id}`).removeClass('active');
  84. // 移除同一層級 ul 內所有 radio 的選取狀態
  85. $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);
  86. if (filterList.length === 0) {
  87. $('#removeResultBtn').hide();
  88. }
  89. designerSearch();
  90. }
  91. let assignOrder = ""; // 當前排序
  92. // new, hot, recommend 排序 (預設推薦)
  93. $(".search-btn-filter button").click(function () {
  94. // 切換選取狀態
  95. $('.search-btn-filter').find('.active').removeClass('active');
  96. $(this).addClass('active');
  97. assignOrder = $(this).attr('id');
  98. designerSearch("order_by");
  99. });
  100. let page = 1; // 當前頁數
  101. let pageSize = 18; // 每頁數量
  102. let isFirstLoad = true; // 初始載入
  103. // 列表篩選
  104. async function designerSearch(type = "") {
  105. let url;
  106. $('#designerSpinner').show();
  107. $('#designerList').hide();
  108. if (isFirstLoad) {
  109. // 第一次載入使用本地 JSON 文件
  110. url = './json/designers_lists_data.json';
  111. } else {
  112. // 後續使用 API (預設排序為 recommend)
  113. url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}`;
  114. if (type === "order_by") {
  115. url += `&${type}=${assignOrder}`;
  116. }
  117. if (assignOrder === "") {
  118. url += "&order_by=recommend";
  119. }
  120. let input = $(".keywords").val();
  121. if (input !== "") {
  122. url += `&keyword=${input}`;
  123. }
  124. if (filterList.length) {
  125. filterList.map(item => {
  126. if (item.id === 'budget') {
  127. switch (item.value) {
  128. case "100萬以下":
  129. url += `&${item.id}=1`;
  130. break;
  131. case "100~200萬":
  132. url += `&${item.id}=2`;
  133. break;
  134. case "200~300萬":
  135. url += `&${item.id}=3`;
  136. break;
  137. case "300~400萬":
  138. url += `&${item.id}=4`;
  139. break;
  140. case "400~500萬":
  141. url += `&${item.id}=5`;
  142. break;
  143. case "500萬以上":
  144. url += `&${item.id}=6`;
  145. break;
  146. default:
  147. break;
  148. }
  149. } else {
  150. url += `&${item.id}=${item.value}`;
  151. }
  152. });
  153. }
  154. }
  155. try {
  156. const response = await axios.get(url);
  157. console.log('response.data.designers', response.data.designers);
  158. let totalCount = response.data.total_count;
  159. let totalPages = Math.ceil(totalCount / pageSize);
  160. $("#totalCount").html(totalCount);
  161. if (totalPages) {
  162. $('.filter-list .pagination').show();
  163. setPagination(totalPages); // 分頁處理
  164. } else {
  165. $('.filter-list .pagination').hide();
  166. }
  167. let resultHtml = '';
  168. if (response.data.designers.length) {
  169. response.data.designers.forEach((item) => {
  170. resultHtml += `
  171. <div class="col-md-4 mb-4">
  172. <a href="${item.DesignerLink}">
  173. <div class="card lists-card">
  174. <img src="${item.CaseCoverImg}" class="cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
  175. <div class="card-body d-flex align-items-center">
  176. <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
  177. <section>
  178. <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
  179. <h6 class="card-title mb-0 text-dark">
  180. <span class="font-weight-bold">
  181. ${item.DesignerName}
  182. </span>
  183. 設計師
  184. </h6>
  185. </section>
  186. </div>
  187. </div>
  188. </a>
  189. </div>`;
  190. });
  191. } else {
  192. resultHtml += "<p class='text-center mt-5'>找不到符合的資料,請重新搜尋。</p>"
  193. }
  194. $('#designerList').html(resultHtml);
  195. setTimeout(() => {
  196. $('#designerList').show();
  197. $('#designerSpinner').hide();
  198. }, 100)
  199. // 更新初始載入狀態
  200. if (isFirstLoad) {
  201. isFirstLoad = false;
  202. }
  203. } catch (error) {
  204. console.log("error", error);
  205. }
  206. }
  207. designerSearch();
  208. let maxPagesMobile = 5; // 手機板最多顯示 5 頁
  209. let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
  210. // 分頁
  211. function setPagination(pages) {
  212. let screenWidth = $(window).width();
  213. let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
  214. function renderPagination(currentPage) {
  215. let dom = `
  216. <li class="page-item" onclick="handlePagination(this, 'previous')">
  217. <a class="page-link previous hidden" href="#" aria-label="Previous">
  218. <span aria-hidden="true"><</span>
  219. </a>
  220. </li>`;
  221. let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
  222. let endPage = Math.min(startPage + maxPages - 1, pages);
  223. if (endPage - startPage < maxPages) {
  224. startPage = Math.max(endPage - maxPages + 1, 1);
  225. }
  226. for (let index = startPage; index <= endPage; index++) {
  227. dom += `
  228. <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
  229. <a class="page-link" href="#">${index}</a>
  230. </li>`;
  231. }
  232. dom += `
  233. <li class="page-item" onclick="handlePagination(this, 'next')">
  234. <a class="page-link next" href="#" aria-label="Next">
  235. <span aria-hidden="true">></span>
  236. </a>
  237. </li>`;
  238. $('.filter-list .pagination').html(dom);
  239. updateVisibility(currentPage, pages);
  240. }
  241. // 更新上頁 & 下頁的按鈕顯示狀態
  242. function updateVisibility(page, pages) {
  243. if (page === 1) {
  244. $('.page-link.previous').addClass('hidden');
  245. } else {
  246. $('.page-link.previous').removeClass('hidden');
  247. }
  248. if (page === pages) {
  249. $('.page-link.next').addClass('hidden');
  250. } else {
  251. $('.page-link.next').removeClass('hidden');
  252. }
  253. }
  254. window.handlePagination = function (item, type = "") {
  255. if (type === "previous" && page > 1) {
  256. page--;
  257. } else if (type === "next" && page < pages) {
  258. page++;
  259. } else if (!type) {
  260. page = parseInt($(item).find('.page-link').text());
  261. }
  262. renderPagination(page);
  263. designerSearch();
  264. }
  265. renderPagination(page);
  266. $(window).on('resize', function () {
  267. let newScreenWidth = $(window).width();
  268. if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
  269. (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
  270. maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
  271. renderPagination(page);
  272. }
  273. });
  274. }
  275. // 頁碼處理
  276. function handlePagination(item, type = "") {
  277. if (type === "previous") {
  278. // 往前一頁
  279. if (page > 1) {
  280. page--;
  281. }
  282. console.log(page);
  283. } else if (type === "next") {
  284. // 往後一頁
  285. page++;
  286. console.log(page);
  287. } else {
  288. // 直接點擊頁碼
  289. page = parseInt($(item).find('.page-link')[0].innerText);
  290. }
  291. // 切換選取狀態
  292. $('.filter-list .page-item').removeClass('active');
  293. $('.filter-list .page-item').eq(page).addClass('active');
  294. // 設定上一頁按鈕的顯示狀態
  295. if (page === 1) {
  296. $('.page-link.previous').addClass('hidden');
  297. } else {
  298. $('.page-link.previous').removeClass('hidden');
  299. }
  300. designerSearch(); // 搜尋
  301. }
  302. // 熱搜關鍵字搜尋
  303. $(".search-bar-keyword a").click(function () {
  304. let keyword = $(this).text();
  305. $('.keywords').val(keyword);
  306. designerSearch();
  307. });
  308. // 全部清除
  309. $("#removeResultBtn").click(function () {
  310. console.log('全部清除');
  311. filterList.length = 0; // 清空篩選陣列
  312. $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
  313. $('.search-tab-result').empty(); // 清空篩選條件 dom
  314. // 取消選取狀態
  315. $('.filter-list input[type="radio"]').prop('checked', false);
  316. $('.search-tab').removeClass('active');
  317. designerSearch();
  318. });