Aurora Modules

이전주문 목록

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

URL: /pages/my/previous-order-list.html?pageSize={pageSize}&pageNumber={pageNumber}&startYmd={startYmd}

모듈명: previous-orders원본소스

이전주문 목록

속성

속성명	타입	기본값	설명
default-page-size	number	20	(필수) 한 페이지당 노출 수
page-size page-size:query	number string	20 pageSize	(필수) `query string` 중 `pageSize` 값 한 페이지당 노출 수
page-number page-number:query	number string	1 pageNumber	(필수) `query string` 중 `pageNumber` 값 페이지 번호
start-ymd:query	string	YYYY-MM-DD	검색 시작일 (기본 값은 오늘을 기준으로 7일 전으로 설정)
pair-key	string	PREVIOUS_ORDER_LIST_MORE_VIEW_BUTTON	`더보기` 기능 사용 시 목록과 연동하기 위한 페어 키. (`more-view-button`모듈 사용 시 동일한 `pair-key`를 추가해야 함.)
shopby-accumulable	-	-	이전주문 목록 값을 누적할지 여부 (속성 추가 시 `contents` 와 `previousOrders` 값이 누적 됨)
visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	`contents` 혹은 `previousOrders` 데이터 로딩 여부
totalCount	number	0	전체 주문수
pagination	Pagination	-	페이지네이션 (아래 타입 참조)
contents	Contents[]	[]	이전주문 검색API 응답 값 중 `contents` 와 동일 (아래 타입 참조)
previousOrders	PreviousOrder[]	[]	`contents` 를 주문 일자별로 그룹핑 `PreviousOrder 타입`의 배열 형태 (아래 타입 참조)

PreviousOrder 타입

속성명	타입	기본값	설명
orderDate	string	-	주문 일자 (YYYY-MM-DD)
totalCountPerOrderDate	number	0	주문 일자별 주문 수
ordersPerOrderDate	Contents[]	[]	주문 일자별 주문 목록 이전주문 검색API 응답 값 중 `contents` 와 동일

Contents 타입

속성명	타입	기본값	설명
orderNo	string	-	주문 번호
salePrice	number	0	상품 금액
purchasePrice	number	0	주문 금액
orderOptions	OrderOptions[]	[]	주문 옵션 리스트 (아래 타입 참조)

OrderOptions 타입

속성명	타입	기본값	설명
orderYmdt	string	-	주문일시
productName	string	-	상품명

Pagination 타입

속성명	타입	기본값	설명
firstPage	string	-	첫번째 페이지
lastPage	string	-	마지막 페이지
prevPage	string	-	이전 페이지
nextPage	string	-	다음 페이지
pages	Page[]	[]	페이지 리스트
totalPages	number	0	페이지 총 개수

모듈명: previous-orders-total-count원본소스

이전주문 목록의 총 수

사용 가능 변수

변수명	타입	기본값	설명
totalCount	number	0	이전주문 총 수

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page previous-order-list" shopby-helper-key="previous-order-list-helper-key">
    <div class="my-page-box">
        <div class="right-box">
            <div class="right-box__container">
                <p class="right-box__head">
                    <span class="right-box__title">이전 주문목록</span>
                </p>

                <previous-orders-total-count>
                    <div class="l-title l-title__align-end right-box__no-end-line">
                        <span class="total-count total-count--md" slot="totalCount">
                            총 
                            <em class="highlight">{{totalCount}}</em>
                            건
                        </span>
                    </div>
                </previous-orders-total-count>

                <!-- 테이블 영역 -->
                <previous-orders
                    default-page-size="20"
                    page-size:query="pageSize"
                    page-number:query="pageNumber"
                    start-ymd:query="startYmd"
                    end-ymd:query="endYmd"
                    date-type:query="dateType"
                >
                    <div>
                        <div class="right-box__table" slot="previousOrders">
                            <table class="l-table">
                                <colgroup>
                                    <!-- 주문일자(주문번호) -->
                                    <col width="20%" />
                                    <!-- 상품 정보 -->
                                    <col />
                                    <!-- 주문금액 -->
                                    <col width="12%" />
                                    <!-- 상품합계 -->
                                    <col width="12%" />
                                </colgroup>

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

                                <tbody>
                                    {{#if contents}} {{#each contents}}
                                    <tr class="previous-order">
                                        <td>
                                            <span class="order-date">{{formatUseByDate orderOptions.0.orderYmdt}}</span>
                                            <span class="order-number"><a href="/pages/my/previous-order-detail.html?orderNo={{orderNo}}">{{orderNo}}</a></span>
                                        </td>
                                        <td>
                                            <span class="product-name">
                                                {{orderOptions.0.productName}}{{#if orderOptions}}외 {{subtract orderOptions.length 1}}건{{/if}}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="currency">
                                                <em>{{convertToKoreanCurrency purchasePrice}}</em>
                                                원
                                            </span>
                                        </td>
                                        <td>
                                            <span class="currency">
                                                <em>{{convertToKoreanCurrency salePrice}}</em>
                                                원
                                            </span>
                                        </td>
                                    </tr>
                                    {{/each}} {{else}}
                                    <tr slot="isLoading">
                                        <td colspan="4">
                                            {{#if isLoading}}
                                            <div class="loader loader--lg loader--full">
                                                <span class="spinner"></span>
                                            </div>
                                            {{else}}
                                            <div class="notice notice--full">
                                                <span class="sprite-image notice--warning"></span>
                                                <em>이전 주문 내역이 없습니다.</em>
                                            </div>
                                            {{/if}}
                                        </td>
                                    </tr>
                                    {{/if}}
                                </tbody>
                            </table>
                        </div>

                        <!-- 페이지네이션 -->
                        {{#if contents}}
                        <div class="pagination" slot="pagination">
                            <a href="?{{pagination.firstPage}}">
                                <button class="sprite-image pagination__btn pagination__btn--double-lt"></button>
                            </a>
                            <a href="?{{pagination.prevPage}}">
                                <button class="sprite-image pagination__btn pagination__btn--lt"></button>
                            </a>
                            {{#each pagination.pages}}
                            <a class="pagination__link {{#if isCurrentPage}}is-current{{/if}}" href="?{{param}}">{{page}}</a>
                            {{/each}}
                            <a href="?{{pagination.nextPage}}">
                                <button class="sprite-image pagination__btn pagination__btn--rt"></button>
                            </a>
                            <a href="?{{pagination.lastPage}}">
                                <button class="sprite-image pagination__btn pagination__btn--double-rt"></button>
                            </a>
                        </div>
                        {{/if}}
                        <!-- 페이지네이션 -->
                    </div>
                </previous-orders>
                <!-- 테이블 영역 -->
            </div>
        </div>
    </div>
</main>

<main class="l-content">
    <div class="previous-order-list">
        <!-- 이전 주문 목록 -->
        <previous-orders
            pair-key="PREVIOUS_ORDER_LIST_MORE_VIEW_BUTTON"
            default-page-size="20"
            page-size:query="pageSize"
            page-number:query="pageNumber"
            start-ymd:query="startYmd"
            shopby-accumulable
        >
            <div class="previous-order-list__items">
                <div slot="previousOrders">
                    {{#if contents}}
                    <ul>
                        {{#each contents}}
                        <li class="previous-order-list__item l-panel">
                            <a class="l-title l-title--sm" href="/pages/my/previous-order-detail.html?orderNo={{orderNo}}">
                                <p>
                                    <span><em>{{formatUseByDate orderOptions.0.orderYmdt}}</em></span>
                                    <span class="previous-order-list__order-no">{{orderNo}}</span>
                                </p>
                            </a>
                            <span class="previous-order-list__info">
                                <span class="previous-order-list__product-name">
                                    {{orderOptions.0.productName}} {{#if orderOptions}}외 {{subtract orderOptions.length 1}}건{{/if}}
                                </span>
                                <span class="previous-order-list__price">
                                    <span>
                                        주문금액
                                        <em>{{convertToKoreanCurrency purchasePrice}}</em>
                                        원
                                    </span>
                                    <span>
                                        상품합계
                                        <em>{{convertToKoreanCurrency salePrice}}</em>
                                        원
                                    </span>
                                </span>
                            </span>
                        </li>
                        {{/each}}
                    </ul>
                    {{else}} {{#if isLoading}}
                    <div class="loader loader--lg loader--full">
                        <span class="spinner"></span>
                    </div>
                    {{else}}
                    <div class="notice notice--full">
                        <span class="sprite-image notice--warning"></span>
                        <em>이전 주문 내역이 없습니다.</em>
                    </div>
                    {{/if}} {{/if}}
                </div>
            </div>
        </previous-orders>
        <!-- 이전 주문 목록 -->
    </div>
</main>

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