112233

src/main/webapp/WEB-INF/views/mob/mypage/ChangeOptionPopupFormMob.html

@@ -3,43 +3,58 @@
 </div>
 <div class="modal-body">
 	<div class="pop_cont">
-		<div class="option_list">
-			<ul>
-				<li>
-					<div class="option_name">
-						<span><em>슬림핏 마이크로 체크 네이비컬러 스탠드카라 셋업 수트 자켓</em> / <em>Black</em> / <em>XXL</em> </span>
-					</div>
-					<div class="option_box">
-						<button type="button" class="btn btn_default"><span>90</span></button>
-						<button type="button" class="btn btn_default" disabled><span>95</span></button>
-						<button type="button" class="btn btn_default"><span>105</span></button>
-						<button type="button" class="btn btn_default"><span>110</span></button>
-						<button type="button" class="btn btn_default"><span>115</span></button>
-						<button type="button" class="btn btn_default"><span>120</span></button>
-						<button type="button" class="btn btn_default"><span>FREE</span></button>
-					</div>
-				</li>
-				<li>
-					<div class="option_name">
-						<span><em>베이직 셔츠</em> / <em>Green</em> / <em>M</em></span>
-					</div>
-					<div class="option_select">
-						<div class="select_custom select_option">
-							<div class="combo">
-								<div class="select">선택</div>
+		<th:block th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
+			<div class="option_list">
+				<ul>
+					<input type="hidden" name="chgOptCd2" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}" th:value="${oneData.optCd2}">
+					<!-- 자사일때 opt2 교환 -->
+					<th:block th:if="${oneData.selfGoodsYn == 'Y'}">
+						<li>
+							<div class="option_name">
+								<span>
+									<em th:text="${oneData.itemNm}"></em> / <em th:text="${oneData.colorNm}"></em> / <em th:text="${oneData.optCd2}"></em>
+								</span>
 							</div>
-						</div>
-					</div>
-				</li>
-			</ul>
-		</div>
+							<div class="option_box">
+								<th:block th:if="${oneData.optCd2Arr.length > 0}" th:each="option, idx : ${oneData.optCd2Arr}">
+									<button type="button" class="btn btn_default" th:name="${oneData.ordDtlItemSq}" th:id="|${oneData.ordDtlItemSq}_${option}|" th:value="${option}" th:disabled="${#numbers.formatInteger(oneData.currStockQtyArr[idx.index], 0)} <= 0 or ${oneData.soldoutYnArr[idx.index] == 'Y'}" th:checked="${option == oneData.optCd2}" onclick="fnRadioOption(this);">
+										<span th:text="${option}"></span>
+									</button>
+								</th:block>
+							</div>
+						</li>
+					</th:block>
+					<!-- //자사일때 opt2 교환 -->
+					<!-- 입점일때 opt2 교환 -->
+					<th:block th:unless="${oneData.selfGoodsYn == 'Y'}">
+						<li>
+							<div class="option_name">
+								<span>
+									<em th:text="${oneData.itemNm}"></em> / <em th:text="${oneData.colorNm}"></em> / <em th:text="${oneData.optCd2}"></em>
+								</span>
+							</div>
+							<div class="option_select">
+								<div class="select_custom select_option">
+									<div class="combo">
+										<div class="select">선택</div>
+									</div>
+								</div>
+							</div>
+						</li>
+					</th:block>
+					<!-- //입점일때 opt2 교환 -->
+				</ul>
+				
+			</div>
+		</th:block>
 	</div>
 </div>
 <div class="modal-footer">
 	<div class="btn_group_flex">
-		<div><button type="button" class="btn btn_dark"><span>옵션 저장</span></button></div>
+		<div><button type="button" class="btn btn_dark" onclick="fnSaveOption();"><span>옵션 저장</span></button></div>
 	</div>
 </div>
+
 <!-- 210408_ 추가 : 교환 옵션 선택 팝업 -->
 <div id="exchangeOptionPop" class="popup_box exchangeOptionPop">
 	<div class="lap">
@@ -49,19 +64,86 @@
 		</div>
 		<div class="popup_con">
 			<div class="button_list">
-				<button type="button"><span>95</span></button>
-				<button type="button" disabled><span>105</span></button>
-				<button type="button"><span>110</span></button>
-				<button type="button"><span>115</span></button>
-				<button type="button"><span>120</span></button>
-				<button type="button"><span>FREE</span></button>
+				<th:block th:each="option, idx : ${oneData.optCd2Arr}">
+					<button type="button" th:disabled="${oneData.optCd2Arr.length} > 0 and (${#numbers.formatInteger(oneData.currStockQtyArr[idx.index],0)} <= 0 or ${oneData.soldoutYnArr[idx.index]} == 'Y')" th:attr="optCd2=${option}" onclick="fnSelectOption(this);">
+						<span th:text="${option}"></span>
+					</button>
+					</th:block>
+				</th:block>
 			</div> 
 		</div>
 	</div>
 </div>
 <!-- //210408_ 추가 : 교환 옵션 선택 팝업 -->
-		
-		
+
 <script th:inline="javascript">
-alert("A");
+var oneData1 	= [[${oneData}]];
+var chgQty1 	= [[${chgQty}]];
+
+$(document).ready( function() {
+	
+});
+
+// 라디오 클릭 이벤트
+var fnRadioOption = function(param) {
+	$(param).parent().parent().parent().find('input[name=chgOptCd2]').val($(param).val());
+}
+
+// 셀렉트박스 클릭 이벤트
+var fnSelectOption = function(param) {
+	$("#exchangePop .option_list .option_select .select_custom.select_option .select").text($(param).attr('optCd2'));
+	$(param).parent().parent().find('input[name=chgOptCd2]').val($(param).attr('optCd2'));
+}
+
+// 옵션 저장 버튼 클릭 이벤트
+var fnSaveOption = function() {
+	// 변경 옵션 처리
+	let dataArr = [];
+
+	$.each($('#exchangePop input[name=chgOptCd2]'), function(idx, item) {
+		let ordDtlItemSq 	= $(item).attr('ordDtlItemSq');
+		let colorNm 		= $(item).attr('colorNm');
+		let itemNm 			= $(item).attr('itemNm');
+		let goodsType 		= $(item).attr('goodsType');
+		let chgOptCd2 		= $(item).val();
+
+		let data 			= {};
+		data.ordDtlNo 		= oneData1.ordDtlNo;
+		data.ordDtlItemSq 	= ordDtlItemSq;
+		data.chgQty 		= chgQty1;
+		data.colorNm 		= colorNm;
+		data.itemNm 		= itemNm;
+		data.goodsType 		= goodsType;
+		data.chgOptCd2 		= chgOptCd2;
+		dataArr.push(data);
+	});
+	
+	fnChangeOptionCallback(dataArr);
+
+	$('.close-modal').trigger('click');
+}
+
+// 버튼 색
+$(document).on('click','.optionChangePop .option_box button',function(){
+	$('.optionChangePop .option_box button').removeClass('on');
+	$(this).addClass('on');
+});
+
+// 버튼 색
+$(document).on('click','.popup_box .button_list button',function(){
+	$('.popup_box .button_list button').removeClass('on');
+	$(this).addClass('on');
+});
+
+// 반품 사유 선택 팝업
+$(document).on("click",".select_custom.select_option",function(e){
+	$('#exchangeOptionPop').show().addClass("active");
+	$("body").css({"overflow":"hidden"});
+});
+
+//팝업_닫기 
+$('.exchangeOptionPop .popup_close').on("click",function(){
+	$('.exchangeOptionPop').hide().removeClass('active');
+});
 </script>
+

src/main/webapp/WEB-INF/views/mob/mypage/MypageCreListInfoMob.html

@@ -70,7 +70,7 @@
 									<th:block th:if="${cre.chgGb} == 'G680_40'">
 										<div class="od_exchange_opt">
 											<span>교환옵션</span>
-											<th:block th:each="exchange , index, ${creList.exchangeOptionList}">
+											<th:block th:each="exchange , index : ${creList.exchangeOptionList}">
 												<th:block th:if="${cre.chgOrdDtlNo} == ${exchange.ordDtlNo}">
 													<!-- 세트상품일때 -->
 													<th:block th:if="${cre.goodsType} == 'G056_S'">

src/main/webapp/WEB-INF/views/mob/mypage/MypageExchangeFormMob.html

@@ -56,16 +56,38 @@
 											<div class="name" th:text="${exchange.goodsNm}"></div>
 										</div>
 										<div class="od_opt">
-											<div class="option">
-												<th:block th:if="${exchange.goodsType == 'G056_S'}" th:each="option, status : ${exchange.colorNmArr}">
+											<!-- 세트상풍일때 -->
+											<th:block th:if="${exchange.goodsType == 'G056_S'}" th:each="option, status : ${exchange.colorNmArr}">
+												<div class="option">
 													<em th:text="${exchange.itemNmArr[status.index]}"></em>
 													<em th:text="${exchange.optCd2Arr[status.index]}"></em>
-												</th:block>
-												<th:block th:unless="${exchange.goodsType == 'G056_S'}">
+												</div>
+											</th:block>
+											<!-- //세트상풍일때 -->
+											<!-- 일반상풍일때 -->
+											<th:block th:unless="${exchange.goodsType == 'G056_S'}">
+												<div class="option">
 													<em th:text="${exchange.colorNm}"></em>
 													<em th:text="${exchange.optCd2}"></em>
-												</th:block>
-											</div>
+												</div>
+											</th:block>
+											<!-- //일반상풍일때 -->
+										</div>
+										<div class="od_exchange_opt exchangeOption" style="display:none" th:attr="ordDtlNo=${exchange.ordDtlNo}">
+											<th:block th:if="${exchange.goodsType == 'G056_S'}" th:each="option, status : ${exchange.colorNmArr}">
+												<span>교환옵션</span>
+												<div class="option">
+													<em th:text="${exchange.itemNmArr[status.index]}"></em>
+													<em th:text="${exchange.optCd2Arr[status.index]}"></em>
+												</div>
+											</th:block>
+											<th:block th:unless="${exchange.goodsType == 'G056_S'}">
+												<span>교환옵션</span>
+												<div class="option">
+													<em th:text="${exchange.colorNm}"></em>
+													<em th:text="${exchange.optCd2}"></em>
+												</div>
+											</th:block>
 										</div>
 										<div class="od_calc">
 											<th:block th:if="${(exchange.ordAmt - exchange.cnclRtnAmt) > (exchange.realOrdAmt + exchange.pntDcAmt + exchange.gfcdUseAmt)}">
@@ -86,6 +108,7 @@
 								<div class="select_custom select_count">
 									<div class="combo">
 										<input type="hidden" name="chgQty" value="0" th:attr="ordDtlNo=${exchange.ordDtlNo}, ordCanChgQty=${exchange.ordCanChgQty}"/>
+										<input type="hidden" name="chgOptionList" th:attr="ordDtlNo=${exchange.ordDtlNo}"/>
 										<div class="select">수량 0개</div>
 									</div>
 								</div>
@@ -276,7 +299,7 @@
 				</div>
 				<!-- //교환 배송비결제 필요할 경우 -->
 				<div class="btn_group btn_group_flex">
-					<div><button type="button" class="btn btn_default"><span>취소</span></button></div>
+					<div><button type="button" class="btn btn_default" onclick="cfnGoToPage(_PAGE_MYPAGE_CRE_LIST)"><span>취소</span></button></div>
 					<div><button type="button" id="btn_exchange_confirm" class="btn btn_dark" onclick="fnExchange()"><span>교환 신청</span></button></div>
 				</div>
 			</div>
@@ -376,7 +399,7 @@ $('#exchangeForm input[name=wdGb]').on('change', function() {
 	fnAddCost();
 });
 
-//교환 처리
+// 교환 처리
 var fnExchange = function() {
 	let url 			= '/mypage/exchange';
 	let delvFeeCd 		= oneData.delvFeeCd;
@@ -520,28 +543,36 @@ var fnChangeOption = function(param) {
 // 교환 옵션 변경 팝업 콜백 처리
 var fnChangeOptionCallback = function(param) {
 	let ordDtlNo;
+	let html = '';
+	
+	html += '<span>교환옵션</span>';
 
 	// 교환옵션 HTML 처리
-	let html = '												<span class="title">교환 옵션</span>\n';
 	$.each(param, function(idx, item) {
-		ordDtlNo = item.ordDtlNo;
-		let colorNm = item.colorNm;
-		let itemNm = item.itemNm;
-		let goodsType = item.goodsType;
-		let optCd2 = item.chgOptCd2;
-		let qty = item.chgQty;
+		ordDtlNo 		= item.ordDtlNo;
+		let colorNm 	= item.colorNm;
+		let itemNm 		= item.itemNm;
+		let goodsType 	= item.goodsType;
+		let optCd2 		= item.chgOptCd2;
+		let qty 		= item.chgQty;
 
 		if (goodsType == 'G056_S') {
-			html += '												<span class="option">' + itemNm + ' / ' + colorNm + ' / ' + optCd2 + '</span>\n';
+			html += '<div class="option">';
+			html += '	<em>'+itemNm+'</em>';
+			html += '	<em>'+optCd2+'</em>';
+			html += '</div>';
 		} else {
-			html += '												<span class="option">' + colorNm + ' / ' + optCd2 + '</span>\n';
+			html += '<div class="option">';
+			html += '	<em>'+colorNm+'</em>';
+			html += '	<em>'+optCd2+'</em>';
+			html += '</div>';
 		}
 	});
 
-	$.each($('.exchangeOption'), function(idx, item) {
+	$.each($('#exchangeForm .exchangeOption'), function(idx, item) {
 		if (ordDtlNo == $(item).attr('ordDtlNo')) {
 			$(item).css('display', '');
-			$(item).find('.option_wrap').html(html);
+			$(item).html(html);
 		}
 	});
 
@@ -555,11 +586,12 @@ var fnChangeOptionCallback = function(param) {
 
 // 교환 수량 변경 이벤트
 var fnChangeExchangeQty = function(param) {
+	var ordDtlNo = "";
 	
-	// 반품수량설정
+	// 교환수량설정
 	if (param != null) {
 		$("#exchangeForm input[name=chgQty]").each(function(idx){
-			var ordDtlNo = $(this).attr("ordDtlNo");
+			ordDtlNo = $(this).attr("ordDtlNo");
 			if (ordDtlNo == $(param).parent().find("input[name=ordDtlNo]").val()) {
 				$(this).val($(param).attr("qty"));
 				$(this).parent().find(".select").text($(param).find("span").text());
@@ -567,12 +599,11 @@ var fnChangeExchangeQty = function(param) {
 		});
 	}
 	
-	/*
 	// 교환옵션 표기 초기화
-	$.each($('.exchangeOption'), function(idx, item) {
+	$.each($('#exchangeForm .exchangeOption'), function(idx, item) {
 		if (ordDtlNo == $(item).attr('ordDtlNo')) {
 			$(item).css('display', 'none');
-			$(item).find('.option_wrap').html('');
+			$(item).html('');
 		}
 	});
 
@@ -585,7 +616,6 @@ var fnChangeExchangeQty = function(param) {
 	
 	// 추가 배송비 계산
 	fnAddCost();
-	*/
 }
 
 // 교환 사유 변경 이벤트