style24
/
style24.front


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
							<!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  : SocialMainFormMob.html
 * @desc    : 핫딜(소셜) Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.12   sowon     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
	<main role="" id="" class="container dp">
			<section class="content">
                <div class="inner wide">
                    <div class="bulletship">
                        <div class="Bulletship_head">
                        	 <img src="/images/mo/thumb/bullet_bg1.png" alt="오늘 사서 오늘 입자 AM 10시까지 주문하면 당일 도착 대상지역 서울, 경기, 인천 외 일부 지역 제외">
                        </div>
                        <div class="Bulletship_body">
                            <div>
                                <div class="ico-area">
                                    <img src="/images/mo/ico_bulltet-house.png" alt="지붕이 그려진 아이콘입니다">
                                </div>
                                <div class="txt-area" id="shotHtml">
                                    <!-- 배송가능지역 -->
                                   
                                    <!-- // 배송가능지역 -->
                                </div>  
                            </div>
                        </div>
                        <div class="Bulletship_foot" >
                            <div>
                                <ul class="clear">
                                    <li>
                                        <div class="img-box">
                                            <img src="/images/mo/ico_bulltet-order.png" alt="택배차가 그려진 아이콘입니다">
                                        </div>
                                        <div class="txt-box">
                                            <span class="tit">주문/도착</span>
                                            <p class="disc">오전 10시 전 주문완료하면 <br>당일 밤 12시까지 도착</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="/images/mo/ico_bulltet-delivery.png" alt="달력이 그려진 아이콘입니다">
                                        </div>
                                        <div class="txt-box">
                                            <span class="tit">배송일</span>
                                            <p class="disc">월, 화, 수, 목, 금 <br class="mo-only">(영업일 기준, 공휴일 휴무)</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img src="/images/mo/ico_bulltet-object.png" alt="쇼핑백이 그려진 아이콘입니다">
                                        </div>
                                        <div class="txt-box">
                                            <span class="tit">대상상품</span>
                                            <p class="disc ptxt01">한세 패밀리 브랜드 <br class="mo-only">(스타일24 직배송 한정)</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
				<div class="inner" id="cornerInner">
					<div class="dp_listItems_wrap typeSelector">
						<div class="items_option">
							<div class="open_categori" style="position: relative; width: 100%; z-index: 0;">
								<a id="filter"></a> 
							</div>
						</div>
					</div>
				</div>
                <div id="cornerList"></div>
			</section>

			<!-- 카테고리 -->
			<div class="category_box brand">
				<div class="lap">
					<div class="category_close">카테고리닫기</div>
					<div class="category_list">
						<!-- 카테고리 선택 -->
						<div class="selcet_list">
							<ul>
								<li class="active"><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
								<li><a href="javascript:void(0)">모이몰른</a></li>
							</ul>
						</div>
						<!-- //카테고리 선택 -->
					</div>
				</div>
			</div>
			<!-- //카테고리 -->

			<!-- 210415_최신상품순 리스트 팝업 추가 -->
            <div id="odDatePop" class="popup_box odDatePop">
                <div class="lap">
                    <div class="popup_close">카테고리닫기</div>
                    <div class="popup_head sr-only">
                        <h2 class="">기간 선택 팝업</h2>
                    </div>
                    <div class="popup_con">
                        <div class="button_list clear">
                        	<th:block th:if="${shotBrandList!=null}" th:each="a, cornerStat : ${shotBrandList}">
                           	 <button type="button" th:onclick="fnCornerClick([[${cornerStat.index+1}]], [[${a.brandNm}]])"><span th:text="${a.brandNm}"></span></button>
                            </th:block>
                        </div>
                    </div>
                </div>
            </div>
		</main>
		
		<!-- 배송검색팝업 -->
			<div class="modal fade dp_pop bulletShip_pop" id="bulletShipPop" tabindex="-1" role="dialog" aria-labelledby="modalScrollLabel" aria-hidden="true">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="modalScrollLabel"><span class="sr-only">배송팝업</span></h5>
						</div>
						<div class="modal-body">
							<div class="pop_cont">
								<div>
								<div class="ico-area">
									<img src="/images/mo/ico_bulltet-house.png"
										alt="지붕이 그려진 아이콘입니다">
								</div>
								<div class="possible-popup" id="classPop">
									<p class="">고객님이 찾으시는 지역은</p>
									<p class="bulltetship-check">
										<span class="c_primary" id="shotAdr"></span> 가능 지역
									</p>
									<div class="input-address" id="addr">
										
									</div>
									<p class="possible-notice c_gray" id="infoTxt">
										
									</p>
								</div>
							</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" id="" class="btn btn_dark"  onclick="$.modal.close();"><span>계속 쇼핑하기</span></button>
						</div>
					</div>
				</div>
			</div>
			<!-- //배송검색팝업 -->
<script th:inline="javascript">
let custAddr = [[${custAddr}]];
let customerInfo = [[${customerInfo}]];
let shotBrandList = [[${shotBrandList}]];
let shotBrandGoodsList = [[${shotBrandGoodsList}]];
if(shotBrandList.length>0){
	var html = '';
	$.each(shotBrandList, function(idx, item)  {
		html += '<div class="inner">';
		html += '	<div class="dp_listItems_wrap type'+(idx+1)+'">';
		html += '		<h2 class="dp_subtitle">'+item.brandNm+'</h2>';
		html += '			<div class="itemsGrp">';
		$.each(shotBrandGoodsList, function(idx2, item2)  {
			if (item2.brandGroupNo == item.brandGroupNo) {
			html += '				<div class="item_prod">';
			html += '					<div class="item_state">';
			if(item2.likeIt === 'likeit'){
				html += '						<button type="button" class="itemLike likeit active" onclick="cfnPutWishList(this);" goodsCd=\''+item2.goodsCd+'\', ithrCd=\'\', contentsLoc=\'\', planDtlSq=\'\'>관심상품 추가</button>';
			}else{
				html += '						<button type="button" class="itemLike" onclick="cfnPutWishList(this);" goodsCd=\''+item2.goodsCd+'\', ithrCd=\'\', contentsLoc=\'\', planDtlSq=\'\'>관심상품 추가</button>';
			}
			
			html += '						<a href="javascript:void(0);" onclick="cfnGoToGoodsDetail(\''+item2.goodsCd+'\',\'\',\'IN13_01\')" class="itemLink">';
			html += '							<div class="itemPic">';
			html += '								<img class="vLHTC pd_img" src="'+ _uploadGoodsUrl +'/'+item2.sysImgNm +'">';
			html += '							</div>';
			html += '							<p class="itemBrand">'+item2.brandNm+'</p>';
			html += '							<div class="itemName">'+item2.goodsNm+'</div>';
			html += '							<p class="itemPrice">';
			if (item2.currPrice != item2.listPrice) {
				html += '                                 <span class="itemPrice_original">'+item2.listPrice.addComma()+'</span>';
			}
			html += item2.currPrice.addComma();
			if (item2.dcRate != 0) {
				html += '                                 <span class=" itemPercent">'+item2.dcRate.addComma()+'%</span>';
			}
			html += '							</p>';
			html += '							<div class="itemcolorchip">';
			if(!gagajf.isNull(item2.colorChips)){
				var colorArr = item2.colorChips.split(",");
				var colorCd = '';
				var rgbColor = '';
				for(let i=0; i<colorArr.length; i++){
					var colorInfo = colorArr[i].split(":");
					colorCd = colorInfo[0];
					rgbColor = colorInfo[1];
					if(rgbColor=='#FFFFFF'){
						html += '	<span class="chip_color" style="background-color: '+rgbColor+';border:1px solid #aaa;" value="'+colorCd+'">'+colorCd+'</span>';
					}else{
						html += '	<span class="chip_color" style="background-color: '+rgbColor+'" value="'+colorCd+'">'+colorCd+'</span>';
					}
				}
			}
			html += '							</div>';
			if(!gagajf.isNull(item2.icon)){
				var iconArr = item2.icon.split(",");
				var iconGb = '';
				var iconNm = '';
				html += '	<p class="itemBadge">';
				let arrCnt;
				if (iconArr.length > 2) {
					arrCnt = 3;
				} else {
					arrCnt = iconArr.length;
				}
				for(let i=0; i<arrCnt; i++){
					var iconInfo = iconArr[i].split(":");
					iconGb = iconInfo[0];
					iconNm = iconInfo[1];
					html += '	<span class="badge13" value="'+iconGb+'">'+iconNm+' </span>';
				}
				html += '	</p>';
			}
			if(item2.goodsTnm != null){
				html += '			<div class="itemComment">'+item2.goodsTnm+'</div>';
			}
			html += '						</a>';
			html += '					</div>';
			html += '				</div>';
			}
		});
		html += '			</div>';
		html += '	  </div>';
		html += '</div>';
	});
	
	$("#cornerList").append(html);

}
var shotBody = function () {
	if (!cfCheckLogin() || (custAddr == null || custAddr == '')) {
		html = '';
		html += '<p class="bulltetship-time">오전10시 이전 주문 당일도착</p>';
		html += '<p class="bulltetship-check"><span class="c_primary">총알배송이 가능한 지역</span>인지<br> 확인해보세요!</p>';
		html += '    <div class="btn_group_flex">';
		html += '        <div>';
		html += '            <button class="btn btn_default" id="btn_bulletship_pop" onclick="fnOpenDaumAddr();">';
		html += '                <span>내 배송지 확인하기</span>';
		html += '            </button>';
		html += '        </div>';
		html += '    </div>';
		html += '<p class="bulltetship-disc ptxt01">서울·경기·인천 중 일부지역은 총알배송이 불가합니다.</p>';
		
		$("#shotHtml").append(html);
	}else{
		html = '';
		html += ' <span class="costumer-name">'+customerInfo.custNm+'</span>님의 배송지는';
		if (custAddr.shotDelvUseYn  === 'Y') {
			html += '<p class="bulltetship-check"><span class="c_primary">총알배송</span> 지역</p>';
		}else{
			html += '<p class="bulltetship-check"><span class="c_primary">일반배송</span> 지역</p>';
		}
		html += '<div class="input-address">';
		html += custAddr.recipBaseAddr+' <br>'+custAddr.recipDtlAddr;
		html += '</div>';
		html += '<div class="btn_group_flex">';
		html += '	<div>';
		html += '		<button class="btn btn_default btn_block" id="btn_bulletship_pop" onclick="fnOpenDaumAddr();">';
		html += '			<span>다른 배송지 확인하기</span>';
		html += '		</button>';
		html += '	</div>';
		html += '</div>';
		
		$("#shotHtml").append(html);
	}
} 

//우편번호 DAUM을 이용한 우편번호 팝업 레이어
var fnOpenDaumAddr = function() {
	let daumZip = new daum.Postcode({
		oncomplete: function(data) {
			// data.zonecode
			
			$.ajax( {
						type		: "GET",
						url 		: '/planning/shot/delivery/confirm?recipZipcode='+data.zonecode,
						dataType 	: 'json',
						success 	: function(result) {
							if (result != null) {
								$('#addr').text(cfnGetDaumRoadAddr(data));
								if (result.shotYn != null && result.shortYn != '') {
									if(result.shotYn.shotDelvUseYn == "Y"){
										$("#classPop").attr("class","possible-popup");
										$('#shotAdr').text("총알배송");
										$("#infoTxt").html("오늘 오전 10시까지 주문하시면 오늘 도착합니다. <br>(토, 일, 공휴일 휴무)");
									}
								}
								else{
									$("#classPop").attr("class","impossible-popup");
									$('#shotAdr').text("일반배송");
									$("#infoTxt").html("주문시간/배송지에 따라 2~3일 이내 도착합니다.<br> (일, 공휴일 휴무)");
								}
								
								$("#bulletShipPop").modal("show");
								
							}
						}
					}); 
			
			cfnCloseDaumAddr();
		},
		width: '100%'
	});
	cfnOpenDaumAddr(daumZip);
}

var fnCornerClick = function (result1,result2) {
	var num = result1;
	$("#filter").text(result2);
	//var offset = $('.dp_listItems_cont.type'+(result1)).offset(); //선택한 태그의 위치를 반환
	var offset = $('.dp_listItems_wrap.type'+result1).offset(); //선택한 태그의 위치를 반환
	//animate()메서드를 이용해서 선택한 태그의 스크롤 위치를 지정해서 0.4초 동안 부드럽게 해당 위치로 이동함 
	$('html').animate({scrollTop :  offset.top - 60}, 400);
	
}

//팝업_닫기
$('.popup_close').on("click",function(){
    $('.popup_box').hide().removeClass('active');
    $("body").css({"overflow":"visible"});
});


$(document).ready(function(){
	shotBody();
	$("#filter").text(shotBrandList[0].brandNm);
	// 다른기획전

	$(window).scroll(function(){
		var scrollTop= $(window).scrollTop();
		var itemTop=$('.dp .dp_listItems_wrap.type1').offset().top;

	    if (scrollTop >= itemTop){
	        $('.dp .dp_listItems_wrap .items_option').addClass('fix');
	    } else {
	        $('.dp .dp_listItems_wrap .items_option').removeClass('fix');
	    }
	});
	
	// 아이템스라이드(리스트갯수1)
	var dp_listItems_cont1 = new Swiper('.dp_listItems_cont .swiper-container.item01', {
		slidesPerView: 1,
		spaceBetween: 0,
		centerMode: true,
		pagination: {
			el: '.dp_listItems_cont .swiper-container.item01 .swiper-pagination',
		},
	});
	
	
	//기간 선택 팝업
    $(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).addClass('on');
		});
	});
  	//210510_추가 : 토스트 팝업 button 클릭 시 팝업 닫기.
	$(document).on('click','.popup_box.odDatePop .button_list button',function(){
		$(this).parents('.popup_box.odDatePop').hide().removeClass('active');
		$("body").css({"overflow":"visible"});
	})
    
    $("#bulletShipPop_close").click(function() {
        $.modal.close();
 	});
    
  //카테고리
    function category(){
        var categoryOpen=$(".open_categori .select_dress");
        var categoryClose=$(".category_box .category_close");
        var categoryPop=$(".category_box");

        categoryOpen.on("click",function(){
            categoryPop.show();
            categoryPop.addClass("active");
            $("body").css({"overflow":"hidden"});
        });

        categoryClose.on("click",function(){
            categoryPop.hide();
            $("body").css({"overflow":"visible"});
        });
    }
    category();

});
</script>
</th:block>

</body>
</html>