PlanningDetailFormWeb.html 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146
  1. <!DOCTYPE html>
  2. <html lang="ko" xmlns:th="http://www.thymeleaf.org"
  3. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  4. layout:decorator="web/common/layout/PlanningLayoutWeb">
  5. <!--
  6. *******************************************************************************
  7. * @source : PlanningDetailFormWeb.html
  8. * @desc : 기획전디테일 Page
  9. *============================================================================
  10. * Pastelmall
  11. * Copyright(C) 2020 TSIT, All rights reserved.
  12. *============================================================================
  13. * VER DATE AUTHOR DESCRIPTION
  14. * === =========== ========== =============================================
  15. * 1.0 2021.3.9 sowon 최초 작성
  16. *******************************************************************************
  17. -->
  18. <body>
  19. <th:block layout:fragment="content">
  20. <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
  21. <div id="container" class="container dp" th:with="frontUrl=${@environment.getProperty('domain.front')}, goodsView=${@environment.getProperty('upload.goods.view')}, planView=${@environment.getProperty('upload.image.view')}">
  22. <div class="breadcrumb">
  23. <ul>
  24. <li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
  25. <li class="bread_2depth" th:if="${planInfo.planGb == 'P'}" ><a href="javascript:void(0);"onclick="cfnGoToPage(_PAGE_PLANNING_MAIN);">기획전</a></li>
  26. <li class="bread_2depth" th:if="${planInfo.planGb == 'E'}" ><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">이벤트/혜택</a></li>
  27. <li class="bread_2depth" th:text="${planInfo.planNm}"></li>
  28. </ul>
  29. </div>
  30. <div class="wrap">
  31. <!-- 상단 프로모션 배너 -->
  32. <div class="content wide dp_detail_visual">
  33. <div class="cont_head">
  34. <div>
  35. <h3 th:text="${planInfo.planNm}"></h3>
  36. <div class="period">
  37. <span th:text="${planInfo.dispStdt}"></span> ~ <span th:text="${planInfo.dispEddt}"></span>
  38. </div>
  39. <div class="shareSet">
  40. <button class="btn_share" data-name="openShare">공유하기</button>
  41. <div class="shareWrap">
  42. <div id="layerShare" class="setShare open">
  43. <span>
  44. <button type="button" class="kk"
  45. th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '${planView+ '/'+planInfo.mainImg}');|">
  46. <span>카카오톡</span>
  47. </button>
  48. <button type="button" class="fb"
  49. th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm}', '', '');|">
  50. <span>페이스북</span>
  51. </button>
  52. <button type="button" class="tw"
  53. th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/planning/detail/form?planSq='+planInfo.planSq}', '${planInfo.planNm+ '#style24몰'}', '', '');|">
  54. <span>트위터</span>
  55. </button>
  56. <button type="button" class="url btn_copy">
  57. <span>URL</span>
  58. </button>
  59. </span>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="cont_body" th:if="${fsrcInfoTop != null}" th:utext="${#strings.replace(#strings.replace(fsrcInfoTop.fsrcPc,'&amplt;','<'),'&ampgt;','>')}">
  66. <!-- 프로모션배너 type1 -->
  67. <!-- <div class="promotion_visual type1" th:if="${fsrcInfoTop != null and planInfo.planGb == 'P'}" th:utext="${#strings.replace(#strings.replace(fsrcInfoTop.fsrcPc,'&amplt;','<'),'&ampgt;','>')}"></div> -->
  68. <!-- <div class="promotion_visual type2" th:if="${fsrcInfoTop != null}" th:utext="${#strings.replace(#strings.replace(fsrcInfoTop.fsrcPc,'&amplt;','<'),'&ampgt;','>')}"></div> -->
  69. <!-- 프로모션배너 type1 -->
  70. <!-- 프로모션배너 type2 -->
  71. <!-- <div class="promotion_visual type2">
  72. <div class="swiper-container">
  73. <div class="swiper-wrapper ">
  74. <div class="swiper-slide">
  75. <img alt="" src="/images/pc/thumb/bigbanner_slide01.png">
  76. </div>
  77. <div class="swiper-slide">
  78. <img alt="" src="/images/pc/thumb/bigbanner_slide02.png">
  79. </div>
  80. </div>
  81. </div>
  82. <div class="swiper-button-prev"></div>
  83. <div class="swiper-button-next"></div>
  84. <div class="swiper-pagination"></div>
  85. </div> -->
  86. <!-- 프로모션배너 type2 -->
  87. </div>
  88. </div>
  89. <!-- //상단 프로모션 배너 -->
  90. <th:block th:each="a, template : ${templateOrd}">
  91. <th:block th:if="${a.tmplType == 'G082_10'}">
  92. <div class="content wide dp_review" th:id="${a.tmplType}"></div> <!-- //리뷰 -->
  93. </th:block>
  94. <th:block th:if="${a.tmplType == 'G082_20'}">
  95. <div class="content wide dp_coupon" th:id="${a.tmplType}"></div> <!-- //할인쿠폰 -->
  96. </th:block>
  97. <th:block th:if="${a.tmplType == 'G082_30'}">
  98. <div class="content dp_mid_banner" th:id="${a.tmplType}"></div> <!-- //이미지-->
  99. </th:block>
  100. <th:block th:if="${a.tmplType == 'G082_50'}">
  101. <div class="content dp_special" th:id="${a.tmplType + a.planContSq}"></div>
  102. </th:block>
  103. <th:block th:if="${a.tmplType == 'G082_51'}">
  104. <div class="content dp_special" th:id="${a.tmplType + a.planContSq}"></div>
  105. </th:block>
  106. <th:block th:if="${a.tmplType == 'G082_52'}">
  107. <div class="content dp_special" th:id="${a.tmplType + a.planContSq}"></div>
  108. </th:block>
  109. </th:block>
  110. <div class="coner_item01" th:if="${fsrcInfoBtm != null}" th:utext="${#strings.replace(#strings.replace(fsrcInfoBtm.fsrcPc,'&amplt;','<'),'&ampgt;','>')}"></div>
  111. <!-- 댓글리스트 -->
  112. <th:block th:if="${planInfo.replyYn == 'Y'}">
  113. <div class="content wide cmt">
  114. <div class="cont_body">
  115. <div class="cmt_wrap">
  116. <div class="cmt_write">
  117. <form class="form_wrap">
  118. <div class="cmt_tarea">
  119. <textarea class="cmt_ans" name="replyText" id="replyText" placeholder="댓글을 입력해주세요.(500자 이내)" onclick="fnTextConfirm()"></textarea>
  120. <p class="txt_cnt"><span id="cmt_cnt" class="c_primary">0</span>/500</p>
  121. </div>
  122. <div class="cmt_thumb">
  123. <div class="form_field">
  124. <div class="imgUpload">
  125. <label for="fileAdd" class="fileAdd" id="fileAdd_reply">업로드</label>
  126. <input type="file" id="fileAdd" name="files"/>
  127. </div>
  128. </div>
  129. </div>
  130. <button type="button" class="btn btn_dark" onclick="fnReplySave()"><span>등록</span></button>
  131. </form>
  132. </div>
  133. <div class="cmt_group" id="replyList">
  134. </div>
  135. <div class="paging_wrap">
  136. <ul class="pageNav" id="paging">
  137. </ul>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </th:block>
  143. <!-- 관련상품 리스트 -->
  144. <div class="content sticky_nav_list" id="cornerList">
  145. </div>
  146. <!-- //관련상품 리스트 -->
  147. <!-- 다른 기획전,이벤트 보기 -->
  148. <div class="content other_promotion_slide">
  149. <div class="cont_head">
  150. <div>
  151. <h4 th:if="${planInfo.planGb == 'P'}">다른 기획전 보기</h4>
  152. <h4 th:if="${planInfo.planGb == 'E'}">다른 이벤트 보기</h4>
  153. <h4 th:if="${planInfo.planGb == 'C'}">다른 이벤트 보기</h4>
  154. <a href="javascript:void(0);" th:if="${planInfo.planGb == 'P'}" onclick="cfnGoToPage(_PAGE_PLANNING_MAIN);">전체보기</a>
  155. <a href="javascript:void(0);" th:if="${planInfo.planGb == 'E'}" onclick="cfnGoToPage(_PAGE_EVENT_MAIN);">전체보기</a>
  156. </div>
  157. </div>
  158. <div class="cont_body">
  159. <div class="swiper-container">
  160. <div class="swiper-wrapper">
  161. <th:block th:each="PlanData, PlanStat : ${planList}">
  162. <div class="swiper-slide">
  163. <a th:onclick="cfnGoToPlanDetail([[${PlanData.planSq}]])">
  164. <div class="thumb">
  165. <img th:src="${@environment.getProperty('upload.image.view')+PlanData.mainImg}" alt="${PlanData.planNm}">
  166. </div>
  167. <div class="txt">
  168. <p class="tit" th:text="${PlanData.planNm}"></p>
  169. </div>
  170. </a>
  171. </div>
  172. </th:block>
  173. </div>
  174. </div>
  175. <div class="swiper-button-prev"></div>
  176. <div class="swiper-button-next"></div>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. <div class="modal fade couponInfo_pop" id="couponInfoPop" tabindex="-1" role="dialog" aria-labelledby="couponInfoLabel" aria-hidden="true">
  182. <div class="modal-dialog" role="document">
  183. <div class="modal-content">
  184. <!-- 쿠폰사용안내 팝업 내용 -->
  185. </div>
  186. </div>
  187. </div>
  188. <!-- <form id="pollListForm" name="pollListForm" th:action="@{'/planning/event/poll/form'}" th:method="post">
  189. <input type="hidden" name="planSq" th:value="${planInfo.planSq}"/>
  190. </form> -->
  191. <form id="searchForm" name="searchForm" th:action="@{/planning/reply/list}" th:method="post">
  192. <input type="hidden" name="pageNo" value="1" />
  193. <input type="hidden" name="planSq" th:value="${planInfo.planSq}" />
  194. <input type="hidden" name="pageSize" value="10" />
  195. </form>
  196. <!-- 댓글 이미지 팝업 -->
  197. <div class="modal fade thumb_img_pop" id="thumbImgPop" tabindex="-1" role="dialog" aria-labelledby="thumbImgLabel" aria-hidden="true">
  198. <div class="modal-dialog" role="document">
  199. <div class="modal-content">
  200. <div class="modal-header sr-only">
  201. <h5 class="modal-title" id="thumbImgLabel">이미지 상세보기</h5>
  202. </div>
  203. <div class="modal-body">
  204. <div class="pop_cont">
  205. <div class="swiper-container">
  206. <div class="swiper-wrapper">
  207. <!-- 이미지 슬라이드 영역 -->
  208. </div>
  209. </div>
  210. <div class="swiper-button-next"></div>
  211. <div class="swiper-button-prev"></div>
  212. <div class="swiper-pagination"></div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <!-- //댓글 이미지 팝업 -->
  219. <script src="/ux/plugins/gaga/gaga.paging.js"></script>
  220. <script th:inline="javascript">
  221. let review = [[${reviewInfo}]];
  222. let coupon = [[${couponInfo}]];
  223. let plan = [[${planInfo}]];
  224. let image = [[${imageInfo}]];
  225. let goods1 = [[${goods1Info}]];
  226. let goods2 = [[${goods2Info}]];
  227. let goods4 = [[${goods4Info}]];
  228. let template =[[${templateOrd}]];
  229. let replyList = [[${replyList}]];
  230. let replyCount = [[${replyCount}]];
  231. let replyAttachList = [[${replyAttachList}]];
  232. let planCornerGoodsList = [[${planCornerGoodsList}]];
  233. let planCornerList = [[${planCornerList}]];
  234. let _mall = [[${@environment.getProperty('domain.front')}]];
  235. let goodsView =[[${@environment.getProperty('upload.goods.view')}]]
  236. let imgUrl=[[${@environment.getProperty('upload.image.view')}]];
  237. if(planCornerList.length>0){
  238. var html = '';
  239. html += '<div class="cont_head">';
  240. html += ' <div class="sticky_nav">';
  241. html += ' <ul> ';
  242. $.each(planCornerList, function(idx, item) {
  243. html += ' <li><a href="#brand'+idx+'">'+item.cornerNm+'</a></li>';
  244. })
  245. html += ' </ul>';
  246. html += ' </div>';
  247. html += '</div>';
  248. html += '<div class="cont_body">';
  249. html += ' <div class="list_content">';
  250. $.each(planCornerList, function(idx, item) {
  251. html += ' <div id="brand'+idx+'">';
  252. html += ' <div class="item_header">';
  253. html += ' <h4>'+item.cornerNm+'</h4>';
  254. html += ' </div>';
  255. html += ' <div class="itemsGrp">';
  256. $.each(planCornerGoodsList, function(idx2, item2) {
  257. if (item2.cornerNm == item.cornerNm) {
  258. html += ' <div class="item_prod">';
  259. html += ' <div class="item_state">';
  260. html += ' <button type="button" class="itemLike';
  261. if(item2.likeIt == 'likeit'){
  262. html += ' likeit';
  263. }
  264. html += ' "';
  265. html += ' onClick="cfnPutWishList(this);" goodsCd=\''+item2.goodsCd+'\', ithrCd=\'\', contentsLoc=\'\', planDtlSq=\'\'>관심상품 추가</button>';
  266. html += ' <a href="javascript:void(0);" onclick="cfnGoToGoodsDetail(\'' + item2.goodsCd + '\')" class="itemLink">';
  267. html += ' <div class="itemPic">';
  268. html += ' <img alt="BLUE-a" class=" vLHTC pd_img" src="'+ goodsView +'/'+item2.sysImgNm +'">';
  269. html += ' </div>';
  270. html += ' <p class="itemBrand">'+item2.brandGroupNm+'</p>';
  271. html += ' <div class="itemName">'+item2.goodsNm+'</div>';
  272. html += ' <p class="itemPrice">'+item2.currPrice.addComma();
  273. if (item2.currPrice != item2.listPrice) {
  274. html += ' <span class="itemPrice_original">'+item2.listPrice.addComma()+'</span>';
  275. }
  276. if (item2.dcRate != 0) {
  277. html += ' <span class=" itemPercent">'+item2.dcRate.addComma()+'%</span>';
  278. }
  279. html += ' </p>';
  280. html += ' <div class="itemcolorchip">';
  281. if(!gagajf.isNull(item2.colorChips)){
  282. var colorArr = item2.colorChips.split(",");
  283. var colorCd = '';
  284. var rgbColor = '';
  285. for(let i=0; i<colorArr.length; i++){
  286. var colorInfo = colorArr[i].split(":");
  287. colorCd = colorInfo[0];
  288. rgbColor = colorInfo[1];
  289. if(rgbColor=='#FFFFFF'){
  290. html += ' <span class="chip_color" style="background-color: '+rgbColor+';border:1px solid #aaa;" value="'+colorCd+'">'+colorCd+'</span>';
  291. }else{
  292. html += ' <span class="chip_color" style="background-color: '+rgbColor+'" value="'+colorCd+'">'+colorCd+'</span>';
  293. }
  294. }
  295. }
  296. html += ' </div>';
  297. if(!gagajf.isNull(item2.icon)){
  298. var iconArr = item2.icon.split(",");
  299. var iconGb = '';
  300. var iconNm = '';
  301. html += ' <p class="itemBadge">';
  302. for(let i=0; i<iconArr.length; i++){
  303. var iconInfo = iconArr[i].split(":");
  304. iconGb = iconInfo[0];
  305. iconNm = iconInfo[1];
  306. html += ' <span class="badge13" value="'+iconGb+'">'+iconNm+' </span>';
  307. }
  308. html += ' </p>';
  309. }
  310. if(item2.goodsTnm != null){
  311. html += ' <div class="itemComment">'+item2.goodsTnm+'</div>';
  312. }
  313. html += ' </a>';
  314. html += ' </div>';
  315. html += ' </div>';
  316. }
  317. })
  318. html += ' </div>';
  319. html += ' </div>';
  320. })
  321. html += ' </div>';
  322. html += ' </div>';
  323. $("#cornerList").append(html);
  324. }
  325. if(review.length>0){
  326. var html = '';
  327. html += ' <div class="cont_head">';
  328. html += ' <div>';
  329. html += ' <h4>'+review[0].title+'</h4>';
  330. html += ' </div>';
  331. html += ' <div class="cont_body">';
  332. html += ' <div class="review_list">';
  333. $.each(review, function(idx, item) {
  334. html += ' <div class="reviw_box">'
  335. html += ' <div class="best_review">';
  336. if(item.reviewSysImg!= null){
  337. html += ' <a href="javascript:void();" id="btn_pdBestReview_pop" onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">';
  338. }else{
  339. html += ' <a href="javascript:void();" id="btn_pdBestReview_pop">';
  340. }
  341. html += ' <div class="pic">';
  342. if(item.reviewSysImg!= null){
  343. if (item.fileGb == 'M') {
  344. html += ' <span class="thumb mov" style="background-image: url('+ imgUrl+item.reviewSysImg +');"></span>';
  345. }else{
  346. html += ' <span class="thumb" style="background-image: url('+ imgUrl +item.reviewSysImg +');"></span>';
  347. }
  348. }else{
  349. html += ' <span class="thumb" style="background-image: url('+ goodsView+'/'+item.sysImgNm +');"></span>';
  350. }
  351. html += ' </div>';
  352. html += ' <div class="star_score">';
  353. html += ' <span class="star">';
  354. html += ' <em class="progbar" style="width:'+(item.score*20)+'%;"></em> <!-- 평점 style로 표기 -->';
  355. html += ' </span>';
  356. if(item.bestYn == 'Y'){
  357. html += '<em class="ico ico_besttag"></em>';
  358. }
  359. html += ' </div>';
  360. html += ' <div class="txt_best_review">';
  361. html += ' <p>'+item.reviewContent+'</p>';
  362. html += ' </div>';
  363. html += ' <div class="info_writer">';
  364. html += ' <span class="wr_id">'+item.maskingCustId+'</span>';
  365. html += ' <span class="wr_date">'+item.regDt+'</span>';
  366. html += ' </div>';
  367. html += ' </a>';
  368. html += ' </div>';
  369. html += ' <div class="review_item">';
  370. html += ' <div class="item_prod">';
  371. html += ' <div class="item_state">';
  372. html += ' <a href="javascript:void(0)" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')" class="itemLink">';
  373. html += ' <div class="itemPic">';
  374. html += ' <img alt="" class="vLHTC pd_img" src="'+ goodsView +'/'+item.sysImgNm +'">';
  375. html += ' </div>';
  376. html += ' <div class="itemName">'+item.goodsNm+'</div>';
  377. html += ' <p class="itemPrice">'+item.currPrice.addComma()+'</p>';
  378. html += ' </a>';
  379. html += ' </div>';
  380. html += ' </div>';
  381. html += ' </div>';
  382. html += ' </div> ';
  383. });
  384. html += ' </div> ';
  385. html += ' </div>';
  386. html += '</div>';
  387. $("#G082_10").append(html);
  388. }
  389. if(image.length>0){
  390. var html = '';
  391. html += '<div class="cont_body"> ';
  392. html += ' <div class="mid_banner">';
  393. html += ' <div class="swiper-container">';
  394. html += ' <div class="swiper-wrapper">';
  395. for (var i = 0; i < image.length; i++) {
  396. html += ' <div class="swiper-slide">';
  397. if (image[i].linkOpenGb == 'M') {
  398. html += ' <a href="http://'+image[i].linkUrl+'" target="_self">><img alt="" src="'+ imgUrl + image[i].itemVal +'"></a>';
  399. }else{
  400. html += ' <a href="http://'+image[i].linkUrl+'" target="_blank">><img alt="" src="'+ imgUrl + image[i].itemVal +'"></a>';
  401. }
  402. html += ' </div>';
  403. }
  404. html += ' </div>';
  405. html += ' </div>';
  406. html += ' <div class="swiper-button-prev"></div>';
  407. html += ' <div class="swiper-button-next"></div>';
  408. html += ' <div class="swiper-pagination"></div>';
  409. html += ' </div>';
  410. html += '</div>';
  411. $("#G082_30").append(html);
  412. }
  413. if(goods1.length>0){
  414. var array = [];
  415. for (var j = 0; j < template.length; j++) {
  416. if(template[j].tmplType == 'G082_50'){
  417. array.push(template[j].planContSq);
  418. }
  419. }
  420. for (var i = 0; i < template.length; i++) {
  421. var html = '';
  422. if(template[i].tmplType == 'G082_50' && array[0] == template[i].planContSq && typeof array[0] != 'undefined') {
  423. html += '<div class="cont_head">';
  424. html += ' <div>';
  425. html += ' <h4>';
  426. if (template[i].linkUrl != null && template[i].linkUrl != '') { /* 링크 변경 예정 */
  427. if (template[i].linkOpenGb == 'M') { //본창
  428. html += ' <a href="http://'+template[i].linkUrl+'" target="_self">'+template[i].title+' <i class="ico_arrow"></i></a>';
  429. }else{
  430. html += ' <a href="http://'+template[i].linkUrl+'" target="_blank">'+template[i].title+' <i class="ico_arrow"></i></a>';
  431. }
  432. }else{
  433. html += ' <a href="javascript:void(0)">'+template[i].title+'</a>';
  434. }
  435. html += ' </h4>';
  436. html += ' </div>';
  437. html += '</div>';
  438. html += '<div class="cont_body">';
  439. html += ' <div class="dp_listItems_cont type1">';
  440. html += ' <ul>';
  441. $.each(goods1, function(idx, item) {
  442. if (item.planContSq == template[i].planContSq) {
  443. html += ' <li>';
  444. html += ' <div class="dp_listItems">';
  445. html += ' <div class="dp_listItems_img">';
  446. html += ' <img src="'+ goodsView +'/'+item.sysImgNm +'" alt="">';
  447. html += ' </div>';
  448. html += ' <div class="dp_listItems_info">';
  449. html += ' <div class="dp_listItems_brand">'+item.brandGroupNm+'</div>';
  450. html += ' <div class="dp_listItems_name">'+item.goodsNm+'<br></div>';
  451. html += ' <div class="dp_listItems_price">';
  452. html += ' <span class="price">'+item.currPrice.addComma()+'</span>';
  453. if (item.currPrice != item.listPrice) {
  454. html += ' <del>'+item.listPrice.addComma()+'</del>';
  455. html += ' <span class="percent">'+Math.floor(item.dcRate)+'%</span>';
  456. }
  457. html += ' </div>';
  458. if(item.goodsTnm != null){
  459. html += ' <div class="itemComment">'+item.goodsTnm+'</div>';
  460. }
  461. html += ' <div class="ui_row">';
  462. html += ' <button type="button" class="btn btn_default" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')"><span>자세히 보기</span></button>';
  463. html += ' </div>';
  464. html += ' </div>';
  465. html += ' </div>';
  466. html += ' </li>';
  467. }
  468. });
  469. html += ' </ul>';
  470. html += ' </div> ';
  471. html += '</div>';
  472. $("#G082_50" +array[0]).append(html);
  473. }
  474. if($("#G082_50" +template[i].planContSq).length){
  475. array.shift();
  476. }
  477. }
  478. }
  479. if(goods2.length>0){
  480. var array = [];
  481. for (var j = 0; j < template.length; j++) {
  482. if(template[j].tmplType == 'G082_51'){
  483. array.push(template[j].planContSq);
  484. }
  485. }
  486. for (var i = 0; i < template.length; i++) {
  487. var html = '';
  488. if(template[i].tmplType == 'G082_51' && array[0] == template[i].planContSq && typeof array[0] != 'undefined'){
  489. html += '<div class="cont_head">';
  490. html += ' <div>';
  491. html += ' <h4>';
  492. if (template[i].linkUrl != null && template[i].linkUrl != '') { /* 링크 변경 예정 */
  493. if (template[i].linkOpenGb == 'M') { //본창
  494. html += ' <a href="http://'+template[i].linkUrl+'" target="_self">'+template[i].title+' <i class="ico_arrow"></i></a>';
  495. }else{
  496. html += ' <a href="http://'+template[i].linkUrl+'" target="_blank">'+template[i].title+' <i class="ico_arrow"></i></a>';
  497. }
  498. }else{
  499. html+=' <a href="javascript:void(0)">'+template[i].title+'</a>';
  500. }
  501. html += ' </h4>';
  502. html += ' </div>';
  503. html += '</div>';
  504. html += '<div class="cont_body">';
  505. html += ' <div class="dp_listItems_cont type2">';
  506. html += ' <div class="swiper-container">';
  507. html += ' <div class="swiper-wrapper">';
  508. $.each(goods2, function(idx, item) {
  509. if (item.planContSq == template[i].planContSq) {
  510. html += ' <div class="swiper-slide">';
  511. html += ' <div class="item_prod">';
  512. html += ' <div class="item_state">';
  513. html += ' <a onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')" class="itemLink">';
  514. html += ' <div class="itemPic">';
  515. html += ' <img alt="BLUE-a" class=" vLHTC pd_img" src="'+ goodsView +'/'+item.sysImgNm +'">';
  516. html += ' </div>';
  517. html += ' <p class="itemBrand">'+item.brandGroupNm+'</p>';
  518. html += ' <div class="itemName">'+item.goodsNm+'</div>';
  519. html += ' <p class="itemPrice">'+item.currPrice.addComma();
  520. if (item.currPrice != item.listPrice) {
  521. html+=' <span class="itemPrice_original">'+item.listPrice.addComma()+'</span>';
  522. html+=' <span class=" itemPercent">'+Math.floor(item.dcRate)+'%</span>';
  523. }
  524. html += ' </p>';
  525. if(item.goodsTnm != null){
  526. html += ' <div class="itemComment">'+item.goodsTnm+'</div>';
  527. }
  528. html += ' </a>';
  529. html += ' </div>';
  530. html += ' </div>';
  531. html += ' </div> ';
  532. }
  533. });
  534. html += ' </div>';
  535. html += ' </div>';
  536. html += ' <div class="swiper-button-prev"></div>';
  537. html += ' <div class="swiper-button-next"></div>';
  538. html += ' <div class="swiper-pagination"></div>';
  539. html += ' </div> ';
  540. html += '</div>';
  541. $("#G082_51" +array[0]).append(html);
  542. }
  543. if($("#G082_51" +template[i].planContSq).length){
  544. array.shift();
  545. }
  546. }
  547. }
  548. if(goods4.length>0){
  549. var array = [];
  550. for (var j = 0; j < template.length; j++) {
  551. if(template[j].tmplType == 'G082_52'){
  552. array.push(template[j].planContSq);
  553. }
  554. }
  555. for (var i = 0; i < template.length; i++) {
  556. var html = '';
  557. if(template[i].tmplType == 'G082_52' && array[0] == template[i].planContSq && typeof array[0] != 'undefined'){
  558. html += '<div class="cont_head">';
  559. html += '<div>';
  560. html += ' <h4>';
  561. if (template[i].linkUrl != null && template[i].linkUrl != '') { /* 링크 변경 예정 */
  562. if (template[i].linkOpenGb == "M") { //본창
  563. html += ' <a href="http://'+template[i].linkUrl+'" target="_self">'+template[i].title+' <i class="ico_arrow"></i></a>';
  564. }else{
  565. html += ' <a href="http://'+template[i].linkUrl+'" target="_blank">'+template[i].title+' <i class="ico_arrow"></i></a>';
  566. }
  567. }else{
  568. html+=' <a href="javascript:void(0)">'+template[i].title+'</a>';
  569. }
  570. html += ' </h4>';
  571. html += ' </div>';
  572. html += '</div>';
  573. html += '<div class="cont_body">';
  574. html += ' <!-- 상품 노출 4열 type3 -->';
  575. html += ' <div class="dp_listItems_cont type3">';
  576. html += ' <div class="swiper-container">';
  577. html += ' <div class="swiper-wrapper">';
  578. $.each(goods4, function(idx, item) {
  579. if (item.planContSq == template[i].planContSq) {
  580. html += ' <div class="swiper-slide">';
  581. html += ' <div class="item_prod">';
  582. html += ' <div class="item_state">';
  583. html += ' <a onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\')" class="itemLink">';
  584. html += ' <div class="itemPic">';
  585. html += ' <img alt="BLUE-a" class=" vLHTC pd_img" src="'+ goodsView +'/'+item.sysImgNm +'">';
  586. html += ' </div>';
  587. html += ' <p class="itemBrand">'+item.brandGroupNm+'</p>';
  588. html += ' <div class="itemName">'+item.goodsNm+'</div>';
  589. html += ' <p class="itemPrice">'+item.currPrice.addComma();
  590. if (item.currPrice != item.listPrice) {
  591. html+=' <span class="itemPrice_original">'+item.listPrice.addComma()+'</span>';
  592. html+=' <span class=" itemPercent">'+Math.floor(item.dcRate)+'%</span>';
  593. }
  594. html += ' </p>';
  595. if(item.goodsTnm != null){
  596. html += ' <div class="itemComment">'+item.goodsTnm+'</div>';
  597. }
  598. html += ' </a>';
  599. html += ' </div>';
  600. html += ' </div>';
  601. html += ' </div>';
  602. }
  603. });
  604. html += ' </div>';
  605. html += ' </div>';
  606. html += ' <div class="swiper-button-prev"></div>';
  607. html += ' <div class="swiper-button-next"></div>';
  608. html += ' <div class="swiper-pagination"></div>';
  609. html += ' </div> ';
  610. html += '</div>';
  611. $("#G082_52" +array[0]).append(html);
  612. }
  613. if($("#G082_52" +template[i].planContSq).length){
  614. array.shift();
  615. }
  616. }
  617. }
  618. if(coupon.length>0){
  619. var html = '';
  620. html += '<div class="cont_head">';
  621. html += ' <div>';
  622. html += ' <h4>'+coupon[0].title+'</h4>';
  623. html += ' </div>';
  624. html += '</div>';
  625. html += '<div class="cont_body">';
  626. html += ' <div class="coupon_list">';
  627. html += ' <ul>';
  628. $.each(coupon, function(idx, item) {
  629. html += ' <li>';
  630. html += ' <div class="coupon">';
  631. html += ' <div>';
  632. html += ' <p class="cp_name">'+item.cpnNm+'</p>';
  633. html += ' <p class="cp_cont">';
  634. html += ' <span><em>'+item.dcVal+'</em>'+item.dcWay+'</span>';
  635. html += ' </p>';
  636. html += ' <p class="cp_condition">'+item.useCondition;
  637. html += ' <span>'+item.issueCondition+'</span>';
  638. html += ' </p>';
  639. html += ' </div>';
  640. if (item.couponStat == '쿠폰받기') {
  641. html += ' <button type="button" id="coupon_'+item.cpnId+'" class="btn btn_dark btn_block btn_coupon_down" onclick="fnPlanCouponDown('+item.cpnId+')">'; /* btn_coupon_done */
  642. html += ' <span>쿠폰받기</span>'; /* 받기완료 */
  643. html += ' </button>';
  644. }else{
  645. html += ' <button type="button"';
  646. html += ' class="btn btn_dark btn_block btn_coupon_done" disabled>';
  647. html += ' <span>받기완료</span>';
  648. html += ' </button>';
  649. }
  650. html += ' </div>';
  651. html += ' <button type="button" class="btn_underline" id="btn_couponInfo_pop" onclick="useInfoCoupon('+item.cpnId+')">';
  652. html += ' <span>사용안내</span>';
  653. html += ' </button>';
  654. html += ' </li>';
  655. });
  656. html += ' </ul>';
  657. html += ' </div>';
  658. html += '</div>';
  659. html += '<div class="content dp_announce line"> ';
  660. html += ' <div class="cont_head"> ';
  661. html += ' <div> ';
  662. html += ' <h4>유의사항</h4> ';
  663. html += ' </div> ';
  664. html += ' </div> ';
  665. html += ' <div class="cont_body"> ';
  666. html += ' <div class="announce_txt"> ';
  667. html += ' <div class="note_txt"> ';
  668. html += ' <img src="/images/pc/ico_content_find.png" alt="유의사항"> ';
  669. html += ' <p>유의사항</p> ';
  670. html += ' </div> ';
  671. html += ' <div class="announce_list"> ';
  672. html += coupon[0].note;
  673. html += ' </div> ';
  674. html += ' </div> ';
  675. html += ' </div> ';
  676. html += '</div> ';
  677. $("#G082_20").append(html);
  678. }
  679. //사용안내 모달
  680. var useInfoCoupon = function (id) {
  681. var data = {cpnId : id};
  682. var jsonData = JSON.stringify(data);
  683. $.ajax( {
  684. type : "POST",
  685. url : '/planning/coupon/detailPop',
  686. data : jsonData,
  687. contentType: 'application/json',
  688. dataType : 'html',
  689. success : function(result) {
  690. if (result != null) {
  691. $("#couponInfoPop").html(result);
  692. $("#couponInfoPop").modal("show");
  693. }
  694. }
  695. });
  696. return false;
  697. }
  698. //쿠폰 다운로드
  699. var fnPlanCouponDown = function(obj){
  700. if (!cfCheckLogin()) {
  701. cfnGoToPage(_PAGE_LOGIN);
  702. return false;
  703. }
  704. let cpnId = obj;
  705. gagajf.ajaxJsonSubmit(_PAGE_PLANNING_CPN_DOWNLOAD, JSON.stringify({cpnId: cpnId}), fnPlanCouponCallBack);
  706. }
  707. // 쿠폰다운로드 콜백
  708. var fnPlanCouponCallBack = function(result){
  709. $('#coupon_'+ result.cpnId).html('<span>받기완료</span>');
  710. $('#coupon_'+ result.cpnId).attr('disabled', true);
  711. }
  712. // 설문조사 참여 버튼 클릭
  713. var fnJoinConfirm = function () {
  714. let planSq = plan.planSq;
  715. cfnGoToPollDetail(planSq);
  716. }
  717. // 댓글 입력 확인
  718. var fnTextConfirm = function() {
  719. //로그인 확인
  720. if (!cfCheckLogin()) {
  721. mcxDialog.alert("로그인 후 참여 가능합니다.");
  722. $("#replyText").val('');
  723. return false;
  724. }
  725. }
  726. var ajaxReplyList = function () {
  727. gagaPaging.init('searchForm', fnSearchCallback, 'paging', 10);
  728. gagaPaging.load(1);
  729. }
  730. var fnSearchCallback = function (result) {
  731. $("#replyList").html('');
  732. if (result!=null) {
  733. var html = '';
  734. html += '<div class="cmt_list_tit">';
  735. html += ' <strong>댓글</strong><span class="cnt">('+result.replyCount.addComma()+')</span>';
  736. html += '</div>';
  737. if (result.replyList.length>0) {
  738. html += '<ul class="cmt_list">';
  739. $.each(result.replyList, function (idx, item) {
  740. html += ' <li>';
  741. html += ' <div class="cmt_top">';
  742. html += ' <span class="writer">'+item.maskingCustId+'</span>';
  743. html += ' <span class="date">'+item.entryDt+'</span>';
  744. html += ' </div>';
  745. html += ' <div class="cmt_cont">';
  746. html += ' <div class="img_wrap clear" onclick="fnImgAttach(this)">';
  747. if (result.replyAttachList.length>0) {
  748. for (var i = 0; i < result.replyAttachList.length; i++) {
  749. if(result.replyAttachList[i].planEntrySq == item.planEntrySq){
  750. html += ' <span class="pics"><img class="picsThumbs" src="'+ imgUrl +'/'+result.replyAttachList[i].sysFileNm +'"></span>';
  751. }
  752. }
  753. }
  754. html += ' </div>';
  755. html += ' <p>'+escapeHtml(item.entryVal1)+'</p>';
  756. if (item.entryCustNo == result.custNo) {
  757. html += ' <button class="btn btn_default btn_del" value="'+item.planEntrySq+'" onclick="fnDelReply(this.value)"><span>삭제</span></button>';
  758. }
  759. html += ' </div>';
  760. html += ' </li>';
  761. });
  762. html += '</ul>';
  763. }else{
  764. html += '<div class="nodata" id="replyNoData"> ';
  765. html += ' <div class="txt_box"> ';
  766. html += ' <p> ';
  767. html += ' 등록된 댓글이 없습니다. ';
  768. html += ' </p> ';
  769. html += ' </div> ';
  770. html += '</div> ';
  771. }
  772. }
  773. $("#replyList").append(html);
  774. // Create pagination
  775. gagaPaging.createPagination(result.paging.pageable);
  776. }
  777. function escapeHtml(str) {
  778. var map = {
  779. '&': '&amp;',
  780. '<': '&lt;',
  781. '>': '&gt;',
  782. '"': '&quot;',
  783. "'": '&#039;'
  784. };
  785. return str.replace(/[&<>"']/g, function(m) { return map[m]; });
  786. }
  787. // 댓글 삭제
  788. var fnDelReply = function(obj) {
  789. data = {planEntrySq : obj};
  790. var jsonData = JSON.stringify(data);
  791. mcxDialog.confirm("댓글을 삭제 하시겠습니까?", {
  792. cancelBtnText : "취소",
  793. sureBtnText : "확인",
  794. sureBtnClick : function() {
  795. gagajf.ajaxJsonSubmit('/planning/reply/delete', jsonData,function() {
  796. ajaxReplyList();
  797. });
  798. }
  799. })
  800. }
  801. $('#fileAdd').on('change', function() { fnChooseFile(this); });
  802. var fnChooseFile = function(obj) {
  803. var picLength = $(".pics").length;
  804. // multiple 속성이 있으면 files에는 다수의 객체가 할당됨
  805. var file = obj.files[0];
  806. if (!gagajf.isNull(file.name)) {
  807. var extension = "\.(jpg|jpeg|png)$";
  808. if (!(new RegExp(extension, "i")).test(file.name)) {
  809. mcxDialog.alertC('이미지는 [jpg, jpeg, png] 파일만 가능합니다.', {
  810. sureBtnText: "확인",
  811. sureBtnClick: function() {
  812. //$(obj).parent('.imgUpload').find('.removes').trigger('click');
  813. $('.imgUpload').find('span').eq(0).remove();
  814. }
  815. });
  816. return false;
  817. }
  818. }
  819. // 이거 왜 안먹히지
  820. if (!gagajf.isNull(file.size) && Number(file.size) > (10 * 1000000)) {
  821. mcxDialog.alertC('이미지는 최대 10MB 이하 파일만 가능합니다.', {
  822. sureBtnText: "확인",
  823. sureBtnClick: function() {
  824. $(obj).parent('.imgUpload').find('.removes').trigger('click');
  825. }
  826. });
  827. return false;
  828. }
  829. // 파일 업로드
  830. gagajf.ajaxFileUpload('/common/file/upload?subDir=/reply'
  831. , file
  832. , function(result) {
  833. // 업로드한 파일명 설정
  834. $(".pics").children().eq(0).append("<input type='hidden' name='orgFileNm' id='orgFileNm"+(picLength+1)+"' value='"+result.oldFileName+"'>");
  835. $(".pics").children().eq(0).append("<input type='hidden' name='sysFileNm' id='sysFileNm"+(picLength+1)+"' value='"+result.newFileName+"'>");
  836. }
  837. );
  838. }
  839. // 댓글 등록 버튼 클릭 시
  840. var fnReplySave = function() {
  841. var fileLength = $("input[name='sysFileNm']").length;
  842. var content = $('#replyText').val();
  843. if (content.length < 2){
  844. mcxDialog.alert("최소 2자 이상 입력해주세요.");
  845. return;
  846. }
  847. var yokList = new Array('<script>','script','D쥐고','D지고','jonna','jot같','mi쳤','ssㅑ','tlqkf','wlfkf','같은새끼','같은새끼','개새끼','개같','개넷','개년','개념빠가','개독','개련','개련','개마이','개부랄','개삼성','개새기','개새끼','개섹','개셈','개소리','개쓰래기','개저씨','계새끼','골빈','골1빈','골빈','괘새끼','껒여','꺼지세요','꺼져요','로꺼져','로꺼져','로꺼.져','꺼.지','나빼썅','나쁜새끼','년놈','늬믜','늬미','니년','니믜','니미럴','닝기리','다꺼져','닥쳐라','닥치세','도라이','뒈져','뒤져버','디져라','디졌','디지고','디질','딴년','또라이','또라인','똘아이','ㅁㅊ','ㅁ친','맘충','보이루','망돌','머갈','먹.금','먹.끔','먹1금','먹금','먹끔','명존','믜칀','믜친','미:놈','미:놈','미1친','미놈','미시친발','미쳣네','미쳤나','미쳤니','미췬','미칀','미친새','미친~','미친개','미친새','미친색','미친ㅋ','미틴','및힌','별창','병1신','병1크','병맛','병신','병크','봊','븅신','빠큐','빡새끼','빻았','빻은','뻐규','뻐큐','뻑유','뻑큐','뻨큐','뼈큐','뽄새','뽄세','삐걱','ㅄ','ㅅ','ㅂ','ㅅ.ㅂ','ㅅ1ㅂ','ㅅ1발','ㅅㄲ네','ㅅㄲ들','ㅅ루','ㅅㅋ','ㅅㅡ루','사새끼','새.끼','새1끼','새1키','새77ㅣ','새끼라','새끼야','새퀴','새킈','새키','색희','색히','샊기','샊히','샹년','섀키','솔1친','솔친','쉬발','쉬버','쉬이바','쉬이이','쉬이이이','쉬펄','슈1발','슈레기','슈발','슈벌','슈우벌','슈ㅣ발','스.루','스벌','스죄','스타죄국','싑창','시1발','시미발친','시미친발','시바','시바류','시바시바','시바알','시바앙','시발','시방새','시벌탱','시볼탱','시부럴','시부렬','시부울','시뷰럴','시뷰렬','시빨','시새발끼','시이발','시친발미','시키가','시팔','시펄','십창','십팔','ㅆ1ㄺ','ㅆ1ㅂ','ㅆㄹㄱ','ㅆㄺ','ㅆㅂ','싸가지없','싸가지없','싸물어','쌉가','쌍년','쌍놈','쌔끼','썅','썌끼','쒸펄','쓰1레기','쓰래기같','쓰레기새','쓰레기새','쓰렉','씝창','씨1발','씨바라','씨바알','씨발','씨방새','씨버럼','씨벌','씨벌탱','씨볼탱','씨부럴','씨부렬','씨뷰럴','씨뷰렬','씨빠빠','씨빨','씨뻘','씨새발끼','씨이발','씨팔','씹귀','씹덕','씹못','씹뻐럴','씹새끼','씹쌔','씹창','씹치','씹팔','씹할','ㅇㅍㅊㅌ','아가리','아닥','아오ㅅㅂ','아오시바','아오ㅅㅂ','아오시바','애미','앰','앰창','얘쁘','얘쁜','얪','에라이퉤','에라이퉷','에라이퉤','에라이퉷','엠뷩신','엠븽신','엠빙신','엠생','엠창','엿같','엿이나','예.질','예1질','예질','옘병','외1퀴','외퀴','웅앵','웅엥','은년','은새끼','이새끼','이따위','이새끼','입털','입털','ㅈ.ㄴ','ㅈㄴ','ㅈㄹ','절라','정병','젖같','젗같','젼나','젼낰','졀라','졀리','졌같은','졏같','조낸','조온','조온나','족까','존나','존나','존','나','존.나','존1','존1나','존귀','존귘','존ㄴ나','존나','존낙','존내','졸라','좁밥','조센징','짱깨','짱개','짱꼴라','꼴라','착짱','죽짱','짱골라','좃','종나','좆','좆까','좇같','죠낸','죠온나','죤나','죤내','죵나','죶','죽어버려','죽여버리고','죽여버리고','죽여불고','죽여뿌고','중립충','줬같은','쥐랄','쥰나','쥰내','쥰니','쥰트','즤랄','지랄','지1랄','지1뢰','지껄이','지들이','지랄','지롤','지뢰','지인지조','짱깨','짱께','쪼녜','쪼다','착짱죽짱','섬숭이','쪽본','쪽1바리','쪽바리','쪽발','쫀맛','쫀1','쫀귀','쫀맛','쫂','쫓같','쬰잘','쬲','찝째끼','창년','창녀','창놈','창넘','처먹','凸','첫빠','쳐마','친년','친놈','친구년','친년','친노마','친놈','손놈','남미새','여미새','혐석','호로새끼','호로잡','화낭년','화냥년','후.려','후1려','후1빨','후려','후빨','ㅗ');
  848. if(yokList.indexOf(content)>=0){
  849. mcxDialog.alert("입력 불가한 내용을 포함하고 있습니다.");
  850. $('#replyText').val('');
  851. $('#cmt_cnt').text(0);
  852. return;
  853. }
  854. //파일관련 데이터 담기
  855. var multiReplyOrgFile = [];
  856. var multiReplySysFile = [];
  857. for (var i = 0; i < fileLength; i++) {
  858. multiReplyOrgFile.push($(".pics").eq(i).find('input[name="orgFileNm"]').val());
  859. multiReplySysFile.push($(".pics").eq(i).find('input[name="sysFileNm"]').val());
  860. }
  861. data = {entryVal1 : content,
  862. planSq : plan.planSq,
  863. multiReplyOrgFile : multiReplyOrgFile,
  864. multiReplySysFile : multiReplySysFile};
  865. var jsonData = JSON.stringify(data);
  866. mcxDialog.confirm("댓글을 등록 하시겠습니까?", {
  867. cancelBtnText : "취소",
  868. sureBtnText : "확인",
  869. sureBtnClick : function() {
  870. gagajf.ajaxJsonSubmit('/planning/reply/save', jsonData,function() {
  871. ajaxReplyList();
  872. $('#replyText').val('');
  873. $('.pics').remove();
  874. $('.fileAdd').show();
  875. //댓글 작성시 글자 카운트
  876. $('#cmt_cnt').text(0);
  877. });
  878. }
  879. })
  880. }
  881. var fnImgAttach = function (obj) {
  882. $("#thumbImgPop .swiper-wrapper").empty();
  883. //var popSlideIndex = $(obj).find('span').length -1;
  884. var popSlideIndex = 0;
  885. contactPopSwiper.slideTo(popSlideIndex);
  886. contactPopSwiper.update();
  887. var contactImglength = $(obj).find('span').length;
  888. var popImgHtml = "";
  889. for (i = 0; i < contactImglength; i++) {
  890. var contactImgSrc =$(obj).find('img').eq(i).attr('src');
  891. popImgHtml += "<div class='swiper-slide'><div class='pop_img' style='background-image:url("+ contactImgSrc +")'></div></div>";
  892. }
  893. $("#thumbImgPop .swiper-wrapper").append(popImgHtml);
  894. $('#thumbImgPop').modal("show");
  895. return false;
  896. }
  897. /* SLIDE - 댓글 이미지 팝업 */
  898. var contactPopSwiper = new Swiper('.thumb_img_pop .swiper-container', {
  899. navigation: {
  900. nextEl: '.thumb_img_pop .swiper-button-next',
  901. prevEl: '.thumb_img_pop .swiper-button-prev',
  902. },
  903. pagination: {
  904. el: '.thumb_img_pop .swiper-pagination',
  905. clickable: true,
  906. },
  907. observer:true,
  908. observeParents: true,
  909. });
  910. $(document).ready( function() {
  911. ajaxReplyList();
  912. //공유 버튼 토글
  913. $("button[data-name=openShare]").on("click", function(){
  914. $(this).toggleClass("on").next(".shareWrap").toggleClass("on");
  915. return false;
  916. });
  917. //영역밖 클릭으로 공유토글 닫기
  918. $("body").on('click', function(e) {
  919. if(!$(".shareWrap.on").parent().has(e.target).length) {
  920. $("button[data-name=openShare]").removeClass("on");
  921. $(".shareWrap").removeClass("on");
  922. };
  923. });
  924. $('.btn_copy').bind('click', function() {
  925. copyToClipboard();
  926. });
  927. //팝업 - 쿠폰사용안내
  928. $(document).on('click','#btn_couponInfo_pop',function(e){
  929. $("#couponInfoPop .modal-content").load("popup_couponInfo.html");
  930. $("#couponInfoPop").modal("show");
  931. return false;
  932. });
  933. $("#couponInfoPop_close").click(function() {
  934. $.modal.close();
  935. });
  936. //팝업 - 상품 베스트 리뷰 (detail)
  937. $(document).on('click','#btn_pdBestReview_pop, .area_rv_best .best_review a',function(e){
  938. $("#pdBestReviewPop .modal-content").load("pd_bestreviewdetail_pop.html");
  939. $("#pdBestReviewPop").modal("show");
  940. return false;
  941. });
  942. $("#pdBestReviewPop_close").click(function() {
  943. $.modal.close();
  944. });
  945. /* SLIDE - 상단 프로모션 배너 */
  946. var promotion_visual_slide = new Swiper ('.dp_detail_visual .promotion_visual.type2 .swiper-container', {
  947. loop: true,
  948. slidesPerView: 1,
  949. speed : 1500,
  950. navigation: {
  951. nextEl: '.promotion_visual.type2 .swiper-button-next',
  952. prevEl: '.promotion_visual.type2 .swiper-button-prev',
  953. },
  954. pagination: {
  955. el: '.promotion_visual.type2 .swiper-pagination',
  956. clickable: true,
  957. },
  958. });
  959. /* SLIDE - 중간 배너 */
  960. var mid_banner_slide = new Swiper ('.dp_mid_banner .mid_banner .swiper-container', {
  961. loop: true,
  962. slidesPerView: 1,
  963. speed : 1500,
  964. navigation: {
  965. nextEl: '.mid_banner .swiper-button-next',
  966. prevEl: '.mid_banner .swiper-button-prev',
  967. },
  968. pagination: {
  969. el: '.mid_banner .swiper-pagination',
  970. clickable: true,
  971. },
  972. });
  973. /* SLIDE - 대표상품 슬라이드 2열 상품 */
  974. var dp_listItems_slide1 = new Swiper ('.dp_listItems_cont.type2 .swiper-container', {
  975. loop: false,
  976. slidesPerView: 2,
  977. slidesPerGroup: 2,
  978. spaceBetween: 20,
  979. speed : 800,
  980. navigation: {
  981. nextEl: '.dp_listItems_cont.type2 .swiper-button-next',
  982. prevEl: '.dp_listItems_cont.type2 .swiper-button-prev',
  983. },
  984. pagination: {
  985. el: '.dp_listItems_cont.type2 .swiper-pagination',
  986. clickable: true,
  987. },
  988. });
  989. /* SLIDE - 대표상품 슬라이드 4열 상품 */
  990. var dp_listItems_slide2 = new Swiper ('.dp_listItems_cont.type3 .swiper-container', {
  991. loop: false,
  992. slidesPerView: 4,
  993. slidesPerGroup: 4,
  994. spaceBetween: 20,
  995. speed : 800,
  996. navigation: {
  997. nextEl: '.dp_listItems_cont.type3 .swiper-button-next',
  998. prevEl: '.dp_listItems_cont.type3 .swiper-button-prev',
  999. },
  1000. pagination: {
  1001. el: '.dp_listItems_cont.type3 .swiper-pagination',
  1002. clickable: true,
  1003. },
  1004. });
  1005. /* SLIDE - 다른 기획전,이벤트 보기 */
  1006. var other_slide_slide = new Swiper ('.other_promotion_slide .swiper-container', {
  1007. slidesPerView: 5,
  1008. spaceBetween: 20,
  1009. navigation: {
  1010. nextEl: '.other_promotion_slide .swiper-button-next',
  1011. prevEl: '.other_promotion_slide .swiper-button-prev',
  1012. },
  1013. });
  1014. // 첨부파일 갯수제한
  1015. $('.imgUpload .fileAdd').click(function(){
  1016. if (!cfCheckLogin()) {
  1017. mcxDialog.alert("로그인 후 참여 가능합니다.");
  1018. $("#replyText").val('');
  1019. return false;
  1020. }
  1021. var imgFiles=$('.imgUpload .pics');
  1022. var maxFileLength = 10; /* 최대 파일 갯수를 입력해 주세요 */
  1023. if (imgFiles.length >= maxFileLength) {
  1024. mcxDialog.alert('이미지는 최대' + maxFileLength +'장 까지 첨부 가능합니다.');
  1025. $('#fileAdd').attr("disabled",true);
  1026. } else if(imgFiles.length < maxFileLength){
  1027. $('#fileAdd').removeAttr("disabled");
  1028. }
  1029. });
  1030. //댓글 작성시 글자 카운트
  1031. $('.cmt_ans').keyup(function (e){
  1032. var content = $(this).val();
  1033. $('#cmt_cnt').html(content.length);
  1034. if (content.length > 500){
  1035. mcxDialog.alert("최대 500자까지 입력 가능합니다.");
  1036. $(this).val(content.substring(0, 500));
  1037. $('#cmt_cnt').html("500");
  1038. }
  1039. });
  1040. });
  1041. </script>
  1042. </th:block>
  1043. </body>
  1044. </html>