瀏覽代碼

Merge remote-tracking branch 'origin/jsh77b' into order

card007 5 年之前
父節點
當前提交
c48dd81eb3

+ 191 - 177
src/main/webapp/WEB-INF/views/mob/mypage/MypageCancelFormMob.html

@@ -2,7 +2,7 @@
 <html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="mob/common/layout/MypageLayoutMob">
 <!--
  *******************************************************************************
- * @source  : MypageCancelFormWeb.html
+ * @source  : MypageCancelFormMob.html
  * @desc    : 마이페이지 > 취소신청 Page
  *============================================================================
  * STYLE24
@@ -10,202 +10,216 @@
  *============================================================================
  * VER  DATE         AUTHOR      DESCRIPTION
  * ===  ===========  ==========  =============================================
- * 1.0  2021.04.27   jsh77b     최초 작성
+ * 1.0  2021.04.28   jsh77b     최초 작성
  *******************************************************************************
  -->
 <body>
 
 <th:block layout:fragment="content">
-	<div class="content myOrderView">
-		<div class="cont_body">
-			<!-- CONT-BODY -->
-			<div class="lnb">
-				<div class="lnb_tit">
-					<h2>마이페이지</h2>
-				</div>
-				<div class="lnb_list">
-					<ul id="mypageLnbList"></ul>
+
+<main role="" id="" class="container my">
+	<section class="content my_return">
+		<form id="cancelForm" class="form_wrap">
+			<input type="hidden" name="accountNo" th:value="${oneData.accountNo}"/>
+			<input type="hidden" name="accountNm" th:value="${oneData.accountNm}"/>
+			<input type="hidden" name="bankCd" th:value="${oneData.bankCd}"/>
+					
+			<div class="inner wide bg_beige">
+				<div class="order_number">
+					<dl class="clear">
+						<dt>주문번호</dt>
+						<dd th:text="${oneData.ordNo}"></dd>
+					</dl>
 				</div>
 			</div>
-			<div class="cont">
-				<form id="cancelForm">
-					<input type="hidden" name="accountNo" th:value="${oneData.accountNo}"/>
-					<input type="hidden" name="accountNm" th:value="${oneData.accountNm}"/>
-					<input type="hidden" name="bankCd" th:value="${oneData.bankCd}"/>
-					<div class="sec_head">
-						<h3 class="subH1">주문취소</h3>
-						<span class="order_number">주문번호&nbsp;:&nbsp;<em th:text="${oneData.ordNo}"></em></span>
+			<div class="inner">
+				<div class="part_goods">
+					<div class="goods_top">
+						<div th:unless="${oneData.giftPackYn == 'Y'}" class="goods_date">주문일<span class="date" th:text="${oneData.ordDt}"></span></div>
+						<div th:if="${oneData.giftPackYn == 'Y'}" class="goods_date">선물일<span class="date" th:text="${oneData.ordDt}"></span></div>
 					</div>
-					<div class="sec_body">
-						<div class="part_goods">
-							<div class="goods_head">
-								<p th:unless="${oneData.giftPackYn == 'Y'}">주문일 <span th:text="${oneData.ordDt}"></span></p>
-								<p th:if="${oneData.giftPackYn == 'Y'}">선물일 <span th:text="${oneData.ordDt}"></span></p>
-							</div>
-							<div class="goods_cont">
-								<th:block th:if="${cancelList.cancelList}" th:each="cancel, status : ${cancelList.cancelList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
-								<!-- 주문상품 -->
-								<div class="goods_info">
-									<div class="order_desc">
-										<div class="goods_box">
-											<div class="gd_item">
-												<a href="javascript:void(0)" th:attr="goodsCd=${cancel.goodsCd}" onclick="fnGoToGoodsDetail(this)">
-													<span class="thumb">
-														<img th:src="${imageUrl + '/' + cancel.sysImgNm}" width="100%" alt="">
-													</span>
-													<p>
-														<span class="brand" th:text="${cancel.brandNm}"></span>
-														<span class="tag primary" th:if="${cancel.shotDelvYn == 'Y'}">총알배송</span>
-														<span class="tag" th:if="${cancel.shotDelvYn == 'N' and cancel.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
-														<span class="tag" th:if="${cancel.selfGoodsYn == 'N'}">업체직배송</span>
-													</p>
-													<p>
-														<span class="name" th:text="${cancel.goodsNm}"></span>
-													</p>
-												</a>
-											</div>
-											<div class="gd_opt">
-												<div class="option_wrap">
-													<span class="title sr-only">주문 옵션</span>
-													<span class="option" th:if="${cancel.goodsType == 'G056_S'}" th:each="option, status : ${cancel.colorNmArr}" th:text="|${cancel.itemNmArr[status.index]} / ${option} / ${cancel.optCd2Arr[status.index]}|"></span>
-													<span class="option" th:unless="${cancel.goodsType == 'G056_S'}" th:text="|${cancel.colorNm} / ${cancel.optCd2}|"></span>
-												</div>
-											</div>
-											<div class="gd_calc">
-												<p>
-													<span class="count"><em th:text="${cancel.ordQty - cancel.cnclRtnQty}"></em>개</span>
-												</p>
-												<p>
-													<span class="price_org" th:if="${(cancel.ordAmt - cancel.cnclRtnAmt - cancel.cpn1DcAmt) > (cancel.realOrdAmt + cancel.pntDcAmt + cancel.gfcdUseAmt)}"><em th:text="${#numbers.formatInteger(cancel.ordAmt - cancel.cnclRtnAmt - cancel.cpn1DcAmt, 1, 'COMMA')}"></em>원</span>
-													<span class="price_sale"><em th:text="${#numbers.formatInteger(cancel.realOrdAmt + cancel.pntDcAmt + cancel.gfcdUseAmt, 1, 'COMMA')}"></em>원</span>
-												</p>
+					<div class="goods_section">
+						<div class="goods_detail">
+							<a href="">
+								<div class="thumb_box">
+									<img th:src="${imageUrl + '/' + cancel.sysImgNm}" width="100%" alt="">
+								</div>
+								<div class="info_box">
+									<div class="od_name">
+										<div class="brand">
+											<span>Mollimelli 몰리멜리</span>
+											<div class="badge_wrap">
+												<em class="order_badge">업체직배송</em>
 											</div>
 										</div>
-										<div class="button_box">
-											<div class="count_modify">
-												<span class="txt">수량</span>
-												<form class="form_wrap">
-													<div class="form_field">
-														<div class="select_custom select_count">
-															<div class="combo">
-																<input type="hidden" name="chgQty" value="0" th:attr="ordDtlNo=${cancel.ordDtlNo}, ordCanChgQty=${cancel.ordCanChgQty}"/>
-																<div class="select">선택</div>
-																<ul class="list">
-																	<li class="selected" qty="0" onclick="fnChangeCancelQty(this);">선택</li>
-																	<li th:if="${cancel.ordCanChgQty > 0}" th:each="num : ${#numbers.sequence(1,cancel.ordCanChgQty)}" th:attr="qty=${num}" th:text="${num}" onclick="fnChangeCancelQty(this);"></li>
-																</ul>
-															</div>
-														</div>
-													</div>
-												</form>
-											</div>
+										<div class="name">몰리겨울상하복 균일가 택1 유아동/상하복/기모상하복/상하의세트 몰리겨울상하복 균일가 택1</div>
+									</div>
+									<div class="od_opt">
+										<div class="option">
+											<em>Black</em>
+											<em>XXL</em>
 										</div>
 									</div>
-									<div class="order_text">
-										<p>취소하실 수량을 선택하신 후 주문 취소를 하실 수 있습니다.</p>
+									<div class="od_calc">
+										<p class="sale_price"><del><em>95,000</em>원</del></p>
+										<p class="price">
+											<span class="selling_price"><em>61,200</em>원</span>
+										</p>
 									</div>
 								</div>
-								<!-- //주문상품 -->
-								</th:block>
-							</div>
+							</a>
 						</div>
-						<h4 class="subH3">환불정보</h4>
-						<div class="tbl type6">
-							<table>
-								<colgroup>
-									<col width="50%">
-									<col width="50%">
-								</colgroup>
-								<tr>
-									<td>
-										<dl>
-											<div>
-												<dt>환불 예정 금액</dt>
-												<dd>
-													<div class="price">
-														<span class="return_total_price"><em id="returnAmt">0</em>원</span>
-													</div>
-												</dd>
-											</div>
-											<div class="include_item"> <!-- 할인항목 표기 class명 include_item -->
-												<dt>상품 취소 금액</dt>
-												<dd><em id="goodsCancelAmt">0</em>원</dd>
-											</div>
-											<div class="include_item">
-												<dt>배송비</dt>
-												<dd><em id="deliveryFee">0</em>원</dd>
-											</div>
-											<div class="include_item">
-												<dt>할인 금액 차감</dt>
-												<dd><em id="deductDcAmt">0</em>원</dd>
-											</div>
-										</dl>
-									</td>
-									<td>
-										<dl>
-											<div>
-												<dt>환불 수단</dt>
-												<dd th:if="${paymentInfo.pgGb == 'KCP'}" th:text="${paymentInfo.payMeansNm}"></dd>
-												<dd th:if="${paymentInfo.pgGb == 'NAVER'}" th:text="|네이버페이|"></dd>
-												<dd th:if="${paymentInfo.pgGb == 'KAKAO'}" th:text="|카카오페이|"></dd>
-												<dd th:if="${paymentInfo.pgGb == 'PAYCO'}" th:text="|PAYCO|"></dd>
-											</div>
-											<div>
-												<dt>결제 금액 환불</dt>
-												<dd>
-													<em id="refundPayAmt">0</em>원
-												</dd>
-											</div>
-											<div>
-												<dt>포인트 환불</dt>
-												<dd>
-													<em id="refundPoint">0</em>P
-												</dd>
-											</div>
-											<div>
-												<dt>상품권 환불</dt>
-												<dd>
-													<em id="refundGiftCard">0</em>원
-												</dd>
-											</div>
-										</dl>
-									</td>
-								</tr>
-							</table>
-						</div>
-						<div class="txt_info">
-							<ul>
-								<li>
-									카드사로 결제 취소 요청이 전달된 후 환불까지는 평일 기준 3 ~7일이 소요될 수 있습니다.
-								</li>
-							</ul>
-						</div>
-						<div class="info_footer_area" id="addDeliveryFee" style="display:none">
-							<p>
-								<span id="addPayCost">2,500원</span> 배송비 추가 결제가 필요합니다.
-								<input type="hidden" name="addPayCost"/>
-							</p>
+						<div class="goods_select">
+							<div class="select_custom select_count">
+								<div class="combo">
+									<div class="select">수량 0개</div>
+								</div>
+							</div>
 						</div>
-						<div class="btn_footer_area">
-							<button type="button" class="btn btn_default btn_md" onclick="cfnGoToPage(_PAGE_MYPAGE_ORDER_LIST);"><span>취소</span></button>
-							<button type="button" id="btn_refund_pop" class="btn btn_dark btn_md" onclick="fnCancel();"><span>주문 취소</span></button>
+						<div class="goods_txt">
+							<p class="cf_txt cf_desc">취소하실 상품의 수량을 선택하신 후<br>취소 신청을 하실 수 있습니다.</p>
 						</div>
 					</div>
-				</form>
+				</div>
 			</div>
-			<!-- // CONT-BODY -->
-		</div>
-
-		<!-- 환불계좌 등록 팝업 -->
-		<div class="modal fade refund_pop" id="refundPop" tabindex="-1" role="dialog" aria-labelledby="refundLabel" aria-hidden="true">
-			<div class="modal-dialog" role="document">
-				<div class="modal-content"></div>
+			<div class="inner">
+				<div class="tbl_wrap">
+					<div class="tbl_tit"> 
+						<h3>취소 사유</h3>
+					</div>
+					<div class="tbl tbl_tarea">
+						<table>
+							<colgroup>
+								<col width="*">
+							</colgroup>   
+							<tr>
+								<th class="sr-only">취소 접수 일자</th>
+								<td>
+									<div class="select_custom select_return">
+										<div class="combo">
+											<div class="select">취소 사유를 선택하세요.</div>
+											<ul class="list">
+												<li>단순 변심</li>
+												<li>색상/사이즈가 상이</li>
+												<li>타사이트가 더 저렴함</li>
+												<li>상품옵션 선택 잘못 함</li>
+												<li>상품 결함이 있음</li>
+												<li>실제 상품이 상품 설명과 다름</li>
+												<li>포장과 상품이 훼손 됨</li>
+												<li>상품이 훼손 됨(포장은 양호)</li>
+												<li>주문상품 일부가 배송되지 않음</li>
+												<li>구성품, 부속품이 없음</li>
+												<li>다른 상품이 배송됨(주문상품 아님)</li>
+												<li>상품이 늦게 배송 됨</li>
+											</ul>
+										</div>
+									</div>
+								</td>
+							</tr>
+							<tr>
+								<th class="sr-only">취소 완료 일자</th>
+								<td>
+									<div class="textarea_wrap">
+										<textarea class="doc_return" name="" id="" placeholder="자세한 사유를 입력해주세요."></textarea>
+										<p class="txt_cnt"><span id="return_cnt" class="c_primary">0</span>/200</p>
+									</div>
+								</td>
+							</tr>
+						</table>
+					</div>
+				</div>
+			</div>
+			<div class="inner">
+				<div class="tbl_wrap pay_wrap">
+					<div class="tbl_tit"> 
+						<h3>환불 정보</h3>
+						<strong class="pay"><span>123,456,789</span>원</strong>
+					</div>
+					<div class="tbl type1">
+						<table>
+							<colgroup>
+								<col width="227">
+								<col width="*">
+							</colgroup>   
+							<tr>
+								<td>
+									<dl class="refund_deduct">
+										<div>
+											<dt>상품 취소 금액</dt>
+											<dd>
+												<div>
+													<span>123,456,789</span>원
+												</div>
+											</dd>
+										</div>
+										<div>
+											<dt>배송비</dt>
+											<dd>
+												<div>
+													<span>-123,456,789</span>원
+												</div>
+											</dd>
+										</div>
+										<div>
+											<dt>할인 금액 차감</dt>
+											<dd>
+												<div>
+													<span>-123,456,789</span>원
+												</div>
+											</dd>
+										</div>
+									</dl>
+									<dl class="refund_detail">
+										<div>
+											<dt>환불 수단</dt>
+											<dd>
+												<div>
+													<span>-123,456,789</span>원
+												</div>
+											</dd>
+										</div>
+										<div>
+											<dt>결제금액 환불</dt>
+											<dd>
+												<div>
+													<span>-123,456,789</span>원
+												</div>
+											</dd>
+										</div>
+										<div>
+											<dt>포인트 환불</dt>
+											<dd>
+												<div>
+													<span>-123,456,789</span>원
+												</div>
+											</dd>
+										</div>
+										<div>
+											<dt>상품권 환불</dt>
+											<dd>
+												<div>
+													<span>3000</span>P
+												</div>
+											</dd>
+										</div>
+									</dl>
+								</td>
+							</tr>
+						</table>
+						<button type="button" class="btn btn_default"><span>취소 전표 보기</span></button>
+					</div>
+				</div>
+				<div class="required_group">
+					<p>배송비 <span class="c_primary">5,000원</span> 추가 결제가 필요합니다.</p>
+				</div>
+				<div class="btn_group btn_group_flex">
+					<div><button type="button" class="btn btn_default"><span>취소</span></button></div>
+					<div><button type="button" id="btn_order_return" class="btn btn_dark"><span>취소 신청</span></button></div> <!-- 210409_추가 : btn_order_return id 추가 -->
+				</div>
 			</div>
-			<a href="#close-modal" rel="modal:close" id="refundPop_close" class="close-modal">Close</a>
-			<a href="#close-modal" rel="modal:close" class="close-modal ">Close</a>
-		</div>
-		<!-- //환불계좌 등록 팝업 -->
-	</div>
+		</form>
+	</section>
+</main>
 <script src="/ux/plugins/gaga/gaga.paging.js"></script>
 <script th:inline="javascript">
 	let cancelList = [[${cancelList}]];

+ 189 - 197
src/main/webapp/WEB-INF/views/mob/mypage/MypageCreExchangeDetailFormMob.html

@@ -2,7 +2,7 @@
 <html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="mob/common/layout/MypageLayoutMob">
 <!--
  *******************************************************************************
- * @source  : MypageCreExchangeDetailFormWeb.html
+ * @source  : MypageCreExchangeDetailFormMob.html
  * @desc    : 마이페이지 > 취소/반품/교환내역 > 교환상세 Page
  *============================================================================
  * STYLE24
@@ -10,221 +10,217 @@
  *============================================================================
  * VER  DATE         AUTHOR      DESCRIPTION
  * ===  ===========  ==========  =============================================
- * 1.0  2021.04.13   card007     최초 작성
+ * 1.0  2021.04.28   jsh77b     최초 작성
  *******************************************************************************
  -->
 <body>
 
 <th:block layout:fragment="content">
-	<div class="content myOrderView"> <!-- 페이지특정 클래스 = myOrderView -->
-		<div class="cont_body">
-			<!-- CONT-BODY -->
-			<div class="lnb">
-				<div class="lnb_tit">
-					<h2>마이페이지</h2>
-				</div>
-				<div class="lnb_list">
-					<ul id="mypageLnbList"></ul>
-				</div>
+<main role="" id="" class="container my">
+	<section class="content my_exchange">
+		<div class="inner wide bg_beige">
+			<div class="order_number">
+				<dl class="clear">
+					<dt>주문번호</dt>
+					<dd th:text="${oneData.ordNo}"></dd>
+				</dl>
 			</div>
-			<div class="cont">
-				<div class="sec_head">
-					<h3 class="subH1">교환상세</h3>
-					<span class="order_number">주문번호&nbsp;:&nbsp;<em th:text="${oneData.ordNo}"></em></span>
+		</div>
+		<div class="inner">
+			<div class="part_goods">
+				<div class="goods_top">
+					<th:block th:if="${oneData.giftPackYn == 'Y'}">
+						<div class="goods_date">선물일<span class="date" th:text="${oneData.ordDt}"></span></div>
+					</th:block>
+					<th:block th:unless="${oneData.giftPackYn == 'Y'}">
+						<div class="goods_date">주문일<span class="date" th:text="${oneData.ordDt}"></span></div>
+					</th:block>
 				</div>
-				<div class="sec_body">
-					<div class="part_goods">
-						<div class="goods_head">
-							<p th:unless="${oneData.giftPackYn == 'Y'}">주문일 <span th:text="${oneData.ordDt}"></span></p>
-							<p th:if="${oneData.giftPackYn == 'Y'}">선물일 <span th:text="${oneData.ordDt}"></span></p>
-							<a href="javascript:void(0)" th:attr="ordNo=${oneData.ordNo}" onclick="fnGoToOrderDetail(this);">상세보기</a>
+				
+				<th:block th:if="${exchangeDetailList.exchangeDetailList}" th:each="returnDtl, status : ${exchangeDetailList.exchangeDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
+					<div class="goods_section">
+						<div class="goods_status">
+							<p class="dlvr_staus" th:text="${returnDtl.chgStatNm}"></p>
+							<p class="dlvr_desc" th:text="|${returnDtl.chgDate} ${returnDtl.chgTime}|"></p>
 						</div>
-						<div class="goods_cont">
-							<!-- 주문상품 -->
-							<th:block th:if="${exchangeDetailList.exchangeDetailList}" th:each="exchangeDtl, status : ${exchangeDetailList.exchangeDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
-								<div class="goods_info">
-									<div class="order_desc">
-										<div class="goods_box">
-											<div class="gd_item">
-												<a href="javascript:void(0)" th:attr="goodsCd=${exchangeDtl.goodsCd}" onclick="fnGoToGoodsDetail(this)">
-													<span class="thumb">
-														<img th:src="${imageUrl + '/' + exchangeDtl.sysImgNm}" width="100%" alt="">
-													</span>
-													<p>
-														<span class="brand" th:text="${exchangeDtl.brandNm}"></span>
-														<span class="tag primary" th:if="${exchangeDtl.shotDelvYn == 'Y'}">총알배송</span>
-														<span class="tag" th:if="${exchangeDtl.shotDelvYn == 'N' and exchangeDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
-														<span class="tag" th:if="${exchangeDtl.selfGoodsYn == 'N'}">업체직배송</span>
-													</p>
-													<p>
-														<span class="name" th:text="${exchangeDtl.goodsNm}"></span>
-													</p>
-												</a>
-											</div>
-											<div class="gd_opt">
-												<div class="option_wrap">
-													<span class="title sr-only">주문 옵션</span>
-													<span class="option" th:if="${exchangeDtl.goodsType == 'G056_S'}" th:each="option, status : ${exchangeDtl.colorNmArr}" th:text="|${exchangeDtl.itemNmArr[status.index]} / ${option} / ${exchangeDtl.optCd2Arr[status.index]}|"></span>
-													<span class="option" th:unless="${exchangeDtl.goodsType == 'G056_S'}" th:text="|${exchangeDtl.colorNm} / ${exchangeDtl.optCd2}|"></span>
-												</div>
-											</div>
-											<div class="gd_calc">
-												<p>
-													<span class="count"><em th:text="${exchangeDtl.chgQty}"></em>개</span>
-												</p>
-												<p>
-													<span class="price_org" th:if="${exchangeDtl.priceOrg > exchangeDtl.priceSale}"><em th:text="${#numbers.formatInteger(exchangeDtl.priceOrg, 1, 'COMMA')}"></em>원</span>
-													<span class="price_sale"><em th:text="${#numbers.formatInteger(exchangeDtl.priceSale, 1, 'COMMA')}"></em>원</span>
-												</p>
-											</div>
-											<div class="gd_opt">
-												<div class="option_wrap">
-													<span class="title">교환 옵션</span>
-													<span class="option" th:if="${exchangeDtl.goodsType == 'G056_S'}" th:each="option, status : ${exchangeDtl.chgColorNmArr}" th:text="|${exchangeDtl.chgItemNmArr[status.index]} / ${option} / ${exchangeDtl.chgOptCd2Arr[status.index]}|"></span>
-													<span class="option" th:unless="${exchangeDtl.goodsType == 'G056_S'}" th:text="|${exchangeDtl.chgColorNm} / ${exchangeDtl.chgOptCd2}|"></span>
-												</div>
+						<div class="goods_detail">
+							<a href="">
+								<div class="thumb_box">
+									<img th:src="${imageUrl + '/' + returnDtl.sysImgNm}" width="100%" alt="">
+								</div>
+								<div class="info_box">
+									<div class="od_name">
+										<div class="brand">
+											<span th:text="${returnDtl.brandNm}"></span>
+											<div class="badge_wrap">
+												<em class="tag primary" th:if="${returnDtl.shotDelvYn == 'Y'}">총알배송</em>
+												<em class="tag" th:if="${returnDtl.shotDelvYn == 'N' and returnDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</em>
+												<em class="tag" th:if="${returnDtl.selfGoodsYn == 'N'}">업체직배송</span>
 											</div>
 										</div>
-										<div class="status_box">
-											<p>
-												<th:block th:text="${exchangeDtl.chgStatNm}"></th:block>
-												<span class="date" th:text="${exchangeDtl.chgDate}"></span>
-												<span class="time" th:text="${exchangeDtl.chgTime}"></span>
-											</p>
+										<div class="name" th:text="${returnDtl.goodsNm}"></div>
+									</div>
+									<div class="od_opt">
+										<div class="option">
+											<th:block th:if="${returnDtl.goodsType == 'G056_S'}">
+												<th:block th:each="option, status : ${returnDtl.colorNmArr}">
+													<em th:text="${option}"></em>
+													<em th:text="${returnDtl.optCd2Arr[status.index]}"></em>
+												</th:block>
+											</th:block>
+											<th:block th:unless="${returnDtl.goodsType == 'G056_S'}">
+												<em th:text="${returnDtl.colorNm}"></em>
+												<em th:text="${returnDtl.optCd2}"></em>
+											</th:block>
 										</div>
-										<div class="button_box">
-											<p th:if="${exchangeDtl.chgStat == 'G685_20' or exchangeDtl.chgStat == 'G685_21'}"><button type="button" class="btn btn_default btn_sm" th:attr="ordChgSq=${exchangeDtl.ordChgSq}" onclick="fnCreCancel(this);"><span>신청취소</span></button></p>
-											<p th:if="${exchangeDtl.chgStat == 'G685_32' or exchangeDtl.chgStat == 'G685_21'}"><button type="button" class="btn btn_default btn_sm" th:attr="ordNo=${exchangeDtl.ordNo}, ordChgSq=${exchangeDtl.ordChgSq}" onclick="fnCrePayAddCost(this);"><span>결제하기</span></button></p>
-											<p><button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA_REG);"><span>1:1 문의</span></button></p>
+									</div>
+									<div class="od_exchange_opt">
+										<span>교환옵션</span>
+										<div class="option">
+											<th:block th:if="${returnDtl.goodsType == 'G056_S'}">
+												<th:block th:each="option, status : ${returnDtl.chgColorNmArr}">
+													<em th:text="${returnDtl.chgItemNmArr[status.index]}"></em>
+													<em th:text="${option}"></em>
+													<em th:text="${returnDtl.chgOptCd2Arr[status.index]}"></em>
+												</th:block>
+											</th:block>
+											<th:block th:unless="${returnDtl.goodsType == 'G056_S'}">
+												<em th:text="${returnDtl.chgColorNm}"></em>
+												<em th:text="${returnDtl.chgOptCd2}"></em>
+											</th:block>
 										</div>
 									</div>
-									<!-- 교환결제대기 -->
-									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_21' or (exchangeDtl.chgGb == 'G680_40' and exchangeDtl.chgStat == 'G685_32')}"><p th:text="|${exchangeDtl.addPayCost}|원 결제 후 교환 가능합니다."></p></div>
-									<!-- 교환접수 -->
-									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_20'}"><p>교환 신청이 접수 되었습니다. 신속하게 처리하여 드리겠습니다.</p></div>
-									<!-- 회수요청 -->
-									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_30'}"><p>고객님이 요청하신 회수지로 상품을 회수 중에 있습니다.</p></div>
-									<!-- 교환상품검수중 -->
-									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_31' and exchangeDtl.chgGb == 'G680_40'}"><p>고객님이 교환하신 상품을 검수 중에 있습니다.</p></div>
-									<!-- 교환완료 -->
-									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_40' and (exchangeDtl.chgOrdDtlStat == 'G013_60' or exchangeDtl.chgOrdDtlStat == 'G013_70')}"><p>반품이 완료되었습니다.</p></div>
-									<!-- 교환철회 -->
-									<div class="order_text" th:if="${exchangeDtl.chgStat == 'G685_49'}"><p>요청하신 교환을 취소하였습니다.</p></div>
+									<div class="od_calc">
+										<p class="price">
+											<span class="count"><em th:text="${returnDtl.chgQty}"></em>개</span>
+										</p>
+									</div>
 								</div>
-							</th:block>
-							<!-- //주문상품 -->
+							</a>
+						</div>
+						<div class="goods_btn_wrap btn_group_flex">
+							<div th:if="${returnDtl.chgStat == 'G685_20' or returnDtl.chgStat == 'G685_21'}"><button type="button" class="btn btn_default" th:attr="ordNo=${returnDtl.ordNo}, ordChgSq=${returnDtl.ordChgSq}, cancelGb=${returnDtl.chgGb}" onclick="fnCreCancel(this);"><span>신청 취소</span></button></div>
+							<div th:if="${returnDtl.chgStat == 'G685_32' or returnDtl.chgStat == 'G685_21'}"><button type="button" class="btn btn_default" th:attr="ordNo=${returnDtl.ordNo}, ordChgSq=${returnDtl.ordChgSq}" onclick="fnCrePayAddCost(this);"><span>결재하기</span></button></div>
+							<div><button type="button" class="btn btn_default" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA_REG);"><span>1:1 문의</span></button></div>
+						</div>
+						<div class="goods_txt">
+							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_21' or (returnDtl.chgGb == 'G680_40' and returnDtl.chgStat == 'G685_32')}" th:text="|${returnDtl.addPayCost}원 결제 후 반품 가능합니다.|"></p>
+							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_20'}">교환 신청이 접수 되었습니다.<br> 신속하게 처리하여 드리겠습니다.</p>
+							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_30'}">고객님이 요청하신 회수지로 상품을 회수 중에 있습니다.</p>
+							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_31' and returnDtl.chgGb == 'G680_40'}">고객님이 교환하신 상품을 검수 중에 있습니다.</p>
+							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_40'} and (returnDtl.chgOrdDtlStat == 'G013_60' or returnDtl.chgOrdDtlStat == 'G013_70')}">교환이 완료되었습니다.</p>
+							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_49'}">요청하신 교환을 취소하였습니다.</p>
 						</div>
 					</div>
-					<h4 class="subH3">상세 정보</h4>
-					<div class="tbl type1">
-						<table>
-							<colgroup>
-								<col width="210">
-								<col width="*">
-							</colgroup>
-							<tbody>
-								<tr>
-									<th>교환접수 일자</th>
-									<td th:text="${oneData.chgDt}"></td>
-								</tr>
-								<tr>
-									<th>교환완료 일자</th>
-									<td th:text="${oneData.completeDt}"></td>
-								</tr>
-							</tbody>
-						</table>
+				</th:block>
+			</div>
+		</div>
+		<div class="inner">
+			<div class="tbl_wrap">
+				<div class="tbl_tit"> 
+					<h3>상세 정보</h3>
+				</div>
+				<div class="tbl type1">
+					<table>
+						<colgroup>
+							<col width="107">
+							<col width="*">
+						</colgroup>   
+						<tr>
+							<th>교환 접수 일자</th>
+							<td><div><span th:text="${oneData.chgDt}"></span></div></td>
+						</tr>
+						<tr>
+							<th>교환 완료 일자</th>
+							<td><div><span th:text="${oneData.completeDt}"></span></div></td>
+						</tr>
+					</table>
+				</div>
+			</div>
+		</div>
+		<div class="inner">
+			<div class="tbl_wrap">
+				<div class="tbl_tit"> 
+					<h3>교환 상품 배송지</h3>
+					<button type="button" id="btn_adrsChange_pop" class="btn_popup" th:if="${oneData.chgOrdDtlStat == 'G013_20' or oneData.chgOrdDtlStat == 'G013_25' or oneData.chgOrdDtlStat == 'G013_30' or oneData.chgOrdDtlStat == 'G013_35' or oneData.chgOrdDtlStat == 'G013_40'}" onclick="fnChangeAddr('recip');">
+						<span>배송지 변경</span>
+					</button>
+				</div>
+				<div class="tbl">
+					<div class="ship_info">
+						<dl>
+							<div class="name">
+								<dt><span class="sr-only">배송지명</span></dt>
+								<dd id="recipNm" th:text="${oneData.recipNm}"></dd>
+							</div>
+							<div class="addr">
+								<dt><span class="sr-only">배송주소</span></dt>
+								<dd id="recipAddr" th:text="|${oneData.chgerBaseAddr} ${oneData.chgerDtlAddr}|"></dd>
+							</div>
+							<div class="phone">
+								<dt><span class="sr-only">휴대폰 번호</span></dt>
+								<dd id="recipPhnno" th:text="${oneData.recipPhnno}"></dd>
+							</div>
+							<div class="ship_request">
+								<dt>배송요청 사항</dt>
+								<dd id="delvMemo" th:text="${oneData.delvMemo}"></dd>
+							</div>
+						</dl>
 					</div>
-					<h4 class="subH3">교환 상품 배송지</h4>
-					<div class="tbl type1">
-						<table>
-							<colgroup>
-								<col width="210">
-								<col width="*">
-							</colgroup>
-							<tbody>
-								<tr>
-									<th>
-										배송지 정보
-									</th>
-									<td>
-										<div class="block_line">
-											<ul>
-												<li>
-													<span id="recipNm" th:text="${oneData.recipNm}"></span>
-												</li>
-												<li>
-													<span id="recipPhnno" th:text="${oneData.recipPhnno}"></span>
-												</li>
-												<li>
-													<span>서울시 영등포구 은행로 11, 8층 (여의도동, 일신빌딩)</span>
-													<button type="button" class="btn btn_default btn_sm" th:if="${oneData.chgOrdDtlStat == 'G013_20' or oneData.chgOrdDtlStat == 'G013_25' or oneData.chgOrdDtlStat == 'G013_30' or oneData.chgOrdDtlStat == 'G013_35' or oneData.chgOrdDtlStat == 'G013_40'}" onclick="fnChangeAddr('recip');"><span>배송지 변경</span></button>
-												</li>
-												<li>
-													배송요청 사항&nbsp;:&nbsp;<span>직접 받고 부재 시 문 앞</span>
-													<button type="button" class="btn_underline" th:if="${oneData.chgOrdDtlStat == 'G013_20' or oneData.chgOrdDtlStat == 'G013_25' or oneData.chgOrdDtlStat == 'G013_30' or oneData.chgOrdDtlStat == 'G013_35' or oneData.chgOrdDtlStat == 'G013_40'}" onclick="fnChangeMemo('recip')"><span>변경하기</span></button>
-												</li>
-											</ul>
-										</div>
-									</td>
-								</tr>
-							</tbody>
-						</table>
+				</div>
+			</div>
+		</div>
+		<th:block th:if="${oneData.wdGb == 'W'}">
+			<div class="inner">
+				<div class="tbl_wrap">
+					<div class="tbl_tit"> 
+						<h3>교환 회수지 주소</h3>
+						<button type="button" id="btn_adrsChange_pop" class="btn_popup" th:if="${oneData.chgStat == 'G685_20' or oneData.chgStat == 'G685_21'}" onclick="fnChangeAddr('chger');">
+							<span>회수지 변경</span>
+						</button>
 					</div>
-					<th:block th:if="${oneData.wdGb == 'W'}">
-						<h4 class="subH3">상품 회수지</h4>
-						<div class="tbl type1">
-							<table>
-								<colgroup>
-									<col width="210">
-									<col width="*">
-								</colgroup>
-								<tbody>
-									<tr>
-										<th>회수 진행 여부</th>
-										<td>회수요청</td>
-									</tr>
-									<tr>
-										<th>회수지 정보</th>
-										<td>
-											<div class="block_line">
-												<ul>
-													<li>
-														<span id="chgerNm" th:text="${oneData.chgerNm}"></span>
-													</li>
-													<li>
-														<span id="chgerPhnno" th:text="${oneData.chgerPhnno}"></span>
-													</li>
-													<li>
-														<span id="chgerAddr" th:text="|${oneData.chgerBaseAddr} ${oneData.chgerDtlAddr}|"></span>
-														<button type="button" class="btn btn_default btn_sm" th:if="${oneData.chgStat == 'G685_20' or oneData.chgStat == 'G685_21'}" onclick="fnChangeAddr('chger');"><span>회수지 변경</span></button>
-													</li>
-													<li>
-														배송요청 사항&nbsp;:&nbsp;<span id="delvMemo" th:text="${oneData.delvMemo}"></span>
-														<button type="button" class="btn_underline" th:if="${oneData.chgStat == 'G685_20' or oneData.chgStat == 'G685_21'}" onclick="fnChangeMemo('chger');"><span>변경하기</span></button>
-													</li>
-												</ul>
-											</div>
-										</td>
-									</tr>
-									<tr th:if="${not #strings.isEmpty(oneData.wdInvoiceNo) and not #strings.isEmpty(oneData.shipCompNm)}">
-										<th>회수 정보</th>
-										<td>
-											<th:block th:text="|${oneData.shipCompNm} / ${oneData.wdInvoiceNo}|"></th:block>
-											<button type="button" class="btn btn_default btn_sm" onclick="fnGoToWithdrawDelivery()"><span>회수조회</span></button>
-										</td>
-									</tr>
-								</tbody>
-							</table>
+					<div class="tbl">
+						<div class="ship_info">
+							<dl>
+								<div class="name">
+									<dt><span class="sr-only">배송지명</span></dt>
+									<dd id="chgerNm" th:text="${oneData.chgerNm}"></dd>
+								</div>
+								<div class="addr">
+									<dt><span class="sr-only">배송주소</span></dt>
+									<dd id="chgerAddr" th:text="|${oneData.chgerBaseAddr} ${oneData.chgerDtlAddr}|"></dd>
+								</div>
+								<div class="phone">
+									<dt><span class="sr-only">휴대폰 번호</span></dt>
+									<dd id="chgerPhnno" th:text="${oneData.chgerPhnno}"></dd>
+								</div>
+							</dl>
 						</div>
-					</th:block>
-					<div class="btn_footer_area">
-						<button type="button" class="btn btn_dark btn_md" onclick="cfnGoToPage(_PAGE_MYPAGE_CRE_LIST);"><span>확인</span></button>
 					</div>
 				</div>
 			</div>
-			<!-- // CONT-BODY -->
+		</th:block>
+		<th:block th:if="${not #strings.isEmpty(oneData.wdInvoiceNo) and not #strings.isEmpty(oneData.shipCompNm)}">
+			<div class="inner">
+				<div class="tbl_wrap">
+					<div class="tbl_tit"> 
+						<h3>회수 정보</h3>
+						<button type="button" class="btn_popup" onclick="fnGoToWithdrawDelivery()"><span>회수 조회</span></button>
+					</div>
+					<div class="tbl tbl_row">
+						<dl>
+							<dt class="sr-only">택배회사/송장번호</dt>
+							<dd><span th:text="|${oneData.shipCompNm} / ${oneData.wdInvoiceNo}|"></span> / <span th:text="${oneData.wdInvoiceNo}"></span></dd>
+						</dl>
+					</div>
+				</div>
+			</div>
+		</th:block>
+		<div class="inner">
+			<div class="btn_group"><button class="btn btn_dark" onclick="cfnGoToPage(_PAGE_MYPAGE_CRE_LIST);"><span>확인</span></button></div>
 		</div>
-	</div>
+	</section>
+</main>
 <script src="/ux/plugins/gaga/gaga.paging.js"></script>
 <script th:inline="javascript">
 	/*<![CDATA[*/
@@ -232,11 +228,7 @@
 	let memoGb = '';
 
 	$(document).ready(function() {
-		// 마이페이지 LNB 설정
-		fnSetMypageLnbList(2);
 		
-		// 마이페이지 location 설정
-		fnSetMypageLocation('취소/반품/환불내역', '_PAGE_MYPAGE_CRE_LIST', '반품 상세');
 	});
 	
 	// 배송메모 및 반품메모 변경 처리

+ 58 - 13
src/main/webapp/WEB-INF/views/mob/mypage/MypageOrderListInfoMob.html

@@ -106,7 +106,11 @@
 							<!-- 입금대기, 결제완료, 상품준비중, 출고처지정 (주문취소) -->
 							<th:block th:if="${ordDtl.ordDtlStat} == 'G013_10' or ${ordDtl.ordDtlStat} == 'G013_20' or ${ordDtl.ordDtlStat} == 'G013_30' or ${ordDtl.ordDtlStat} == 'G013_35'">
 								<div class="goods_btn_wrap btn_group_flex">
-									<div><button type="button" class="btn btn_default btn_cncl_complete"><span>주문 취소</span></button></div>
+									<div>
+										<button type="button" class="btn btn_default btn_cncl_complete" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" th:ordCanChgQty="${ordDtl.ordCanChgQty}" th:delvFeeCd="${ordDtl.delvFeeCd}" onclick="fnCreateChange(this, 'cancel');">
+											<span>주문 취소</span>
+										</button>
+									</div>
 								</div>
 							</th:block>
 							<!-- //입금대기, 결제완료, 상품준비중, 출고처지정 (주문취소) -->
@@ -122,10 +126,18 @@
 								<th:block th:if="${ordDtl.changeableYn} == 'Y' or ${ordDtl.returnableYn} == 'Y'">
 									<div class="goods_btn_wrap btn_group_flex">
 										<th:block th:if="${ordDtl.changeableYn} == 'Y'">
-											<div><button type="button" class="btn btn_default btn_exch_req"><span>교환 신청</span></button></div>
+											<div>
+												<button type="button" class="btn btn_default btn_exch_req" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" th:ordCanChgQty="${ordDtl.ordCanChgQty}" th:delvFeeCd="${ordDtl.delvFeeCd}" onclick="fnCreateChange(this, 'exchange');">
+													<span>교환 신청</span>
+												</button>
+											</div>
 										</th:block>
 										<th:block th:if="${ordDtl.returnableYn} == 'Y'">
-											<div><button type="button" class="btn btn_default btn_rtn_req"><span>반품 신청</span></button></div>
+											<div>
+												<button type="button" class="btn btn_default btn_rtn_req" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" th:ordCanChgQty="${ordDtl.ordCanChgQty}" th:delvFeeCd="${ordDtl.delvFeeCd}" onclick="fnCreateChange(this, 'return');">
+													<span>반품 신청</span>
+												</button>
+											</div>
 										</th:block>
 									</div>
 								</th:block>
@@ -149,25 +161,42 @@
 								<div class="goods_btn_wrap btn_group_flex">
 									<!-- 교환가능, 반품가능 -->
 									<th:block th:if="${ordDtl.changeableYn} == 'Y'">
-										<div><button type="button" class="btn btn_default btn_exch_req"><span>교환 신청</span></button></div>
+										<button type="button" class="btn btn_default btn_exch_req" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" th:ordCanChgQty="${ordDtl.ordCanChgQty}" th:delvFeeCd="${ordDtl.delvFeeCd}" onclick="fnCreateChange(this, 'exchange');">
+											<span>교환 신청</span>
+										</button>
 									</th:block>
 									<th:block th:if="${ordDtl.returnableYn} == 'Y'">
-										<div><button type="button" class="btn btn_default btn_rtn_req"><span>반품 신청</span></button></div>
+										<div>
+											<button type="button" class="btn btn_default btn_rtn_req" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" th:ordCanChgQty="${ordDtl.ordCanChgQty}" th:delvFeeCd="${ordDtl.delvFeeCd}" onclick="fnCreateChange(this, 'return');">
+												<span>반품 신청</span>
+											</button>
+										</div>
 									</th:block>
 									<!-- //교환가능, 반품가능 -->
-									
-									<div><button type="button" id="btn_purchase_confirm btn_ord_confirm" class="btn btn_primary"><span>구매 확정</span></button></div>
+									<div>
+										<button type="button" id="btn_purchase_confirm btn_ord_confirm" class="btn btn_primary" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" onclick="fnDecideOrder(this);">
+											<span>구매 확정</span>
+										</button>
+									</div>
 								</div>
 								<div class="goods_btn_wrap btn_group_flex">
 									<!-- 교환불가, 반품불가 -->
 									<th:block th:if="${ordDtl.changeableYn} == 'N' or ${ordDtl.returnableYn} == 'N'">
-										<div><button type="button" class="btn btn_default btn_qna_write"><span>1:1 문의</span></button></div>
+										<div>
+											<button type="button" class="btn btn_default btn_qna_write" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);"">
+												<span>1:1 문의</span>
+											</button>
+										</div>
 									</th:block>
 									<!-- //교환불가, 반품불가 -->
 									
 									<!-- 리뷰사용가능, 리뷰등록전일때 -->
 									<th:block th:if="${ordDtl.reviewableYn} == 'Y' and ${ordDtl.reviewSq} == null">
-										<div><button type="button" class="btn btn_primary btn_review_write"><span>리뷰 쓰기</span></button></div>
+										<div>
+											<button type="button" class="btn btn_primary btn_review_write" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" th:goodsCd="${ordDtl.GoodsCd}" onclick="fnCreateReview(this);">
+												<span>리뷰 쓰기</span>
+											</button>
+										</div>
 									</th:block>
 									<!-- //리뷰사용가능, 리뷰등록전일때 -->
 								</div>
@@ -177,12 +206,24 @@
 							<!-- 구매확정 -->
 							<th:block th:if="${ordDtl.ordDtlStat} == 'G013_70'">
 								<div class="goods_btn_wrap btn_group_flex">
-									<div><button type="button" class="btn btn_primary btn_cart_save"><span>쇼핑백 담기</span></button></div>
-									<div><button type="button" class="btn btn_default btn_qna_write"><span>1:1 문의</span></button></div>
+									<div>
+										<button type="button" class="btn btn_primary btn_cart_save" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" onclick="fnCreateCart(this);"">
+											<span>쇼핑백 담기</span>
+										</button>
+									</div>
+									<div>
+										<button type="button" class="btn btn_default btn_qna_write" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);"">
+											<span>1:1 문의</span>
+										</button>
+									</div>
 									
 									<!-- 리뷰사용가능, 리뷰등록전일때 -->
 									<th:block th:if="${ordDtl.reviewableYn} == 'Y' and ${ordDtl.reviewSq} == null">
-										<div><button type="button" class="btn btn_primary btn_review_write"><span>리뷰 쓰기</span></button></div>
+										<div>
+											<button type="button" class="btn btn_primary btn_review_write" th:ordNo="${ordDtl.ordNo}" th:ordDtlNo="${ordDtl.ordDtlNo}" th:goodsCd="${ordDtl.GoodsCd}" onclick="fnCreateReview(this);">
+												<span>리뷰 쓰기</span>
+											</button>
+										</div>
 									</th:block>
 									<!-- //리뷰사용가능, 리뷰등록전일때 -->
 								</div>
@@ -196,7 +237,11 @@
 							<div class="goods_btn_wrap btn_group_flex">
 								<!-- 배송지등록전 -->
 								<th:block th:if="${ordDtl.recipBaseAddr == ''} and ${ordDtl.giftLimitDay} >= 0">
-									<div><button type="button" class="btn btn_primary btn_sms_send"><span>SMS 재발송</span></button></div>
+									<div>
+										<button type="button" class="btn btn_primary btn_sms_send">
+											<span>SMS 재발송</span>
+										</button>
+									</div>
 								</th:block>
 								<!-- //배송지등록전 -->