goto.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. $(".popular").hide();
  2. $(document).on("click", ".likeSee__state__filter--item", function (event) {
  3. $(".CaseNews").toggle();
  4. $(".popular").toggle();
  5. $(".likeSee__state__filter--item").removeClass('active');
  6. $(this).addClass("active");
  7. });
  8. function get_data() {
  9. // var desid2=String(desid);
  10. // console.log(desid2);
  11. // $("#version").val(desid);
  12. // $("#version").html(desid);
  13. $.ajax({
  14. method: "GET",
  15. url: "json/cases.json",
  16. dataType: "json",
  17. })
  18. .done(function (msg) {
  19. console.log(msg);
  20. let designersinfo = "";
  21. let CaseInfo = "";
  22. let CaseTag = "";
  23. let CaseData = "";
  24. let CaseNews = "";
  25. let CasePopular = "";
  26. let CaseDetail = "";
  27. for (let i = 0; i < msg.length; i++) {
  28. designersinfo = `
  29. <div class="container container-width-column px-md-0">
  30. <div class="article__wrapper">
  31. <h2 class="h4">${msg[i].Casetitle}</h2>
  32. <div class="d-flex justify-content-between">
  33. <div class="small">${msg[i].CaseTeamName} | 圖片提供:${msg[i].CaseCompany}</div>
  34. <div class="small">${msg[i].CaseDate}| 人氣:${msg[i].CaseViews}</div>
  35. </div>
  36. </div>
  37. </div>`
  38. CaseInfo = `
  39. <div class="row mx-0 justify-content-around align-items-center">
  40. <div class="col-md-3 px-mx-0">
  41. <div class="info__items border-end">
  42. <div>
  43. <div class="info__items__title">風格</div>
  44. <div class="info__items--ellipse">${msg[i].CaseStyle}</div>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="col-md-3 px-mx-0">
  49. <div class="info__items border-end">
  50. <div>
  51. <div class="info__items__title">格局</div>
  52. <div class="info__items--ellipse">${msg[i].CaseHouse}</div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="col-md-3 px-mx-0">
  57. <div class="info__items border-end">
  58. <div>
  59. <div class="info__items__title">坪數</div>
  60. <div class="info__items--ellipse">${msg[i].CaseSize}</div>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="col-md-3 px-mx-0">
  65. <div class="info__items">
  66. <div>
  67. <div class="info__items__title">預算</div>
  68. <div class="info__items--ellipse">${msg[i].CaseProject}</div>
  69. </div>
  70. </div>
  71. </div>
  72. </div>`
  73. for (let j = 0; j < msg[i].CaseTag.length; j++) {
  74. // console.log(msg[i].CaseTag.length);
  75. // console.log(msg[i].CaseTag[j].Tag);
  76. CaseTag += ' \
  77. <a href="" class="btn btn-outline-custom rounded-0">'+ msg[i].CaseTag[j].Tag + '</a> \
  78. ';
  79. }
  80. CaseData = `
  81. <h4 class="d-none d-md-block">CASE DATA</h4>
  82. <div class="caseData__infoItems">
  83. <div class="caseData__infoItems__list">
  84. <div class="caseData__infoItems__list--lf">居住成員:</div>
  85. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMember} </div>
  86. </div>
  87. <div class="caseData__infoItems__list">
  88. <div class="caseData__infoItems__list--lf">房屋坪數:</div>
  89. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSize}</div>
  90. </div>
  91. <div class="caseData__infoItems__list">
  92. <div class="caseData__infoItems__list--lf">設計風格:</div>
  93. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataStyle}</div>
  94. </div>
  95. <div class="caseData__infoItems__list">
  96. <div class="caseData__infoItems__list--lf">房屋類型:</div>
  97. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataType}</div>
  98. </div>
  99. <div class="caseData__infoItems__list">
  100. <div class="caseData__infoItems__list--lf">房屋狀況:</div>
  101. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSituation}</div>
  102. </div>
  103. <div class="caseData__infoItems__list">
  104. <div class="caseData__infoItems__list--lf">圖片提供:</div>
  105. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataImgProvide}</div>
  106. </div>
  107. <div class="caseData__infoItems__list">
  108. <div class="caseData__infoItems__list--lf">空間格局:</div>
  109. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataSpace}</div>
  110. </div>
  111. <div class="caseData__infoItems__list">
  112. <div class="caseData__infoItems__list--lf">主要建材:</div>
  113. <div class="caseData__infoItems__list--rt">${msg[i].CaseDataMaterial}</div>
  114. </div>
  115. </div> `
  116. CaseData2 = `
  117. <div class="caseData__designerBlock h-100">
  118. <div class="caseData__designerBlock__designer d-block d-md-none">
  119. <h4>聯絡設計師</h4>
  120. <ul>
  121. <li><a itemprop="item" href="/designer-index.php?designer_id=779"
  122. target="_blank">${msg[i].CaseCompany}</a></li>
  123. <li><a itemprop="item" href="/designer-index.php?designer_id=779"
  124. target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
  125. <li>免付費諮詢專線</li>
  126. <li><a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a></li>
  127. </ul>
  128. </div>
  129. <div class="caseData__designerBlock__designer--pc d-none d-md-block">
  130. <div class="caseData__designerBlock__designer--above">
  131. <h4>聯絡設計師</h4>
  132. <ul>
  133. <li><a href="" target="_blank">${msg[i].CaseCompany}</a></li>
  134. <li><a href="" target="_blank">${msg[i].CaseTeamName} 設計師</a></li>
  135. </ul>
  136. </div>
  137. <div class="caseData__designerBlock__designer--below">
  138. <ul>
  139. <li>
  140. 免付費諮詢專線
  141. </li>
  142. <li>
  143. <a href="tel:${msg[i].ContactFreeTel}" class="tel">${msg[i].ContactFreeTel}</a>
  144. </li>
  145. </ul>
  146. </div>
  147. </div>
  148. <div class="caseData__designerBlock__avatar">
  149. <a href="">
  150. <div class="caseData__designerBlock__avatar--img"
  151. style="background-image:url(${msg[i].ContactDesignerImg});">
  152. </div>
  153. </a>
  154. </div>
  155. </div>`
  156. for (var k = 0; k < msg[i].ProfileRecently.length; k++) {
  157. CaseNews +=
  158. '\<div class="col-md-4 ps-0"\
  159. <div class="vue-waterfall-slot">\
  160. <div class="card CaseNews-Card">\
  161. <a href="'+ msg[i].ProfileRecently[k].ProfileLink + '">\
  162. <img class="img-fluid"\
  163. src="'+ msg[i].ProfileRecently[k].ProfileImg + '"\
  164. alt="幸福空間個案圖" class="card-img-top">\
  165. </a>\
  166. </div>'
  167. CaseNews += '<div class="card-body">'
  168. for (var z = 0; z < msg[i].ProfileRecently[k].ProfileTag.length; z++) {
  169. // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
  170. CaseNews += '\
  171. <a href="">\
  172. '+ msg[i].ProfileRecently[k].ProfileTag[z].Tag + '\
  173. </a>\
  174. ';
  175. }
  176. CaseNews += '</div></div></div></div>'
  177. };
  178. for (var x = 0; x < msg[i].ProfilePopularity.length; x++) {
  179. CasePopular +=
  180. '<div class="likeSee__rule"\
  181. <a href="'+ msg[i].ProfilePopularity[x].ProfileLink + '">\
  182. <div class="likeSee__bgImg">\
  183. <img class="img-fluid" src="'+ msg[i].ProfilePopularity[x].ProfileImg + '" alt="幸福空間個案圖" class="card-img-top">\
  184. </div>\
  185. </a>'
  186. CasePopular += '<div class="likeSee__tag">'
  187. for (var y = 0; y < msg[i].ProfilePopularity[x].ProfileTag.length; y++) {
  188. // console.log(msg[i].ProfileRecently[k].ProfileTag.length)
  189. CasePopular += '\
  190. <a href="'+ msg[i].ProfilePopularity[x].ProfileTag[y].TagLink + '" class="likeSee__tag--item">\
  191. '+ msg[i].ProfilePopularity[x].ProfileTag[y].Tag + '\
  192. </a>\
  193. ';
  194. }
  195. CasePopular += '</div></div>'
  196. };
  197. // 個案細節
  198. CaseDetail += '<div class="row px-0 mx-0">'
  199. CaseDetail +=
  200. // 輪播圖
  201. ' <div class="col-md-8">\
  202. <div style="position: sticky; top:0px;">\
  203. <img class="img-fluid" src="https://cloud.hhh.com.tw/upload/_hcase_img/name_14151_20211230150527.jpg" alt="">\
  204. </div>\
  205. </div>'
  206. CaseDetail +=
  207. '<div class="col-md-4">\
  208. <div class="d-flex justify-content-start align-items-center pt-5">\
  209. <a href="">\
  210. <div class="contact-section-avatar me-2">\
  211. <img class="img-fluid" src="'+ msg[i].ContactDesignerImg + '" alt="">\
  212. </div>\
  213. </a>\
  214. <div class="ms-2" style="width: 100%;">\
  215. <a href="" class="contact-section-company">\
  216. <div>\
  217. '+ msg[i].CaseCompany + '\
  218. </div>\
  219. </a>\
  220. <div style="display: flex;" class="contact-section-detail-box mt-3">\
  221. <div class="contact-section-detail-lf">\
  222. <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
  223. </div>\
  224. <div class="contact-section-detail-rt">\
  225. <div><a href="tel:'+ msg[i].ContactFreeTel + '">免付費 ' + msg[i].ContactFreeTel + '</a></div>\
  226. </div>\
  227. </div>\
  228. </div>\
  229. </div>\
  230. '
  231. CaseDetail +=
  232. '<div class="info-area-title-desktop">\
  233. <a href="'+ msg[i].CasePageLink + '" target="_blank">\
  234. '+ msg[i].Casetitle + '\
  235. </a>\
  236. </div>\
  237. <div class="divider"></div>\
  238. '
  239. CaseDetail +=
  240. '<div class="info-area-other-case-desktop py-3">\
  241. <div class="ml-1">該個案的其他圖片(<span id="index">5</span>/8)</div>\
  242. <div class="other-case-desktop-items d-flex flex-wrap">\
  243. '
  244. for (let j = 0; j < msg[i].CaseDetail.length; j++) {
  245. CaseDetail +=
  246. '<div id="img-0" class="w-20 m-1 p-1 img_all">\
  247. <a>\
  248. <img src=" '+ msg[i].CaseDetail[j].CaseDetailImg+ '" width="70" height="70" alt="該個案的其他圖片">\
  249. </a>\
  250. </div>'
  251. };
  252. CaseDetail += '</div></div>';
  253. CaseDetail += '<div class="divider"></div>';
  254. CaseDetail +=
  255. '<div class="info-area-same-case-desktop py-3">\
  256. <div class="ml-1"><span>工業風</span> 其他作品</div>\
  257. <div class="same-case-desktop-items d-flex flex-wrap">\
  258. '
  259. for (let j = 0; j < msg[i].OtherStylePortfolio.length; j++) {
  260. CaseDetail +=
  261. '<div class="w-20 m-1 p-1 ">\
  262. <a href="'+ msg[i].OtherStylePortfolio[j].PortfoliolLink + '">\
  263. <img src="'+ msg[i].OtherStylePortfolio[j].PortfoliolImg + '" width="70" height="70" alt="' + msg[i].OtherStylePortfolio.PortfoliolImgAlt + '">\
  264. </a>\
  265. </div>'
  266. };
  267. CaseDetail += '</div></div>';
  268. CaseDetail += '<div class="divider"></div>';
  269. CaseDetail +=
  270. '<div class="info-area-data-desktop py-3">\
  271. <div class="ml-2">CASE DATA</div>\
  272. <div class="data-table-desktop ml-2">\
  273. <div class="data-table-items d-flex">\
  274. <div class="data-table-lf">\
  275. <div>裝潢費用:</div>\
  276. </div>\
  277. <div class="data-table-rt">\
  278. <div>'+ msg[i].CaseProject + '</div>\
  279. </div>\
  280. </div>\
  281. <div class="data-table-items d-flex">\
  282. <div class="data-table-lf">\
  283. <div>居住成員:</div>\
  284. </div>\
  285. <div class="data-table-rt">\
  286. <div>'+ msg[i].CaseDataMember + '</div>\
  287. </div>\
  288. </div>\
  289. <div class="data-table-items d-flex">\
  290. <div class="data-table-lf">\
  291. <div>設計風格:</div>\
  292. </div>\
  293. <div class="data-table-rt">\
  294. <div>'+ msg[i].CaseStyle + '</div>\
  295. </div>\
  296. </div>\
  297. <div class="data-table-items d-flex">\
  298. <div class="data-table-lf">\
  299. <div>房屋類型:</div>\
  300. </div>\
  301. <div class="data-table-rt">\
  302. <div>'+ msg[i].CaseDataType + '</div>\
  303. </div>\
  304. </div>\
  305. <div class="data-table-items d-flex">\
  306. <div class="data-table-lf">\
  307. <div>房屋坪數:</div>\
  308. </div>\
  309. <div class="data-table-rt">\
  310. <div>'+ msg[i].CaseSize + '</div>\
  311. </div>\
  312. </div>\
  313. <div class="data-table-items d-flex">\
  314. <div class="data-table-lf">\
  315. <div>房屋狀況:</div>\
  316. </div>\
  317. <div class="data-table-rt">\
  318. <div>'+ msg[i].CaseDataSituation + '</div>\
  319. </div>\
  320. </div>\
  321. <div class="data-table-items d-flex">\
  322. <div class="data-table-lf">\
  323. <div>圖片提供:</div>\
  324. </div>\
  325. <div class="data-table-rt">\
  326. <div>'+ msg[i].CaseCompany + '</div>\
  327. </div>\
  328. </div>\
  329. <div class="data-table-items d-flex">\
  330. <div class="data-table-lf">\
  331. <div>空間格局:</div>\
  332. </div>\
  333. <div class="data-table-rt">\
  334. <div>'+ msg[i].CaseDataSpace + '</div>\
  335. </div>\
  336. </div>\
  337. <div class="data-table-items d-flex">\
  338. <div class="data-table-lf">\
  339. <div>主要建材:</div>\
  340. </div>\
  341. <div class="data-table-rt">\
  342. <div>'+ msg[i].CaseDataMaterial + '</div>\
  343. </div>\
  344. </div>\
  345. </div>\
  346. </div>';
  347. CaseDetail += '<div class="divider"></div>';
  348. CaseDetail +=
  349. '<div class="info-area-contact-desktop py-3 mb-2">\
  350. <div class="ml-2">聯絡資訊 Info</div>\
  351. <div class="contact-section-desktop ml-2 mt-2">\
  352. <div class="contact-section-detail-desktop mt-3">\
  353. <div class="d-flex">\
  354. <div class="contact-section-detail-lf">\
  355. <div><i aria-hidden="true" class="fa fa-phone"></i></div>\
  356. </div>\
  357. <div class="contact-section-detail-rt">\
  358. <div>\
  359. <a href="tel:'+ msg[i].CaseCompanyTel + '">' + msg[i].CaseCompanyTel + '</a>\
  360. </div>\
  361. </div>\
  362. </div>\
  363. <div class="d-flex">\
  364. <div class="contact-section-detail-lf">\
  365. <div><i class="fas fa-map-marker-alt"></i></div>\
  366. </div>\
  367. <div class="contact-section-detail-rt">\
  368. <div><a href="'+ msg[i].CaseCompanyMap + '" target="_blank">'+ msg[i].CaseCompanyAddress + '</a></div>\
  369. </div>\
  370. </div>\
  371. <div class="d-flex">\
  372. <div class="contact-section-detail-lf">\
  373. <div><i class="far fa-envelope"></i></div>\
  374. </div>\
  375. <div class="contact-section-detail-rt">\
  376. <div><a href="mailto:'+ msg[i].CaseCompanyEmail + '">' + msg[i].CaseCompanyEmail + '</a></div>\
  377. </div>\
  378. </div>\
  379. <div class="d-flex">\
  380. <div class="contact-section-detail-lf">\
  381. <div><i aria-hidden="true" class="fa fa-home"></i></div>\
  382. </div>\
  383. <div class="contact-section-detail-rt">\
  384. <div><a href="'+ msg[i].CaseCompanyWeb + '"\
  385. target="_blank">'+ msg[i].CaseCompanyWeb + '</a></div>\
  386. </div>\
  387. </div>\
  388. </div>\
  389. </div>\
  390. </div>'
  391. CaseDetail +='</div>'
  392. }
  393. $('.article').html(designersinfo);
  394. $('.CaseInfo').html(CaseInfo);
  395. $('.CaseTag').html(CaseTag);
  396. $('.caseData-PC-left').html(CaseData);
  397. $('.caseData-PC-right').html(CaseData2);
  398. $('.CaseNews-Card').html(CaseNews);
  399. $('.Case-popular').html(CasePopular);
  400. $('.CaseModel').html(CaseDetail);
  401. });
  402. }
  403. get_data();