Aurora Modules

거래명세서/간이영수증

주문 상세 페이지에서 노출되는 거래명세서/간이영수증 모듈입니다.

거래명세서 URL: /pages/my/order-specification.html?orderNo={orderNo}

간이영수증 URL: /pages/my/simple-receipt.html?orderNo={orderNo}

※거래명세서: 지불 방식(payType)이 무통장입금(ACCOUNT), 전액할인(ZERO_PAY), 적립금 사용(ACCUMULATION)인 경우 사용
※간이영수증: 위의 경우를 제외한 나머지의 경우 사용

모듈명: order-specification원본소스

거래명세서/간이영수증 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
orderDetail	OrderDetail	object	주문 상세 조회 API 응답 값과 동일
serviceBasicInfo	ServiceBasicInfo	object	쇼핑몰 기본정보 (아래 타입 참조)
flattenedOrderOptions	FlattenedOrderOptions[]	[]	주문 상세 조회하기 API, 비회원 주문 상세 조회하기 API 응답 데이터를 orderOptionsGroupByPartner 을 flatMap 하여 1차 배열로 만든 데이터 (아래 타입 참조)
totalDiscountAmt	number	0	할인 금액
totalDeliveryAmt	number	0	배송비
orderSpecificationEmptyCnt	number	1	거래명세서 빈 공백 줄 개수

ServiceBasicInfo 타입

속성명	타입	기본값	설명
companyName	string	-	회사명
representativeName	string	-	대표자명
address	string	-	주소
representPhoneNo	string	-	대표 전화번호
faxNo	string	-	팩스번호
representEmail	string	-	대표 이메일
businessRegistrationNo	string	-	사업자등록번호
onlineMarketingBusinessDeclarationNo	string	-	통신판매업신고 번호
privacyManagerName	string	-	개인정보보호 책임자명

FlattenedOrderOptions 타입

속성명	타입	기본값	설명
deliverable	boolean	false	배송여부
claimStatusTypeLabel	string	-	클레임상태
orderStatusTypeLabel	string	-	주문상태 ex)입금대기
orderNo	string	-	주문번호
orderStatusType	string	-	주문상태 ex)DEPOSIT_WAIT
claimNo	string	-	클레임 번호
productName	string	-	상품명
imageUrl	string	-	상품 이미지 URL
optionName	string	-	옵션명
optionValue	string	-	옵션값
productNo	number	-	상품번호
orderOptionNo	number	-	주문옵션번호
orderCnt	number	0	주문수량
price	Price	-	가격정보 (아래 타입 참조)
delivery	Delivery	-	배송정보 (아래 타입 참조)
inputs	Inputs[]	[]	구매자 작성형 옵션 (아래 타입 참조)
nextActions	NextActions[]	[]	다음에 할 수 있는 작업 주문 상세 조회하기 API, 비회원 주문 상세 조회하기 API 응답 데이터중에서 orderOptionsGroupByPartner[].orderOptionsGroupByDelivery[].nextActions

NextActions 타입

속성명	타입	기본값	설명
nextActionType	string	-	작업타입 주문 상세 조회하기 API, 비회원 주문 상세 조회하기 API 응답 데이터중에서 nextActions[].nextActionType Enum 확인
uri	string	-	uri

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="module-guide-wrapper">
    <main class="order-specification">
        <order-specification>
            <div class="order-specification-wrapper">
                <div class="order-specification-content">
                    <p class="order-specification-title">거래명세서</p>
                    <div class="order-specification-content-top" slot="serviceBasicInfo">
                        <table class="order-specification-info">
                            <colgroup>
                                <col width="4%" />
                                <col width="12.5%" />
                                <col width="13%" />
                                <col width="7.5%" />
                                <col width="13%" />
                                <col width="4%" />
                                <col width="12.5%" />
                                <col width="10.5%" />
                                <col width="12.5%" />
                                <col width="10.5%" />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <th class="thead-point" scope="row" rowspan="5">공급자</th>
                                    <th scope="row">사업자등록번호</th>
                                    <td colspan="3">{{serviceBasicInfo.businessRegistrationNo}}</td>
                                    <th class="thead-point" scope="row" colspan="2">작성일자</th>
                                    <td colspan="3">{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 0 10}} {{/if}}</td>
                                </tr>

                                <tr>
                                    <th scope="row">회사명</th>
                                    <td>{{serviceBasicInfo.companyName}}</td>
                                    <th scope="row">대표자</th>
                                    <td class="align-left">{{serviceBasicInfo.ownerName}}</td>
                                    <th class="thead-point" scope="row" rowspan="4">수령자/주문자</th>
                                    <th scope="row">수령자명</th>
                                    <td class="align-left">{{orderDetail.shippingAddress.receiverName}}</td>
                                    <th scope="row">주문자명</th>
                                    <td class="align-left">{{orderDetail.orderer.ordererName}}</td>
                                </tr>

                                <tr>
                                    <th scope="row">주소</th>
                                    <td class="align-left" colspan="3">{{serviceBasicInfo.address}} {{serviceBasicInfo.addressDetail}}</td>
                                    <th scope="row">수령자 주소</th>
                                    <td class="align-left" colspan="3">{{orderDetail.shippingAddress.receiverAddress}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">업태</th>
                                    <td class="align-left">{{serviceBasicInfo.businessCondition}}</td>
                                    <th scope="row">종목</th>
                                    <td class="align-left">{{serviceBasicInfo.businessType}}</td>
                                    <th scope="row">수령자 연락처1</th>
                                    <td>{{orderDetail.shippingAddress.receiverContact1}}</td>
                                    <th scope="row">수령자 연락처2</th>
                                    <td>{{orderDetail.shippingAddress.receiverContact2}}</td>
                                </tr>
                                <tr>
                                    <th scope="row">전화번호</th>
                                    <td colspan="3">{{serviceBasicInfo.representPhoneNo}}</td>
                                    <th scope="row">비고</th>
                                    <td colspan="3"></td>
                                </tr>
                                <tr>
                                    <th scope="row" colspan="2">주문메모</th>
                                    <td colspan="3">{{orderDetail.orderMemo}}</td>
                                    <th scope="row" colspan="2">배송메모</th>
                                    <td colspan="3">{{orderDetail.memo}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="order-specification-content-bottom">
                        <div slot="flattenedOrderOptions">
                            <table class="order-specification-info">
                                <colgroup>
                                    <col width="40px" />
                                    <col width="40px" />
                                    <col />
                                    <col width="10%" />
                                    <col width="5%" />
                                    <col width="10%" />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>월</th>
                                        <th>일</th>
                                        <th>품 목 / 규 격</th>
                                        <th>단 가</th>
                                        <th>수 량</th>
                                        <th>금 액</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each flattenedOrderOptions}}
                                    <tr>
                                        <td>{{substring orderStatusDate.registerYmdt 5 7}}</td>
                                        <td>{{substring orderStatusDate.registerYmdt 8 10}}</td>
                                        <td class="align-left">{{{productName}}}</td>
                                        <td class="align-right">{{convertToKoreanCurrency price.salePrice}}</td>
                                        <td>{{convertToKoreanCurrency orderCnt}}</td>
                                        <td class="align-right">{{calcMultiplyPrice price.salePrice orderCnt}}</td>
                                    </tr>
                                    {{/each}} {{#ifGt totalDeliveryAmt 0}}
                                    <tr>
                                        <td>{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 5 7}} {{/if}}</td>
                                        <td>{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 8 10}} {{/if}}</td>
                                        <td class="align-left">배송비</td>
                                        <td class="align-right"></td>
                                        <td></td>
                                        <td class="align-right">{{convertToKoreanCurrency totalDeliveryAmt}}</td>
                                    </tr>
                                    {{/ifGt}} {{#ifGt totalDiscountAmt 0}}
                                    <tr>
                                        <td>{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 5 7}} {{/if}}</td>
                                        <td>{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 8 10}} {{/if}}</td>
                                        <td class="align-left">할인금액</td>
                                        <td class="align-right"></td>
                                        <td></td>
                                        <td class="align-right">- {{convertToKoreanCurrency totalDiscountAmt}}</td>
                                    </tr>
                                    {{/ifGt}} {{#ifGt orderDetail.lastOrderAmount.subPayAmt 0}}
                                    <tr>
                                        <td>{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 5 7}} {{/if}}</td>
                                        <td>{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 8 10}} {{/if}}</td>
                                        <td class="align-left">적립금 사용</td>
                                        <td class="align-right"></td>
                                        <td></td>
                                        <td class="align-right">- {{convertToKoreanCurrency orderDetail.lastOrderAmount.subPayAmt}}</td>
                                    </tr>
                                    {{/ifGt}}

                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td>==이하여백==</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>

                                    {{#repeat orderSpecificationEmptyCnt}}
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    {{/repeat}}

                                    <tr class="total">
                                        <td colspan="5">합계</td>
                                        <td class="align-right">{{convertToKoreanCurrency orderDetail.lastOrderAmount.chargeAmt}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="order-specification-controller-bottom" shopby-element="order-specification-btns">
                    <button class="btn btn--line-dark btn--lg" shopby-action="CLOSE_ORDER_SPECIFICATION_POPUP">닫기</button>
                    <button type="button" class="btn btn--fill-point btn--lg" shopby-action="PRINT_ORDER_SPECIFICATION">출력</button>
                </div>
            </div>
        </order-specification>
    </main>

    <main class="simple-receipt">
        <order-specification>
            <div>
                <div class="simple-receipt-title">
                    <span>간이영수증</span>
                    <button
                        type="button"
                        class="btn btn--line-dark btn--sm"
                        shopby-action="PRINT_ORDER_SPECIFICATION"
                        shopby-element="simple-receipt-print-btn"
                    >
                        인쇄
                    </button>
                </div>

                <div class="simple-receipt-content">
                    <div class="simple-receipt-content-top">
                        <table class="simple-receipt-info">
                            <colgroup>
                                <col width="8%" />
                                <col width="25%" />
                                <col width="20%" />
                                <col width="15%" />
                                <col width="32%" />
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td class="align-center simple-receipt-info-title" colspan="5">
                                        영 수 증
                                        <span>( 공급받는자용 )</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">no.</td>
                                    <td class="align-right" colspan="3">
                                        <span>{{orderDetail.orderer.ordererName}}</span>
                                        <span> 귀하</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td rowspan="4" class="simple-receipt-info__provider-title">
                                        공
                                        <br />
                                        <br />
                                        급
                                        <br />
                                        <br />
                                        자
                                    </td>
                                    <td class="align-center">
                                        사 업 자
                                        <br />
                                        등록번호
                                    </td>
                                    <td class="align-left simple-receipt-info__business-no" colspan="3">
                                        <p size="3">{{serviceBasicInfo.businessRegistrationNo}}</p>
                                    </td>
                                </tr>
                                <tr class="align-center">
                                    <td class="align-center">상 호</td>
                                    <td>{{serviceBasicInfo.companyName}}</td>
                                    <td>성명</td>
                                    <td class="align-left">{{serviceBasicInfo.representativeName}}</td>
                                </tr>
                                <tr class="align-center">
                                    <td>
                                        사 업 장
                                        <br />
                                        소 재 지
                                    </td>
                                    <td colspan="3">{{serviceBasicInfo.address}} {{serviceBasicInfo.addressDetail}}</td>
                                </tr>
                                <tr class="align-center">
                                    <td>업태</td>
                                    <td>{{serviceBasicInfo.businessCondition}}</td>
                                    <td>종목</td>
                                    <td>{{serviceBasicInfo.businessType}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="simple-receipt-content-total" slot="flattenedOrderOptions">
                        <table>
                            <colgroup>
                                <col />
                                <col />
                                <col />
                            </colgroup>
                            <tbody>
                                <tr class="align-center">
                                    <td>작성년월일</td>
                                    <td>공급대가총액</td>
                                    <td>비 고</td>
                                </tr>
                                <tr>
                                    <td class="align-center">{{#if orderDetail.orderYmdt}}{{substring orderDetail.orderYmdt 0 10}}{{/if}}</td>
                                    <td class="align-center">{{convertToKoreanCurrency orderDetail.lastOrderAmount.chargeAmt}}</td>
                                    <td class="align-center"></td>
                                </tr>
                                <tr class="align-center">
                                    <td colspan="3">위 금액을 정히 영수( 청구 )함</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="simple-receipt-content-bottom">
                        <table>
                            <colgroup>
                                <col width="5%" />
                                <col width="5%" />
                                <col />
                                <col width="10%" />
                                <col width="15%" />
                                <col width="15%" />
                            </colgroup>
                            <tbody>
                                <tr class="align-center">
                                    <td>월</td>
                                    <td>일</td>
                                    <td>품 목</td>
                                    <td>수량</td>
                                    <td>단가</td>
                                    <td>금액</td>
                                </tr>
                                <tr>
                                    <td class="align-center">{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 5 7}} {{/if}}</td>
                                    <td class="align-center">{{#if orderDetail.orderYmdt}} {{substring orderDetail.orderYmdt 8 10}} {{/if}}</td>
                                    <td class="align-center">
                                        {{#if flattenedOrderOptions.length}} {{{flattenedOrderOptions.0.productName}}} {{/if}}
                                        <!--  -->
                                        {{#ifGt flattenedOrderOptions.length 1}} 외
                                        <span>{{subtract flattenedOrderOptions.length 1}}건</span>
                                        {{/ifGt}}
                                    </td>
                                    <td class="align-center">{{convertToKoreanCurrency flattenedOrderOptions.0.orderCnt}}</td>
                                    <td class="align-center">{{convertToKoreanCurrency orderDetail.lastOrderAmount.chargeAmt}}</td>
                                    <td class="align-center">{{convertToKoreanCurrency orderDetail.lastOrderAmount.chargeAmt}}</td>
                                </tr>
                                <tr>
                                    <td class="align-center" colspan="6">*** 이 하 여 백 ***</td>
                                </tr>
                            </tbody>
                        </table>
                        {{#repeat 11}}
                        <table>
                            <tbody>
                                <tr>
                                    <td> </td>
                                    <td> </td>
                                    <td> </td>
                                    <td> </td>
                                    <td> </td>
                                    <td> </td>
                                </tr>
                            </tbody>
                        </table>
                        {{/repeat}}
                        <table>
                            <tbody>
                                <tr class="align-center">
                                    <td colspan="6">
                                        <p class="terms">부가가치세법시행규칙 제25조 규정에 의한 ( 영수증 )으로 개정.</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </order-specification>
    </main>
</div>

해당 모듈은 PC 전용으로 사용되고 있습니다.

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