|
|
@@ -0,0 +1,289 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * * @source : PlanningReviewDetailFormWeb.html
|
|
|
+ * @desc : 리뷰 상세 팝업
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.06.16 sowon 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<div class="modal-dialog" role="document" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="modal-title" id="pdBestReviewLabel">리뷰상세</h5>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body" id="reviewBody">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<form name="reviewDetailForm" id="reviewDetailForm" method="post">
|
|
|
+<input type="hidden" name="goodsCd" th:value="${review.goodsCd}" />
|
|
|
+<input type="hidden" name="bestYn" th:value="${review.bestYn}" />
|
|
|
+<input type="hidden" name="photoYn" th:value="${review.photoYn}" />
|
|
|
+<input type="hidden" name="reviewSq" th:value="${review.reviewSq}" />
|
|
|
+<input type="hidden" name="attachSq" th:value="${review.attachSq}" />
|
|
|
+</form>
|
|
|
+<a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_review_best')" class="close-modal">Close</a>
|
|
|
+<script th:inline="javascript">
|
|
|
+/*<![CDATA[*/
|
|
|
+
|
|
|
+ var fnReviewDetail = function() {
|
|
|
+
|
|
|
+ var params = new Object();
|
|
|
+ params.goodsCd = $('#reviewDetailForm input[name=goodsCd]').val();
|
|
|
+ params.reviewSq = $('#reviewDetailForm input[name=reviewSq]').val();
|
|
|
+ params.bestYn =$('#reviewDetailForm input[name=bestYn]').val();
|
|
|
+ params.photoYn = $('#reviewDetailForm input[name=photoYn]').val();
|
|
|
+
|
|
|
+ gagajf.ajaxSubmit("/planning/review/detail/list", "json", fnReviewDetailCallback, params);
|
|
|
+ }
|
|
|
+
|
|
|
+ var fnReviewDetailCallback = function(result) {
|
|
|
+ console.log(result);
|
|
|
+ $('#reviewBody').html('');
|
|
|
+ // 목록
|
|
|
+ if (result.reviewList != null && result.reviewList.length > 0) {
|
|
|
+ let fileGbClass = '';
|
|
|
+ let rdx = $('#reviewDetailForm input[name=attachSq]').val();
|
|
|
+ $.each(result.reviewList, function(idx, review) {
|
|
|
+ let tag = '';
|
|
|
+ tag +='<div class="pop_cont">\n';
|
|
|
+ tag +='<div class="swiper-container detail">\n';
|
|
|
+ tag +='<div class="swiper-wrapper">\n';
|
|
|
+ tag +='<div class="swiper-slide">\n';
|
|
|
+
|
|
|
+ let reviewClass = 'empty_photo';
|
|
|
+ if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
|
|
|
+ reviewClass = '';
|
|
|
+ }
|
|
|
+ tag +='<div class="review '+reviewClass+'" >\n'; <!-- 첨부이미지 없을 시 empty_photo 클래스 추가 -->
|
|
|
+ tag +=' <div class="pic">\n';
|
|
|
+ if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
|
|
|
+ $.each(review.reviewAttachList, function(aIdx, reviewAttach){
|
|
|
+ fileGbClass = '';
|
|
|
+ if (reviewAttach.fileGb == "M") fileGbClass = "mov";
|
|
|
+ tag +=' <span class="thumb '+fileGbClass+'">\n';<!-- 동영상의 썸네일일 경우 mov 클래스 추가-->
|
|
|
+ if (reviewAttach.fileGb == "M") {
|
|
|
+ tag +=' <iframe width="100%" height="100%" src="'+_kollusMediaUrl +'/'+reviewAttach.kmcKey +'?player_version=html5" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>\n';
|
|
|
+ }else{
|
|
|
+ tag +=' <img src="'+ _imgUrl + reviewAttach.sysFileNm +'" alt="">\n';
|
|
|
+ }
|
|
|
+ tag +=' </span>\n';
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ tag +=' <span class="thumb">\n';
|
|
|
+ tag +=' <img src="'+_uploadGoodsUrl +'/'+review.sysImgNm+'?RS=545" alt="" onerror="' + _uximgUrl + '/images/pc/thumb/bg_item_none.png" />\n';
|
|
|
+ tag +=' </span>\n';
|
|
|
+ }
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div class="review_cont">\n';
|
|
|
+ tag +=' <div class="box_wrap">\n';
|
|
|
+ tag +=' <div class="star_box">\n';
|
|
|
+ tag +=' <div class="star_score">\n';
|
|
|
+ tag +=' <span class="star">\n';
|
|
|
+ tag +=' <em class="progbar" style="width:'+(review.iscore*20)+'%;"></em>\n'; <!-- 평점 style로 표기 -->
|
|
|
+ tag +=' </span>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div class="response_box">\n';
|
|
|
+ tag +=' <div class="full">\n';
|
|
|
+ tag +=' <dl>\n';
|
|
|
+
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>구매옵션</dt>\n';
|
|
|
+ if (review.goodsOptionList != null && review.goodsOptionList.length > 0){
|
|
|
+ tag +=' <dd>\n';
|
|
|
+ $.each(review.goodsOptionList, function(aIdx, reviewGoods){
|
|
|
+ tag +=' <p><span>'+ reviewGoods.optCd1Nm +'</span> / <span>'+ reviewGoods.optCd2+'</span></p>\n';
|
|
|
+ });
|
|
|
+ tag +=' <dd>\n';
|
|
|
+ }
|
|
|
+
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' </dl>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div class="full">\n';
|
|
|
+ tag +=' <dl>\n';
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>키/몸무게</dt>\n';
|
|
|
+ tag +=' <dd>'+review.height+'cm / '+review.weight +'kg \n';
|
|
|
+ tag +=' </dd>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' </dl>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ if (!gagajf.isNull(review.sizeGb)){ <!-- 사이즈구분(T:상의, B:하의, S:신발) -->
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dl > \n';
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>사이즈</dt>\n';
|
|
|
+ tag +=' <dd>'+review.scoreSizeNm+'</dd>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>컬러</dt>\n';
|
|
|
+ tag +=' <dd>'+review.scoreColorNm+'</dd>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ if (review.sizeGb == 'T' || review.sizeGb == 'B'){
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>핏</dt>\n';
|
|
|
+ tag +=' <dd>'+review.scoreFitNm+'</dd>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>두께감</dt>\n';
|
|
|
+ tag +=' <dd>'+ review.scoreThickNm+'</dd>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ }
|
|
|
+ if (review.sizeGb == 'S'){
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>무게감</dt>\n';
|
|
|
+ tag +=' <dd>'+review.scoreWeightNm+'</dd>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div>\n';
|
|
|
+ tag +=' <dt>볼너비</dt>\n';
|
|
|
+ tag +=' <dd>'+review.scoreBallNm+'</dd>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ }
|
|
|
+ tag +=' </dl>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ }
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div class="txt_review_box">\n';
|
|
|
+ tag +=' <p>' + review.reviewContent +'</p>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' <div class="writer_box">\n';
|
|
|
+ tag += ' <div class="writer">\n';
|
|
|
+ tag += ' <span class="wr_id">'+ review.maskingCustId +'</span>\n';
|
|
|
+ tag += ' <span class="wr_date">' + review.regDt + '</span>\n';
|
|
|
+ tag += ' </div>\n'
|
|
|
+ tag +=' </div>\n';
|
|
|
+ if (!gagajf.isNull(review.admRpl)){
|
|
|
+ tag += ' <div class="reply_box">\n';
|
|
|
+ tag += ' <div class="reply">\n';
|
|
|
+ tag += ' <div class="reply_writer">\n';
|
|
|
+ tag += ' <span class="wr_name">관리자</span>\n';
|
|
|
+ tag += ' <span class="wr_date">'+review.admRplDt+'</span>\n';
|
|
|
+ tag += ' </div>\n';
|
|
|
+ tag += ' <div class="reply_txt">\n';
|
|
|
+ tag += ' <p>' + review.admRpl+'</p>\n';
|
|
|
+ tag += ' </div>\n';
|
|
|
+ tag += ' </div>\n';
|
|
|
+ tag += ' </div>\n';
|
|
|
+ }
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ if (review.reviewAttachList != null && review.reviewAttachList.length >= 2){
|
|
|
+ tag +=' <div class="thumblist">\n';
|
|
|
+ tag +=' <ul>\n';
|
|
|
+ let activeClass = '';
|
|
|
+
|
|
|
+ $.each(review.reviewAttachList, function(aIdx, reviewAttach){
|
|
|
+ activeClass = '';
|
|
|
+ if (aIdx == rdx){
|
|
|
+ activeClass = 'active';
|
|
|
+ }
|
|
|
+ fileGbClass = '';
|
|
|
+ if (reviewAttach.fileGb == "M") fileGbClass = "mov";
|
|
|
+ tag +=' <li>\n';
|
|
|
+ tag +=' <div class="pic '+activeClass+'"> \n'; <!-- 활성화시 active 클래스 추가 -->
|
|
|
+
|
|
|
+ if (reviewAttach.fileGb == "M") {
|
|
|
+ tag +=' <span class="thumb '+fileGbClass+'"><iframe width="100%" height="100%" src="'+_kollusMediaUrl +'/'+reviewAttach.kmcKey +'?player_version=html5" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></span>\n';
|
|
|
+ }else{
|
|
|
+ tag +=' <span class="thumb" style="background-image:url('+ _imgUrl + reviewAttach.sysFileNm +');\" >\n';
|
|
|
+ tag +=' <img src="'+ _imgUrl + reviewAttach.sysFileNm +'" alt="">\n';
|
|
|
+ }
|
|
|
+ tag +=' </span>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ tag +=' </li>\n';
|
|
|
+ });
|
|
|
+ tag +=' </ul>\n';
|
|
|
+ tag +=' </div>\n';
|
|
|
+ }
|
|
|
+ tag +='</div>\n';
|
|
|
+
|
|
|
+ tag +='</div>\n';
|
|
|
+ tag +='</div>\n';
|
|
|
+ tag +='</div>\n';
|
|
|
+ tag +='</div>\n';
|
|
|
+
|
|
|
+ $('#reviewBody').append(tag);
|
|
|
+
|
|
|
+ $('.pd_photoreviewdetail_pop .swiper-slide').each(function(index, element){
|
|
|
+ var $this = $(this);
|
|
|
+
|
|
|
+ var thumbCount = $this.find('.thumblist ul li').length;
|
|
|
+ var thumbUlWidth = $this.find('.thumblist ul li').width() * thumbCount;
|
|
|
+ var thumbMargin = 8 * thumbCount;
|
|
|
+ var thumbListWidth = thumbUlWidth + thumbMargin;
|
|
|
+
|
|
|
+ $this.find('.thumblist ul').attr('style', 'width:' + thumbListWidth + 'px;');
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.pd_photoreviewdetail_pop .thumblist ul li').eq(rdx).trigger("click");
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 다른 상품평 보기
|
|
|
+ var fnReviewNext = function(reviewSq){
|
|
|
+ if (gagajf.isNull(reviewSq)) return false;
|
|
|
+
|
|
|
+ $('#reviewDetailForm input[name=reviewSq]').val(reviewSq);
|
|
|
+ fnReviewDetail();
|
|
|
+ }
|
|
|
+
|
|
|
+ //$(document).ready( function() {
|
|
|
+
|
|
|
+ fnReviewDetail();
|
|
|
+
|
|
|
+ //슬라이드 - 상품 베스트 리뷰 자세히보기 영역
|
|
|
+ var photoReviewDetailSwiper = new Swiper('.pd_photoreviewdetail_pop .swiper-container.detail', {
|
|
|
+ effect :'fade',
|
|
|
+ slidesPerView: 1,
|
|
|
+ spaceBetween: 0,
|
|
|
+ simulateTouch:false,
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.pd_photoreviewdetail_pop .swiper-button-next',
|
|
|
+ prevEl: '.pd_photoreviewdetail_pop .swiper-button-prev',
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ $('.pd_photoreviewdetail_pop .swiper-slide').each(function(index, element){
|
|
|
+ var $this = $(this);
|
|
|
+
|
|
|
+ var thumbCount = $this.find('.thumblist ul li').length;
|
|
|
+ var thumbUlWidth = $this.find('.thumblist ul li').width() * thumbCount;
|
|
|
+ var thumbMargin = 8 * thumbCount;
|
|
|
+ var thumbListWidth = thumbUlWidth + thumbMargin;
|
|
|
+
|
|
|
+ $this.find('.thumblist ul').attr('style', 'width:' + thumbListWidth + 'px;');
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).on('click','.pd_photoreviewdetail_pop .thumblist ul li',function(e){
|
|
|
+
|
|
|
+ $(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
|
|
|
+ $(this).parents(".swiper-slide").find(".thumblist ul li .pic").removeClass('active');
|
|
|
+ $(this).find(".pic").addClass('active');
|
|
|
+
|
|
|
+ var thumbIndex = $(this).index();
|
|
|
+ thumbContentHtml = $(this).find('.pic .thumb').html();
|
|
|
+ $(this).parents(".swiper-slide").find(".review > .pic > .thumb").append(thumbContentHtml);
|
|
|
+
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ //});
|
|
|
+
|
|
|
+
|
|
|
+/*]]>*/
|
|
|
+</script>
|
|
|
+ </html>
|
sowon4187