GoodsDealDescFormMob.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <!--
  5. *******************************************************************************
  6. * @source : GoodsDetailDescFormMob.html
  7. * @desc : 딜 구상상품상세 Page
  8. *============================================================================
  9. * STYLE24
  10. * Copyright(C) 2020 TSIT, All rights reserved.
  11. *============================================================================
  12. * VER DATE AUTHOR DESCRIPTION
  13. * === =========== ========== =============================================
  14. * 1.0 2021.04.19 eskim 최초 작성
  15. *******************************************************************************
  16. -->
  17. <div class="content pd_descrp" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
  18. <div class="cont_head">
  19. <h3 class="sr-only">상품상세정보</h3>
  20. </div>
  21. <div class="cont_body on">
  22. <!-- 상품설명 노출 -->
  23. <div class="descrp_box" th:if="${goodsInfo.tobeFormYn == 'Y'}">
  24. <div class="desc_simple"> <!-- 상품 간략설명-->
  25. <span class="tit_desc" th:if="${goodsInfo.goodsTitle != null and !goodsInfo.goodsTitle.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitle))}">사이드 밴딩으로 편안한 만능 슬랙스!</span>
  26. <p class="ptxt01"th:if="${goodsInfo.goodsTitleDesc}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTitleDesc))}">
  27. 슬림핏에 사이드 밴딩으로 편안함을 더해준 슬랙스입니다.
  28. </p>
  29. </div>
  30. <div class="desc_character" th:if="${goodsInfo.goodsSpecialDesc != null and !goodsInfo.goodsSpecialDesc.empty}"> <!-- 상품특징 -->
  31. <span class="tit_desc">상품특징</span>
  32. <p class="ptxt01" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsSpecialDesc))}">
  33. - 지퍼플러 장식을 더해 완성도를 높여줌
  34. </p>
  35. </div>
  36. </div>
  37. <!-- //상품설명 노출 -->
  38. <!-- 관리자 에디터입력 내용 노출 -->
  39. <div class="mdhtml_box">
  40. <th:block th:if="${goodsNoticeList != null and !goodsNoticeList.empty}" >
  41. <th:block th:each="goodsNotice, status : ${goodsNoticeList}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsNotice.noticeContent))}"></th:block >
  42. </th:block>
  43. <!-- 관리자 에디터입력 내용 공지 html -->
  44. <th:block th:each="goodsVideo, status : ${goodsVideoList}">
  45. <div class="movblock">
  46. <th:block th:if="${goodsVideo.videoGb == 'Y'}">
  47. <iframe th:src="${'https://www.youtube.com/embed/'+goodsVideo.kmcKey+'?rel=0'}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  48. </th:block>
  49. <th:block th:unless="${goodsVideo.videoGb == 'Y'}">
  50. </th:block>
  51. </div>
  52. </th:block>
  53. <!-- 공통상품베너 -->
  54. <th:block th:if="${goodsBannerList != null and !goodsBannerList.empty}">
  55. <th:block th:each="goodsBanner, status : ${goodsBannerList}" >
  56. <th:block th:if="${goodsBanner.strVar1 != null and not #strings.equals(goodsBanner.strVar1, '#')}">
  57. <a th:href="${goodsBanner.strVar1}" target="_blank">
  58. <img th:src="${imgUrl+goodsBanner.imgPath1}" alt="">
  59. </a>
  60. </th:block>
  61. <th:block th:unless="${goodsBanner.strVar1 != null and not #strings.equals(goodsBanner.strVar1, '#')}">
  62. <img th:src="${imgUrl+goodsBanner.imgPath1}" alt="">
  63. </th:block>
  64. </th:block>
  65. </th:block>
  66. <!-- 관리자 에디터입력 내용 노출 상단 html -->
  67. <th:block th:if="${goodsInfo.goodsTopDesc != null and !goodsInfo.goodsTopDesc.empty }" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsTopDesc))}"></th:block >
  68. <th:block th:if="${goodsInfo.tobeFormYn == 'N' and goodsInfo.goodsDesc != null and !goodsInfo.goodsDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDesc))}"></th:block>
  69. </div>
  70. <th:block th:if="${goodsInfo.tobeFormYn == 'Y'}">
  71. <!-- 착용컷 노출 -->
  72. <div class="view_outfit_box" th:if="${#strings.contains(goodsImgList,'_C1')
  73. or #strings.contains(goodsImgList,'_C2')
  74. or #strings.contains(goodsImgList,'_C3')
  75. or #strings.contains(goodsImgList,'_C4')
  76. or #strings.contains(goodsImgList,'_C5')}">
  77. <span class="tit_view">OUTFIT VIEW</span>
  78. <span class="model_info">(모델정보 : 185cm / 78kg / XL 착용)</span>
  79. <div class="view">
  80. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_C1')
  81. or #strings.contains(goodsImg.sysImgNm,'_C2')
  82. or #strings.contains(goodsImg.sysImgNm,'_C3')
  83. or #strings.contains(goodsImg.sysImgNm,'_C4')
  84. or #strings.contains(goodsImg.sysImgNm,'_C5')}">
  85. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=360'}" alt="">
  86. </th:block>
  87. </div>
  88. </div>
  89. <!-- //착용컷 노출 -->
  90. <!-- 상품컷 노출 -->
  91. <div class="view_detail_box" th:if="${#strings.contains(goodsImgList,'_01') or #strings.contains(goodsImgList,'_02')
  92. or #strings.contains(goodsImgList,'_D1') or #strings.contains(goodsImgList,'_D2')
  93. or #strings.contains(goodsImgList,'_D3') or #strings.contains(goodsImgList,'_D4')
  94. or #strings.contains(goodsImgList,'_D5') or #strings.contains(goodsImgList,'_D6')
  95. or #strings.contains(goodsImgList,'_D7') or #strings.contains(goodsImgList,'_D8')
  96. or #strings.contains(goodsImgList,'_D9') or #strings.contains(goodsImgList,'_D10')
  97. or #strings.contains(goodsImgList,'_D11') or #strings.contains(goodsImgList,'_D12')
  98. or #strings.contains(goodsImgList,'_D13') or #strings.contains(goodsImgList,'_D14')
  99. or #strings.contains(goodsImgList,'_D15') or #strings.contains(goodsImgList,'_D16')
  100. or #strings.contains(goodsImgList,'_D17') or #strings.contains(goodsImgList,'_D18')
  101. or #strings.contains(goodsImgList,'_D19') or #strings.contains(goodsImgList,'_D20')}">
  102. <span class="tit_view">PRODUCT VIEW</span>
  103. <div class="view">
  104. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImgList,'_01') or #strings.contains(goodsImgList,'_02')
  105. or #strings.contains(goodsImgList,'_D1') or #strings.contains(goodsImgList,'_D2')
  106. or #strings.contains(goodsImgList,'_D3') or #strings.contains(goodsImgList,'_D4')
  107. or #strings.contains(goodsImgList,'_D5') or #strings.contains(goodsImgList,'_D6')
  108. or #strings.contains(goodsImgList,'_D7') or #strings.contains(goodsImgList,'_D8')
  109. or #strings.contains(goodsImgList,'_D9') or #strings.contains(goodsImgList,'_D10')
  110. or #strings.contains(goodsImgList,'_D11') or #strings.contains(goodsImgList,'_D12')
  111. or #strings.contains(goodsImgList,'_D13') or #strings.contains(goodsImgList,'_D14')
  112. or #strings.contains(goodsImgList,'_D15') or #strings.contains(goodsImgList,'_D16')
  113. or #strings.contains(goodsImgList,'_D17') or #strings.contains(goodsImgList,'_D18')
  114. or #strings.contains(goodsImgList,'_D19') or #strings.contains(goodsImgList,'_D20')}">
  115. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=360'}" alt="">
  116. </th:block>
  117. </div>
  118. </div>
  119. <!-- //상품컷 노출 -->
  120. <!-- 원단 노출 -->
  121. <div class="view_fabric_box" th:if="${#strings.contains(goodsImgList,'_F1')}">
  122. <span class="tit_view">FABRIC</span>
  123. <div class="view">
  124. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_F1')}">
  125. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  126. </th:block>
  127. </div>
  128. </div>
  129. <!-- //원단 노출 -->
  130. <!-- 라벨 노출 -->
  131. <div class="view_label_box" th:if="${#strings.contains(goodsImgList,'_L1')
  132. or #strings.contains(goodsImgList,'_L2')}">
  133. <span class="tit_view">LABEL INFO</span>
  134. <div class="view">
  135. <span>
  136. <th:block th:each="goodsImg, status : ${goodsImgList}" th:if="${#strings.contains(goodsImg.sysImgNm,'_L1')
  137. or #strings.contains(goodsImg.sysImgNm,'_L2')}">
  138. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm}" alt="">
  139. </th:block>
  140. </span>
  141. </div>
  142. </div>
  143. <!-- //네이밍룰 안맞는 이미지 노출-->
  144. <div class="view_detail_box" th:if="${not #strings.contains(goodsImgList,'_01')}">
  145. <div class="view">
  146. <th:block th:each="goodsImg, status : ${goodsImgList}" >
  147. <img th:src="${imgGoodsUrl+'/'+goodsImg.sysImgNm+'?RS=720'}" alt="">
  148. </th:block>
  149. </div>
  150. </div>
  151. </th:block>
  152. <!-- 관리자 에디터입력 내용 노출 하다단 html -->
  153. <div class="mdhtml_box" th:if="${goodsInfo.goodsDownDesc != null and !goodsInfo.goodsDownDesc.empty}" th:utext="${#strings.unescapeJava(#strings.escapeJava(goodsInfo.goodsDownDesc))}"></div>
  154. <!-- 브랜드 노출 -->
  155. <div class="brand_box">
  156. <p class="name" th:text="${goodsInfo.brandGroupNm}">TBJ 티비제이</p>
  157. <a href="javascript:void(0);" class="btn btn_default" th:onclick="cfnGoToBrandMain([[${goodsInfo.brandGroupNo}]])" ><span>브랜드 홈 바로가기</span></a>
  158. </div>
  159. <!-- //브랜드 노출 -->
  160. <!-- 상품필수정보 노출 -->
  161. <div class="required_box">
  162. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_N' and goodsNotiList != null and !goodsNotiList.empty}">
  163. <span class="title">상품고시정보</span>
  164. <div class="tbl type1">
  165. <table>
  166. <tbody>
  167. <tr th:each="goodsNoti, status : ${goodsNotiList}" >
  168. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  169. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  170. </tr>
  171. </tbody>
  172. </table>
  173. </div>
  174. </div>
  175. <div class="area_infotbl" th:if="${goodsInfo.goodsType == 'G056_S' and goodsComposeList != null and !goodsComposeList.empty}">
  176. <span class="title">상품고시정보</span>
  177. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  178. <div class="tbl type1">
  179. <table>
  180. <tbody>
  181. <tr th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" >
  182. <th th:text="${goodsNoti.niItemNm}">스타일</th>
  183. <td th:text="${goodsNoti.niContent}">F94U-MD01XA60F0</td>
  184. </tr>
  185. </tbody>
  186. </table>
  187. </div>
  188. </th:block>
  189. </div>
  190. <th:block th:if="${goodsSafeNo != null}" >
  191. <th:block th:if="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 상세별도표시 -->
  192. <div class="area_kcl no-mark">
  193. <div>
  194. <p class="tit normal"><th:block th:if="${goodsSafeNo.certFormNm}" th:text="${goodsSafeNo.certFormNm + '/'}"></th:block> 제품 상세정보 내 별도 표기</p>
  195. <p class="normal">제품 상세정보 내 표기되어 있습니다. 상품 정보를 확인해주세요.</p>
  196. </div>
  197. </div>
  198. </th:block>
  199. <th:block th:unless="${goodsSafeNo.certTargetGb == 'G083_3'}" > <!-- 인증 -->
  200. <th:block th:if="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 -->
  201. <div class="area_kcl">
  202. <div><i class="ico ico_kcl"></i></div>
  203. <div>
  204. <p class="tit normal"><th:block th:text="${goodsSafeNo.certFormNm}"></th:block> / 공급자적합성확인</p>
  205. <p class="normal">공급자 적합성 확인 품목으로 국가통합인증을 필함</p>
  206. </div>
  207. </div>
  208. </th:block>
  209. <th:block th:unless="${goodsSafeNo.certType == 'G081_3'}" > <!-- 공급자적합성 외 -->
  210. <div class="area_kcl" >
  211. <div><i class="ico ico_kcl"></i></div>
  212. <div>
  213. <th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  214. <p class="tit normal" th:text="${goodsSafeNo.certDiv +' '+goodsSafeNo.certTypeNm + ' / ' + goodsSafeNo.certOrganName}">어린이제품 안전인증 / 한국건설생활시험연구원(KCL)</p>
  215. </th:block>
  216. <th:block th:unless="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  217. <p class="tit normal" th:text="${goodsSafeNo.certFormNm + ' '+goodsSafeNo.certTypeNm}"></p>
  218. </th:block>
  219. <p class="normal" >
  220. <th:block th:if="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  221. <span>인증번호:</span> <a class="num" th:href="@{http://www.safetykorea.kr/search/searchPop(certNum=${goodsSafeNo.certNum})}" target="_blank" th:text="${goodsSafeNo.certNum}">CB123A123-1234</a>
  222. </th:block>
  223. <th:block th:uless="${goodsSafeNo.certFormGb != 'G084_4' and goodsSafeNo.certFormGb != 'G084_5' }">
  224. <span>인증번호:</span> <th:block th:text="${goodsSafeNo.certNum}">CB123A123-1234</th:block>
  225. </th:block>
  226. </p>
  227. </div>
  228. </div>
  229. </th:block>
  230. </th:block>
  231. <p class="t_info dot_info mt10">
  232. 해당 인증정보는 판매자가 등록한 것으로 등록정보에 대한 일체의 책임은 판매자에게 있습니다.
  233. </p>
  234. </th:block>
  235. <div class="area_infotbl">
  236. <span class="title">상품기본정보</span>
  237. <th:block th:if="${goodsInfo.goodsType == 'G056_N'} ">
  238. <div class="tbl type1">
  239. <table>
  240. <tbody>
  241. <tr>
  242. <th>상품코드</th>
  243. <td th:text="${goodsInfo.goodsCd}">14443216</td>
  244. </tr>
  245. <tr>
  246. <th>상품구분</th>
  247. <td th:text="${goodsInfo.goodsGbNm}">병행수입</td>
  248. </tr>
  249. <tr>
  250. <th>브랜드</th>
  251. <td th:text="${goodsInfo.brandGroupNm}">TBJ</td>
  252. </tr>
  253. <tr>
  254. <th>상품명</th>
  255. <td th:text="${goodsInfo.goodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
  256. </tr>
  257. <th:block th:if="${goodsNotiList != null and !goodsNotiList.empty}">
  258. <th:block th:each="goodsNoti, status : ${goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
  259. <tr>
  260. <th th:text="${goodsNoti.niItemNm}">제조사</th>
  261. <td th:text="${goodsNoti.niContent}"></td>
  262. </tr>
  263. </th:block>
  264. </th:block>
  265. <tr>
  266. <th>제조국</th>
  267. <td th:text="${goodsInfo.originNm}">베트남</td>
  268. </tr>
  269. </tbody>
  270. </table>
  271. </div>
  272. </th:block>
  273. <th:block th:unless="${goodsInfo.goodsType == 'G056_N'} ">
  274. <th:block th:if="${goodsComposeList != null and !goodsComposeList.empty}">
  275. <th:block th:each="goodsCompose, status : ${goodsComposeList}">
  276. <div class="tbl type1">
  277. <table>
  278. <tbody>
  279. <tr>
  280. <th>상품코드</th>
  281. <td th:text="${goodsCompose.compsGoodsCd}">14443216</td>
  282. </tr>
  283. <tr>
  284. <th>상품구분</th>
  285. <td th:text="${goodsCompose.goodsGbNm}">병행수입</td>
  286. </tr>
  287. <tr>
  288. <th>브랜드</th>
  289. <td th:text="${goodsCompose.brandGroupNm}">TBJ</td>
  290. </tr>
  291. <tr>
  292. <th>상품명</th>
  293. <td th:text="${goodsCompose.compsGoodsNm}">남성 테이퍼드 핏 겨울 기모면 스판 올 밴딩 팬츠</td>
  294. </tr>
  295. <th:block th:if="${goodsCompose.goodsNotiList != null and !goodsCompose.goodsNotiList.empty}">
  296. <th:block th:each="goodsNoti, status : ${goodsCompose.goodsNotiList}" th:if="${goodsNoti.niItemCd == 'G005_005'}">
  297. <tr>
  298. <th th:text="${goodsNoti.niItemNm}">제조사</th>
  299. <td th:text="${goodsNoti.niContent}"></td>
  300. </tr>
  301. </th:block>
  302. </th:block>
  303. <tr>
  304. <th>제조국</th>
  305. <td th:text="${goodsCompose.originNm}">베트남</td>
  306. </tr>
  307. </tbody>
  308. </table>
  309. </div>
  310. </th:block>
  311. </th:block>
  312. </th:block>
  313. <p class="t_info dot_info mt10">
  314. 주문제작 상품의 경우 주문 후 제작되어 판매되는 상품으로 제작 시점부터 반품/교환이 어려울 수 있습니다.
  315. </p>
  316. </div>
  317. </div>
  318. <!-- //상품필수정보 노출 -->
  319. </div>
  320. </div>
  321. <script th:inline="javascript">
  322. /*<![CDATA[*/
  323. // 상품상세 asis html 이지미 경로 수정
  324. $(document).ready( function() {
  325. $(".pd_descrp_pop .cont_body").find('img').each(function() {
  326. let tmpImgSrc = $(this).attr('src');
  327. if (tmpImgSrc.indexOf('Upload') == 1 ){ // /Upload
  328. $(this).attr('src' , tmpImgSrc.replace('/Upload', _imgUrl+"/Local"));
  329. }
  330. });
  331. });
  332. /*]]>*/
  333. </script>
  334. </html>