index.blade.php 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. @extends('views.layouts.master')
  2. <link rel="stylesheet" href="{{ asset('/themes/kbgolf/pro/resources/js/swiper/swiper-bundle.min.css') }}"/>
  3. <script src="{{ asset('/themes/kbgolf/pro/resources/js/swiper/swiper-bundle.min.js') }}"></script>
  4. @section('content')
  5. <!-- page-title -->
  6. @push('meta')
  7. {!! $seoHtml !!}
  8. @endpush
  9. <!-- main slice -->
  10. <!-- main visual 시작 -->
  11. <div class="main_visual">
  12. <div class="swiper">
  13. <div class="swiper-wrapper">
  14. <!-- Slides -->
  15. @forelse($maMainSlider ?? [] as $widget)
  16. <div class="swiper-slide" style="background-image:url({{ asset('/themes/kbgolf/pro/resources/images/main_visual.webp') }})">
  17. <div>
  18. <strong>
  19. 신뢰할 수 있는 회원권 거래소
  20. <em>KB MEMBERSHIP CLUB</em>
  21. </strong>
  22. <p>{!! $widget['C6'] !!}</p>
  23. </div>
  24. </div>
  25. @empty
  26. @endforelse
  27. </div>
  28. <!-- If we need pagination -->
  29. <div class="swiper-pagination"></div>
  30. </div>
  31. </div>
  32. <!--// main visual 끝 -->
  33. <!-- 회원권 매매 신청 시작 -->
  34. <div class="m_sell">
  35. <div class="container">
  36. <label>회원권 매매신청</label>
  37. <input type="text" id="membership-name" placeholder="회원권명">
  38. <button type="button" class="btn" onclick="contactForMembership()">상담신청하기</button>
  39. </div>
  40. </div>
  41. <!--// 회원권 매매 신청 끝 -->
  42. <!-- 시세 시작 -->
  43. <div class="m_quote">
  44. <div class="container">
  45. <ul class="tabs nav nav-tabs">
  46. <li class="active"><a data-toggle="tab" data-sise="golf" href="#" onclick="changeSiseList(this)">골프 시세</a></li>
  47. <li><a data-toggle="tab" href="#" data-sise="condo" onclick="changeSiseList(this)">콘도 시세</a></li>
  48. <li><a data-toggle="tab" href="#" data-sise="fitness" onclick="changeSiseList(this)">휘트니스 시세</a></li>
  49. </ul>
  50. <div class="tab-content">
  51. <!-- 골프 -->
  52. <div id="golf" class="tab-pane fade in active show">
  53. <div class="tb_res tb_vertical">
  54. <table cellspacing="0" cellpadding="0">
  55. <caption>단위: 만원</caption>
  56. <thead>
  57. <tr>
  58. <th>회원권명</th>
  59. <th>금일시세</th>
  60. <th>전일시세</th>
  61. <th>등락</th>
  62. <th>상담</th>
  63. </tr>
  64. </thead>
  65. <tbody id="sise-list"></tbody>
  66. </table>
  67. </div>
  68. <div class="btn_wrap">
  69. <button type="button" class="btn m_more" onclick="loadMoreSise()">더보기</button>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <!--// 시세 끝 -->
  76. <!-- 유투브 시작 -->
  77. <div class="m_youtube">
  78. <div class="container">
  79. <div class="tit_main">
  80. <em>KB Membership Club</em>
  81. <h2>YOUTUBE</h2>
  82. </div>
  83. <ul class="list">
  84. @forelse($mainYoutubeList['Page'] ?? [] as $mainYoutube)
  85. <li>
  86. <div class="img_box">
  87. <a href="{{ $mainYoutube['Pt1'] }}" target="_blak"></a>
  88. <iframe src="{{ $mainYoutube['Pt1'] }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  89. </div>
  90. </li>
  91. @empty
  92. <li>
  93. <div class="img_box">데이터가 존재하지 않습니다.</div>
  94. </li>
  95. @endforelse
  96. </ul>
  97. <div class="btn_wrap">
  98. <button type="button" class="btn m_more" onclick="loadMoreYoutube()">더보기</button>
  99. </div>
  100. </div>
  101. </div>
  102. <!--// 유투브 끝 -->
  103. <!-- 블로그 시작 -->
  104. <div class="m_blog">
  105. <div class="container">
  106. <div class="tit_main">
  107. <em>KB Membership Club</em>
  108. <h2>BLOG</h2>
  109. </div>
  110. <ul class="list">
  111. @forelse($mainBlogList['Page'] ?? [] as $mainBlog)
  112. <li>
  113. <a href="{{ route('dbrbbs.details', [$mainBlog['PostCode'], $mainBlog['PostSlug']]) }}">
  114. <h4 class="ellipsis_multi">{{ $mainBlog['PostTitle'] }}</h4>
  115. <p class="ellipsis_multi">{!! strip_tags(mb_strimwidth($mainBlog['PostContents'], 0, 1500, '...')) !!}</p>
  116. </a>
  117. </li>
  118. @empty
  119. <li>데이터가 존재하지 않습니다.</li>
  120. @endforelse
  121. </ul>
  122. <div class="btn_wrap">
  123. <button type="button" class="btn m_more blog" onclick="loadMoreBlog()">더보기</button>
  124. </div>
  125. </div>
  126. </div>
  127. <!--// 블로그 끝 -->
  128. <script>
  129. currentSiseType = 'golf';
  130. $(document).ready(function() {
  131. // console.log('mainYoutubeList : ',mainYoutubeList);
  132. // 필터링된 리스트를 렌더링하는 함수 호출
  133. changeSiseListByDefault(currentSiseType);
  134. $('.main-header').addClass('main_header');
  135. $('.main-header .logo img').attr("src", "/themes/kbgolf/pro/resources/images/logo_wh.png");
  136. });
  137. // siseType별로 tbody 생성
  138. function changeSiseList(e) {
  139. // 다른 li태그 active class 제거
  140. $('.tabs li').removeClass('active');
  141. // 클릭한 태그의 li active class 추가
  142. $(e).parent().addClass('active');
  143. currentSiseType = $(e).attr('data-sise');
  144. var filteredSiseList = mainSiseList.filter(function(mainsise) {
  145. return mainsise['Pc1'].includes(currentSiseType);
  146. });
  147. renderMainSiseList(filteredSiseList);
  148. // sise 더보기 버튼 list를 change할 때마다 활성화
  149. $('.m_quote .btn_wrap .m_more').show();
  150. }
  151. // defalut 가져오기
  152. function changeSiseListByDefault(currentSiseType) {
  153. var filteredSiseList = mainSiseList.filter(function(mainsise) {
  154. return mainsise['Pc1'].includes(currentSiseType);
  155. });
  156. renderMainSiseList(filteredSiseList);
  157. // sise 더보기 버튼 list를 change할 때마다 활성화
  158. $('.m_quote .btn_wrap .m_more').show();
  159. }
  160. // tbody 생성
  161. function renderMainSiseList(siseList){
  162. // console.log('siseList : ', siseList);
  163. var tbody = $('#sise-list');
  164. fluctuationClass='';
  165. tbody.empty();
  166. if(siseList.length === 0){
  167. tbody.html('<tr><td colspan="5">데이터가 존재하지 않습니다.</td></tr>');
  168. return;
  169. }
  170. siseList.forEach(function(sise){
  171. if (sise['fluctuation'] > 0) {
  172. fluctuationClass = 'up';
  173. fluctuationIcon = 'fa-sort-up';
  174. } else if (sise['fluctuation'] < 0) {
  175. fluctuationClass = 'down';
  176. fluctuationIcon = 'fa-sort-down';
  177. }
  178. var fluctuationText = sise['fluctuation'] !== 0 ?
  179. `<i class="fa-solid ${fluctuationIcon}"></i> ${number_format(Math.abs(sise['fluctuation']))}`
  180. : `${number_format(sise['fluctuation'])}`;
  181. var tr = $('<tr>');
  182. tr.html(`
  183. <td scope="row" data-label="${sise['PostTitle']}">${sise['PostTitle']}</td>
  184. <td data-label="${sise['Pc3']}">${number_format(sise['Pc3'])}</td>
  185. <td data-label="${sise['Pc4']}">${number_format(sise['Pc4'])}</td>
  186. <td data-label="등락" class="${fluctuationClass}">
  187. ${fluctuationText}
  188. </td>
  189. <td data-label="상담신청">
  190. <button type="button" class="btn consult-btn"
  191. data-post-title="${sise['PostTitle']}"
  192. data-pc1="${sise['Pc1']}"
  193. onclick="window.location.href = '/contactus-custom/${sise['Pc1']}/${encodeURIComponent(sise['PostTitle'])}'">상담신청
  194. </button>
  195. </td>
  196. `);
  197. tbody.append(tr);
  198. })
  199. }
  200. // 시세 더보기
  201. function loadMoreSise(){
  202. var offset = $('#sise-list tr').length;
  203. var limit = 12;
  204. $.ajax({
  205. url: '/load-more-sise',
  206. method: 'GET',
  207. data: { offset: offset, limit: limit, siseType: currentSiseType },
  208. success: function(response) {
  209. var siseList = response.Page;
  210. if (siseList!=null) {
  211. appendMainSiseList(siseList);
  212. } else {
  213. alert('더이상 데이터가 없습니다.')
  214. $('.m_quote .btn_wrap .m_more').hide();
  215. }
  216. },
  217. error: function(error) {
  218. console.error('Error loading more sise:', error);
  219. }
  220. });
  221. }
  222. // 유튜브 더보기
  223. function loadMoreYoutube(){
  224. var offset = $('.m_youtube .list li').length;
  225. var limit = 12;
  226. $.ajax({
  227. url: '/load-more-youtube',
  228. method: 'GET',
  229. data: { offset: offset, limit: limit},
  230. success: function(response) {
  231. var youtubeList = response.Page;
  232. if (youtubeList!=null) {
  233. appendMainYoutubeList(youtubeList);
  234. } else {
  235. alert('더이상 데이터가 없습니다.')
  236. $('.m_youtube .btn_wrap .m_more').hide();
  237. }
  238. },
  239. error: function(error) {
  240. console.error('Error loading more sise:', error);
  241. }
  242. });
  243. }
  244. // 블로그 더보기
  245. function loadMoreBlog() {
  246. var offset = $('.m_blog .list li').length;
  247. var limit = 12;
  248. $.ajax({
  249. url: '/load-more-blog',
  250. method: 'GET',
  251. data: { offset: offset, limit: limit },
  252. success: function(response) {
  253. var blogList = response.Page;
  254. if (blogList!=null) {
  255. appendMainBlogList(blogList);
  256. } else {
  257. alert('더이상 데이터가 없습니다.');
  258. $('.m_blog .btn_wrap .m_more').hide();
  259. }
  260. },
  261. error: function(error) {
  262. console.error('Error loading more blogs:', error);
  263. }
  264. });
  265. }
  266. // sise 더보기 list add
  267. function appendMainSiseList(siseList) {
  268. var tbody = $('#sise-list');
  269. siseList.forEach(function(sise) {
  270. if (sise['fluctuation'] > 0) {
  271. fluctuationClass = 'up';
  272. fluctuationIcon = 'fa-sort-up';
  273. } else if (sise['fluctuation'] < 0) {
  274. fluctuationClass = 'down';
  275. fluctuationIcon = 'fa-sort-down';
  276. } else {
  277. fluctuationClass = '';
  278. fluctuationIcon = '';
  279. }
  280. var fluctuationText = sise['fluctuation'] !== 0 ?
  281. `<i class="fa-solid ${fluctuationIcon}"></i> ${number_format(Math.abs(sise['fluctuation']))}`
  282. : `${number_format(sise['fluctuation'])}`;
  283. var tr = $('<tr>');
  284. tr.html(`
  285. <td scope="row" data-label="${sise['PostTitle']}">${sise['PostTitle']}</td>
  286. <td data-label="${sise['Pc3']}">${number_format(sise['Pc3'])}</td>
  287. <td data-label="${sise['Pc4']}">${number_format(sise['Pc4'])}</td>
  288. <td data-label="등락" class="${fluctuationClass}">
  289. ${fluctuationText}
  290. </td>
  291. <td data-label="상담신청">
  292. <button type="button" class="btn consult-btn"
  293. data-post-title="${sise['PostTitle']}"
  294. data-pc1="${sise['Pc1']}"
  295. onclick="window.location.href = '/contactus-custom/${sise['Pc1']}/${encodeURIComponent(sise['PostTitle'])}'">상담신청
  296. </button>
  297. </td>
  298. `);
  299. tbody.append(tr);
  300. });
  301. }
  302. // youtube 더보기 list add
  303. function appendMainYoutubeList(youtubeList) {
  304. var ul = $('.m_youtube .list');
  305. youtubeList.forEach(function(youtube) {
  306. var li = $('<li>');
  307. li.html(`
  308. <div class="img_box">
  309. <a href="${youtube['Pt1']}" target="_blank"></a>
  310. <iframe src="${youtube['Pt1']}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  311. </div>
  312. `);
  313. ul.append(li);
  314. });
  315. }
  316. // blog 더보기 리스트 add
  317. function appendMainBlogList(blogList) {
  318. var ul = $('.m_blog .list');
  319. blogList.forEach(function(blog) {
  320. var li = $('<li>');
  321. li.html(`
  322. <a href="/bbs/details/${blog['PostCode']}/${blog['PostSlug']}">
  323. <h4 class="ellipsis_multi">${blog['PostTitle']}</h4>
  324. <p class="ellipsis_multi">${stripTags(truncateText(blog['PostContents'], 1500))}</p>
  325. </a>
  326. `);
  327. ul.append(li);
  328. });
  329. }
  330. // 회원권명으로 상담신청
  331. function contactForMembership(){
  332. var membershipName = $('#membership-name').val();
  333. var url = '{{ route('contactus-custom', ':membershipName') }}';
  334. url = url.replace(':membershipName', membershipName);
  335. // console.log('url :', url);
  336. window.location.href = url;
  337. }
  338. var swiper = new Swiper(".main_visual .swiper", {
  339. loop: true,
  340. autoplay: {
  341. delay: 5000,
  342. disableOnInteraction: false,
  343. },
  344. pagination: {
  345. el: ".swiper-pagination",
  346. clickable: true,
  347. },
  348. });
  349. // format 함수
  350. function number_format(number) {
  351. return new Intl.NumberFormat().format(number);
  352. }
  353. // HTML 태그 제거
  354. function stripTags(html) {
  355. return html.replace(/(<([^>]+)>)/gi, "");
  356. }
  357. // 글자수 maxLength
  358. function truncateText(text, maxLength, suffix = '...') {
  359. if (text.length <= maxLength) {
  360. return text;
  361. }
  362. return text.substr(0, maxLength) + suffix;
  363. }
  364. const mainSiseList = {!! json_encode($mainSiseList['Page']) !!};
  365. const mainYoutubeList = {!! json_encode($mainYoutubeList['Page']) !!};
  366. const mainBlogList = {!! json_encode($mainBlogList['Page']) !!};
  367. </script>
  368. @endsection