MypageReviewCreateFormMob.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712
  1. <!DOCTYPE html>
  2. <html lang="ko"
  3. xmlns:th="http://www.thymeleaf.org"
  4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  5. layout:decorator="mob/common/layout/MypageLayoutMob">
  6. <!--
  7. *******************************************************************************
  8. * @source : MypageReviewCreateFormMob.html
  9. * @desc : 마이페이지 > 리뷰 작성Page
  10. *============================================================================
  11. * STYLE24
  12. * Copyright(C) 2020 TSIT, All rights reserved.
  13. *============================================================================
  14. * VER DATE AUTHOR DESCRIPTION
  15. * === =========== ========== =============================================
  16. * 1.0 2021.05.11 sowon 최초 작성
  17. *******************************************************************************
  18. -->
  19. <body>
  20. <th:block layout:fragment="content">
  21. <main role="" id="" class="container my">
  22. <section class="content review">
  23. <form class="form_wrap" id="reviewForm" th:action="@{'/mypage/review/save'}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
  24. <input type="hidden" name="ordNo" th:value="${reviewInfo.ordNo}">
  25. <input type="hidden" name="ordDtlNo" th:value="${reviewInfo.ordDtlNo}">
  26. <input type="hidden" name="goodsCd" th:value="${reviewInfo.goodsCd}">
  27. <input type="hidden" name="custNo" th:value="${reviewInfo.custNo}">
  28. <input type="hidden" name="reviewStat" th:value="${reviewStat}">
  29. <input type="hidden" name="reviewSq" th:if="${reviewStat == 'u'}" th:value="${reviewInfo.reviewSq}">
  30. <div class="inner bg_gray">
  31. <ul class="note">
  32. <li>일반 리뷰 작성시 150P, 포토/영상 리뷰는 350P가 적립됩니다.</li>
  33. <li>월 최대 10,000P까지 적립 가능합니다.(합산 후 월 1회 지급)</li>
  34. <li>베스트 리뷰로 선정되면 10,000P가 추가 적립됩니다.</li>
  35. <li>리뷰 작성시 욕설, 비방, 선정적인 내용 등이 있을 경우 통보 없이관리자에 의해 삭제 될 수 있습니다.</li>
  36. </ul>
  37. </div>
  38. <div class="inner">
  39. <div class="part_goods">
  40. <!-- 굿즈_리뷰 -->
  41. <div class="goods_section">
  42. <div class="goods_detail">
  43. <a th:onclick="cfnGoToGoodsDetail([[${ reviewInfo.goodsCd}]])" >
  44. <div class="thumb_box">
  45. <img th:src="${imageUrl + '/' + reviewInfo.sysImgNm}" alt="tmp_pdClickother1">
  46. </div>
  47. <div class="info_box">
  48. <div class="od_name">
  49. <div class="goods_date"><span class="date" th:text="${reviewInfo.regDt}"></span> 구매</div>
  50. <div class="brand">
  51. <span th:text="${reviewInfo.brandNm}"></span>
  52. </div>
  53. <div class="name" th:text="${reviewInfo.goodsNm}"></div>
  54. </div>
  55. <div class="od_opt">
  56. <div class="option" id="optionDiv">
  57. <!-- <em>Black</em><em>XXL</em> -->
  58. </div>
  59. </div>
  60. </div>
  61. </a>
  62. </div>
  63. </div>
  64. <!-- //굿즈_리뷰 -->
  65. </div>
  66. </div>
  67. <div class="inner">
  68. <div class="titWrap">
  69. <div class="">별점을 선택해주세요</div>
  70. </div>
  71. <div class="review_score">
  72. <div id="star_grade">
  73. <input type="hidden" id="score" name="score">
  74. <button type="button" id="starBtn"></button>
  75. <button type="button" id="starBtn"></button>
  76. <button type="button" id="starBtn"></button>
  77. <button type="button" id="starBtn"></button>
  78. <button type="button" id="starBtn"></button>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="inner">
  83. <div class="my_edit_section">
  84. <div class="tbl_wrap">
  85. <div class="tbl_tit">
  86. <h3>키/몸무게</h3>
  87. </div>
  88. <div class="tbl">
  89. <div class="tbl_row">
  90. <table>
  91. <colgroup>
  92. <col width="*">
  93. </colgroup>
  94. <tr>
  95. <th>키</th>
  96. <td>
  97. <div class="form_field rev_height">
  98. <input type="tel" class="form_control" oninput='handleOnInput(this, 3)' id="height" name="height" data-valid-type="numeric" placeholder="키를 숫자만 입력해주세요."><span>cm</span>
  99. </div>
  100. </td>
  101. </tr>
  102. <tr>
  103. <th>몸무게</th>
  104. <td>
  105. <div class="form_field rev_height">
  106. <input type="tel" class="form_control" oninput='handleOnInput(this, 3)' id="weight" name="weight" data-valid-type="numeric" placeholder="몸무게를 숫자만 입력해주세요."><span>kg</span>
  107. </div>
  108. </td>
  109. </tr>
  110. </table>
  111. </div>
  112. </div>
  113. </div>
  114. <th:block th:if="${reviewInfo.sizeGb == 'T' or reviewInfo.sizeGb == 'B' or reviewInfo.sizeGb == 'S'}">
  115. <div class="tbl_wrap">
  116. <div class="tbl_tit">
  117. <h3>상품평가</h3>
  118. </div>
  119. <div class="tbl">
  120. <div class="tbl_row">
  121. <table data-name="rating">
  122. <colgroup>
  123. <col width="*">
  124. </colgroup>
  125. <th:block th:if="${reviewInfo.sizeGb == 'T' or reviewInfo.sizeGb == 'B' or reviewInfo.sizeGb == 'S'}">
  126. <tr>
  127. <th>사이즈</th>
  128. <td>
  129. <div class="form_field review_radio">
  130. <div class="radio_li">
  131. <input id="chk-1" type="radio" name="scoreSize" value="1"><label for="chk-1"> <span>작음</span></label>
  132. </div>
  133. <div class="radio_li">
  134. <input id="chk-2" type="radio" name="scoreSize" value="2"><label for="chk-2"> <span>딱맞음</span></label>
  135. </div>
  136. <div class="radio_li">
  137. <input id="chk-3" type="radio" name="scoreSize" value="3"><label for="chk-3"> <span>큼</span></label>
  138. </div>
  139. </div>
  140. </td>
  141. </tr>
  142. <tr>
  143. <th>컬러</th>
  144. <td>
  145. <div class="form_field review_radio">
  146. <div class="radio_li">
  147. <input id="chk-4" type="radio" name="scoreColor" value="1"><label for="chk-4"> <span>밝음</span></label>
  148. </div>
  149. <div class="radio_li">
  150. <input id="chk-5" type="radio" name="scoreColor" value="2"><label for="chk-5"> <span>똑같음</span></label>
  151. </div>
  152. <div class="radio_li">
  153. <input id="chk-6" type="radio" name="scoreColor" value="3"><label for="chk-6"> <span>어두움</span></label>
  154. </div>
  155. </div>
  156. </td>
  157. </tr>
  158. </th:block>
  159. <th:block th:if="${reviewInfo.sizeGb == 'T' or reviewInfo.sizeGb == 'B'}">
  160. <tr>
  161. <th>핏</th>
  162. <td>
  163. <div class="form_field review_radio">
  164. <div class="radio_li">
  165. <input id="chk-7" type="radio" name="scoreFit" value="1"><label for="chk-7"> <span>슬림</span></label>
  166. </div>
  167. <div class="radio_li">
  168. <input id="chk-8" type="radio" name="scoreFit" value="2"><label for="chk-8"> <span>레귤러</span></label>
  169. </div>
  170. <div class="radio_li">
  171. <input id="chk-9" type="radio" name="scoreFit" value="3"><label for="chk-9"> <span>오버</span></label>
  172. </div>
  173. </div>
  174. </td>
  175. </tr>
  176. <tr>
  177. <th>두께감</th>
  178. <td>
  179. <div class="form_field review_radio">
  180. <div class="radio_li">
  181. <input id="chk-10" type="radio" name="scoreThick" value="1"><label for="chk-10"> <span>얇음</span></label>
  182. </div>
  183. <div class="radio_li">
  184. <input id="chk-11" type="radio" name="scoreThick" value="2"><label for="chk-11"> <span>적당함</span></label>
  185. </div>
  186. <div class="radio_li">
  187. <input id="chk-12" type="radio" name="scoreThick" value="3"><label for="chk-12"> <span>도톰함</span></label>
  188. </div>
  189. </div>
  190. </td>
  191. </tr>
  192. </th:block>
  193. <th:block th:if="${reviewInfo.sizeGb == 'S'}">
  194. <tr>
  195. <th>무게감</th>
  196. <td>
  197. <div class="form_field review_radio">
  198. <div class="radio_li">
  199. <input id="chk-13" type="radio" name="scoreWeight" value="1"><label for="chk-13"> <span>가벼움</span></label>
  200. </div>
  201. <div class="radio_li">
  202. <input id="chk-14" type="radio" name="scoreWeight" value="2"><label for="chk-14"> <span>적당함</span></label>
  203. </div>
  204. <div class="radio_li">
  205. <input id="chk-15" type="radio" name="scoreWeight" value="3"><label for="chk-15"> <span>무거움</span></label>
  206. </div>
  207. </div>
  208. </td>
  209. </tr>
  210. <tr>
  211. <th>볼너비</th>
  212. <td>
  213. <div class="form_field review_radio">
  214. <div class="radio_li">
  215. <input id="chk-16" type="radio" name="scoreBall" value="1"><label for="chk-16"> <span>작음</span></label>
  216. </div>
  217. <div class="radio_li">
  218. <input id="chk-17" type="radio" name="scoreBall" value="2"><label for="chk-17"> <span>딱맞음</span></label>
  219. </div>
  220. <div class="radio_li">
  221. <input id="chk-18" type="radio" name="scoreBall" value="3"><label for="chk-18"> <span>큼</span></label>
  222. </div>
  223. </div>
  224. </td>
  225. </tr>
  226. </th:block>
  227. </table>
  228. </div>
  229. </div>
  230. </div>
  231. </th:block>
  232. <div class="tbl_wrap">
  233. <div class="tbl">
  234. <div class="tbl_row">
  235. <table>
  236. <colgroup>
  237. <col width="*">
  238. </colgroup>
  239. <tr>
  240. <th>
  241. <span class="tit">고객님의 리뷰가<br>다른 고객님께 도움이 될 수 있어요! </span>
  242. <div class="tip_wrap tip2" >
  243. <div class="tip_tit">?</div>
  244. <div class="tip_contents">
  245. <ul>
  246. <li>리뷰 내용은 최소 10자 이상 입력해주세요.</li>
  247. <li>상품과 무관하거나 스팸, 음란, 불법적인 내용의 리뷰는 통보없이 삭제되며, 지금된 포인트는 회수 될 수 있습니다.</li>
  248. </ul>
  249. </div>
  250. </div>
  251. </th>
  252. <td>
  253. <div class="textarea_wrap">
  254. <textarea class="doc_review" name="reviewContent" id="reviewContent" cols="30" rows="10" maxlength="500"></textarea>
  255. <p class="txt_cnt"><span id="review_cnt" class="c_primary">0</span>/500</p>
  256. </div>
  257. </td>
  258. </tr>
  259. <tr>
  260. <th>
  261. <span class="tit">포토/영상 첨부</span>
  262. </th>
  263. <td>
  264. <div class="form_field">
  265. <div class="input_wrap">
  266. <!-- 이미지첨부 -->
  267. <div class="form_field">
  268. <div class="imgUpload">
  269. <label for="fileAdd" class="fileAdd" id="fileAdd_reply">첫번째업로드</label>
  270. <input type="file" id="fileAdd" name="files" accept="image/png, image/jpeg, image/jpg, video/mp4, video/x-m4v"> <!-- 210507_추가 : accept 속성 추가 -->
  271. </div>
  272. </div>
  273. <!-- //이미지첨부 -->
  274. </div>
  275. </div>
  276. <p class="review_desc">최대 10개까지 등록 가능</p>
  277. <p class="review_desc">동영상 첨부 시 관리자 승인이 필요하여 바로 노출이 되지 않을 수 있습니다.</p>
  278. </td>
  279. </tr>
  280. </table>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286. <div class="inner">
  287. <div class="goods_btn_wrap btn_group_flex">
  288. <div><button type="button" id="btn_review_cancle" class="btn btn_default" onclick="reviewCancel()"><span>취소</span></button></div>
  289. <div th:if="${reviewStat == 'c'}"><button type="button" id="btn_review_confirm" class="btn btn_dark" onclick="reviewCreate()"><span>등록</span></button></div>
  290. <div th:if="${reviewStat == 'u'}"><button type="button" id="btn_review_confirm" class="btn btn_dark" onclick="reviewUpdate()"><span>수정</span></button></div>
  291. </div>
  292. </div>
  293. </form>
  294. </section>
  295. </main>
  296. <script type="text/javascript" src="/ux/plugins/gaga/gaga.kollus.js"></script>
  297. <script th:inline="javascript">
  298. let reviewList = [[${reviewInfo}]];
  299. let reviewStat = [[${reviewStat}]];
  300. let reviewAttach = [[${alreadyReviewAttach}]];
  301. //별점 class="on"
  302. var $starEls = $('#star_grade button#starBtn');
  303. var rate = 1;
  304. $starEls.each(function (index, el) {
  305. $(el).on('click', function () {
  306. rating(index);
  307. $("#score").attr("value",index+1);
  308. });
  309. });
  310. function rating(score) {
  311. $starEls.each(function (i, el) {
  312. if (i <= score) {
  313. $(el).addClass('on');
  314. } else {
  315. $(el).removeClass('on');
  316. }
  317. });
  318. rate = score;
  319. }
  320. // 리뷰 취소
  321. var reviewCancel = function() {
  322. mcxDialog.confirm('취소하시겠습니까?', {
  323. cancelBtnText: "취소",
  324. sureBtnText: "확인",
  325. sureBtnClick: function(){
  326. cfnGoToPage(_PAGE_MYPAGE_REVIEW);
  327. }
  328. });
  329. }
  330. //리뷰 등록
  331. var reviewCreate = function () {
  332. if($("#score").val()=='' || $("#score").val()==null){
  333. mcxDialog.alert('별점을 선택하세요.');
  334. return;
  335. }
  336. if($("#reviewForm input[name=height]").val() == '' || $("#reviewForm input[name=height]").val() == null){
  337. mcxDialog.alert('키를 입력하세요.');
  338. return;
  339. }
  340. if($("#reviewForm input[name=weight]").val() == '' || $("#reviewForm input[name=weight]").val() == null){
  341. mcxDialog.alert('몸무게를 입력하세요.');
  342. return;
  343. }
  344. if(reviewList.sizeGb == 'T' || reviewList.sizeGb == 'B' || reviewList.sizeGb == 'S'){
  345. if($('#reviewForm input:radio[name=scoreSize]:checked').length == 0){
  346. mcxDialog.alert('상품 사이즈를 평가해주세요.');
  347. return false;
  348. }
  349. if($('#reviewForm input:radio[name=scoreColor]:checked').length == 0){
  350. mcxDialog.alert('상품 컬러를 평가해주세요.');
  351. return false;
  352. }
  353. }
  354. if(reviewList.sizeGb == 'T' || reviewList.sizeGb == 'B'){
  355. if($('#reviewForm input:radio[name=scoreFit]:checked').length == 0){
  356. mcxDialog.alert('상품 핏을 평가해주세요.');
  357. return false;
  358. }
  359. if($('#reviewForm input:radio[name=scoreThick]:checked').length == 0){
  360. mcxDialog.alert('상품 두께감을 평가해주세요.');
  361. return false;
  362. }
  363. }
  364. if(reviewList.sizeGb == 'S' ){
  365. if($('#reviewForm input:radio[name=scoreWeight]:checked').length == 0){
  366. mcxDialog.alert('상품 무게감을 평가해주세요.');
  367. return false;
  368. }
  369. if($('#reviewForm input:radio[name=scoreBall]:checked').length == 0){
  370. mcxDialog.alert('상품 볼넓이를 평가해주세요.');
  371. return false;
  372. }
  373. }
  374. if($('#reviewContent').val().length<10){
  375. mcxDialog.alert("리뷰 내용을 10자 이상 입력해주세요.");
  376. return false;
  377. }
  378. mcxDialog.confirm('리뷰를 등록하시겠습니까?', {
  379. cancelBtnText: "취소",
  380. sureBtnText: "확인",
  381. sureBtnClick: function(){
  382. gagajf.ajaxFormSubmit($('#reviewForm').prop('action'), '#reviewForm', fnSaveCallback);
  383. }
  384. });
  385. }
  386. //리뷰 수정
  387. var reviewUpdate = function() {
  388. if($("#reviewForm input[name=height]").val() == '' || $("#reviewForm input[name=height]").val() == null){
  389. mcxDialog.alert('키를 입력하세요.');
  390. return;
  391. }
  392. if($("#reviewForm input[name=weight]").val() == '' || $("#reviewForm input[name=weight]").val() == null){
  393. mcxDialog.alert('몸무게를 입력하세요.');
  394. return;
  395. }
  396. if($('#reviewContent').val().length<10){
  397. mcxDialog.alert("리뷰 내용을 10자 이상 입력해주세요.");
  398. return;
  399. }
  400. mcxDialog.confirm('리뷰를 수정하시겠습니까?', {
  401. cancelBtnText: "취소",
  402. sureBtnText: "확인",
  403. sureBtnClick: function(){
  404. gagajf.ajaxFormSubmit("/mypage/review/update", '#reviewForm', fnUpdateCallback);
  405. }
  406. });
  407. }
  408. var fnSaveCallback = function (result) {
  409. if(result.status == "200"){
  410. if (document.getElementsByName("kufKeyArr").length>0 || document.getElementsByName("orgFileNmArr").length>0) {
  411. mcxDialog.confirm("상품리뷰를 등록 하였습니다. 350P 적립 예정입니다.", {
  412. sureBtnText: "확인",
  413. sureBtnClick: function() {
  414. cfnGoToPage(_PAGE_MYPAGE_REVIEW);
  415. }
  416. });
  417. }else{
  418. mcxDialog.confirm("상품리뷰를 등록 하였습니다. 150P 적립 예정입니다.", {
  419. sureBtnText: "확인",
  420. sureBtnClick: function() {
  421. cfnGoToPage(_PAGE_MYPAGE_REVIEW);
  422. }
  423. });
  424. }
  425. }
  426. }
  427. var fnUpdateCallback = function (result) {
  428. if(result.status == "200"){
  429. mcxDialog.confirm("상품 리뷰를 수정하였습니다.", {
  430. sureBtnText: "확인",
  431. sureBtnClick: function() {
  432. cfnGoToPage(_PAGE_MYPAGE_REVIEW);
  433. }
  434. });
  435. }
  436. }
  437. //header scroll
  438. $(document).on('click', '.tabIndex li a', function() {
  439. var $this = $(this),
  440. $tabList = $this.parents('ul'),
  441. _idx = $this.closest('li').index();
  442. $tabList.children().eq(_idx).addClass('active').siblings().removeClass('active');
  443. $tabList.next().children().eq(_idx).addClass('active').siblings().removeClass('active');
  444. });
  445. $(function(){
  446. $('#htopTitle').text('리뷰 쓰기');
  447. var tag = '';
  448. if (reviewList.goodsType == 'G056_S') {
  449. tag += '<em>';
  450. $.each(reviewList.colorNmArr, function(index, option) {
  451. tag += reviewList.itemNmArr[index] + ' / ' + option + '<br>';
  452. });
  453. tag += '</em>';
  454. $("#optionDiv").append(tag);
  455. }else{
  456. tag += '<em>';
  457. tag += reviewList.optCd1+' / '+reviewList.optCd2;
  458. tag += '</em>';
  459. $(".option").append(tag);
  460. }
  461. if(reviewStat=='u'){
  462. var reviewScore = reviewList.score;
  463. $("#score").val(reviewScore);
  464. rating(reviewScore-1);
  465. $("#reviewForm input[name=height]").val(reviewList.height);
  466. $("#reviewForm input[name=weight]").val(reviewList.weight);
  467. $("#reviewForm textarea[name=reviewContent]").val(reviewList.reviewContent.escapeHtml());
  468. if(reviewList.scoreSize == "1"){
  469. $('#reviewForm input:radio[name=scoreSize]:radio[value="1"]').prop('checked', true);
  470. }else if(reviewList.scoreSize == "2"){
  471. $('#reviewForm input:radio[name=scoreSize]:radio[value="2"]').prop('checked', true);
  472. }else if(reviewList.scoreSize == "3"){
  473. $('#reviewForm input:radio[name=scoreSize]:radio[value="3"]').prop('checked', true);
  474. }
  475. if(reviewList.scoreColor == "1"){
  476. $('#reviewForm input:radio[name=scoreColor]:radio[value="1"]').prop('checked', true);
  477. }else if(reviewList.scoreColor == "2"){
  478. $('#reviewForm input:radio[name=scoreColor]:radio[value="2"]').prop('checked', true);
  479. }else if(reviewList.scoreColor == "3"){
  480. $('#reviewForm input:radio[name=scoreColor]:radio[value="3"]').prop('checked', true);
  481. }
  482. if(reviewList.scoreFit == "1"){
  483. $('#reviewForm input:radio[name=scoreFit]:radio[value="1"]').prop('checked', true);
  484. }else if(reviewList.scoreFit == "2"){
  485. $('#reviewForm input:radio[name=scoreFit]:radio[value="2"]').prop('checked', true);
  486. }else if(reviewList.scoreFit == "3"){
  487. $('#reviewForm input:radio[name=scoreFit]:radio[value="3"]').prop('checked', true);
  488. }
  489. if(reviewList.scoreThick == "1"){
  490. $('#reviewForm input:radio[name=scoreThick]:radio[value="1"]').prop('checked', true);
  491. }else if(reviewList.scoreThick == "2"){
  492. $('#reviewForm input:radio[name=scoreThick]:radio[value="2"]').prop('checked', true);
  493. }else if(reviewList.scoreThick == "3"){
  494. $('#reviewForm input:radio[name=scoreThick]:radio[value="3"]').prop('checked', true);
  495. }
  496. if(reviewList.scoreWeight == "1"){
  497. $('#reviewForm input:radio[name=scoreWeight]:radio[value="1"]').prop('checked', true);
  498. }else if(reviewList.scoreWeight == "2"){
  499. $('#reviewForm input:radio[name=scoreWeight]:radio[value="2"]').prop('checked', true);
  500. }else if(reviewList.scoreWeight == "3"){
  501. $('#reviewForm input:radio[name=scoreWeight]:radio[value="3"]').prop('checked', true);
  502. }
  503. if(reviewList.scoreBall == "1"){
  504. $('#reviewForm input:radio[name=scoreBall]:radio[value="1"]').prop('checked', true);
  505. }else if(reviewList.scoreBall == "2"){
  506. $('#reviewForm input:radio[name=scoreBall]:radio[value="2"]').prop('checked', true);
  507. }else if(reviewList.scoreBall == "3"){
  508. $('#reviewForm input:radio[name=scoreBall]:radio[value="3"]').prop('checked', true);
  509. }
  510. if(reviewAttach.length>0){
  511. for (var i = 0; i < reviewAttach.length; i++) {
  512. if(reviewAttach[i].reviewSq == reviewList.reviewSq){
  513. if(reviewAttach[i].fileGb == "I"){
  514. $("<span class=\"pics\">" +
  515. "<img class=\"picsThumbs\" src=\"" + _uploadImageUrl + '/' + reviewAttach[i].sysFileNm + "\" />" +
  516. "<input type='hidden' name='orgFileNmArr' value='"+reviewAttach[i].orgFileNm+"'>" +
  517. "<input type='hidden' name='sysFileNmArr' value='"+reviewAttach[i].sysFileNm+"'>" +
  518. "<br/><span class=\"removes\">Removes image</span>" +
  519. "</span>").insertBefore(".fileAdd");
  520. }else{
  521. $("<span class=\"pics mov\">" +
  522. "<img class=\"picsThumbs\" src=\"" + _kollusMediaUrl + '/poster/' + reviewAttach[i].kmcKey + "\"/>" +
  523. "<input type='hidden' name='kmcKeyArr' value='" + reviewAttach[i].kmcKey + "'>" +
  524. "<input type='hidden' name='kufKeyArr' value='" + reviewAttach[i].kufKey + "'>" +
  525. "<br/><span class=\"removes\">Removes image</span>" +
  526. "</span>").insertBefore(".fileAdd");
  527. }
  528. }
  529. }
  530. $(".removes").click(function(){
  531. $(this).parent(".pics").remove();
  532. });
  533. }
  534. }
  535. $(window).scroll(function(){
  536. var scroll = $(this).scrollTop();
  537. var headerH = $(".header").height();
  538. if ($(window).scrollTop() > headerH){
  539. $(".header").addClass("minify");
  540. return false;
  541. }
  542. else {
  543. $(".header").removeClass("minify");
  544. return false;
  545. }
  546. });
  547. $('#star_grade button').click(function(){
  548. $(this).parent().children("button").removeClass("on"); /* 별점의 on 클래스 전부 제거 */
  549. $(this).addClass("on").prevAll("button").addClass("on"); /* 클릭한 별과, 그 앞 까지 별점에 on 클래스 추가 */
  550. return false;
  551. });
  552. //리뷰 내용 글자 수 제한
  553. $('.doc_review').keyup(function (e){
  554. var content = $(this).val();
  555. $('#review_cnt').html(content.length);
  556. if (content.length > 500){
  557. $(this).val(content.substring(0, 500));
  558. $('#review_cnt').html("500");
  559. }
  560. });
  561. $('.doc_review').bind('input paste', function() {
  562. $(this).trigger('keyup');
  563. });
  564. });
  565. $('#fileAdd').on('change', function() { fnChooseFile(this); });
  566. var fnChooseFile = function(obj) {
  567. var picLength = $(".pics").length;
  568. // multiple 속성이 있으면 files에는 다수의 객체가 할당됨
  569. var file = obj.files[0];
  570. /* if (!gagajf.isNull(file.size) && Number(file.size) > (10 * 1000000)) {
  571. mcxDialog.alertC('이미지는 최대 10MB 이하 파일만 가능합니다.', {
  572. sureBtnText: "확인",
  573. sureBtnClick: function() {
  574. $(obj).parent('.imgUpload').find('.removes').trigger('click');
  575. }
  576. });
  577. return false;
  578. } */
  579. if (!gagajf.isNull(file.name)) {
  580. var extension = "\.(jpg|jpeg|png)$";
  581. if ((new RegExp(extension, "i")).test(file.name)) {
  582. gagajf.ajaxFileUpload('/common/file/upload?subDir=/review'
  583. , file
  584. , function(result) {
  585. // 업로드한 파일명 설정
  586. $(".pics").children().last().append("<input type='hidden' name='orgFileNmArr' id='orgFileNm"+(picLength+1)+"' value='"+result.oldFileName+"'>");
  587. $(".pics").children().last().append("<input type='hidden' name='sysFileNmArr' id='sysFileNm"+(picLength+1)+"' value='"+result.newFileName+"'>");
  588. }
  589. );
  590. }
  591. else{
  592. setTimeout(function(){
  593. $(".imgUpload").find('.pics').last().addClass("mov");
  594. $(".pics").children().last().append("<input type='hidden' name='kufKeyArr' id='kufKey"+(picLength+1)+"'>");
  595. $(".pics").children().last().append("<input type='hidden' name='kmcKeyArr' id='kmcKey"+(picLength+1)+"'>");
  596. gagaKollus.upload('Review', file, $('#kufKey'+(picLength+1)));
  597. }, 1000);
  598. }/* else if((new RegExp("mp4", "i")).test(file.name) || (new RegExp("x-m4v", "i")).test(file.name)){
  599. setTimeout(function(){
  600. $(".imgUpload").find('.pics').last().addClass("mov");
  601. $(".pics").children().last().append("<input type='hidden' name='kufKeyArr' id='kufKey"+(picLength+1)+"'>");
  602. $(".pics").children().last().append("<input type='hidden' name='kmcKeyArr' id='kmcKey"+(picLength+1)+"'>");
  603. gagaKollus.upload('Review', file, $('#kufKey'+(picLength+1)));
  604. }, 1000);
  605. }else{
  606. mcxDialog.alertC('첨부할 수 없는 파일 형식입니다.', {
  607. sureBtnText: "확인",
  608. sureBtnClick: function() {
  609. $(".pics").find(".removes").last().trigger('click');
  610. }
  611. });
  612. return false;
  613. } */
  614. }
  615. // 이거 왜 안먹히지
  616. // 파일 업로드
  617. /* gagajf.ajaxFileUpload('/common/file/upload?subDir=/review'
  618. , file
  619. , function(result) {
  620. // 업로드한 파일명 설정
  621. $(".pics").children().eq(0).append("<input type='hidden' name='orgFileNmArr' id='orgFileNm"+(picLength+1)+"' value='"+result.oldFileName+"'>");
  622. $(".pics").children().eq(0).append("<input type='hidden' name='sysFileNmArr' id='sysFileNm"+(picLength+1)+"' value='"+result.newFileName+"'>");
  623. }
  624. ); */
  625. }
  626. //210409_키, 몸무게 input 글자 수 제한
  627. function handleOnInput(el, maxlength) {
  628. if(el.value.length > maxlength) {
  629. el.value = el.value.substr(0, maxlength);
  630. }
  631. }
  632. </script>
  633. <script>
  634. //210524_ 추가 : textarea focus시 outline 색상 넣는 스크립트
  635. $(function() {
  636. $('.doc_review').focus(function(){
  637. $(this).parent('.textarea_wrap').css('outline', '1px auto rgb(229, 151, 0)');
  638. })
  639. $('.doc_review').blur(function(){
  640. $(this).parent('.textarea_wrap').css('outline', 'none');
  641. })
  642. });
  643. </script>
  644. </th:block>
  645. </body>
  646. </html>