Home Explore Help
Sign In
style24
/
style24.front
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

[모바일] 카테고리메인

bin2107 5 years ago
parent
1dfacc2125
commit
c3a6188c66
3 changed files with 213 additions and 2 deletions
Unified View Show Diff Stats
  1. 41 1
      src/main/webapp/WEB-INF/views/mob/display/BrandMainFormMob.html
  2. 171 0
      src/main/webapp/WEB-INF/views/mob/display/CategoryMainFormMob.html
  3. 1 1
      src/main/webapp/WEB-INF/views/web/display/BrandMainFormWeb.html

+ 41 - 1
src/main/webapp/WEB-INF/views/mob/display/BrandMainFormMob.html
View File 

@@ -395,11 +395,51 @@
 
 		</th:block>
 
 		</th:block>
 
 	</section>
 
 	</section>
 
 </main>
 
 </main>
 
+	<!-- 픽커모달 -->
 
+	<div class="modal fade" id="reco_pop" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 
+
 
+		<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>
 
+	</div>
 
+	<!-- //픽커모달 -->
 
 	<script th:inline="javascript">
 
 	<script th:inline="javascript">
 
+		var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];
 
+
 
 		// 픽커모달
 
 		// 픽커모달
 
+		var fnGoodsPopup = function(obj1,obj2,obj3,obj4,obj5,obj6,obj7){
 
+			$("#reco_pop .modal-dialog").remove();
 
+			var tag = '';
 
+
 
+			tag += '<div class="modal-dialog" role="document">\n';
 
+			tag += '	<div class="modal-content">\n';
 
+			tag += '		<div class="modal-header">\n';
 
+			tag += '			<h5 class="modal-title"><span class="sr_only">제품정보</span></h5>\n';
 
+			tag += '		</div>\n';
 
+			tag += '		<div class="modal-body">\n';
 
+			tag += '			<div class="itemsGrp rowtype">\n';
 
+			tag += '				<div class="item_prod">\n';
 
+			tag += '					<div class="item_state">\n';
 
+			tag += '						<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\''+obj7+'\',\'\',\'\')">\n';
 
+			tag += '							<div class="itemPic">\n';
 
+			tag += '								<img class="vLHTC pd_img" src="'+goodsImgUrl+'/'+obj1+'?RS=260" alt="">\n';
 
+			tag += '							</div>\n';
 
+			tag += '							<p class="itemBrand">'+obj2+'</p>\n';
 
+			tag += '							<div class="itemName">'+obj3+'</div>\n';
 
+			tag += '							<p class="itemPrice">'+obj5.addComma()+'</p>\n';
 
+			tag += '						</a>\n';
 
+			tag += '					</div>\n';
 
+			tag += '				</div>\n';
 
+			tag += '			</div>\n';
 
+			tag += '		</div>\n';
 
+			tag += '	</div>\n';
 
+			tag += '</div>\n';
 
+
 
+			$("#reco_pop").append(tag);
 
+			$('#reco_pop').modal("show");
 
+		}
 
+
 
 		$(document).ready(function () {
 
 		$(document).ready(function () {
 
 			$(document).on('click','.item_picker',function(e){
 
 			$(document).on('click','.item_picker',function(e){
 
-				$("#reco_pop").modal("show");
 
+				//$("#reco_pop").modal("show");
 
 				$("body").addClass("recoPop");
 
 				$("body").addClass("recoPop");
 
 				return false;
 
 				return false;
 
 			});
 
 			});

+ 171 - 0
src/main/webapp/WEB-INF/views/mob/display/CategoryMainFormMob.html
View File 

@@ -0,0 +1,171 @@
 
+<!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  : CategoryMainFormMob.html
 
+ * @desc    : 카테고리메인 Page
 
+ *============================================================================
 
+ * STYLE24
 
+ * Copyright(C) 2020 TSIT, All rights reserved.
 
+ *============================================================================
 
+ * VER  DATE         AUTHOR      DESCRIPTION
 
+ * ===  ===========  ==========  =============================================
 
+ * 1.0  2021.05.10   bin2107     최초 작성
 
+ *******************************************************************************
 
+ -->
 
+<body>
 
+
 
+<th:block layout:fragment="content">
 
+	<main role="" id="" class="container dp">
 
+		<section class="content dp_submain">
 
+			<th:block th:if="${cateMainLayoutList}" th:each="mainLayoutData, mainStat : ${cateMainLayoutList}" th:with="contentsLoc=${#strings.replace(mainLayoutData.contentsLoc,'SCM','')},contentsTitle=${mainLayoutData.contentsTitle}">
 
+				<th:block th:if="${contentsLoc=='001'}">
 
+					<div class="inner wide" th:if="${planningList != null and !planningList.empty}">
 
+						<div class="submain_visual">
 
+							<div class="swiper-container">
 
+								<div class="swiper-wrapper">
 
+									<div class="swiper-slide" th:each="item, status : ${planningList}">
 
+										<div class="img">
 
+											<img th:src="${@environment.getProperty('domain.image') + '/' + item.imgPath1}" alt="">
 
+										</div>
 
+										<div class="txtWrap">
 
+											<p th:text="${item.strTitle1}">겨울정기 가격제안전<br>겨울정기 가격</p>
 
+											<p class="txt_xs" th:text="${item.subText1}">나만의 겨울 스타일 찾기</p>
 
+										</div>
 
+									</div>
 
+								</div>
 
+								<div class="swiper-pagination"></div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</th:block>
 
+
 
+				<th:block th:if="${contentsLoc=='004'}">
 
+					<div class="inner bg_gray">
 
+						<div class="sub_category">
 
+							<div class="cate_wrap">
 
+							</div>
 
+							<!-- 카테고리 3줄 이상일 경우 노출 -->
 
+							<div class="more_btn">
 
+								<button type="button" class="btn"><span>더보기</span></button>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</th:block>
 
+
 
+				<th:block th:if="${contentsLoc=='002'}">
 
+					<div class="inner wide" th:if="${newGoodsList != null}">
 
+						<div class="new_item">
 
+							<h2 class="dp_subtitle" th:text="${contentsTitle}">신상품</h2>
 
+							<div class="swiper-container item_list">
 
+								<div class="swiper-wrapper">
 
+									<div class="swiper-slide" th:each="item, status : ${newGoodsList}">
 
+										<div class="item_prod" th:if="${status.count<21}">
 
+											<div class="item_state">
 
+												<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SCM001');">
 
+													<div class="itemPic">
 
+														<img alt="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm}" >
 
+														<button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, ithrCd='', contentsLoc='SCM001', planDtlSq=''">관심상품 추가</button>
 
+													</div>
 
+													<p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
 
+													<div class="itemName" th:text="${item.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
 
+													<p class="itemPrice" th:text="${#numbers.formatInteger(item.currPrice,3,'POINT')}">80,100</p>
 
+													<div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
 
+												</a>
 
+											</div>
 
+										</div>
 
+									</div>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</th:block>
 
+
 
+				<th:block th:if="${contentsLoc=='003'}">
 
+					<div class="inner" th:if="${bestGoodsList != null}">
 
+						<div class="best_item">
 
+							<h2 class="dp_subtitle" th:text="${contentsTitle}">베스트 상품</h2>
 
+							<div class="item_list">
 
+								<div class="itemsGrp">
 
+									<div class=" item_prod" th:each="item, status : ${bestGoodsList}">
 
+										<div class="item_state">
 
+											<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SCM002');">
 
+												<div class="shape" th:classappend="${status.count==1}?'ranker'"><span th:text="${status.index+1}"></span></div>
 
+												<div class=" itemPic">
 
+													<img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm}" >
 
+													<button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, ithrCd='', contentsLoc='SCM002', planDtlSq=''">관심상품 추가</button>
 
+												</div>
 
+												<p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
 
+												<div class=" itemName" th:text="${item.goodsFullNm}">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
 
+												<p class="itemPrice_original" th:if="${item.currPrice != item.listPrice}" th:text="${#numbers.formatInteger(item.listPrice,3,'POINT')}">89,000</p>
 
+												<p class="itemPrice">[[${#numbers.formatInteger(item.currPrice,1,'COMMA')}]]
 
+													<span class=" itemPercent" th:if="${item.currPrice != item.listPrice}" th:text="${(item.listPrice == 0 ? 0 : #numbers.formatDecimal((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
 
+												</p>
 
+												<div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
 
+											</a>
 
+										</div>
 
+									</div>
 
+								</div>
 
+							</div>
 
+						</div>
 
+					</div>
 
+				</th:block>
 
+
 
+		</th:block>
 
+		</section>
 
+	</main>
 
+
 
+	<script th:inline="javascript">
 
+		$(document).ready(function () {
 
+			fnSetCategory1Depts();
 
+
 
+			var swiper = new Swiper('.submain_visual .swiper-container', {
 
+				observer: true,
 
+				observeParents: true,
 
+				pagination: {
 
+					el: '.submain_visual .swiper-pagination',
 
+					type: 'fraction',
 
+				},
 
+			});
 
+
 
+			$(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('더보기');
 
+				}
 
+			});
 
+
 
+			var dp_newitem_slide = new Swiper('.new_item .swiper-container', {
 
+				slidesPerView: 'auto',
 
+				spaceBetween: 8,
 
+				centerMode: true,
 
+			});
 
+		});
 
+
 
+		// 카테고리1Depts 설정
 
+		var fnSetCategory1Depts = function() {
 
+			let allCate = [[${allCateList}]];
 
+			$.each(allCate, function(idx1, cate1) {
 
+				if ([[${params.cate1No}]] == cate1.cate1No) {
 
+					let tag = '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + cate1.cateGb + '\', ' + cate1.cate1No + ');">전체</a>\n';
 
+					if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
 
+						$.each(cate1.cate2List, function(idx2, cate2) {
 
+							tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
 
+						});
 
+					}
 
+					$('.cate_wrap').html(tag);
 
+				}
 
+			});
 
+		}
 
+	</script>
 
+
 
+</th:block>
 
+
 
+</body>
 
+</html>

+ 1 - 1
src/main/webapp/WEB-INF/views/web/display/BrandMainFormWeb.html
View File 

@@ -454,7 +454,7 @@ var brandMainLayoutList = [[${brandMainLayoutList}]];
 
 var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];
 
 var goodsImgUrl = [[${@environment.getProperty('upload.goods.view')}]];
 
 var fnGoodsPopup = function(obj1,obj2,obj3,obj4,obj5,obj6,obj7){
 
 var fnGoodsPopup = function(obj1,obj2,obj3,obj4,obj5,obj6,obj7){
 
 	$("#brLookbookPopup .modal-dialog").remove();
 
 	$("#brLookbookPopup .modal-dialog").remove();
 
-	tag = '';
 
+	var tag = '';
 
 
 
 	tag += '	<div class="modal-dialog" role="document">\n';
 
 	tag += '	<div class="modal-dialog" role="document">\n';
 
 	tag += '		<div class="modal-content">\n';
 
 	tag += '		<div class="modal-content">\n';