main.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  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. }
  90. let assignOrder = ""; // 當前排序
  91. // new, hot, recommend 排序 (預設推薦)
  92. $(".search-btn-filter button").click(function () {
  93. // 切換選取狀態
  94. $('.search-btn-filter').find('.active').removeClass('active');
  95. $(this).addClass('active');
  96. assignOrder = $(this).attr('id');
  97. designerSearch("order_by");
  98. });
  99. let page = 1; // 當前頁數
  100. let pageSize = 18; // 每頁數量
  101. let isFirstLoad = true; // 初始載入
  102. // 列表篩選
  103. async function designerSearch(type = "") {
  104. let url;
  105. $('#designerSpinner').show();
  106. $('#designerList').hide();
  107. if (isFirstLoad) {
  108. // 第一次載入使用本地 JSON 文件
  109. url = './json/designers_lists_data.json';
  110. } else {
  111. // 後續使用 API (預設排序為 recommend)
  112. url = `https://m3.hhh.com.tw:18673/designer_search?page=${page}&page_size=${pageSize}`;
  113. if (type === "order_by") {
  114. url += `&${type}=${assignOrder}`;
  115. }
  116. if (assignOrder === "") {
  117. url += "&order_by=recommend";
  118. }
  119. let input = $(".keywords").val();
  120. if (input !== "") {
  121. url += `&keyword=${input}`;
  122. }
  123. if (filterList.length) {
  124. filterList.map(item => {
  125. if (item.id === 'budget') {
  126. switch (item.value) {
  127. case "100萬以下":
  128. url += `&${item.id}=1`;
  129. break;
  130. case "100~200萬":
  131. url += `&${item.id}=2`;
  132. break;
  133. case "200~300萬":
  134. url += `&${item.id}=3`;
  135. break;
  136. case "300~400萬":
  137. url += `&${item.id}=4`;
  138. break;
  139. case "400~500萬":
  140. url += `&${item.id}=5`;
  141. break;
  142. case "500萬以上":
  143. url += `&${item.id}=6`;
  144. break;
  145. default:
  146. break;
  147. }
  148. } else {
  149. url += `&${item.id}=${item.value}`;
  150. }
  151. });
  152. }
  153. }
  154. try {
  155. const response = await axios.get(url);
  156. console.log('response.data.designers', response.data.designers);
  157. let totalCount = response.data.total_count;
  158. let totalPages = Math.ceil(totalCount / pageSize);
  159. $("#totalCount").html(totalCount);
  160. if (totalPages) {
  161. $('.filter-list .pagination').show();
  162. setPagination(totalPages); // 分頁處理
  163. } else {
  164. $('.filter-list .pagination').hide();
  165. }
  166. let resultHtml = '';
  167. if (response.data.designers.length) {
  168. response.data.designers.forEach((item) => {
  169. resultHtml += `
  170. <div class="col-md-4 mb-4">
  171. <a href="${item.DesignerLink}">
  172. <div class="card lists-card">
  173. <img src="${item.CaseCoverImg}" class="cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
  174. <div class="card-body d-flex align-items-center">
  175. <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
  176. <section>
  177. <h5 class="card-text text-muted mb-2">${item.DesignerTitle}</h5>
  178. <h6 class="card-title mb-0 text-dark">
  179. <span class="font-weight-bold">
  180. ${item.DesignerName}
  181. </span>
  182. 設計師
  183. </h6>
  184. </section>
  185. </div>
  186. </div>
  187. </a>
  188. </div>`;
  189. });
  190. } else {
  191. resultHtml += "<p class='text-center mt-5'>找不到符合的資料,請重新搜尋。</p>"
  192. }
  193. $('#designerList').html(resultHtml);
  194. setTimeout(() => {
  195. $('#designerList').show();
  196. $('#designerSpinner').hide();
  197. }, 100)
  198. // 更新初始載入狀態
  199. if (isFirstLoad) {
  200. isFirstLoad = false;
  201. }
  202. } catch (error) {
  203. console.log("error", error);
  204. }
  205. }
  206. designerSearch();
  207. let maxPagesMobile = 5; // 手機板最多顯示 5 頁
  208. let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁
  209. // 分頁
  210. function setPagination(pages) {
  211. let screenWidth = $(window).width();
  212. let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
  213. function renderPagination(currentPage) {
  214. let dom = `
  215. <li class="page-item" onclick="handlePagination(this, 'previous')">
  216. <a class="page-link previous hidden" href="#" aria-label="Previous">
  217. <span aria-hidden="true"><</span>
  218. </a>
  219. </li>`;
  220. let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
  221. let endPage = Math.min(startPage + maxPages - 1, pages);
  222. if (endPage - startPage < maxPages) {
  223. startPage = Math.max(endPage - maxPages + 1, 1);
  224. }
  225. for (let index = startPage; index <= endPage; index++) {
  226. dom += `
  227. <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
  228. <a class="page-link" href="#">${index}</a>
  229. </li>`;
  230. }
  231. dom += `
  232. <li class="page-item" onclick="handlePagination(this, 'next')">
  233. <a class="page-link next" href="#" aria-label="Next">
  234. <span aria-hidden="true">></span>
  235. </a>
  236. </li>`;
  237. $('.filter-list .pagination').html(dom);
  238. updateVisibility(currentPage, pages);
  239. }
  240. // 更新上頁 & 下頁的按鈕顯示狀態
  241. function updateVisibility(page, pages) {
  242. if (page === 1) {
  243. $('.page-link.previous').addClass('hidden');
  244. } else {
  245. $('.page-link.previous').removeClass('hidden');
  246. }
  247. if (page === pages) {
  248. $('.page-link.next').addClass('hidden');
  249. } else {
  250. $('.page-link.next').removeClass('hidden');
  251. }
  252. }
  253. window.handlePagination = function (item, type = "") {
  254. if (type === "previous" && page > 1) {
  255. page--;
  256. } else if (type === "next" && page < pages) {
  257. page++;
  258. } else if (!type) {
  259. page = parseInt($(item).find('.page-link').text());
  260. }
  261. renderPagination(page);
  262. designerSearch();
  263. }
  264. renderPagination(page);
  265. $(window).on('resize', function () {
  266. let newScreenWidth = $(window).width();
  267. if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
  268. (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
  269. maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
  270. renderPagination(page);
  271. }
  272. });
  273. }
  274. // 頁碼處理
  275. function handlePagination(item, type = "") {
  276. if (type === "previous") {
  277. // 往前一頁
  278. if (page > 1) {
  279. page--;
  280. }
  281. console.log(page);
  282. } else if (type === "next") {
  283. // 往後一頁
  284. page++;
  285. console.log(page);
  286. } else {
  287. // 直接點擊頁碼
  288. page = parseInt($(item).find('.page-link')[0].innerText);
  289. }
  290. // 切換選取狀態
  291. $('.filter-list .page-item').removeClass('active');
  292. $('.filter-list .page-item').eq(page).addClass('active');
  293. // 設定上一頁按鈕的顯示狀態
  294. if (page === 1) {
  295. $('.page-link.previous').addClass('hidden');
  296. } else {
  297. $('.page-link.previous').removeClass('hidden');
  298. }
  299. designerSearch(); // 搜尋
  300. }
  301. // 熱搜關鍵字搜尋
  302. $(".search-bar-keyword a").click(function () {
  303. let keyword = $(this).text();
  304. $('.keywords').val(keyword);
  305. designerSearch();
  306. });
  307. // 全部清除
  308. $("#removeResultBtn").click(function () {
  309. console.log('全部清除');
  310. filterList.length = 0; // 清空篩選陣列
  311. $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
  312. $('.search-tab-result').empty(); // 清空篩選條件 dom
  313. // 取消選取狀態
  314. $('.filter-list input[type="radio"]').prop('checked', false);
  315. $('.search-tab').removeClass('active');
  316. designerSearch();
  317. });