Aurora Modules

주문 목록

주문목록/배송조회, 취소/반품/교환 내역 페이지에서 노출되는 주문 목록 모듈입니다.

URL: /pages/my/claim-list.html?startYmd={startYmd}&pageSize={pageSize}&pageNumber={pageNumber}&claimType={claimType}&dateType={dateType}

관련 API : 🔗 주문 리스트 조회하기 API

모듈명: claim-tabs원본소스

취소/반품/교환 탭 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-tab-value	string	-	탭의 값

사용 가능 변수

변수명	타입	기본값	설명
currentTab	string	ALL	현재 클릭되어 있는 탭의 값

모듈명: my-orders원본소스

주문 목록 모듈입니다.

속성

속성명	타입	기본값	설명
start-ymd:query	string	-	`query string` 중 `startYmd` 기간조회 시작일
end-ymd:query	string	-	`query string` 중 `endYmd` 조회 종료일
page-size page-size:query	number string	20 pageSize	`query string` 중 `pageSize` 페이지 사이즈
page-number page-number:query	number string	1 pageNumber	`query string` 중 `pageNumber` 페이지 번호
claim-type:query	string	-	`query string` 중 `claimType` 클레임 타입
date-type:query	string	-	`query string` 중 `dateType` 데이트 타입 (오늘:td, 7일:7d, 15일:15d, 1개월:1md, 3개월:3md, 1년:1y)
default-page-size	string	-	리스트의 기본 page size
pair-key	string	-	더보기에서 사용하는 key
shopby-delivery-uri	string	-	배송 uri
shopby-delivery-type	string	-	배송 타입
shopby-order-option-count	string	-	주문 상품 옵션의 수
shopby-order-next-action-type	string	-	해당 주문건에 대해 다음에 할 수 있는 작업타입
shopby-claim-no	string	-	클레임 번호
shopby-modal-title-prefix	string	-	클레임상태 앞에서 2글자 클레임 상세 모달 상단 제목에 사용
shopby-order-option-no	string	-	주문옵션번호
shopby-pay-type	string	-	결제타입
shopby-order-status	string	-	주문상태
shopby-claim-nos	string	-	클레임 번호를 나열한 값. 클레임 철회시 유효성 확인할 때 사용
shopby-order-no	string	-	주문번호
shopby-product-no	string	-	상품번호
shopby-deliverable	Y \| N	N	배송여부

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	API 응답값을 받기 전에 true
currentTab	string	ALL	shopby-tab-value 에 넣은 값
totalCount	number	0	조회 결과 총 주문 수
pagination	Pagination	-	페이지네이션 (아래 타입 참조)
myOrders	MyOrders[]	[]	주문내역
myOrdersGroupByYmd	MyOrdersGroupByYmd[]	[]	주문날짜로 그룹핑한 주문리스트 (아래 타입 참조)
visiblePagesCount	number	5	페이지네이션 표시 페이지 수

MyOrdersGroupByYmd 타입

속성명	타입	기본값	설명
orderYmd	string	-	주문일자
ordersForDay	MyOrders[]	[]	주문내역 (아래 타입 참조)

Pagination 타입

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

Page 타입

속성명	타입	기본값	설명
isCurrentPage	boolean	false	현재 페이지 여부
page	number	1	페이지 번호
param	string	-	파라미터

MyOrders 타입

속성명	타입	기본값	설명
payType	string	-	결제수단
orderYmdt	string	-	주문일자
nextActions	NextActions	-	다음에 할 수 있는 작업
orderOptions	OrderOptions[]	-	주문 상품 옵션

OrderOptions 타입

속성명	타입	기본값	설명
deliverable	boolean	false	배송여부
orderNo	string	-	주문번호
productNo	string	-	상품번호
imageUrl	string	-	상품 이미지 URL
productName	string	-	상품명
optionName	string	-	옵션명
optionValue	string	-	옵션값
orderStatusType	string	-	주문상태
claimStatusTypeLabel	string	-	클레임상태
orderCnt	number	0	주문수량
claimNo	number	-	클레임 번호
orderOptionNo	number	-	주문옵션번호
price	Price	-	가격정보 (아래 타입 참조)
delivery	Delivery	-	배송정보
nextActions	NextActions	-	다음에 할 수 있는 작업
inputs	Inputs[]	[]	구매자 작성형 옵션 (아래 타입 참조)

Inputs 타입

속성명	타입	기본값	설명
inputLabel	string	-	구매자 작성형 입력 이름
inputValue	string	-	구매자 작성형 입력 값

Price 타입

속성명	타입	기본값	설명
buyAmt	number	0	구매가(즉시할인 + 추가할인 적용)

NextActions 타입

속성명	타입	기본값	설명
uri	string	-	uri
actionGroupType	string	-	다음에 할 수 있는 작업 그룹
nextActionType	string	-	작업타입

Delivery 타입

속성명	타입	기본값	설명
deliveryType	string	-	배송타입

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page claim-list">
    <div class="my-page-box">
        <div class="right-box">
            <div class="right-box__container">
                <claim-tabs>
                    <div>
                        <ul class="tab" slot="tabs">
                            <li class="tab__btn {{#ifEq currentTab 'ALL'}}is-active{{/ifEq}}">
                                <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="ALL">전체</div>
                            </li>
                            <li class="tab__btn {{#ifEq currentTab 'CANCEL'}}is-active{{/ifEq}}">
                                <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="CANCEL">취소</div>
                            </li>
                            <li class="tab__btn {{#ifEq currentTab 'EXCHANGE'}}is-active{{/ifEq}}">
                                <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="EXCHANGE">교환</div>
                            </li>
                            <li class="tab__btn {{#ifEq currentTab 'RETURN'}}is-active{{/ifEq}}">
                                <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="RETURN">반품</div>
                            </li>
                        </ul>
                    </div>
                </claim-tabs>

                <!-- 기간 조회 -->
                <date-search start-ymd:query="startYmd" end-ymd:query="endYmd" date-type:query="dateType" shopby-default-type="7d">
                    <div class="date-selector">
                        <div class="date-selector__button_box" shopby-date-selector="shopby-date-selector" shopby-on:click="CLICK_DATE">
                            <button class="btn date-selector__select-btn" value="td">오늘</button>
                            <button class="btn date-selector__select-btn" value="7d">7일</button>
                            <button class="btn date-selector__select-btn" value="15d">15일</button>
                            <button class="btn date-selector__select-btn" value="1m">1개월</button>
                            <button class="btn date-selector__select-btn" value="3m">3개월</button>
                            <button class="btn date-selector__select-btn" value="1y">1년</button>
                        </div>
                        <div class="date-selector__date-picker-wrap">
                            <div class="date-selector__date-picker tui-datepicker-input tui-datetime-input tui-has-focus">
                                <input type="text" name="startDate" readonly="readonly" aria-label="Date-Time" />
                                <span class="tui-ico-date"></span>
                                <div class="start-date-picker"></div>
                            </div>
                            ~
                            <div class="date-selector__date-picker tui-datepicker-input tui-datetime-input tui-has-focus">
                                <input type="text" name="endDate" readonly="readonly" aria-label="Date-Time" />
                                <span class="tui-ico-date"></span>
                                <div class="end-date-picker"></div>
                            </div>
                            <button type="button" class="btn btn--fill-dark btn--sm date-picker__search" shopby-action="SEARCH_ORDERS">조회</button>
                        </div>
                    </div>
                </date-search>
                <!-- 취소/반품/교환 내역 -->
                <my-orders
                    start-ymd:query="startYmd"
                    end-ymd:query="endYmd"
                    default-page-size="20"
                    page-size:query="pageSize"
                    page-number:query="pageNumber"
                    date-type:query="dateType"
                    claim-type:query="claimType"
                >
                    <div>
                        <div slot="myOrders">
                            <div class="l-title l-title__my-total-count">
                                총 
                                <span class="highlight" slot="totalCount">{{totalCount}}</span>
                                건
                            </div>
                            <table class="l-table">
                                <colgroup>
                                    <col style="width: 16%" />
                                    <col />
                                    <col style="width: 8%" />
                                    <col style="width: 13%" />
                                    <col style="width: 11%" />
                                    <col style="width: 11%" />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>주문일자(주문번호)</th>
                                        <th>상품정보</th>
                                        <th>수량</th>
                                        <th>상품 합계 금액</th>
                                        <th>진행상태</th>
                                        <th>접수</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each myOrders}} {{#each orderOptions}}
                                    <tr shopby-order-option-count="{{../orderOptions.length}}">
                                        <!-- 주문일자(주문번호) -->
                                        <!-- {{#if @first}} -->
                                        <td rowspan="{{../orderOptions.length}}">
                                            <em class="font-montserrat claim-list__orderYmt">{{substring ../orderYmdt 0 10}}</em>
                                            <a class="font-black font-montserrat claim-list__order-no" href="./order-detail.html?orderNo={{orderNo}}">
                                                {{orderNo}}
                                            </a>
                                        </td>
                                        <!-- {{/if}} -->
                                        <!-- 상품정보 -->
                                        <td>
                                            <div class="product-option-info">
                                                <div class="thumb-item__media">
                                                    <a href="/pages/product/product-detail.html?productNo={{productNo}}">
                                                        <span class="thumb-item__img">{{img imageUrl 100 100 productName 'middle' ''}}</span>
                                                    </a>
                                                </div>
                                                <div class="product-option-info__name">
                                                    <em>
                                                        <a href="/pages/product/product-detail.html?productNo={{productNo}}" class="font-black">
                                                            {{safeString productName}}
                                                        </a>
                                                    </em>
                                                    <div class="product-option-info__option">
                                                        <div>{{#ifNe optionType 'PRODUCT_ONLY'}} {{displayNormalOption optionName optionValue}} {{/ifNe}}</div>
                                                        {{#each inputs}}
                                                        <div>{{safeString inputLabel}} : {{safeString inputValue}}</div>
                                                        {{/each}}
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <!-- 주문수량 -->
                                        <td>
                                            <em class="font-montserrat">{{orderCnt}}</em>
                                            <span class="currency">개</span>
                                        </td>
                                        <!-- 상품 합계 금액-->
                                        <td>
                                            <em class="font-montserrat">{{convertToKoreanCurrency price.buyAmt}}</em>
                                            <span class="currency">원</span>
                                        </td>
                                        <!-- 진행상태 -->
                                        <td>
                                            <div class="next-action-btns" shopby-order-option-no="{{orderOptionNo}}">
                                                {{#if claimStatusTypeLabel}}
                                                <button
                                                    class="link"
                                                    shopby-claim-no="{{claimNo}}"
                                                    shopby-modal-title-prefix="{{substring claimStatusTypeLabel 2}}"
                                                    shopby-action="VIEW_CLAIM_DETAIL"
                                                >
                                                    {{claimStatusTypeLabel}}
                                                </button>
                                                {{/if}}
                                            </div>
                                        </td>
                                        <!-- 접수 -->
                                        <td>
                                            <div
                                                class="next-action-btns"
                                                shopby-order-option-no="{{orderOptionNo}}"
                                                shopby-claim-nos="{{arrayToString ../orderOptions 'claimNo'}}"
                                            >
                                                {{#each nextActions}} {{#ifEq nextActionType 'WITHDRAW_CANCEL'}}
                                                <button
                                                    type="button"
                                                    class="btn btn--line-gray btn--xs"
                                                    shopby-claim-no="{{../claimNo}}"
                                                    shopby-action="WITHDRAW_CANCEL"
                                                >
                                                    취소신청 철회
                                                </button>
                                                {{/ifEq}} {{#ifEq nextActionType 'WITHDRAW_EXCHANGE'}}
                                                <button
                                                    type="button"
                                                    class="btn btn--line-gray btn--xs"
                                                    shopby-claim-no="{{../claimNo}}"
                                                    shopby-action="WITHDRAW_EXCHANGE"
                                                >
                                                    교환신청 철회
                                                </button>
                                                {{/ifEq}} {{#ifEq nextActionType 'WITHDRAW_RETURN'}}
                                                <button
                                                    type="button"
                                                    class="btn btn--line-gray btn--xs"
                                                    shopby-claim-no="{{../claimNo}}"
                                                    shopby-action="WITHDRAW_RETURN"
                                                >
                                                    반품신청 철회
                                                </button>
                                                {{/ifEq}} {{#ifEq ../nextActions.length 1}} {{#ifEq actionGroupType 'NORMAL'}} - {{/ifEq}} {{/ifEq}} {{/each}}
                                            </div>
                                        </td>
                                    </tr>
                                    {{/each}} {{/each}}
                                </tbody>
                            </table>
                            <div slot="totalCount">
                                {{#ifEq totalCount 0 }}
                                <div slot="isLoading">
                                    {{#if isLoading}}
                                    <div class="loader loader--lg loader--full">
                                        <span class="spinner"></span>
                                    </div>
                                    {{else}}
                                    <div class="notice empty-list">
                                        <span class="sprite-image notice--warning"></span>
                                        <em class="notice__description--center">주문 내역이 없습니다.</em>
                                    </div>
                                    {{/if}}
                                </div>
                                {{/ifEq}}
                            </div>
                        </div>
                    </div>
                </my-orders>
            </div>
        </div>
    </div>
</main>

<main class="claim-list">
    <!-- 취소/반품/교환 탭 -->
    <claim-tabs>
        <div>
            <ul class="tab" slot="tabs">
                <li class="tab__btn {{#ifEq currentTab 'ALL'}}is-active{{/ifEq}}">
                    <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="ALL">전체</div>
                </li>
                <li class="tab__btn {{#ifEq currentTab 'CANCEL'}}is-active{{/ifEq}}">
                    <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="CANCEL">취소</div>
                </li>
                <li class="tab__btn {{#ifEq currentTab 'EXCHANGE'}}is-active{{/ifEq}}">
                    <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="EXCHANGE">교환</div>
                </li>
                <li class="tab__btn {{#ifEq currentTab 'RETURN'}}is-active{{/ifEq}}">
                    <div type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="RETURN">반품</div>
                </li>
            </ul>
        </div>
    </claim-tabs>

    <div class="l-content">
        <section class="claim-list__content">
            <!-- 기간 선택 -->
            <date-type-selector start-ymd:query="startYmd" date-type:query="dateType" shopby-default-type="7d">
                <div class="select select--sm">
                    <select shopby-on:change="CHANGE_DATE">
                        <option value="td">오늘</option>
                        <option value="7d">7일</option>
                        <option value="15d">15일</option>
                        <option value="1m">1개월</option>
                        <option value="3m">3개월</option>
                        <option value="1y">1년</option>
                    </select>
                </div>
            </date-type-selector>
            <!-- 취소/반품/교환 내역 -->
            <my-orders
                start-ymd:query="startYmd"
                pair-key="CLAIM_LIST_MORE_VIEW_BUTTON"
                default-page-size="20"
                page-size:query="pageSize"
                page-number:query="pageNumber"
                claim-type:query="claimType"
            >
                <div>
                    <div slot="myOrdersGroupByYmd">
                        {{#each myOrdersGroupByYmd}}
                        <div>
                            <div class="l-title">{{ orderYmd }} (총 {{ordersForDay.length}}건)</div>
                            {{#each ordersForDay}}
                            <div class="claim-list__group-by-order-no">
                                <div class="claim-list__identifier">
                                    <span>
                                        <time datetime="{{substring orderYmdt 0 10}}" class="bold">{{substring orderYmdt 0 10}}</time>
                                        <a class="claim-list__order-no" href="./order-detail.html?orderNo={{orderNo}}">{{orderNo}}</a>
                                    </span>
                                </div>
                                {{#each orderOptions}}
                                <article class="thumb-LIST" shopby-order-option-count="{{../orderOptions.length}}">
                                    <div class="product-option-info">
                                        <div class="product-option-info__status">
                                            <span class="highlight">{{claimStatusTypeLabel}}</span>
                                            {{#if claimStatusTypeLabel}}
                                            <a
                                                class="order-list__claim-detail"
                                                shopby-claim-no="{{claimNo}}"
                                                shopby-modal-title-prefix="{{substring claimStatusTypeLabel 2}}"
                                                shopby-action="VIEW_CLAIM_DETAIL"
                                            >
                                                상세 보기
                                            </a>
                                            {{/if}}
                                        </div>
                                        <div class="thumb-item product-option-info__detail">
                                            <div class="thumb-item__media">
                                                <a class="thumb-item__img-box" href="/pages/product/product-detail.html?productNo={{productNo}}">
                                                    <span class="thumb-item__img">{{img imageUrl 105 105 productName 'middle' ''}}</span>
                                                </a>
                                            </div>
                                            <div class="thumb-item__info">
                                                <p class="product-option-info__name">
                                                    <em>
                                                        <a href="/pages/product/product-detail.html?productNo={{productNo}}" class="font-black">
                                                            {{safeString productName}}
                                                        </a>
                                                    </em>
                                                </p>
                                                <div class="product-option-info__option">
                                                    <div>{{#ifNe optionType 'PRODUCT_ONLY'}} {{displayNormalOption optionName optionValue}} {{/ifNe}}</div>
                                                    {{#each inputs}}
                                                    <div>{{inputLabel}} : {{inputValue}}</div>
                                                    {{/each}}
                                                </div>
                                                <div>
                                                    <em>{{convertToKoreanCurrency price.buyAmt}}</em>
                                                    원 /
                                                    <em>{{orderCnt}}</em>
                                                    개
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="next-action-btns"
                                        shopby-order-option-no="{{orderOptionNo}}"
                                        shopby-claim-nos="{{arrayToString ../orderOptions 'claimNo'}}"
                                    >
                                        {{#each nextActions}} {{#ifEq nextActionType 'WITHDRAW_CANCEL'}}
                                        <button
                                            type="button"
                                            class="btn btn--line-gray btn--md"
                                            shopby-claim-no="{{../claimNo}}"
                                            shopby-action="WITHDRAW_CANCEL"
                                        >
                                            취소신청 철회
                                        </button>
                                        {{/ifEq}} {{#ifEq nextActionType 'WITHDRAW_EXCHANGE'}}
                                        <button
                                            type="button"
                                            class="btn btn--line-gray btn--md"
                                            shopby-claim-no="{{../claimNo}}"
                                            shopby-action="WITHDRAW_EXCHANGE"
                                        >
                                            교환신청 철회
                                        </button>
                                        {{/ifEq}} {{#ifEq nextActionType 'WITHDRAW_RETURN'}}
                                        <button
                                            type="button"
                                            class="btn btn--line-gray btn--md"
                                            shopby-claim-no="{{../claimNo}}"
                                            shopby-action="WITHDRAW_RETURN"
                                        >
                                            반품신청 철회
                                        </button>
                                        {{/ifEq}} {{/each}}
                                    </div>
                                </article>
                                {{/each}}
                            </div>
                            {{/each}}
                        </div>
                        {{else}}
                        <div slot="isLoading">
                            {{#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}}
                        </div>
                        {{/each}}
                    </div>
                </div>
            </my-orders>
        </section>
    </div>
</main>

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