optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[마이오더] 구현 진행

Browse Source
This commit is contained in:
sungmin.in
2024-05-17 17:19:38 +09:00
parent 6ee86fbf35
commit 6bcad595b3
9 changed files with 231 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
com.twin.app.shoptime/src/actions/actionTypes.js
View File

@@ -137,6 +137,7 @@ export const types = {
SET_PURCHASE_TERMS_AGREE: "SET_PURCHASE_TERMS_AGREE",
SET_PURCHASE_TERMS_WITHDRAW: "SET_PURCHASE_TERMS_WITHDRAW",
GET_MY_INFO_ORDER_SEARCH: "GET_MY_INFO_ORDER_SEARCH",
GET_MY_INFO_ORDER_SEARCH_CANCEL: "GET_MY_INFO_ORDER_SEARCH_CANCEL",
GET_MY_INFO_ORDER_DETAIL_SEARCH: "GET_MY_INFO_ORDER_DETAIL_SEARCH",
GET_MY_INFO_ORDER_SHIPPING_SEARCH: "GET_MY_INFO_ORDER_SHIPPING_SEARCH",

1
com.twin.app.shoptime/src/actions/cancelActions.js
View File

@@ -1,4 +1,5 @@
import { URLS } from "../api/apiConfig";
import { TAxios } from "../api/TAxios";
import { types } from "./actionTypes";
// 회원 주문 취소/반품/교환 사유 조회 (IF-LGSP-347)

12
com.twin.app.shoptime/src/actions/orderActions.js
View File

@@ -9,7 +9,7 @@ import { TAxios } from "../api/TAxios";
import { types } from "./actionTypes";
import { getTermsAgreeYn } from "./commonActions";
// 회원 주문 정보 조회 (IF-LGSP-340) --> MOCK 데이터 사용 API 완성후 변경 2024.05.07
// 회원 주문 정보 조회 (IF-LGSP-340)
export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
const {
mbrNo,
@@ -35,11 +35,19 @@ export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
console.error("getMyinfoOrderSearch onFail ", error);
};
let apiUrl;
if (cancelOrderYn === "Y") {
apiUrl = URLS.GET_MY_INFO_ORDER_SEARCH_CANCEL;
} else if (cancelOrderYn === "N") {
apiUrl = URLS.GET_MY_INFO_ORDER_SEARCH;
}
TAxios(
dispatch,
getState,
"get",
URLS.GET_MY_INFO_ORDER_SEARCH,
apiUrl,
{
mbrNo,
srchMonth,

1
com.twin.app.shoptime/src/api/apiConfig.js
View File

@@ -114,6 +114,7 @@ export const URLS = {
SET_PURCHASE_TERMS_AGREE: "/lgsp/v1/myinfo/purchaseTerms/agree.lge",
SET_PURCHASE_TERMS_WITHDRAW: "/lgsp/v1/myinfo/purchaseTerms/withdraw.lge",
GET_MY_INFO_ORDER_SEARCH: "/lgsp/v1/myinfo/order/info.lge",
GET_MY_INFO_ORDER_SEARCH_CANCEL: "/lgsp/v1/myinfo/order/info.lge",
GET_MY_INFO_ORDER_DETAIL_SEARCH: "/lgsp/v1/myinfo/order/detail.lge",
GET_MY_INFO_ORDER_SHIPPING_SEARCH: "/lgsp/v1/myinfo/order/shipping.lge",

8
com.twin.app.shoptime/src/reducers/orderReducer.js
View File

@@ -3,6 +3,7 @@ import { types } from "../actions/actionTypes";
const initialState = {
orderDetailData: {},
orderInfoData: {},
orderCancelData: {},
orderShippingData: {},
};
@@ -19,6 +20,13 @@ export const orderReducer = (state = initialState, action) => {
...state,
orderInfoData: action.payload,
};
case types.GET_MY_INFO_ORDER_SEARCH_CANCEL:
return {
...state,
orderCancelData: action.payload,
};
case types.GET_MY_INFO_ORDER_SHIPPING_SEARCH:
return {
...state,

330
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/MyOrders.jsx
View File

@@ -7,6 +7,16 @@ import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";
// getMyinfoOrderCancelColumnsSearch :IF-LGSP-347 회원 주문 취소/반품/교환 사유 조회
// getMyinfoOrderCancelSearch : IF-LGSP-366 회원 주문 취소/반품/교환 조회 - 디테일
// paymentTotalCancel : 주문 부분 결제 취소
// updateOrderPartialCancel : 결제전체취소
import {
getMyinfoOrderCancelColumnsSearch,
getMyinfoOrderCancelSearch,
paymentTotalCancel,
updateOrderPartialCancel,
} from "../../../../actions/cancelActions";
// getMyinfoOrderSearch : 회원 주문 정보 조회
// getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회
// getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회
@@ -54,12 +64,15 @@ export default function MyOrders({ title, cbScrollTo }) {
const orderInfoData = useSelector((state) => state.order?.orderInfoData);
const orderInfo = orderInfoData?.orderInfo;
const orderCancelData = useSelector((state) => state.order?.orderCancelData);
console.log(orderInfoData, "주문 데이터");
console.log(orderCancelData, "주문취소 데이터");
const orderDetailData = useSelector(
(state) => state.order?.orderDetailData?.data?.orderInfo[0]
);
console.log(orderDetailData, "디테일 데이터");
const [orderDetailPopup, setOrderDetailPopup] = useState(false);
const [orderTrackOpen, setOrderTrackOpen] = useState(false);
const [orderCancelOpen, setOrderCancelOpen] = useState(false);
@@ -82,7 +95,6 @@ export default function MyOrders({ title, cbScrollTo }) {
const onOrderDetailPopup = useCallback(
(orederInfo) => {
console.log(orederInfo, "주문 상세");
if (orederInfo) {
dispatch(
getMyinfoOrderDetailSearch({
@@ -122,6 +134,7 @@ export default function MyOrders({ title, cbScrollTo }) {
};
}, []);
// 주문 취소
useEffect(() => {
if (
appStatus &&
@@ -132,6 +145,24 @@ export default function MyOrders({ title, cbScrollTo }) {
getMyinfoOrderSearch({
mbrNo: appStatus.loginUserData.userInfo,
srchMonth: dropDownTab === 0 ? 3 : 6,
cancelOrderYn: "N",
})
);
}
}, [dispatch, dropDownTab]);
// 주문 정보
useEffect(() => {
if (
appStatus &&
appStatus.loginUserData &&
appStatus.loginUserData.userInfo
) {
dispatch(
getMyinfoOrderSearch({
mbrNo: appStatus.loginUserData.userInfo,
srchMonth: dropDownTab === 0 ? 3 : 6,
cancelOrderYn: "Y",
})
);
}
@@ -164,19 +195,6 @@ export default function MyOrders({ title, cbScrollTo }) {
</TDropDown>
</TabContainer>
{/* <div className={css.noOrderList}>
<div className={css.noOrderBox}>
<img src={noOrderImg} />
<span className={css.noOrderTitle}>
THERE IS NO ORDER HISTORY
</span>
<br />
<span className={css.noOrderSub}>
Use search above to find past orders.
</span>
</div>
</div> */}
<div className={css.orderlist}>
{selectedTab === 0 && (
<OrderList
@@ -188,286 +206,6 @@ export default function MyOrders({ title, cbScrollTo }) {
</div>
</div>
</TBody>
{/* <TPopUp
kind="optionPopup"
open={popOpen}
//options 옵션 넣어줘야함.
onClose={onClose}
hasText
hasButton
button1Text={$L("Cancel")}
title={$L("SELECT CANCELLATION REASON")}
/> */}
{/* mypage order detail */}
<TPopUp
kind="scrollPopup"
open={orderDetailPopup}
onClose={onClose}
hasText
hasButton
button1Text={$L("Cancel")}
title={$L("ORDER DETAILS")}
>
<TScroller>
<div className={css.scrollBox}>
<ul>
<li>
<div className={css.leftBox}>Preparing for shipment</div>
<div className={css.rightBox}>
Arriving January 10~ January 15 - API 확인 필요
</div>
</li>
<li>
<div className={css.textList}>
<div className={css.productLogo}></div>
{/* {orderDetailData.prdtNm} */}
</div>
</li>
<li className={css.hideInfo}>
<h5>SHIPPING ADDRESS</h5>
<ul className={css.shippingInfo}>
<li>
{orderDetailData?.dlvrOdrFnm}
{orderDetailData?.dlvrOdrLnm}
</li>
<li>{orderDetailData?.dlvrStatNm}</li>
<li>{orderDetailData?.dlvrCityNm}</li>
<li>{orderDetailData?.dlvrDtlAddr}</li>
<li>{orderDetailData?.cntryCd}</li>
<li>Phone number : {orderDetailData?.dlvrCtpt}</li>
<li>Email : {orderDetailData?.dlvrEmalAddr} </li>
</ul>
<h5>BILLING ADDRESS</h5>
<ul className={css.shippingInfo}>
<li>
{orderDetailData?.bilOdrFnm}
{orderDetailData?.bilOdrLnm}
</li>
<li>{orderDetailData?.bilStatNm}</li>
<li>{orderDetailData?.bilCityNm}</li>
<li>{orderDetailData?.bilDtlAddr}</li>
<li>{orderDetailData?.cntryCd}</li>
<li>Phone number : {orderDetailData?.bilCtpt}</li>
<li>Email : {orderDetailData?.bilDtlAddr}</li>
</ul>
</li>
<li>
<div className={css.textList}>ORDER SUMMARY</div>
</li>
<li className={css.hideInfo}>
<ul className={css.orderInfo}>
<li>
<span className={css.title}>Items</span>
<span className={css.info}>$ {""}</span>
</li>
<li>
<span className={css.title}>Quantity</span>
<span className={css.info}>
{orderDetailData?.totProdQty}
</span>
</li>
<li>
<span className={css.title}>Items Total</span>
<span className={css.info}>
$ {orderDetailData?.totProdPrc}
</span>
</li>
<li>
<span className={css.title}>Option</span>
<span className={css.info}>$ 12.40</span>
</li>
<li>
<span className={css.title}>Shipping & handling</span>
<span className={css.info}>
$ {orderDetailData?.totDlvrAmt}
</span>
</li>
<li>
<span className={css.title}>Total before tax</span>
<span className={css.info}>
$ {orderDetailData?.ordTotTaxAmt}
</span>
</li>
<li>
<span className={css.title}>
Estimated tax to be collected
</span>
<span className={css.info}>$ 10.30</span>
</li>
<li>
<span className={css.title}>Your Coupon Savings</span>
<span className={css.info}>-$ 20</span>
</li>
</ul>
</li>
<li className={css.blackLi}>
<div className={css.totalList}>ITEM ORDER TOTAL</div>
<div className={css.totalAccountList}>$ 93.60</div>
</li>
</ul>
</div>
</TScroller>
</TPopUp>
{/* 08_02_3_my orders_track package */}
<TPopUp
kind="scrollPopup"
open={orderTrackOpen}
onClose={onOrderTrackClose}
hasText
hasButton
button1Text={$L("Cancel")}
title={$L("TRACK PACKAGE")}
>
<TScroller>
<div className={css.scrollBox}>
<ul>
<li>
<div className={css.textList}>Ordered on January 5, 2023</div>
</li>
<li>
<div className={css.textList}>Order 111-1721950-401433</div>
</li>
<li className={css.hideInfo}>
<ul className={css.deliveryInfo}>
<li>
{/* <span className={css.notYet} /> 회색
<span className={css.delivering} /> 쩜쩜 찍힌거 */}
<span className={css.complete} />
<div className={css.orderDate}>
<h6>ORDERED</h6>
<span>January 5, 2023</span>
</div>
</li>
<li className={classNames(css.imgLiner, css.active)} />
<li>
{/* <span className={css.notYet} /> */}
<span className={css.delivering} />
{/* <span className={css.complete} /> */}
<div className={css.shipperDate}>
<h6>Shipped</h6>
<span>January 6, 2023</span>
</div>
</li>
<li className={classNames(css.imgLiner, css.active)} />
<li>
{/* <span className={css.notYet} /> */}
<span className={css.delivering} />
{/* <span className={css.complete} /> */}
<div className={css.deliveryDate}>
<h6>Out for delivery</h6>
<span>January 6, 2023</span>
</div>
</li>
<li className={css.imgLiner} />
<li>
<span className={css.notYet} />
{/* <span className={css.delivering} /> */}
{/* <span className={css.complete} /> */}
<div className={css.arrivingDate}>
<h6>Arriving</h6>
<span></span>
</div>
</li>
</ul>
</li>
<li>
<div className={css.textList}>SHIPMENT DETAILS</div>
</li>
<li className={css.hideInfo}>
<h5>January 6, 2023</h5>
<ul className={css.shipmentDetail}>
<li>9:49 AM</li>
<li>Out for delivery San Leandro, US</li>
</ul>
<h5>January 5, 2023</h5>
<ul className={css.shipmentDetail}>
<li>8:38 PM</li>
<li>Shipped San Leandro, US</li>
</ul>
</li>
</ul>
</div>
</TScroller>
</TPopUp>
{/* 08_02_6_my orders_cancellation details */}
<TPopUp
kind="scrollPopup"
open={orderCancelOpen}
onClose={onOrderCancelClose}
hasText
hasButton
button1Text={$L("Cancel")}
title={$L("CANCELLATION DETAILS")}
>
<div className={css.scrollBox}>
<ul>
<li>
<div className={css.leftBox}>CANCELLED DATE</div>
<div className={css.rightBox}>January 5, 2023</div>
</li>
<li>
<div className={css.textList}>
<div className={css.productLogo}></div>
IHWIP XL Everyday Essentials Crossbody with 2 Straps
abHWIXLEveryday Essentials Crossbody with 2 Straps abc
</div>
</li>
<li>
<div className={css.textList}>ORDER SUMMARY</div>
</li>
<li className={css.hideInfo}>
<ul className={css.orderInfo}>
<li>
<span className={css.title}>Items</span>
<span className={css.info}>$ 40.20</span>
</li>
<li>
<span className={css.title}>Quantity</span>
<span className={css.info}>2</span>
</li>
<li>
<span className={css.title}>Items Total</span>
<span className={css.info}>$ 80.40</span>
</li>
<li>
<span className={css.title}>Option</span>
<span className={css.info}>$ 12.40</span>
</li>
<li>
<span className={css.title}>Shipping & handling</span>
<span className={css.info}>$ 10.50</span>
</li>
<li>
<span className={css.title}>Total before tax</span>
<span className={css.info}>$ 103.20</span>
</li>
<li>
<span className={css.title}>
Estimated tax to be collected
</span>
<span className={css.info}>$ 10.30</span>
</li>
<li>
<span className={css.title}>Your Coupon Savings</span>
<span className={css.info}>-$ 20</span>
</li>
</ul>
</li>
<li className={css.blackLi}>
<div className={css.totalList}>ITEM ORDER TOTAL</div>
<div className={css.totalAccountList}>$ 93.60</div>
</li>
</ul>
</div>
</TPopUp>
</>
);
}

288
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.jsx
View File

@@ -1,166 +1,164 @@
import React from "react";
import React, { useCallback, useEffect, useState } from "react";
import Spottable from "@enact/spotlight/Spottable";
import noOrderImg from "../../../../../../assets/images/img-my-info-billing@3x.png";
import TButton from "../../../../../components/TButton/TButton";
import { $L } from "../../../../../utils/helperMethods";
import css from "./CancelOrderList.module.less";
const SpottableComponent = Spottable("div");
export default function OrderList() {
export default function OrderList({ orderInfo, onOrderDetailPopup }) {
// 주문 상세 팝업
const handleOrderDetailClick = useCallback(
(orderInfo) => () => {
// onOrderDetailPopup(orderInfo);
},
[onOrderDetailPopup]
);
if (!orderInfo || orderInfo.length === 0) {
return (
<div className={css.noOrderList}>
<div className={css.noOrderBox}>
<img src={noOrderImg} alt="No order" />
<span className={css.noOrderTitle}>THERE IS NO ORDER HISTORY</span>
<br />
<span className={css.noOrderSub}>
Use search above to find past orders.
</span>
</div>
</div>
);
}
return (
<div className={css.orderBorder}>
<div className={css.orderNmInfo}>
<p className={css.orderTitle}>
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
</p>
</div>
<div className={css.orderInfo}>
<div className={css.infoBox}>
<div className={css.leftBox}>
<div className={css.topBox}>
<h4>payment method</h4>
<span>Mastercard / ****-1199</span>
</div>
<div className={css.underBox}>
<h4>order date</h4>
<span>January 5, 2023</span>
</div>
</div>
</div>
<div className={css.orderItemList}>
<ul>
{/* 여기부터 아이템 리스트들 */}
<li>
<div className={css.topBox}>
<div className={css.leftSmallBox}>
<span className={css.orderGreen}>Preparing for shipment</span>
{/* 색상별 뿌려주는 틀림.
<span className={css.orderBlue}>Shipping</span>
<span className={css.orderRed}>Canceled</span>
<span className={css.orderBlack}>Completed</span>
*/}
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
</div>
<TButton size="small" className={css.orderDetailBtn}>
{$L("view order details")}
</TButton>
<>
{orderInfo &&
orderInfo.map((order, index) => {
return (
<div className={css.orderBorder} key={index}>
<div className={css.orderNmInfo}>
<p className={css.orderTitle}>
ORDER NUMBER :{" "}
<span className={css.orderNm}>{order.ordNo}</span>
</p>
</div>
<div className={css.underBox}>
<div className={css.leftBox}>
<div className={css.productBox}>
<div className={css.logo}>
<span className={css.logoImg}></span>
IHWIP XL Everyday Essentials Crossbody with 2 Straps
<div className={css.orderInfo}>
<div className={css.infoBox}>
<div className={css.leftBox}>
<div className={css.topBox}>
<h4>payment method</h4>
<span>
{order.cardKnd} / {order.cardNo}
</span>
</div>
<div className={css.orderPdInfo}>
<div className={css.productImg}></div>
<div className={css.pdInfo}>
<ul>
<li>ID: A565145</li>
<li>Qty: 1</li>
<li>Silver Metallic / XL</li>
</ul>
<div className={css.orderAcc}>
$38.09
<span>|</span>
<span>OPTION: $5.50</span>
<span>|</span>
<span>S&H: $5.50</span>
</div>
</div>
<div className={css.underBox}>
<h4>order date</h4>
<span>January 5, 2023 : 취소 날짜 확인</span>
</div>
</div>
</div>
<div className={css.rightBox}>
<ul>
<li>
<SpottableComponent className={css.divBtn}>
VIEW CANCELLATION DETAILS
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
BUY IT AGAIN
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
VIEW CANCELLATION DETAILS
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
BUY IT AGAIN
</SpottableComponent>
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
</li>
</ul>
</div>
</div>
</li>
<li>
<div className={css.topBox}>
<div className={css.leftSmallBox}>
<span className={css.orderGreen}>Preparing for shipment</span>
{/* 색상별 뿌려주는 틀림.
<span className={css.orderBlue}>Shipping</span>
<span className={css.orderRed}>Canceled</span>
<span className={css.orderBlack}>Completed</span>
*/}
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
</div>
<TButton size="small" className={css.orderDetailBtn}>
{$L("view order details")}
</TButton>
</div>
<div className={css.underBox}>
<div className={css.leftBox}>
<div className={css.productBox}>
<div className={css.logo}>
<span className={css.logoImg}></span>
IHWIP XL Everyday Essentials Crossbody with 2 Straps
</div>
<div className={css.orderPdInfo}>
<div className={css.productImg}></div>
<div className={css.pdInfo}>
<ul>
<li>ID: A565145</li>
<li>Qty: 1</li>
<li>Silver Metallic / XL</li>
</ul>
<div className={css.orderAcc}>
$38.09
<span>|</span>
<span>OPTION: $5.50</span>
<span>|</span>
<span>S&H: $5.50</span>
</div>
</div>
</div>
</div>
</div>
<div className={css.rightBox}>
<div className={css.orderItemList}>
<ul>
<li>
<SpottableComponent className={css.divBtn}>
VIEW CANCELLATION DETAILS
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
BUY IT AGAIN
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
VIEW CANCELLATION DETAILS
</SpottableComponent>
<SpottableComponent className={css.divBtn}>
BUY IT AGAIN
</SpottableComponent>
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
</li>
{order.orderProductInfo &&
order.orderProductInfo.map((product, prodIndex) => {
return (
<li key={prodIndex}>
<div className={css.topBox}>
<div className={css.leftSmallBox}>
{product.shptmDlvrStCd === "ORD00201" ? (
<span className={css.orderGreen}>
Ordered
</span>
) : product.shptmDlvrStCd === "ORD00202" ? (
<span className={css.orderGreen}>
Out for delivery
</span>
) : product.shptmDlvrStCd === "ORD00203" ? (
<span className={css.orderGreen}>
Arriving
</span>
) : product.shptmDlvrStCd === "ORD00204" ? (
<span className={css.orderBlue}>
Shipping
</span>
) : product.shptmDlvrStCd === "ORD00205" ? (
<span className={css.orderRed}>Canceled</span>
) : null}
Arriving January 10 ~ January 15 - API 확인 필요{" "}
</div>
<TButton
size="small"
className={css.orderDetailBtn}
onClick={handleOrderDetailClick(
order.orderProductInfo[prodIndex]
)}
>
{$L("view cancelled details")}
</TButton>
</div>
<div className={css.underBox}>
<div className={css.leftBox}>
<div className={css.productBox}>
<div className={css.logo}>
<span className={css.logoImg}>
<img src={product.logoImgPath} />
</span>
<p>{product.prdtNm}</p>
</div>
<div className={css.orderPdInfo}>
<img
className={css.productImg}
src={product.prdtImgUrl}
></img>
<div className={css.pdInfo}>
<ul>
<li>ID: {product.prdtId}</li>
<li>Qty: {product.prodQty}</li>
<li>
Silver Metallic / XL : API 확인 필요
</li>
</ul>
<div className={css.orderAcc}>
${product.prodPrc}
<span>|</span>
<span>
$OPTION: ${product.prdtOptPrc}
</span>
<span>|</span>
<span>S&H: ${product.dlvrAmt}</span>
</div>
</div>
</div>
</div>
</div>
{/* 디테일 버튼 */}
<div className={css.rightBox}>
<ul>
<li>
<SpottableComponent className={css.divBtn}>
BUY IT AGAIN
</SpottableComponent>
</li>
</ul>
</div>
{/* 디테일 버튼 */}
</div>
</li>
);
})}
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
);
})}
</>
);
}

26
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/CancelOrderList.module.less
View File

@@ -31,7 +31,6 @@
}
}
.orderCancelBtn {
background: #808080;
.size(@w:224px,@h:60px);
align-self: center;
}
@@ -46,8 +45,8 @@
flex-wrap: wrap;
.leftBox {
width: 1680px;
width: 400px;
margin-right: 30px;
.topBox {
> h4 {
text-transform: uppercase;
@@ -152,13 +151,13 @@
}
.orderItemList {
background: #f8f8f8;
padding: 30px 60px;
padding: 60px;
width: 100%;
> ul {
list-style: none;
> li {
width: 1560px;
height: 423px;
// height: 423px;
background: #fff;
display: flex;
flex-wrap: wrap;
@@ -232,7 +231,7 @@
}
.orderDetailBtn {
width: 300px;
width: 400px;
height: 60px;
font-size: 24px;
font-weight: bold;
@@ -245,10 +244,10 @@
flex: none;
display: flex;
width: 100%;
height: 322px;
// height: 322px;
.leftBox {
width: 1059px;
height: 322px;
// height: 322px;
border-right: 1px solid #dadada;
padding: 30px 60px;
.productBox {
@@ -262,8 +261,13 @@
.logoImg {
width: 42px;
height: 42px;
background: #000;
margin-right: 13px;
> img {
.size(@w:42px, @h:42px);
}
}
> p {
width: calc(100% - 55px);
}
}
.orderPdInfo {
@@ -313,7 +317,9 @@
}
.rightBox {
width: 500px;
height: 322px;
// height: 322px;
display: flex;
align-items: center;
padding: 0 60px;
> ul {
list-style: none;

18
com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/MyOrders/OrderList/OrderList.jsx
View File

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
import Spottable from "@enact/spotlight/Spottable";
import noOrderImg from "../../../../../../assets/images/img-my-info-billing@3x.png";
import TButton from "../../../../../components/TButton/TButton";
import { $L } from "../../../../../utils/helperMethods";
import css from "./OrderList.module.less";
@@ -14,11 +15,26 @@ export default function OrderList({ orderInfo, onOrderDetailPopup }) {
// 주문 상세 팝업
const handleOrderDetailClick = useCallback(
(orderInfo) => () => {
onOrderDetailPopup(orderInfo);
// onOrderDetailPopup(orderInfo);
},
[onOrderDetailPopup]
);
if (!orderInfo || orderInfo.length === 0) {
return (
<div className={css.noOrderList}>
<div className={css.noOrderBox}>
<img src={noOrderImg} alt="No order" />
<span className={css.noOrderTitle}>THERE IS NO ORDER HISTORY</span>
<br />
<span className={css.noOrderSub}>
Use search above to find past orders.
</span>
</div>
</div>
);
}
return (
<>
{orderInfo &&