|
|
@@ -0,0 +1,355 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ko"
|
|
|
+ xmlns:th="http://www.thymeleaf.org"
|
|
|
+ xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
|
|
|
+ layout:decorator="mob/common/layout/DefaultLayoutMob">
|
|
|
+<!--
|
|
|
+ *******************************************************************************
|
|
|
+ * @source : LookbookMainFormMob.html
|
|
|
+ * @desc : 룩북리스트 Page
|
|
|
+ *============================================================================
|
|
|
+ * STYLE24
|
|
|
+ * Copyright(C) 2020 TSIT, All rights reserved.
|
|
|
+ *============================================================================
|
|
|
+ * VER DATE AUTHOR DESCRIPTION
|
|
|
+ * === =========== ========== =============================================
|
|
|
+ * 1.0 2021.05.09 bin2107 최초 작성
|
|
|
+ *******************************************************************************
|
|
|
+ -->
|
|
|
+<body>
|
|
|
+
|
|
|
+<th:block layout:fragment="content">
|
|
|
+ <main role="" id="" class="container br">
|
|
|
+ <section class="content br_lookbook">
|
|
|
+ <div class="inner">
|
|
|
+ <p class="title"><span id="lookbookTotCnt"></span>개 룩북</p>
|
|
|
+ <div class="collection_wrap">
|
|
|
+ <div class="collection_list" id="listBox">
|
|
|
+ </div>
|
|
|
+ <p class="last_page" id="divLastPage" style="display: none;">마지막 페이지입니다.</p>
|
|
|
+ </div>
|
|
|
+ <div class="no_lb_wrap" id="divLookbookNoData" style="display: none;">
|
|
|
+ <p>등록된 룩북이 없습니다.</p>
|
|
|
+ <button type="button" class="btn" th:if="${lbInfo.lookbookGb=='BL'}" th:onclick="cfnGoToBrandMain([[${lbInfo.brandCd}]]);"><span th:text="${brandGroupInfo.brandGroupNm+' 홈으로 가기'}"></span></button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <form id="lbMainForm" name="lbMainForm">
|
|
|
+ <input type="hidden" name="pageNo" id="pageNo" value ="1"/>
|
|
|
+ <input type="hidden" name="pageSize" value ="30"/>
|
|
|
+ <input type="hidden" name="lookbookGb" th:value="${lbInfo.lookbookGb}"/>
|
|
|
+ <input type="hidden" name="brandCd" th:value="${lbInfo.brandCd}">
|
|
|
+ <input type="hidden" name="frontYn" value="Y"/>
|
|
|
+ <input type="hidden" name="totalCnt" />
|
|
|
+ </form>
|
|
|
+
|
|
|
+<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
|
|
|
+<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
|
|
|
+
|
|
|
+<script th:inline="javascript">
|
|
|
+ /*<![CDATA[*/
|
|
|
+ var currUrl = document.location.href;
|
|
|
+
|
|
|
+ var lookbookGb = [[${lbInfo.lookbookGb}]];
|
|
|
+ if(lookbookGb != 'BL'){
|
|
|
+ lookbookGb = 'L';
|
|
|
+ }else{
|
|
|
+ $(".dp_util .open_categori").hide();
|
|
|
+ $("#filterChkArea").hide();
|
|
|
+ }
|
|
|
+ var brandCd = [[${lbInfo.brandCd}]];
|
|
|
+
|
|
|
+ var fnLookbookListSearch = function (){
|
|
|
+ gagaInfiniteScroll.getHistory();
|
|
|
+ }
|
|
|
+
|
|
|
+ var fnGetInfiniteScrollDataList = function (pageNum){
|
|
|
+ $("#lbMainForm input[name=pageNo]").val(pageNum+1);
|
|
|
+ gagajf.ajaxFormSubmit("/display/lookbook/main/list", document.lbMainForm, gagaInfiniteScroll.jsonToHtml);
|
|
|
+ }
|
|
|
+
|
|
|
+ var fnDrawInfiniteScrollData = function (result){
|
|
|
+ let totalCnt = result.paging.totalCount;
|
|
|
+ $("#lookbookTotCnt").text(totalCnt);
|
|
|
+ $("#lbMainForm").find("input[name=totalCnt]").val(totalCnt);
|
|
|
+ gagaInfiniteScroll.pageStatus.totalCount = totalCnt;
|
|
|
+ console.log(result.dataList.length);
|
|
|
+
|
|
|
+ if (result.dataList != null && result.dataList.length > 0) {
|
|
|
+ $(".nodata").hide();
|
|
|
+ let lastPage = result.paging.pageNo;
|
|
|
+ let endRow = result.paging.endRow - result.paging.pageSize;
|
|
|
+
|
|
|
+ var htm = fnGetLookbookList(result);
|
|
|
+ gagaInfiniteScroll.draw(htm);
|
|
|
+ }else{
|
|
|
+ if($("#lbMainForm input[name=pageNo]").val()==1){
|
|
|
+ $("#divLookbookNoData").show();
|
|
|
+ }else{
|
|
|
+ $("#divLastPage").show();
|
|
|
+ }
|
|
|
+ gagaInfiniteScroll.draw('not');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let fnGetLookbookList = function (result){
|
|
|
+ var html = '';
|
|
|
+
|
|
|
+ $.each(result.dataList, function (idx, item){
|
|
|
+ html += '<a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">\n';
|
|
|
+ html += ' <div class="collection">\n';
|
|
|
+ html += ' <figure>\n';
|
|
|
+ html += ' <img src="' + _imgUrl + item.orgTnfileNm + '" alt="">\n';
|
|
|
+ html += ' </figure>\n';
|
|
|
+ html += ' <p>'+item.title+'</p>\n';
|
|
|
+ html += ' </div>\n';
|
|
|
+ html += '</a>\n';
|
|
|
+ });
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 브랜드 리스트 가져오기
|
|
|
+ let fnGetBrandList = function (){
|
|
|
+ let actionUrl = '/display/lookbook/main/brand/list?frontYn=Y';
|
|
|
+ $.getJSON(actionUrl, function(result, status){
|
|
|
+ if(result.length > 0){
|
|
|
+ $('#brandArea').html('');
|
|
|
+ let tag = '';
|
|
|
+ tag += '<button type="button" data-name="" id="chkFilterBrand" class="on" onclick="fnAddBrand(\'\');"><span>전체</span></button>\n';
|
|
|
+ $.each(result, function(idx, item) {
|
|
|
+ tag += '<button type="button" id="chkFilterBrand'+idx+'" data-name="'+item.brandCd+'" onclick="fnAddBrand(\''+item.brandCd+'\');"><span>'+item.brandNm+'</span></button>\n';
|
|
|
+ });
|
|
|
+ $('#brandArea').html(tag);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 브랜드 선택 적용
|
|
|
+ var fnGetBrandLookbookList = function (){
|
|
|
+ $("#lbMainForm input:hidden[name=multiBrandCd]").remove();
|
|
|
+ var tag = '';
|
|
|
+ var tag2 = '';
|
|
|
+ $('#chkBrand').html('');
|
|
|
+ $(".button_list button").each(function (index) {
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ if(!gagajf.isNull($(this).attr('data-name'))){
|
|
|
+ tag += '<input type="hidden" name="multiBrandCd" value="'+$(this).attr('data-name')+'" />';
|
|
|
+ $("#lbMainForm").append(tag);
|
|
|
+
|
|
|
+ var brandCd = $(this).attr("data-name");
|
|
|
+ var brandNm = $(this).find('span').text();
|
|
|
+ tag2 += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter(\''+brandCd+'\');">'+brandNm+'</a>';
|
|
|
+ $('#chkBrand').html(tag2);
|
|
|
+ }else{
|
|
|
+ $(this).addClass("on");
|
|
|
+ tag2 += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter("");">전체</a>';
|
|
|
+ $('#chkBrand').html(tag2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ var chkLen = $("#chkBrand").find('a').length;
|
|
|
+ if(chkLen < 1){
|
|
|
+ $('#chkBrand').html('<a href="javascript:void(0);" onclick="fnDeleteBrandFilter("");">전체</a>');
|
|
|
+ $(".button_list button").each(function (index) {
|
|
|
+ if(gagajf.isNull($(this).attr('data-name'))){
|
|
|
+ $(this).addClass("on");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ fnLookbookInfiniteScrollInit();
|
|
|
+ fnLookbookListSearch();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 브랜드 선택 초기화
|
|
|
+ var fnLookbookReset = function (){
|
|
|
+ fnLookbookInfiniteScrollInit();
|
|
|
+ fnLookbookListSearch();
|
|
|
+ //fnGetBrandLookbookList();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 인피니티 스크롤 초기화
|
|
|
+ var fnLookbookInfiniteScrollInit = function (){
|
|
|
+ sessionStorage.removeItem(document.location.href);
|
|
|
+ $("#listBox").html("");
|
|
|
+ }
|
|
|
+
|
|
|
+ let fnGetLookbookList2 = function (lookbookGb, brandGroupNo){
|
|
|
+ let actionUrl = '/display/lookbook/main/list?lookbookGb='+lookbookGb;
|
|
|
+ if (!gagajf.isNull(brandGroupNo)) actionUrl += '&multiBrandCd=' + brandGroupNo;
|
|
|
+
|
|
|
+ $.getJSON(actionUrl , function (result, status){
|
|
|
+ if (status == 'success'){
|
|
|
+ if (result.length > 0){
|
|
|
+ $("#totCnt").html('<span>' + result.length.addComma() + '</span>');
|
|
|
+
|
|
|
+ if (gagajf.isNull(brandGroupNo)){
|
|
|
+ $('#brandArea').html('');
|
|
|
+ let tag = '';
|
|
|
+ let tag3 = '';
|
|
|
+ let brandArr = [];
|
|
|
+ tag += '<button type="button" data-name="" id="chkFilterBrand" class="on" onclick="fnAddBrand(\'\');"><span>전체</span></button>\n';
|
|
|
+ $.each(result, function(idx, item) {
|
|
|
+ if(!brandArr.includes(item.brandCd)){
|
|
|
+ brandArr.push(item.brandCd);
|
|
|
+ tag += '<button type="button" id="chkFilterBrand'+idx+'" data-name="'+item.brandCd+'" onclick="fnAddBrand(\''+item.brandCd+'\');"><span>'+item.brandNm+'</span></button>\n';
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#brandArea').html(tag);
|
|
|
+ }else{
|
|
|
+ var html = '';
|
|
|
+ let onCnt = 0;
|
|
|
+ $(".button_list button").each(function (index) {
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ var brandCd = $(this).attr("data-name");
|
|
|
+ var brandNm = $(this).find('span').text();
|
|
|
+ html += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter(\''+brandCd+'\');">'+brandNm+'</a>';
|
|
|
+ $('#chkBrand').html(html);
|
|
|
+ onCnt++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if(onCnt<1){
|
|
|
+ $(".button_list button").each(function (index) {
|
|
|
+ if(gagajf.isNull($(this).attr('data-name'))){
|
|
|
+ $(this).addClass("on");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('#chkBrand').html('<a href="javascript:void(0);" onclick="fnReset();">전체</a>');
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var tag2 = '';
|
|
|
+ $.each(result, function(idx, item){
|
|
|
+ tag2 += '<li>\n';
|
|
|
+ tag2 += ' <a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">\n';
|
|
|
+ tag2 += ' <div class="ev_img">\n';
|
|
|
+ tag2 += ' <img src="' + _imgUrl + item.orgTnfileNm + '" alt="ATTENTION! 20FW HOLIDAY TBJ 주목할 홀리데이 TBJ 컬렉션">\n';
|
|
|
+ tag2 += ' </div>\n';
|
|
|
+ tag2 += ' <div class="ev_txt">\n';
|
|
|
+ if(lookbookGb != 'BL') {
|
|
|
+ tag2 += ' <p class="brand">' + item.brandNm + '</p>\n';
|
|
|
+ }
|
|
|
+ tag2 += ' <p class="tit">'+item.title+'</p>\n';
|
|
|
+ tag2 += ' </div>\n';
|
|
|
+ tag2 += ' </a>\n';
|
|
|
+ tag2 += '</li>\n';
|
|
|
+ });
|
|
|
+ $('#lookbookArea').html(tag2);
|
|
|
+ $('#divLookbookNoData').hide();
|
|
|
+ $('#lookbookArea').show();
|
|
|
+ }else{
|
|
|
+ $("#totCnt").html('<span>0</span>');
|
|
|
+ //document.getElementById("changeClass").class = "event_list no_data";
|
|
|
+ $('#lookbookArea').hide();
|
|
|
+ $('#divLookbookNoData').show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //document.getElementById("brandBox").class = "btn btn_default tgl_dropdown";
|
|
|
+ $('.dropdown_menu').hide();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 필터 브랜드 선택시
|
|
|
+ var fnAddBrand = function (obj){
|
|
|
+ $(".button_list button").each(function (index) {
|
|
|
+ if(gagajf.isNull(obj)){
|
|
|
+ if($(this).attr('data-name') != ''){
|
|
|
+ $(this).removeClass();
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if($(this).attr('data-name') == ''){
|
|
|
+ $(this).removeClass();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 초기화버튼
|
|
|
+ var fnReset = function (){
|
|
|
+ $('.reset').click();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 리스트상단 필터 리스트에서 삭제 시
|
|
|
+ var fnDeleteBrandFilter = function (brandGroupNo){
|
|
|
+ $(".button_list button").each(function (index) {
|
|
|
+ if($(this).hasClass("on")){
|
|
|
+ if(brandGroupNo == $(this).attr('data-name')){
|
|
|
+ $(this).removeClass();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ fnGetBrandLookbookList();
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).ready(function(){
|
|
|
+ // fnGetLookbookList(lookbookGb,brandCd);
|
|
|
+ //fnLookbookListSearch();
|
|
|
+ fnLookbookReset();
|
|
|
+
|
|
|
+ if(lookbookGb=='BL'){
|
|
|
+ $("#btnHome").attr('onclick', 'cfnGoToBrandMain('+brandCd+');');
|
|
|
+ }else{
|
|
|
+ $("#btnHome").attr('href', '/');
|
|
|
+ fnGetBrandList();
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!gagajf.isNull($("#lbMainForm").find("input[name=totalCnt]").val())){
|
|
|
+ $("#lookbookTotCnt").text($("#lbMainForm").find("input[name=totalCnt]").val());
|
|
|
+ }
|
|
|
+
|
|
|
+ $(document).on('click','.sub_category .more_btn',function(){
|
|
|
+ $(this).toggleClass('on');
|
|
|
+ $('.sub_category .cate_wrap').toggleClass('on');
|
|
|
+ if($(this).hasClass('on')){
|
|
|
+ $(this).find('span').text('접기');
|
|
|
+ }else{
|
|
|
+ $(this).find('span').text('더보기');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 210415_팝업관련 추가
|
|
|
+ //기간 선택 팝업
|
|
|
+ $(document).on("click", ".open_categori", function(){
|
|
|
+ $('#odDatePop').show().addClass("active");
|
|
|
+ $("body").css({"overflow":"hidden"});
|
|
|
+ });
|
|
|
+ //팝업_닫기
|
|
|
+ $('.popup_close').on("click",function(){
|
|
|
+ $('.popup_box').hide().removeClass('active');
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+ // 210415_팝업 테두리 선택 추가
|
|
|
+ $(document).ready(function(){
|
|
|
+ $(document).on('click','.popup_box .button_list button',function(){
|
|
|
+ //$('.popup_box .button_list button').removeClass('on');
|
|
|
+ $(this).toggleClass('on');
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $(document).on('click','.popup_box .button_list button',function(){
|
|
|
+ $(this).parents('.popup_box').show().addClass('active');
|
|
|
+ //$("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+ $(document).on('click','.brand_floormenu .refresh',function(){
|
|
|
+ $('.popup_box .button_list button').removeClass('on');
|
|
|
+ $('#chkFilterBrand').addClass('on');
|
|
|
+ });
|
|
|
+ $(document).on('click','.popup_box .buying',function(){
|
|
|
+ $(this).parents('.popup_box').hide().removeClass('active');
|
|
|
+ $("body").css({"overflow":"visible"});
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ /*]]>*/
|
|
|
+</script>
|
|
|
+
|
|
|
+</th:block>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
eskim