style24
/
style24.front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
							<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : PlanningShotGuideFormWeb.html
 * @desc    : 총알배송 Page
 *============================================================================
 * Pastelmall
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.3.30  	 sowon     최초 작성
 *******************************************************************************
 -->
 <body>
<th:block layout:fragment="content">
	<!-- // container -->	
	<div id="container" class="container dp">
		<div class="breadcrumb"> 
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈</a></li>
				<li class="bread_2depth">총알배송</li>
			</ul> 
		</div>
		<div class="wrap">
			<div class="content wide dp_Bulletship"> <!-- 페이지특정 클래스 = dp_Bulletship -->
				<div class="cont_head">
					<div>
                        <h3>총알배송</h3>
                    </div>
				</div>
				<div class="cont_body">
				    <div class="bulletship">
						<div class="bulletship_head">
                            <img src="/images/pc/thumb/bullet_bg1.png" alt="10시까지 주문하면 당일도착">
                        </div>
                        <div class="bulletship_body" id="shotHtml">
                         			<!--   비로그인 상태 or 로그인을 했지만 주소정보를 못 가져오는 경우 -->
                       <!--     <div class="txt_result">
                                <p>오전10시 이전 주문 당일도착</p>
                                <p><span>총알배송이 가능한 지역</span>인지<br>확인해보세요!</p>
                                <div class="bulletshop_btn">
                                    <button type="button" class="btn btn_default btn_block"><span>내 배송지 확인하기</span></button>
                                </div>
                                <p>서울·경기·인천 중 일부지역은 총알배송이 불가합니다.</p>
                            </div> -->
                            		<!-- 비로그인 상태 or 로그인을 했지만 주소정보를 못 가져오는 경우 -->                      
                        </div>
                        <div class="bulletship_foot"><div class="bulletship_foot"><br></div></div><div class="bulletship_foot"><br></div><div class="bulletship_foot">
                            <img src="/images/pc/thumb/bullet_bg2.png" alt="주문/도착, 배송일, 대상상품">
                        </div>
                    </div> 
                </div>
		    </div>
            <!-- 총알배송 가능 상품 리스트 -->
			<div class="content sticky_nav_list" id="cornerList">
<!-- 				<div class="cont_head">
                    <div class="sticky_nav">
                        <ul>    
                            <li><a href="#brand01">모이몰른</a></li> 섹션이동
                        </ul>
                    </div>
				</div>
				<div class="cont_body">
                    <div class="list_content">
                        <div id="brand01">
                            <div class="item_header"> 섹션이동
                                <h4>모이몰른</h4>
                            </div>
                            <div class="itemsGrp"> itemsGrp rank hot deal
                                <div class="item_prod">
                                    <div class="item_state">
                                        <button type="button" class="itemLike">관심상품 추가</button>
                                        <a href="#none" class="itemLink">
                                            <div class="rank ranker"><span>1</span></div>
                                            <div class="itemPic">
                                                <img alt="BLUE-a" class=" vLHTC pd_img" src="/images/pc/thumb/prod1.jpg">
                                            </div>
                                            <p class="itemBrand">BRAND NAME</p>
                                            <div class="itemName">남성 헤링본 기모 팬츠 헤링본 기모 팬츠</div>
                                            <p class="itemPrice">80,100
                                                <span class="itemPrice_original">89,000</span>
                                                <span class=" itemPercent">10%</span>
                                            </p>
                                            <div class="itemcolorchip">
                                                <span class="chip_color35" value="ABM">BEIGE</span>
                                                <span class="chip_color54" value="BDS">BLACK</span>
                                                <span class="chip_color40" value="YBR">WHITE</span>
                                            </div>
                                            <p class="itemBadge">
                                                <span class="badge13">베스트 </span>
                                            </p>
                                            <div class="itemComment">#주문 폭주 상품</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                </div> -->
		    </div>
            <!-- //총알배송 가능 상품 리스트 -->  
        </div>
    </div>    
    
      <!-- 총알배송 가능여부 결과 팝업 -->
	<div class="modal fade bulletShip_pop" id="bulletShipPop" tabindex="-1" role="dialog" aria-labelledby="bulletShipPopLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
                <div class="modal-header">
				    <h5 class="modal-title" id="bulletShipLabel"><span class="sr-only">총알배송 가능여부 결과</span></h5>
				</div>
				<div class="modal-body">
				    <div class="pop_cont">
				        <div class="txt_result">
				            <p>고객님이 찾으시는 지역은</p>
				            <p><span id="shotAdr"></span>&nbsp;가능 지역</p>
				            <div class="address">
				                <p id="addr"></p>
				            </div>
				            <div class="info">
				                <p 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>
		<a href="#close-modal" rel="modal:close" id="bulletShipPop_close" class="close-modal">Close</a>
	</div>
	<!-- //총알배송 가능여부 결과 팝업 -->
	
<script th:inline="javascript">
/*<![CDATA[*/
let custAddr = [[${custAddr}]];
let customerInfo = [[${customerInfo}]];
let goodsView =[[${@environment.getProperty('upload.goods.view')}]]
let planCornerList = [[${planCornerList}]];
let planCornerGoodsList = [[${planCornerGoodsList}]];
// 로그인 확인
if(planCornerList.length>0){
	var html = '';
	
	html += '<div class="cont_head">';
	html += '     <div class="sticky_nav">';
	html += '         <ul>    ';
	$.each(planCornerList, function(idx, item)  {
		html += '             <li><a href="#brand'+idx+'">'+item.cornerNm+'</a></li>';
	})
	
	html += '         </ul>';
	html += '     </div>';
	html += '</div>';
	html += '<div class="cont_body">';
	html += '     <div class="list_content">';
	$.each(planCornerList, function(idx, item)  {
		html += '         <div id="brand'+idx+'">';
		html += '             <div class="item_header">';
		html += '                 <h4>'+item.cornerNm+'</h4>';
		html += '             </div>';
		html += '             <div class="itemsGrp">';
		$.each(planCornerGoodsList, function(idx2, item2)  {
			html += '                 <div class="item_prod">';
			html += '                     <div class="item_state">';
			html += '		<button type="button" class="itemLike';
			if(item.likeIt == 'likeit'){
				html += ' likeit';
			}
			html += ' "';
			html += ' onClick="cfnPutWishList(this);" goodsCd=\''+item2.goodsCd+'\', ithrCd=\'\', contentsLoc=\'\', planDtlSq=\'\'>관심상품 추가</button>';
			
			html += '                         <a href="javascript:void(0);" onclick="cfnGoToGoodsDetail(\'' + item2.goodsCd + '\')" class="itemLink">';
			html += '                             <div class="itemPic">';
			html += '                                 <img alt="BLUE-a" class=" vLHTC pd_img" src="'+ goodsView +'/'+item2.sysImgNm +'">';
			html += '                             </div>';
			html += '                             <p class="itemBrand">'+item2.brandGroupNm+'</p>';
			html += '                             <div class="itemName">'+item2.goodsNm+'</div>';
			html += '                             <p class="itemPrice">'+item2.currPrice.addComma();
			if (item2.currPrice != item2.listPrice) {
				html += '                                 <span class="itemPrice_original">'+item2.listPrice.addComma()+'</span>';
			}
			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">';
				for(let i=0; i<iconArr.length; 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>';
	html += ' </div>';
	
	
	$("#cornerList").append(html);
	
}

var shotBody = function () {
	if (!cfCheckLogin() || (custAddr == null && custAddr == '')) {
		html = '';
		html += '<div class="txt_result">                                                                              ';
		html += '     <p>오전10시 이전 주문 당일도착</p>                                                                         ';
		html += '     <p><span>총알배송이 가능한 지역</span>인지<br>확인해보세요!</p>                                                ';
		html += '     <div class="bulletshop_btn">                                                                      ';
		html += '         <button type="button" class="btn btn_default btn_block" onclick="fnOpenDaumAddr();"><span>내 배송지 확인하기</span></button>     ';
		html += '     </div>                                                                                             ';
		html += '     <p>서울&middot;경기&middot;인천 중 일부지역은 총알배송이 불가합니다.</p>                                            ';
		html += ' </div>                                                                                                  ';
		
		$("#shotHtml").append(html);
	}else{
		html = '';
		html += '  <div class="txt_result">';
		html += '      <p><span>'+customerInfo.custNm+'</span>님의 배송지는</p>';
		if (custAddr.shotDelvUseYn  === 'Y') {
			html += '      <p><span>총알배송</span> 가능 지역</p>';
		}else{
			html += '      <p><span>일반배송</span> 지역</p>';
		}
		html += '      <div class="bullet_able">';
		html += '          <p>'+custAddr.recipBaseAddr+'  '+custAddr.recipDtlAddr+'</p>';
		html += '      </div>';
		html += '      <div class="bulletshop_btn">';
		html += '          <button class="btn btn_default btn_block" onclick="fnOpenDaumAddr();"><span>다른 배송지 확인하기</span></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.shotDelvUseYn == "Y"){
									$('#shotAdr').text("총알배송");
									$("#infoTxt").text("오늘 오전 10시까지 주문하시면 오늘 도착합니다. (토, 일, 공휴일 휴무)")
									
								}else{
									$('#shotAdr').text("일반배송");
									$("#infoTxt").text("주문시간/배송지에 따라 2~3일 이내 도착합니다. (일, 공휴일 휴무)")
								}
								
								$("#bulletShipPop").modal("show");
								
							}
						}
					}); 
			
			cfnCloseDaumAddr();
		},
		width: '100%'
	});
	cfnOpenDaumAddr(daumZip);
}
	

$(document).ready(function() {
	shotBody();
	 $("#bulletShipPop_close").click(function() {
	        $.modal.close();
     });	
   
});
 /*]]>*/
</script>

</th:block>

</body>
</html>