|
@@ -126,8 +126,10 @@
|
|
|
<div class="cmt_thumb">
|
|
<div class="cmt_thumb">
|
|
|
<div class="form_field">
|
|
<div class="form_field">
|
|
|
<div class="imgUpload">
|
|
<div class="imgUpload">
|
|
|
- <label for="fileAdd" class="fileAdd" >업로드</label>
|
|
|
|
|
|
|
+ <label for="fileAdd" class="fileAdd" onclick="fnFileAdd()">업로드</label>
|
|
|
<input type="file" id="fileAdd" name="files[]" />
|
|
<input type="file" id="fileAdd" name="files[]" />
|
|
|
|
|
+ <input type="hidden" id="orgFileNm" name="orgFileNm">
|
|
|
|
|
+ <input type="hidden" id="sysFileNm" name="sysFileNm">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -135,51 +137,7 @@
|
|
|
</form>
|
|
</form>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="cmt_group" id="replyList">
|
|
<div class="cmt_group" id="replyList">
|
|
|
- <!-- <div class="cmt_list_tit">
|
|
|
|
|
- <strong>댓글</strong><span class="cnt">(9,999)</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- 데이터 있을 시
|
|
|
|
|
- <ul class="cmt_list">
|
|
|
|
|
- <li>
|
|
|
|
|
- <div class="cmt_top">
|
|
|
|
|
- <span class="writer">DI2****</span>
|
|
|
|
|
- <span class="date">2020.12.30</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="cmt_cont">
|
|
|
|
|
- <p>
|
|
|
|
|
- 애용하는 회원으로서 스타일24의 리뉴얼은 저의 일처럼 기쁘네요 ^^ 깔끔하고 세련된 느낌으로 단장해서 사이트 들어왔을 때 기분이 좋답니다! 사이트 리뉴얼 겸 겨울옷을 사려고 한창 둘러보았어요. <br/>
|
|
|
|
|
- 따뜻한 느낌 풀풀 내는아이템들로 찜꽁 해놓았답니다! 이왕 이벤트도 당첨되어서 포인트도 얻고, 또 구매도 하고 싶네요ㅋㅋㅋ <br/>
|
|
|
|
|
- 리뉴얼 하신거 축하드려요!!! 당첨되길 바랍니다.^^
|
|
|
|
|
- </p>
|
|
|
|
|
- </div>
|
|
|
|
|
- </li>
|
|
|
|
|
- <li>
|
|
|
|
|
- <div class="cmt_top">
|
|
|
|
|
- <span class="writer">ety****</span>
|
|
|
|
|
- <span class="date">2020.12.30</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="cmt_cont">
|
|
|
|
|
- <div class="img_wrap clear">
|
|
|
|
|
- <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img01.jpg" alt="썸네일"></span>
|
|
|
|
|
- <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img02.jpg" alt="썸네일"></span>
|
|
|
|
|
- <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img03.jpg" alt="썸네일"></span>
|
|
|
|
|
- <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img04.jpg" alt="썸네일"></span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <p>모처럼 스타일24를 다시 애용해야 겠어요! 축하축하 ^^</p>
|
|
|
|
|
- <button class="btn btn_default btn_del"><span>삭제</span></button>
|
|
|
|
|
- </div>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul> -->
|
|
|
|
|
- <!-- 데이터 있을 시 -->
|
|
|
|
|
- <!-- 데이터 없을 시 -->
|
|
|
|
|
- <div class="nodata" style="display:none;">
|
|
|
|
|
- <div class="txt_box">
|
|
|
|
|
- <p>
|
|
|
|
|
- 등록된 댓글이 없습니다.
|
|
|
|
|
- </p>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- //데이터 없을 시 -->
|
|
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
<div class="paging_wrap">
|
|
<div class="paging_wrap">
|
|
|
<ul class="pageNav" id="paging">
|
|
<ul class="pageNav" id="paging">
|
|
@@ -287,6 +245,30 @@
|
|
|
<input type="hidden" name="planSq" th:value="${planInfo.planSq}"/>
|
|
<input type="hidden" name="planSq" th:value="${planInfo.planSq}"/>
|
|
|
</form>
|
|
</form>
|
|
|
|
|
|
|
|
|
|
+<!-- 댓글 이미지 팝업 -->
|
|
|
|
|
+ <div class="modal fade thumb_img_pop" id="thumbImgPop" tabindex="-1" role="dialog" aria-labelledby="thumbImgLabel" aria-hidden="true">
|
|
|
|
|
+ <div class="modal-dialog" role="document">
|
|
|
|
|
+ <div class="modal-content">
|
|
|
|
|
+ <div class="modal-header sr-only">
|
|
|
|
|
+ <h5 class="modal-title" id="thumbImgLabel">이미지 상세보기</h5>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="modal-body">
|
|
|
|
|
+ <div class="pop_cont">
|
|
|
|
|
+ <div class="swiper-container">
|
|
|
|
|
+ <div class="swiper-wrapper">
|
|
|
|
|
+ <!-- 이미지 슬라이드 영역 -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="swiper-button-next"></div>
|
|
|
|
|
+ <div class="swiper-button-prev"></div>
|
|
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- //댓글 이미지 팝업 -->
|
|
|
|
|
+
|
|
|
<script th:inline="javascript">
|
|
<script th:inline="javascript">
|
|
|
|
|
|
|
|
let review = [[${reviewInfo}]];
|
|
let review = [[${reviewInfo}]];
|
|
@@ -315,13 +297,23 @@ if(review.length>0){
|
|
|
$.each(review, function(idx, item) {
|
|
$.each(review, function(idx, item) {
|
|
|
html += ' <div class="reviw_box">'
|
|
html += ' <div class="reviw_box">'
|
|
|
html += ' <div class="best_review">';
|
|
html += ' <div class="best_review">';
|
|
|
- html += ' <a href="javascript:void();" id="btn_pdBestReview_pop" onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">';
|
|
|
|
|
|
|
+ if(item.reviewSysImg!= null){
|
|
|
|
|
+ html += ' <a href="javascript:void();" id="btn_pdBestReview_pop" onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">';
|
|
|
|
|
+ }else{
|
|
|
|
|
+ html += ' <a href="javascript:void();" id="btn_pdBestReview_pop">';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
html += ' <div class="pic">';
|
|
html += ' <div class="pic">';
|
|
|
- if (item.fileGb == 'M') {
|
|
|
|
|
- html += ' <span class="thumb mov" style="background-image: url('+ imgUrl +'/'+item.reviewSysImg +');"></span>';
|
|
|
|
|
|
|
+ if(item.reviewSysImg!= null){
|
|
|
|
|
+ if (item.fileGb == 'M') {
|
|
|
|
|
+ html += ' <span class="thumb mov" style="background-image: url('+ imgUrl+item.reviewSysImg +');"></span>';
|
|
|
|
|
+ }else{
|
|
|
|
|
+ html += ' <span class="thumb" style="background-image: url('+ imgUrl +item.reviewSysImg +');"></span>';
|
|
|
|
|
+ }
|
|
|
}else{
|
|
}else{
|
|
|
- html += ' <span class="thumb" style="background-image: url('+ imgUrl +'/'+item.reviewSysImg +');"></span>';
|
|
|
|
|
|
|
+ html += ' <span class="thumb" style="background-image: url('+ goodsView+'/'+item.sysImgNm +');"></span>';
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
html += ' </div>';
|
|
html += ' </div>';
|
|
|
html += ' <div class="star_score">';
|
|
html += ' <div class="star_score">';
|
|
|
html += ' <span class="star">';
|
|
html += ' <span class="star">';
|
|
@@ -645,22 +637,26 @@ if(coupon.length>0){
|
|
|
});
|
|
});
|
|
|
html += ' </ul>';
|
|
html += ' </ul>';
|
|
|
html += ' </div>';
|
|
html += ' </div>';
|
|
|
- html += ' <div class="announce_txt">';
|
|
|
|
|
- html += ' <div class="note_txt">';
|
|
|
|
|
- html += ' <img src="/images/pc/ico_content_find.png" alt="유의사항">';
|
|
|
|
|
- html += ' <p>유의사항</p>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' <div class="announce_list">';
|
|
|
|
|
- html += coupon[0].note;
|
|
|
|
|
-/* html += ' <ul>';
|
|
|
|
|
- html += ' <li>쿠폰 발급 기간 :'+ plan.dispStdt +'~'+ plan.dispEddt +'</li>';
|
|
|
|
|
- html += ' <li>본 쿠폰은 해당 기획전 상품에만 적용 가능합니다.</li>';
|
|
|
|
|
- html += ' <li>본 쿠폰은 해당 기획전 다운로드 버튼을 통해 발급받으실 수 있습니다.</li>';
|
|
|
|
|
- html += ' </ul>'; */
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += '</div>';
|
|
|
|
|
html += '</div>';
|
|
html += '</div>';
|
|
|
|
|
+ html += '<div class="content dp_announce line"> ';
|
|
|
|
|
+ html += ' <div class="cont_head"> ';
|
|
|
|
|
+ html += ' <div> ';
|
|
|
|
|
+ html += ' <h4>유의사항</h4> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += ' <div class="cont_body"> ';
|
|
|
|
|
+ html += ' <div class="announce_txt"> ';
|
|
|
|
|
+ html += ' <div class="note_txt"> ';
|
|
|
|
|
+ html += ' <img src="/images/pc/ico_content_find.png" alt="유의사항"> ';
|
|
|
|
|
+ html += ' <p>유의사항</p> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += ' <div class="announce_list"> ';
|
|
|
|
|
+ html += coupon[0].note;
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += '</div> ';
|
|
|
|
|
+
|
|
|
|
|
|
|
|
$("#G082_20").append(html);
|
|
$("#G082_20").append(html);
|
|
|
}
|
|
}
|
|
@@ -747,42 +743,103 @@ var fnTextConfirm = function() {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 파일 업로드 확인
|
|
|
|
|
+var fnFileAdd = function() {
|
|
|
|
|
+ //로그인 확인
|
|
|
|
|
+ if (!cfCheckLogin()) {
|
|
|
|
|
+ mcxDialog.alert("로그인 후 참여 가능합니다.");
|
|
|
|
|
+ $("#replyText").val('');
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
var ajaxReplyList = function () {
|
|
var ajaxReplyList = function () {
|
|
|
$.getJSON('/planning/reply/list?planSq='+plan.planSq, function(result, status) {
|
|
$.getJSON('/planning/reply/list?planSq='+plan.planSq, function(result, status) {
|
|
|
- console.log(result);
|
|
|
|
|
|
|
+ $("#replyList").html('');
|
|
|
if (status == 'success') {
|
|
if (status == 'success') {
|
|
|
- $("#replyList").html('');
|
|
|
|
|
var html = '';
|
|
var html = '';
|
|
|
html += '<div class="cmt_list_tit">';
|
|
html += '<div class="cmt_list_tit">';
|
|
|
html += ' <strong>댓글</strong><span class="cnt">('+result.replyList.length.addComma()+')</span>';
|
|
html += ' <strong>댓글</strong><span class="cnt">('+result.replyList.length.addComma()+')</span>';
|
|
|
html += '</div>';
|
|
html += '</div>';
|
|
|
- html += '<ul class="cmt_list">';
|
|
|
|
|
- $.each(result.replyList, function (idx, item) {
|
|
|
|
|
- html += ' <li>';
|
|
|
|
|
- html += ' <div class="cmt_top">';
|
|
|
|
|
- html += ' <span class="writer">'+item.maskingCustId+'</span>';
|
|
|
|
|
- html += ' <span class="date">'+item.entryDt+'</span>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' <div class="cmt_cont">';
|
|
|
|
|
- html += ' <div class="img_wrap clear">';
|
|
|
|
|
- html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img01.jpg" alt="썸네일"></span>';
|
|
|
|
|
- html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img02.jpg" alt="썸네일"></span>';
|
|
|
|
|
- html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img03.jpg" alt="썸네일"></span>';
|
|
|
|
|
- html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img04.jpg" alt="썸네일"></span>';
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' <p>'+item.entryVal1+'</p>';
|
|
|
|
|
- if (item.entryCustNo == result.custNo) {
|
|
|
|
|
- html += ' <button class="btn btn_default btn_del"><span>삭제</span></button>';
|
|
|
|
|
- }
|
|
|
|
|
- html += ' </div>';
|
|
|
|
|
- html += ' </li>';
|
|
|
|
|
- });
|
|
|
|
|
- html += '</ul>';
|
|
|
|
|
|
|
+ if (result.replyList.length>0) {
|
|
|
|
|
+ html += '<ul class="cmt_list">';
|
|
|
|
|
+ $.each(result.replyList, function (idx, item) {
|
|
|
|
|
+ html += ' <li>';
|
|
|
|
|
+ html += ' <div class="cmt_top">';
|
|
|
|
|
+ html += ' <span class="writer">'+item.maskingCustId+'</span>';
|
|
|
|
|
+ html += ' <span class="date">'+item.entryDt+'</span>';
|
|
|
|
|
+ html += ' </div>';
|
|
|
|
|
+ html += ' <div class="cmt_cont">';
|
|
|
|
|
+ html += ' <div class="img_wrap clear">';
|
|
|
|
|
+ html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img01.jpg" alt="썸네일"></span>';
|
|
|
|
|
+ html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img02.jpg" alt="썸네일"></span>';
|
|
|
|
|
+ html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img03.jpg" alt="썸네일"></span>';
|
|
|
|
|
+ html += ' <span class="pics"><img class="picsThumbs" src="/images/pc/thumb/ev_list_img04.jpg" alt="썸네일"></span>';
|
|
|
|
|
+ html += ' </div>';
|
|
|
|
|
+ html += ' <p>'+item.entryVal1+'</p>';
|
|
|
|
|
+ if (item.entryCustNo == result.custNo) {
|
|
|
|
|
+ html += ' <button class="btn btn_default btn_del"><span>삭제</span></button>';
|
|
|
|
|
+ }
|
|
|
|
|
+ html += ' </div>';
|
|
|
|
|
+ html += ' </li>';
|
|
|
|
|
+ });
|
|
|
|
|
+ html += '</ul>';
|
|
|
|
|
+ }else{
|
|
|
|
|
+ html += '<div class="nodata" id="replyNoData"> ';
|
|
|
|
|
+ html += ' <div class="txt_box"> ';
|
|
|
|
|
+ html += ' <p> ';
|
|
|
|
|
+ html += ' 등록된 댓글이 없습니다. ';
|
|
|
|
|
+ html += ' </p> ';
|
|
|
|
|
+ html += ' </div> ';
|
|
|
|
|
+ html += '</div> ';
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
$("#replyList").append(html);
|
|
$("#replyList").append(html);
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+$('#fileAdd').on('change', function() { fnChooseFile(this); });
|
|
|
|
|
+
|
|
|
|
|
+var fnChooseFile = function(obj) {
|
|
|
|
|
+ // multiple 속성이 있으면 files에는 다수의 객체가 할당됨
|
|
|
|
|
+ var file = obj.files[0];
|
|
|
|
|
+
|
|
|
|
|
+ if (!gagajf.isNull(file.name)) {
|
|
|
|
|
+ var extension = "\.(jpg|jpeg|png)$";
|
|
|
|
|
+ if (!(new RegExp(extension, "i")).test(file.name)) {
|
|
|
|
|
+ mcxDialog.alertC('이미지는 [jpg, jpeg, png] 파일만 가능합니다.', {
|
|
|
|
|
+ sureBtnText: "확인",
|
|
|
|
|
+ sureBtnClick: function() {
|
|
|
|
|
+ $(obj).parent('.imgUpload').finId('.removes').trigger('click');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ if (!gagajf.isNull(file.size) && Number(file.size) > 10 * 1000000) {
|
|
|
|
|
+ mcxDialog.alertC('이미지는 최대 10MB 이하 파일만 가능합니다.', {
|
|
|
|
|
+ sureBtnText: "확인",
|
|
|
|
|
+ sureBtnClick: function() {
|
|
|
|
|
+ $(obj).parent('.imgUpload').find('.removes').trigger('click');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 파일 업로드
|
|
|
|
|
+ gagajf.ajaxFileUpload('/common/file/upload?subDir=/reply'
|
|
|
|
|
+ , file
|
|
|
|
|
+ , function(result) {
|
|
|
|
|
+ // 업로드한 파일명 설정
|
|
|
|
|
+ $('input[name=' + obj.name + 'OrgFileNm]').val(result.oldFileName);
|
|
|
|
|
+ $('input[name=' + obj.name + 'SysFileNm]').val(result.newFileName);
|
|
|
|
|
+ }
|
|
|
|
|
+ );
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
$(document).ready( function() {
|
|
$(document).ready( function() {
|
|
|
ajaxReplyList();
|
|
ajaxReplyList();
|
|
|
//공유 버튼 토글
|
|
//공유 버튼 토글
|
|
@@ -917,6 +974,44 @@ $(document).ready( function() {
|
|
|
$('#cmt_cnt').html("500");
|
|
$('#cmt_cnt').html("500");
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ //팝업 - 댓글 이미지 슬라이드
|
|
|
|
|
+ $(document).on('click','.cmt_cont .img_wrap .pics',function(e){
|
|
|
|
|
+ $("#thumbImgPop .swiper-wrapper").empty();
|
|
|
|
|
+
|
|
|
|
|
+ var popSlideIndex = $(this).index();
|
|
|
|
|
+ contactPopSwiper.slideTo(popSlideIndex);
|
|
|
|
|
+ contactPopSwiper.update();
|
|
|
|
|
+
|
|
|
|
|
+ var contactImglength = $('.cmt_cont .img_wrap .pics').length;
|
|
|
|
|
+ var popImgHtml = "";
|
|
|
|
|
+ for (i = 1; i <= contactImglength; i++) {
|
|
|
|
|
+ var contactImg = $(this).find('img');
|
|
|
|
|
+ var contactImgSrc = $('.cmt_cont .img_wrap .pics:nth-child('+i+') img').attr('src');
|
|
|
|
|
+ popImgHtml += "<div class='swiper-slide'><div class='pop_img' style='background-image:url("+ contactImgSrc +")'></div></div>";
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ $("#thumbImgPop .swiper-wrapper").append(popImgHtml);
|
|
|
|
|
+ $('#thumbImgPop').modal("show");
|
|
|
|
|
+
|
|
|
|
|
+ return false;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ /* SLIDE - 댓글 이미지 팝업 */
|
|
|
|
|
+ var contactPopSwiper = new Swiper('.thumb_img_pop .swiper-container', {
|
|
|
|
|
+ navigation: {
|
|
|
|
|
+ nextEl: '.thumb_img_pop .swiper-button-next',
|
|
|
|
|
+ prevEl: '.thumb_img_pop .swiper-button-prev',
|
|
|
|
|
+ },
|
|
|
|
|
+ pagination: {
|
|
|
|
|
+ el: '.thumb_img_pop .swiper-pagination',
|
|
|
|
|
+ clickable: true,
|
|
|
|
|
+ },
|
|
|
|
|
+ observer:true,
|
|
|
|
|
+ observeParents: true,
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|