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

[마이아더스] Orders 개발진행

Browse Source
This commit is contained in:
sungmin.in
2024-05-16 19:20:04 +09:00
parent 1ddbfb272e
commit 1148cd69b1
7 changed files with 422 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
com.twin.app.shoptime/assets/mock/temp.json
View File

@@ -41,6 +41,7 @@
"cntryCd": "US", "cntryCd": "US",
"patnrId": "1", "patnrId": "1",
"prdtId": "A523924", "prdtId": "A523924",
"prdtNm": "MOCK : Everyday Essentials Crossbody with 2 Straps",
"prodSno": 34, "prodSno": 34,
"prodPrc": "65.0", "prodPrc": "65.0",
"prodQty": "1", "prodQty": "1",
@@ -54,6 +55,9 @@
"intchReqDtt": null, "intchReqDtt": null,
"shptmChngRsnCd": null, "shptmChngRsnCd": null,
"chngRsnCtnt": null, "chngRsnCtnt": null,
"logoImgPath": "[]",
"prdtImgUrl": "상품이미지",
"prdtOptPrc": 0,
"prdtOpt": [ "prdtOpt": [
{ {
"mbrNo": "US2201180082892", "mbrNo": "US2201180082892",

39
com.twin.app.shoptime/assets/mock/temp2.json Normal file
View File

@@ -0,0 +1,39 @@
{
"retCode": 0,
"retMsg": "Success",
"data": {
"orderInfo": [
{
"mbrNo": "US2201180082892",
"storReqNo": null,
"cntryCd": "US",
"dlvrEmalAddr": "US2306190103418@email.co.kr",
"dlvrCtpt": "00001111114",
"dlvrOdrLnm": "ddd",
"dlvrOdrFnm": "ffff",
"dlvrZpcd": "12345",
"dlvrStatNm": "fdfd",
"dlvrCityNm": "San Francisco",
"dlvrDtlAddr": "Lyon St, San Francisco",
"bilEmalAddr": "billemail@email.co.kr",
"bilCtpt": "12345",
"bilOdrLnm": "LNM",
"bilOdrFnm": "FNM",
"bilZpcd": "12345",
"bilStatNm": "STATS",
"bilCityNm": "San Francisco",
"bilDtlAddr": "Lyon St, San Francisco",
"cardNo": "1234123412341234",
"cardKnd": "[연동x]MasterCard",
"cardVldTerm": "0912",
"cardSecCd": "123",
"ordPmtReqAmt": "64.15",
"totProdPrc": "65.0",
"totProdQty": "1",
"totDlvrAmt": "3.5",
"ordTotTaxAmt": "0.15",
"totDcAmt": "1.0"
}
]
}
}

35
com.twin.app.shoptime/assets/mock/temp3.json Normal file
View File

@@ -0,0 +1,35 @@
{
"retCode": 0,
"retMsg": "Success",
"data": {
"dlvrHistInfo": [
{
"mbrNo": "US2201180082892",
"ordNo": "8202307250127006",
"cntryCd": "US",
"patnrId": "1",
"prdtId": "A523924",
"prodSno": "33",
"shptmDlvrStCd": "ORD00201",
"shptmDlvrStNm": "Ordered",
"regDt": "2023-07-25 06:42:44"
}
],
"dlvrHistDetailInfo": [
{
"mbrNo": "US2305310102791",
"ordNo": "LGE23101611120326381",
"cntryCd": "US",
"patnrId": "11",
"prdtId": "3878391",
"prodSno": "2172",
"shptmDlvrStCd": "ORD00202",
"shptmDlvrStNm": "Out for delivery",
"regDt": "2023-10-14 00:00:00",
"invTrceId": "2023101600101224452",
"statCdCval": "NY",
"cityNm": "Roslyn"
}
]
}
}

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

@@ -1,6 +1,9 @@
import axios from "axios"; import axios from "axios";
// 목(MOCK) 데이터
import tempData from "../../assets/mock/temp.json"; import tempData from "../../assets/mock/temp.json";
import tempData2 from "../../assets/mock/temp2.json";
import tempData3 from "../../assets/mock/temp3.json";
import { URLS } from "../api/apiConfig"; import { URLS } from "../api/apiConfig";
import { TAxios } from "../api/TAxios"; import { TAxios } from "../api/TAxios";
import { types } from "./actionTypes"; import { types } from "./actionTypes";
@@ -24,7 +27,7 @@ export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
dispatch({ dispatch({
type: types.GET_MY_INFO_ORDER_SEARCH, type: types.GET_MY_INFO_ORDER_SEARCH,
payload: tempData, payload: response.data.data,
}); });
}; };
@@ -62,7 +65,7 @@ export const getMyinfoOrderDetailSearch = (params) => (dispatch, getState) => {
dispatch({ dispatch({
type: types.GET_MY_INFO_ORDER_DETAIL_SEARCH, type: types.GET_MY_INFO_ORDER_DETAIL_SEARCH,
payload: response.data.data, payload: tempData2,
}); });
}; };
@@ -91,7 +94,7 @@ const getMyinfoOrderShippingSearch = (params) => (dispatch, getState) => {
dispatch({ dispatch({
type: types.GET_MY_INFO_ORDER_SHIPPING_SEARCH, type: types.GET_MY_INFO_ORDER_SHIPPING_SEARCH,
payload: response.data.data, payload: tempData3,
}); });
}; };

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

@@ -7,7 +7,6 @@ import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable"; import Spottable from "@enact/spotlight/Spottable";
import noOrderImg from "../../../../../assets/images/img-my-info-billing@3x.png";
// getMyinfoOrderSearch : 회원 주문 정보 조회 // getMyinfoOrderSearch : 회원 주문 정보 조회
// getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회 // getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회
// getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회 // getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회
@@ -15,15 +14,16 @@ import {
getMyinfoOrderDetailSearch, getMyinfoOrderDetailSearch,
getMyinfoOrderSearch, getMyinfoOrderSearch,
getMyinfoOrderShippingSearch, getMyinfoOrderShippingSearch,
tempGetInfo,
} from "../../../../actions/orderActions"; } from "../../../../actions/orderActions";
import TBody from "../../../../components/TBody/TBody"; import TBody from "../../../../components/TBody/TBody";
import TButtonScroller from "../../../../components/TButtonScroller/TButtonScroller";
import TButtonTab, { import TButtonTab, {
LIST_TYPE, LIST_TYPE,
} from "../../../../components/TButtonTab/TButtonTab"; } from "../../../../components/TButtonTab/TButtonTab";
import TDropDown from "../../../../components/TDropDown/TDropDown"; import TDropDown from "../../../../components/TDropDown/TDropDown";
import THeader from "../../../../components/THeader/THeader"; import THeader from "../../../../components/THeader/THeader";
import TPopUp from "../../../../components/TPopUp/TPopUp"; import TPopUp from "../../../../components/TPopUp/TPopUp";
import TScroller from "../../../../components/TScroller/TScroller";
import { $L } from "../../../../utils/helperMethods"; import { $L } from "../../../../utils/helperMethods";
import css from "./MyOrders.module.less"; import css from "./MyOrders.module.less";
import CancelOrderList from "./OrderList/CancelOrderList"; import CancelOrderList from "./OrderList/CancelOrderList";
@@ -51,15 +51,18 @@ export default function MyOrders({ title, cbScrollTo }) {
(state) => state.common.appStatus.loginUserData (state) => state.common.appStatus.loginUserData
); );
const orderInfoData = useSelector((state) => state.order.orderInfoData.data); const orderInfoData = useSelector((state) => state.order?.orderInfoData);
const orderInfo = orderInfoData?.orderInfo; const orderInfo = orderInfoData?.orderInfo;
const orderProductInfo = orderInfo?.orderProductInfo;
const orderProductCouponInfo = orderProductInfo?.orderProductCouponInfo;
// console.log(orderInfoData, "orderInfoData"); const orderDetailData = useSelector(
// console.log(orderInfo, "orderInfo"); (state) => state.order?.orderDetailData?.data?.orderInfo[0]
// console.log(orderProductInfo, "orderProductInfo"); );
// console.log(orderProductCouponInfo, "orderProductCouponInfo");
console.log(orderDetailData, "디테일 데이터");
const [orderDetailPopup, setOrderDetailPopup] = useState(false);
const [orderTrackOpen, setOrderTrackOpen] = useState(false);
const [orderCancelOpen, setOrderCancelOpen] = useState(false);
const handleItemClick = useCallback( const handleItemClick = useCallback(
({ index, ...rest }) => { ({ index, ...rest }) => {
@@ -68,25 +71,41 @@ export default function MyOrders({ title, cbScrollTo }) {
}, },
[selectedTab] [selectedTab]
); );
const [popOpen, setPopOpen] = useState(false);
const [orderPopOpen, setOrderPopOpen] = useState(false);
const [orderTrackOpen, setOrderTrackOpen] = useState(false);
const [orderCancelOpen, setOrderCancelOpen] = useState(false);
let timerRef = useRef(); let timerRef = useRef();
const onClose = useCallback(() => { const onClose = useCallback(() => {
setPopOpen(true); setOrderDetailPopup((prev) => !prev);
}, []);
const onOrderPopClose = useCallback(() => {
setOrderPopOpen(true);
}, []); }, []);
// 주문 상세 팝업
const onOrderDetailPopup = useCallback(
(orederInfo) => {
console.log(orederInfo, "주문 상세");
if (orederInfo) {
dispatch(
getMyinfoOrderDetailSearch({
mbrNo: orederInfo.mbrNo,
ordNo: orederInfo.ordNo,
prdtId: orederInfo.prdtId,
})
);
}
setOrderDetailPopup((prev) => !prev);
},
[dispatch]
);
const onOrderTrackClose = useCallback(() => { const onOrderTrackClose = useCallback(() => {
setOrderTrackOpen(true); setOrderTrackOpen(true);
}, []); }, []);
const onOrderCancelClose = useCallback(() => { const onOrderCancelClose = useCallback(() => {
setOrderCancelOpen(true); setOrderCancelOpen(true);
}, []); }, []);
useEffect(() => { useEffect(() => {
const initFoucsedItem = document.querySelector( const initFoucsedItem = document.querySelector(
'[data-spotlight-id="tab-0"]' '[data-spotlight-id="tab-0"]'
@@ -103,7 +122,6 @@ export default function MyOrders({ title, cbScrollTo }) {
}; };
}, []); }, []);
// 현재 MOCK 데이터 사용
useEffect(() => { useEffect(() => {
if ( if (
appStatus && appStatus &&
@@ -117,7 +135,6 @@ export default function MyOrders({ title, cbScrollTo }) {
}) })
); );
} }
// dispatch(getMyinfoOrderShippingSearch());
}, [dispatch, dropDownTab]); }, [dispatch, dropDownTab]);
const handleSelectFilter = useCallback(({ selected }) => { const handleSelectFilter = useCallback(({ selected }) => {
@@ -161,12 +178,18 @@ export default function MyOrders({ title, cbScrollTo }) {
</div> */} </div> */}
<div className={css.orderlist}> <div className={css.orderlist}>
{selectedTab === 0 && <OrderList orderInfo={orderInfo} />} {selectedTab === 0 && (
<OrderList
orderInfo={orderInfo}
onOrderDetailPopup={onOrderDetailPopup}
/>
)}
{selectedTab === 1 && <CancelOrderList orderInfo={orderInfo} />} {selectedTab === 1 && <CancelOrderList orderInfo={orderInfo} />}
</div> </div>
</div> </div>
</TBody> </TBody>
<TPopUp
{/* <TPopUp
kind="optionPopup" kind="optionPopup"
open={popOpen} open={popOpen}
//options 옵션 넣어줘야함. //options 옵션 넣어줘야함.
@@ -175,102 +198,122 @@ export default function MyOrders({ title, cbScrollTo }) {
hasButton hasButton
button1Text={$L("Cancel")} button1Text={$L("Cancel")}
title={$L("SELECT CANCELLATION REASON")} title={$L("SELECT CANCELLATION REASON")}
/> /> */}
{/* mypage order detail */} {/* mypage order detail */}
<TPopUp <TPopUp
kind="scrollPopup" kind="scrollPopup"
open={orderPopOpen} open={orderDetailPopup}
onClose={onOrderPopClose} onClose={onClose}
hasText hasText
hasButton hasButton
button1Text={$L("Cancel")} button1Text={$L("Cancel")}
title={$L("ORDER DETAILS")} title={$L("ORDER DETAILS")}
> >
<div className={css.scrollBox}> <TScroller>
<ul> <div className={css.scrollBox}>
<li> <ul>
<div className={css.leftBox}>Preparing for shipment</div> <li>
<div className={css.rightBox}> <div className={css.leftBox}>Preparing for shipment</div>
Arriving January 10~ January 15 <div className={css.rightBox}>
</div> Arriving January 10~ January 15 - API 확인 필요
</li> </div>
<li> </li>
<div className={css.textList}> <li>
<div className={css.productLogo}></div> <div className={css.textList}>
IHWIP XL Everyday Essentials Crossbody with 2 Straps <div className={css.productLogo}></div>
abHWIXLEveryday Essentials Crossbody with 2 Straps abc {/* {orderDetailData.prdtNm} */}
</div> </div>
</li> </li>
<li className={css.hideInfo}> <li className={css.hideInfo}>
<h5>SHIPPING ADDRESS</h5> <h5>SHIPPING ADDRESS</h5>
<ul className={css.shippingInfo}> <ul className={css.shippingInfo}>
<li>Hong Gil dong</li> <li>
<li>8 Bennetts Mills RD</li> {orderDetailData?.dlvrOdrFnm}
<li>At Speedway</li> {orderDetailData?.dlvrOdrLnm}
<li>Jackson, NJ 08527-4510</li> </li>
<li>United States</li> <li>{orderDetailData?.dlvrStatNm}</li>
<li>Phone number : 0821099461234</li> <li>{orderDetailData?.dlvrCityNm}</li>
<li>Email : honggildong00@gmail.com</li> <li>{orderDetailData?.dlvrDtlAddr}</li>
</ul> <li>{orderDetailData?.cntryCd}</li>
<h5>BILLING ADDRESS</h5> <li>Phone number : {orderDetailData?.dlvrCtpt}</li>
<ul className={css.shippingInfo}> <li>Email : {orderDetailData?.dlvrEmalAddr} </li>
<li>Hong Gil dong</li> </ul>
<li>8 Bennetts Mills RD</li>
<li>At Speedway</li> <h5>BILLING ADDRESS</h5>
<li>Jackson, NJ 08527-4510</li> <ul className={css.shippingInfo}>
<li>United States</li> <li>
<li>Phone number : 0821099461234</li> {orderDetailData?.bilOdrFnm}
<li>Email : honggildong00@gmail.com</li> {orderDetailData?.bilOdrLnm}
</ul> </li>
</li> <li>{orderDetailData?.bilStatNm}</li>
<li> <li>{orderDetailData?.bilCityNm}</li>
<div className={css.textList}>ORDER SUMMARY</div> <li>{orderDetailData?.bilDtlAddr}</li>
</li> <li>{orderDetailData?.cntryCd}</li>
<li className={css.hideInfo}> <li>Phone number : {orderDetailData?.bilCtpt}</li>
<ul className={css.orderInfo}> <li>Email : {orderDetailData?.bilDtlAddr}</li>
<li> </ul>
<span className={css.title}>Items</span> </li>
<span className={css.info}>$ 40.20</span>
</li> <li>
<li> <div className={css.textList}>ORDER SUMMARY</div>
<span className={css.title}>Quantity</span> </li>
<span className={css.info}>2</span> <li className={css.hideInfo}>
</li> <ul className={css.orderInfo}>
<li> <li>
<span className={css.title}>Items Total</span> <span className={css.title}>Items</span>
<span className={css.info}>$ 80.40</span> <span className={css.info}>$ {""}</span>
</li> </li>
<li> <li>
<span className={css.title}>Option</span> <span className={css.title}>Quantity</span>
<span className={css.info}>$ 12.40</span> <span className={css.info}>
</li> {orderDetailData?.totProdQty}
<li> </span>
<span className={css.title}>Shipping & handling</span> </li>
<span className={css.info}>$ 10.50</span> <li>
</li> <span className={css.title}>Items Total</span>
<li> <span className={css.info}>
<span className={css.title}>Total before tax</span> $ {orderDetailData?.totProdPrc}
<span className={css.info}>$ 103.20</span> </span>
</li> </li>
<li> <li>
<span className={css.title}> <span className={css.title}>Option</span>
Estimated tax to be collected <span className={css.info}>$ 12.40</span>
</span> </li>
<span className={css.info}>$ 10.30</span> <li>
</li> <span className={css.title}>Shipping & handling</span>
<li> <span className={css.info}>
<span className={css.title}>Your Coupon Savings</span> $ {orderDetailData?.totDlvrAmt}
<span className={css.info}>-$ 20</span> </span>
</li> </li>
</ul> <li>
</li> <span className={css.title}>Total before tax</span>
<li className={css.blackLi}> <span className={css.info}>
<div className={css.totalList}>ITEM ORDER TOTAL</div> $ {orderDetailData?.ordTotTaxAmt}
<div className={css.totalAccountList}>$ 93.60</div> </span>
</li> </li>
</ul> <li>
</div> <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> </TPopUp>
{/* 08_02_3_my orders_track package */} {/* 08_02_3_my orders_track package */}
<TPopUp <TPopUp
kind="scrollPopup" kind="scrollPopup"
@@ -281,75 +324,79 @@ export default function MyOrders({ title, cbScrollTo }) {
button1Text={$L("Cancel")} button1Text={$L("Cancel")}
title={$L("TRACK PACKAGE")} title={$L("TRACK PACKAGE")}
> >
<div className={css.scrollBox}> <TScroller>
<ul> <div className={css.scrollBox}>
<li> <ul>
<div className={css.textList}>Ordered on January 5, 2023</div> <li>
</li> <div className={css.textList}>Ordered on January 5, 2023</div>
<li> </li>
<div className={css.textList}>Order 111-1721950-401433</div> <li>
</li> <div className={css.textList}>Order 111-1721950-401433</div>
<li className={css.hideInfo}> </li>
<ul className={css.deliveryInfo}> <li className={css.hideInfo}>
<li> <ul className={css.deliveryInfo}>
{/* <span className={css.notYet} /> 회색 <li>
{/* <span className={css.notYet} /> 회색
<span className={css.delivering} /> 쩜쩜 찍힌거 */} <span className={css.delivering} /> 쩜쩜 찍힌거 */}
<span className={css.complete} /> <span className={css.complete} />
<div className={css.orderDate}> <div className={css.orderDate}>
<h6>ORDERED</h6> <h6>ORDERED</h6>
<span>January 5, 2023</span> <span>January 5, 2023</span>
</div> </div>
</li> </li>
<li className={classNames(css.imgLiner, css.active)} /> <li className={classNames(css.imgLiner, css.active)} />
<li> <li>
{/* <span className={css.notYet} /> */} {/* <span className={css.notYet} /> */}
<span className={css.delivering} /> <span className={css.delivering} />
{/* <span className={css.complete} /> */} {/* <span className={css.complete} /> */}
<div className={css.shipperDate}> <div className={css.shipperDate}>
<h6>Shipped</h6> <h6>Shipped</h6>
<span>January 6, 2023</span> <span>January 6, 2023</span>
</div> </div>
</li> </li>
<li className={classNames(css.imgLiner, css.active)} /> <li className={classNames(css.imgLiner, css.active)} />
<li> <li>
{/* <span className={css.notYet} /> */} {/* <span className={css.notYet} /> */}
<span className={css.delivering} /> <span className={css.delivering} />
{/* <span className={css.complete} /> */} {/* <span className={css.complete} /> */}
<div className={css.deliveryDate}> <div className={css.deliveryDate}>
<h6>Out for delivery</h6> <h6>Out for delivery</h6>
<span>January 6, 2023</span> <span>January 6, 2023</span>
</div> </div>
</li> </li>
<li className={css.imgLiner} /> <li className={css.imgLiner} />
<li> <li>
<span className={css.notYet} /> <span className={css.notYet} />
{/* <span className={css.delivering} /> */} {/* <span className={css.delivering} /> */}
{/* <span className={css.complete} /> */} {/* <span className={css.complete} /> */}
<div className={css.arrivingDate}> <div className={css.arrivingDate}>
<h6>Arriving</h6> <h6>Arriving</h6>
<span></span> <span></span>
</div> </div>
</li> </li>
</ul> </ul>
</li> </li>
<li>
<div className={css.textList}>SHIPMENT DETAILS</div> <li>
</li> <div className={css.textList}>SHIPMENT DETAILS</div>
<li className={css.hideInfo}> </li>
<h5>January 6, 2023</h5> <li className={css.hideInfo}>
<ul className={css.shipmentDetail}> <h5>January 6, 2023</h5>
<li>9:49 AM</li> <ul className={css.shipmentDetail}>
<li>Out for delivery San Leandro, US</li> <li>9:49 AM</li>
</ul> <li>Out for delivery San Leandro, US</li>
<h5>January 5, 2023</h5> </ul>
<ul className={css.shipmentDetail}> <h5>January 5, 2023</h5>
<li>8:38 PM</li> <ul className={css.shipmentDetail}>
<li>Shipped San Leandro, US</li> <li>8:38 PM</li>
</ul> <li>Shipped San Leandro, US</li>
</li> </ul>
</ul> </li>
</div> </ul>
</div>
</TScroller>
</TPopUp> </TPopUp>
{/* 08_02_6_my orders_cancellation details */} {/* 08_02_6_my orders_cancellation details */}
<TPopUp <TPopUp
kind="scrollPopup" kind="scrollPopup"

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

@@ -7,21 +7,17 @@ import { $L } from "../../../../../utils/helperMethods";
import css from "./OrderList.module.less"; import css from "./OrderList.module.less";
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
export default function OrderList({ orderInfo }) {
// console.log(orderInfo, "아더인포!!!");
const [orderInfoCount, setOrederInfoCount] = useState(); export default function OrderList({ orderInfo, onOrderDetailPopup }) {
// 주문 취소
const onCancel = useCallback(() => {}, []); const onCancel = useCallback(() => {}, []);
useEffect(() => { // 주문 상세 팝업
if (orderInfo) { const handleOrderDetailClick = useCallback(
setOrederInfoCount(orderInfo.length); (orderInfo) => () => {
} onOrderDetailPopup(orderInfo);
}, [orderInfo]); },
[onOrderDetailPopup]
console.log(orderInfo, "orderInfo"); );
return ( return (
<> <>
@@ -54,18 +50,18 @@ export default function OrderList({ orderInfo }) {
</div> </div>
<div className={css.underBox}> <div className={css.underBox}>
<h4>order date</h4> <h4>order date</h4>
<span>January 5, 2023</span> <span>January 5, 2023 : 주문 날짜 확인 팔요!</span>
</div> </div>
</div> </div>
<div className={css.rightBox}> <div className={css.rightBox}>
<ul> <ul>
<li> <li>
<div>item</div> <div>item</div>
<div>${order?.totProdQty}</div> <div>{order?.totProdQty}</div>
</li> </li>
<li> <li>
<div>item total</div> <div>item total</div>
<div>{order?.totProdPrc}</div> <div>${order?.totProdPrc}</div>
</li> </li>
<li> <li>
<div>option</div> <div>option</div>
@@ -86,147 +82,114 @@ export default function OrderList({ orderInfo }) {
</ul> </ul>
</div> </div>
</div> </div>
<div className={css.totalAccount}> <div className={css.totalAccount}>
<div className={css.accTitle}>order total</div> <div className={css.accTitle}>order total</div>
<div className={css.accountNum}>$ 95.80</div> <div className={css.accountNum}>$ 95.80</div>
</div> </div>
<div className={css.orderItemList}> <div className={css.orderItemList}>
<ul> <ul>
{/* 여기부터 아이템 리스트들 */} {order.orderProductInfo &&
<li> order.orderProductInfo.map((product, prodIndex) => {
<div className={css.topBox}> return (
<div className={css.leftSmallBox}> <li key={prodIndex}>
<span className={css.orderGreen}> <div className={css.topBox}>
Preparing for shipment <div className={css.leftSmallBox}>
</span> {product.shptmDlvrStCd === "ORD00201" ? (
{/* 색상별 뿌려주는 틀림. <span className={css.orderGreen}>
<span className={css.orderBlue}>Shipping</span> Ordered
<span className={css.orderRed}>Canceled</span> </span>
<span className={css.orderBlack}>Completed</span> ) : product.shptmDlvrStCd === "ORD00202" ? (
*/} <span className={css.orderGreen}>
Arriving January 10~ January 15{" "} Out for delivery
{/* 문구 다틀릴예정 */} </span>
</div> ) : 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}> <TButton
{$L("view order details")} size="small"
</TButton> className={css.orderDetailBtn}
</div> onClick={handleOrderDetailClick(
<div className={css.underBox}> order.orderProductInfo[prodIndex]
<div className={css.leftBox}> )}
<div className={css.productBox}> >
<div className={css.logo}> {$L("view order details")}
<span className={css.logoImg}></span> </TButton>
IHWIP XL Everyday Essentials Crossbody with 2
Straps
</div> </div>
<div className={css.orderPdInfo}>
<div className={css.productImg}></div> <div className={css.underBox}>
<div className={css.pdInfo}> <div className={css.leftBox}>
<ul> <div className={css.productBox}>
<li>ID: A565145</li> <div className={css.logo}>
<li>Qty: 1</li> <span className={css.logoImg}>
<li>Silver Metallic / XL</li> <img src={product.logoImgPath} />
</ul> </span>
<div className={css.orderAcc}> <p>{product.prdtNm}</p>
$38.09 </div>
<span>|</span> <div className={css.orderPdInfo}>
<span>OPTION: $5.50</span> <img
<span>|</span> className={css.productImg}
<span>S&H: $5.50</span> 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> </div>
</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")} <div className={css.rightBox}>
</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> <ul>
<li>ID: A565145</li> <li>
<li>Qty: 1</li> <SpottableComponent className={css.divBtn}>
<li>Silver Metallic / XL</li> 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> </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> </li>
</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>
</ul> </ul>
</div> </div>
</div> </div>

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

@@ -31,7 +31,6 @@
} }
} }
.orderCancelBtn { .orderCancelBtn {
background: #808080;
.size(@w:224px,@h:60px); .size(@w:224px,@h:60px);
align-self: center; align-self: center;
} }
@@ -158,7 +157,7 @@
list-style: none; list-style: none;
> li { > li {
width: 1560px; width: 1560px;
height: 423px; // height: 423px;
background: #fff; background: #fff;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -245,10 +244,10 @@
flex: none; flex: none;
display: flex; display: flex;
width: 100%; width: 100%;
height: 322px; // height: 322px;
.leftBox { .leftBox {
width: 1059px; width: 1059px;
height: 322px; // height: 322px;
border-right: 1px solid #dadada; border-right: 1px solid #dadada;
padding: 30px 60px; padding: 30px 60px;
.productBox { .productBox {
@@ -262,8 +261,13 @@
.logoImg { .logoImg {
width: 42px; width: 42px;
height: 42px; height: 42px;
background: #000;
margin-right: 13px; margin-right: 13px;
> img {
.size(@w:42px, @h:42px);
}
}
> p {
width: calc(100% - 55px);
} }
} }
.orderPdInfo { .orderPdInfo {
@@ -313,7 +317,9 @@
} }
.rightBox { .rightBox {
width: 500px; width: 500px;
height: 322px; // height: 322px;
display: flex;
align-items: center;
padding: 0 60px; padding: 0 60px;
> ul { > ul {
list-style: none; list-style: none;