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

<div class="modal-header htop">
	<h5 class="modal-title" id="optionChangeLabel">교환 옵션 변경</h5>
</div>
<div class="modal-body">
	<div class="pop_cont">
		<th:block th:if="${exchangeOptionInfo}" th:each="oneData, status : ${exchangeOptionInfo}">
			<div class="option_list">
				<ul>
					<!-- 자사일때 opt2 교환 -->
					<th:block th:if="${oneData.selfGoodsYn == 'Y'}">
						<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}">
						<li>
							<div class="option_name">
								<span th:if="${oneData.goodsType == 'G056_S'}">
									<em th:text="${oneData.itemNm}"></em> / <em th:text="${oneData.colorNm}"></em> / <em th:text="${oneData.optCd2}"></em>
								</span>
								<span th:unless="${oneData.goodsType == 'G056_S'}">
									<em th:text="${oneData.colorNm}"></em> / <em th:text="${oneData.optCd2}"></em>
								</span>
							</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 th:if="${oneData.goodsType == 'G056_S'}">
									<em th:text="${oneData.itemNm}"></em> / <em th:text="${oneData.colorNm}"></em> / <em th:text="${oneData.optCd2}"></em>
								</span>
								<span th:unless="${oneData.goodsType == 'G056_S'}">
									<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" th:text="${oneData.optCd2}">선택</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" onclick="fnSaveOption();"><span>옵션 저장</span></button></div>
	</div>
</div>

<!-- 210408_ 추가 : 교환 옵션 선택 팝업 -->
<div id="exchangeOptionPop" class="popup_box exchangeOptionPop">
	<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">
				<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}" th:checked="${oneData.optCd2 == option}" onclick="fnSelectOption(this);">
						<span th:text="${option}"></span>
					</button>
					</th:block>
				</th:block>
			</div>
			<input type="hidden" name="chgOptCd2" th:unless="${oneData.selfGoodsYn == 'Y'}" th:attr="ordDtlItemSq=${oneData.ordDtlItemSq}, itemNm=${oneData.itemNm}, colorNm=${oneData.colorNm}, orgOptCd2=${oneData.optCd2}, goodsType=${oneData.goodsType}" th:value="${oneData.optCd2}" />
		</div>
	</div>
</div>
<!-- //210408_ 추가 : 교환 옵션 선택 팝업 -->

<script th:inline="javascript">
var oneData1 	= [[${oneData}]];
var chgQty1 	= [[${chgQty}]];

$(document).ready( function() {
	$.each($('.optionChangePop .option_box button'), function(idx ,item) {
		if ($(item).attr('checked') == 'checked') {
			$(item).addClass('on');
		}
	});
	
	$.each($('.popup_box .button_list button'), function(idx ,item) {
		if ($(item).attr('checked') == 'checked') {
			$(item).addClass('on');
		}
	});
});

// 라디오 클릭 이벤트
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'));
	$('.exchangeOptionPop').hide().removeClass('active');
}

// 옵션 저장 버튼 클릭 이벤트
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');
	$.each($(this).parent().find('button'), function(idx, item) {
		$(item).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>