Aurora Modules

이전주문 상세

이전주문 상세 페이지에서 노출되는 이전주문 상세 모듈입니다.

URL: /pages/my/previous-order-detail.html?orderNo={orderNo}

모듈명: product-information원본소스

상품 정보

속성

속성명	타입	기본값	설명
order-no:query	string	-	(필수) `query string` 중 `orderNo` 값 주문 번호

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	`products` 로딩 여부
orderNo	string	-	주문 번호
orderYmdt	string	-	주문일자 (YYYY-DD-MM HH:MM:SS)
products	Products[]	[]	이전주문 상세조회API 응답 값 중 `orderProduct`와 동일 (주문상품 정보) (아래 타입 참조)

Products 타입

속성명	타입	기본값	설명
partnerName	string	-	파트너사
invoiceNo	string	-	송장번호
productName	string	-	상품명
optionName	string	-	옵션명
optionValue	string	-	옵션값
orderStatusType	string	-	주문상태
deliveryCompanyType	string	-	택배사
optionNo	number	-	옵션 번호
orderCnt	number	0	수량
salePrice	number	0	상품합계
deliveryAmt	number	0	기본 배송비
purchasePrice	number	0	주문금액
remoteDeliveryAmt	number	0	지역별 배송비
purchaserInputs	PurchaserInputs[]	[]	사용자 입력형 옵션 (아래 타입 참조)

PurchaserInputs 타입

속성명	타입	기본값	설명
inputValue	string	-	값
inputLabel	string	-	이름
required	string	-	필수 여부
inputNo	number	-	번호

모듈명: orderer-information원본소스

주문자 정보

사용 가능 변수

변수명	타입	기본값	설명
orderer	Orderer	-	이전주문 상세조회API 응답 값 중 `orderer`와 동일 (아래 타입 참조)

Orderer 타입

속성명	타입	기본값	설명
ordererEmail	string	-	이메일
ordererMobileNumber	string	-	휴대폰번호
ordererPhoneNumber	string	-	전화번호
orderMemo	string	-	주문메모
ordererName	string	-	주문자명
memberId	string	-	아이디
memberGradeNames	string[]	[]	회원등급

모듈명: shipping-information원본소스

배송지 정보

사용 가능 변수

변수명	타입	기본값	설명
receiver	Receiver[]	[]	이전주문 상세조회 API 응답 값 중 `receiver`와 동일 (수령자 정보) (아래 타입 참조)

Receiver 타입

속성명	타입	기본값	설명
deliveryInfo	string	-	배송지 정보
receiverName	string	-	수령자명
optionValue	string	-	옵션값
customsIdNumber	string	-	개인통관번호
receiverPhoneNumber	string	-	전화번호
deliveryCompanyType	string	-	택배사
receiverZipCd	string	-	우편번호
receiverDetailAddress	string	-	배송지 상세 주소
deliveryMemo	string	-	배송메모
productName	string	-	상품명
receiverAddress	string	-	배송지 주소
receiverMobileNumber	string	-	휴대폰번호
optionName	string	-	옵션명
invoiceNo	string	-	송장번호
purchaserInputs	PurchaserInputs[]	[]	사용자 입력형 옵션 (아래 타입 참조)

PurchaserInputs 타입

속성명	타입	기본값	설명
inputValue	string	-	값
inputLabel	string	-	이름
required	string	-	필수 여부
inputNo	number	-	번호

모듈명: payment-information원본소스

결제 정보

사용 가능 변수

변수명	타입	기본값	설명
payment	Payment	-	이전주문 상세조회API 응답 값 중 `lastPayment`와 동일 (아래 타입 참조)
paymentMethod	PaymentMethod	-	이전주문 상세조회API 응답 값 중 `paymentMethod`와 동일 (아래 타입 참조)

PaymentMethod 타입

속성명	타입	기본값	설명
payType	string	-	결제방법
payYmdt	string	-	결제일시
orderYmdt	string	-	주문일시
payTypeLabel	string	-	결제방법 라벨
payDetail	PayDetail	-	결제 상세 (아래 타입 참조)

Payment 타입

속성명	타입	설명
payAmt	number	결제금액
subPayAmt	number	적립금사용
mainPayAmt	number	실 결제금액
discountAmt	number	할인혜택
deliveryAmt	number	배송비
standardAmt	number	판매금액
remoteDeliveryAmt	number	지역별배송비

PayDetail 타입

속성명	타입	기본값	설명
bank	string	-	은행명
account	string	-	계좌 번호
depositor	string	-	입금자
accountHolder	string	-	예금주
discountAmt	number	0	할인 금액

모듈명: claim-information원본소스

클레임 정보

사용 가능 변수

변수명	타입	기본값	설명
refund	Refund	-	이전주문 상세조회API 응답 값 중 `refund`와 동일 (아래 타입 참조)

Refund 타입

속성명	타입	기본값	설명
refundType	string	-	환불방법
refundTypeLabel	string	-	환불방법 라벨
refundCompleteYmdt	string	-	환불처리일시
refundAmt	number	0	환불금액
refundBankAccount	RefundBankAccount	-	환불 계좌 (아래 타입 참조)

RefundBankAccount 타입

속성명	타입	기본값	설명
bank	string	-	은행명
account	string	-	계좌 번호
depositorName	string	-	계좌 예금주

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page previous-order-detail" shopby-helper-key="previous-order-detail">
    <div class="my-page-box">
        <div class="right-box">
            <div class="right-box__container">
                <details class="accordion" open>
                    <summary class="accordion__title right-box__head">
                        <span class="right-box__title">이전주문/배송 상세</span>
                    </summary>

                    <!-- 상품 영역 -->
                    <product-information order-no:query="orderNo">
                        <section>
                            <div class="right-box__table" slot="isLoading">
                                <table class="l-table">
                                    <colgroup>
                                        <!-- 주문일자(주문번호) -->
                                        <col width="14%" />

                                        <!-- 상품 정보 -->
                                        <col />

                                        <!-- 수량 -->
                                        <col width="10%" />

                                        <!-- 상품합계 -->
                                        <col width="10%" />

                                        <!-- 주문금액 -->
                                        <col width="10%" />

                                        <!-- 진행상태 -->
                                        <col width="12%" />
                                    </colgroup>

                                    <thead>
                                        <tr>
                                            <th>주문일자(주문번호)</th>
                                            <th>상품정보</th>
                                            <th>수량</th>
                                            <th>상품합계</th>
                                            <th>주문금액</th>
                                            <th>진행상태</th>
                                        </tr>
                                    </thead>

                                    <tbody slot="products">
                                        {{#each products}}
                                        <tr>
                                            {{#if @first}}
                                            <td rowspan="{{../products.length}}">
                                                <span class="order-date font-montserrat bold">{{formatUseByDate ../orderYmdt}}</span>
                                                <span class="order-number font-montserrat">{{../orderNo}}</span>
                                            </td>
                                            {{/if}}

                                            <!-- 상품정보 -->
                                            <td>
                                                <span class="product-name">{{{productName}}}</span>
                                            </td>
                                            <!-- 상품정보 -->

                                            <!-- 수량 -->
                                            <td>
                                                <span><em class="font-montserrat">{{convertToKoreanCurrency orderCnt}}</em></span>
                                            </td>
                                            <!-- 수량 -->

                                            <!-- 상품금액 -->
                                            <td>
                                                <span class="currency">
                                                    <em class="font-montserrat">{{convertToKoreanCurrency salePrice}}</em>
                                                    원
                                                </span>
                                            </td>
                                            <!-- 상품금액 -->

                                            <!-- 주문금액 -->
                                            {{#if @first}}
                                            <td rowspan="{{../products.length}}">
                                                <span class="currency">
                                                    <em class="font-montserrat">{{convertToKoreanCurrency purchasePrice}}</em>
                                                    원
                                                </span>
                                            </td>
                                            {{/if}}
                                            <!-- 주문금액 -->

                                            <!-- 진행상태 -->
                                            <td><span class="order-status">{{orderStatusLabel orderStatusType}}</span></td>
                                            <!-- 진행상태 -->
                                        </tr>
                                        {{/each}} {{#if isLoading}}
                                        <tr>
                                            <td colspan="6">
                                                <div class="loader loader--lg">
                                                    <span class="spinner"></span>
                                                </div>
                                            </td>
                                        </tr>
                                        {{/if}}
                                    </tbody>
                                </table>
                            </div>
                        </section>
                    </product-information>
                    <!-- 상품 영역 -->
                </details>

                <!-- 주문자 정보 -->
                <orderer-information>
                    <section>
                        <details class="accordion" open>
                            <summary class="accordion__title right-box__head">
                                <span class="right-box__title">주문자 정보</span>
                            </summary>

                            <dl slot="orderer">
                                {{#with orderer}}
                                <dt>주문자명</dt>
                                <dd>{{ordererName}}</dd>
                                <dt>이메일 주소</dt>
                                <dd><span class="font-montserrat">{{safeString ordererEmail true}}</span></dd>
                                <dt>휴대폰 번호</dt>
                                <dd><span class="font-montserrat">{{safeString ordererMobileNumber true}}</span></dd>
                                <dt>전화번호</dt>
                                <dd><span class="font-montserrat">{{safeString ordererPhoneNumber true}}</span></dd>
                                <dt>주문 메모</dt>
                                <dd>{{safeString orderMemo true}}</dd>
                                {{/with}}
                            </dl>
                        </details>
                    </section>
                </orderer-information>
                <!-- 주문자 정보 -->

                <!-- 배송지 정보 -->
                <shipping-information>
                    <section>
                        <details class="accordion" open>
                            <summary class="accordion__title right-box__head">
                                <span class="right-box__title">배송지 정보</span>
                            </summary>

                            {{#each receiver}}
                            <dl>
                                <dt>받으시는 분</dt>
                                <dd>{{safeString receiverName true}}</dd>
                                <dt>주소</dt>
                                <dd class="font-montserrat">
                                    {{#empty receiverZipCd receiverAddress receiverDetailAddress}} - {{else}} {{#if receiverZipCd}}
                                    <span class="font-montserrat">({{receiverZipCd}})</span>
                                     {{/if}}{{receiverAddress}} {{receiverDetailAddress}} {{/empty}}
                                </dd>
                                <dt>휴대폰 번호</dt>
                                <dd><span class="font-montserrat">{{safeString receiverMobileNumber true}}</span></dd>
                                <dt>전화번호</dt>
                                <dd><span class="font-montserrat">{{safeString receiverPhoneNumber true}}</span></dd>
                                <dt>배송 메모</dt>
                                <dd>{{safeString deliveryMemo true}}</dd>
                            </dl>
                            {{/each}}
                        </details>
                    </section>
                </shipping-information>
                <!-- 배송지 정보 -->

                <!-- 결제 정보 -->
                <payment-information>
                    <section>
                        <details class="accordion" open>
                            <summary class="accordion__title right-box__head">
                                <span class="right-box__title">결제 정보</span>
                            </summary>

                            <dl>
                                <dt>결제 수단</dt>
                                <dd>{{safeString paymentMethod.payTypeLabel true}}</dd>
                                <dt>상품금액 합계</dt>
                                <dd>
                                    <span class="currency">
                                        <em class="font-montserrat bold">{{convertToKoreanCurrency payment.standardAmt }}</em>
                                        원
                                    </span>
                                </dd>
                                <dt>배송비 합계</dt>
                                <dd>
                                    <span class="currency">
                                        <em class="font-montserrat bold">+  {{convertToKoreanCurrency payment.deliveryAmt }}</em>
                                        원
                                    </span>
                                </dd>
                                <dt>할인금액 합계</dt>
                                <dd>
                                    <span class="currency">
                                        <em class="font-montserrat bold">-  {{convertToKoreanCurrency payment.discountAmt }}</em>
                                        원
                                    </span>
                                </dd>
                                <dt>적립금 사용</dt>
                                <dd>
                                    <span class="currency">
                                        <em class="font-montserrat bold">-  {{convertToKoreanCurrency payment.subPayAmt }}</em>
                                        원
                                    </span>
                                </dd>
                                <dt class="final-price">최종 결제 금액</dt>
                                <dd class="final-price">
                                    <span class="currency">
                                        <em class="font-montserrat bold highlight">{{convertToKoreanCurrency payment.payAmt }}</em>
                                        원
                                    </span>
                                </dd>
                            </dl>
                        </details>
                    </section>
                </payment-information>
                <!-- 결제 정보 -->

                <!-- 환불정보 -->
                <claim-information>
                    <section>
                        <div slot="refund">
                            {{#with refund}}
                            <details class="accordion" open>
                                <summary class="accordion__title right-box__head">
                                    <span class="right-box__title">환불정보</span>
                                </summary>

                                <dl slot="refund">
                                    <dt>환불 금액</dt>
                                    <dd>
                                        <span class="currency">
                                            <em class="font-montserrat">{{convertToKoreanCurrency refundAmt}}</em>
                                            원
                                        </span>
                                    </dd>
                                    <dt>환불 수단</dt>
                                    <dd>
                                        <span>
                                            {{refundTypeLabel}} {{#with refundBankAccount
                                            }}- {{bank}} / {{account}} / {{depositorName}}{{/with}}
                                        </span>
                                    </dd>
                                </dl>
                            </details>
                            {{/with}}
                        </div>
                    </section>
                </claim-information>
                <!-- 환불정보 -->
            </div>
        </div>
    </div>
</main>

<main class="l-content previous-order-detail" shopby-helper-key="previous-order-detail">
    <!-- 상품 영역 -->
    <product-information order-no:query="orderNo">
        <section class="previous-order-detail__product-info">
            <p class="l-title l-title--sm">
                <span slot="orderYmdt"><em class="font-montserrat">{{formatUseByDate orderYmdt}}</em></span>
                <span class="previous-order-detail__order-no font-montserrat" slot="orderNo">{{orderNo}}</span>
            </p>

            <ul class="previous-order-detail__products" slot="products">
                {{#if isLoading}}
                <li class="loader loader--lg">
                    <span class="spinner"></span>
                </li>
                {{/if}} {{#each products}}
                <li class="l-panel previous-order-detail__product">
                    <p class="previous-order-detail__product-name">{{{productName}}}</p>

                    <span class="previous-order-detail__price">
                        <span>
                            수량
                            <em class="font-montserrat">{{convertToKoreanCurrency orderCnt}}</em>
                        </span>
                        <span>
                            상품합계
                            <em class="font-montserrat">{{convertToKoreanCurrency salePrice}}</em>
                            원
                        </span>
                        <span>
                            주문금액
                            <em class="font-montserrat">{{convertToKoreanCurrency purchasePrice}}</em>
                            원
                        </span>
                    </span>

                    <span class="highlight">{{orderStatusLabel orderStatusType}}</span>
                </li>
                {{/each}}
            </ul>
        </section>
    </product-information>
    <!-- 상품 영역 -->

    <!-- 주문자 정보 -->
    <orderer-information>
        <section>
            <details class="accordion" open>
                <summary class="accordion__title">주문자 정보</summary>

                <dl class="accordion__contents" slot="orderer">
                    {{#with orderer}}
                    <dt>주문자명</dt>
                    <dd>{{ordererName}}</dd>
                    <dt>이메일</dt>
                    <dd class="font-montserrat">{{safeString ordererEmail true}}</dd>
                    <dt>휴대폰 번호</dt>
                    <dd class="font-montserrat">{{safeString ordererMobileNumber true}}</dd>
                    <dt>전화번호</dt>
                    <dd class="font-montserrat">{{safeString ordererPhoneNumber true}}</dd>
                    <dt>주문 메모</dt>
                    <dd>{{safeString orderMemo true}}</dd>
                    {{/with}}
                </dl>
            </details>
        </section>
    </orderer-information>
    <!-- 주문자 정보 -->

    <!-- 배송지 -->
    <shipping-information>
        <section>
            <details class="accordion" open>
                <summary class="accordion__title">배송지</summary>

                {{#each receiver}}
                <dl class="accordion__contents">
                    <dt>받는 사람</dt>
                    <dd>{{safeString receiverName true}}</dd>
                    <dt>주소</dt>
                    <dd>
                        {{#empty receiverZipCd receiverAddress receiverDetailAddress}} - {{else}} {{#if receiverZipCd}}
                        <span class="font-montserrat">({{receiverZipCd}})</span>
                         {{/if}}{{receiverAddress}} {{receiverDetailAddress}} {{/empty}}
                    </dd>
                    <dt>휴대폰 번호</dt>
                    <dd class="font-montserrat">{{safeString receiverMobileNumber true}}</dd>
                    <dt>전화번호</dt>
                    <dd class="font-montserrat">{{safeString receiverPhoneNumber true}}</dd>
                    <dt>배송 메모</dt>
                    <dd>{{safeString deliveryMemo true}}</dd>
                </dl>
                {{/each}}
            </details>
        </section>
    </shipping-information>
    <!-- 배송지 -->

    <!-- 결제정보 -->
    <payment-information>
        <section class="previous-order-detail__payment">
            <details class="accordion" open>
                <summary class="accordion__title">결제정보</summary>
                <dl class="accordion__contents">
                    <dt>결제 수단</dt>
                    <dd>{{safeString paymentMethod.payTypeLabel true}}</dd>

                    <dt>상품 금액 합계</dt>
                    <dd>
                        <em class="font-montserrat">{{convertToKoreanCurrency payment.standardAmt}}</em>
                        원
                    </dd>

                    <dt>배송비 합계</dt>
                    <dd>
                        <em class="font-montserrat">+  {{convertToKoreanCurrency payment.deliveryAmt}}</em>
                        원
                    </dd>

                    <dt>할인금액 합계</dt>
                    <dd>
                        <em class="font-montserrat">-  {{convertToKoreanCurrency payment.discountAmt}}</em>
                        원
                    </dd>

                    <dt>적립금 사용</dt>
                    <dd>
                        <em class="font-montserrat">-  {{convertToKoreanCurrency payment.subPayAmt}}</em>
                        원
                    </dd>

                    <dt>최종 결제 금액</dt>
                    <dd>
                        <em class="highlight font-montserrat">{{convertToKoreanCurrency payment.payAmt}}</em>
                        원
                    </dd>
                </dl>
            </details>
        </section>
    </payment-information>
    <!-- 결제정보 -->

    <!-- 환불 정보 -->
    <claim-information>
        <section>
            <div slot="refund">
                {{#with refund}}
                <details class="accordion" open>
                    <summary class="accordion__title">환불 정보</summary>
                    <dl class="accordion__contents">
                        <dt>환불 금액</dt>
                        <dd class="font-montserrat">{{convertToKoreanCurrency refundAmt}}원</dd>
                        <dt>환불 수단</dt>
                        <dd>{{refundTypeLabel}} {{#with refundBankAccount}}- {{bank}} / {{account}} / {{depositorName}}{{/with}}</dd>
                    </dl>
                </details>
                {{/with}}
            </div>
        </section>
    </claim-information>
    <!-- 환불 정보 -->
</main>

/* 여기에 스타일 코드를 작성해주세요. */