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",
"patnrId": "1",
"prdtId": "A523924",
"prdtNm": "MOCK : Everyday Essentials Crossbody with 2 Straps",
"prodSno": 34,
"prodPrc": "65.0",
"prodQty": "1",
@@ -54,6 +55,9 @@
"intchReqDtt": null,
"shptmChngRsnCd": null,
"chngRsnCtnt": null,
"logoImgPath": "[]",
"prdtImgUrl": "상품이미지",
"prdtOptPrc": 0,
"prdtOpt": [
{
"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";
// 목(MOCK) 데이터
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 { TAxios } from "../api/TAxios";
import { types } from "./actionTypes";
@@ -24,7 +27,7 @@ export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
dispatch({
type: types.GET_MY_INFO_ORDER_SEARCH,
payload: tempData,
payload: response.data.data,
});
};
@@ -62,7 +65,7 @@ export const getMyinfoOrderDetailSearch = (params) => (dispatch, getState) => {
dispatch({
type: types.GET_MY_INFO_ORDER_DETAIL_SEARCH,
payload: response.data.data,
payload: tempData2,
});
};
@@ -91,7 +94,7 @@ const getMyinfoOrderShippingSearch = (params) => (dispatch, getState) => {
dispatch({
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 Spottable from "@enact/spotlight/Spottable";
import noOrderImg from "../../../../../assets/images/img-my-info-billing@3x.png";
// getMyinfoOrderSearch : 회원 주문 정보 조회
// getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회
// getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회
@@ -15,15 +14,16 @@ import {
getMyinfoOrderDetailSearch,
getMyinfoOrderSearch,
getMyinfoOrderShippingSearch,
tempGetInfo,
} from "../../../../actions/orderActions";
import TBody from "../../../../components/TBody/TBody";
import TButtonScroller from "../../../../components/TButtonScroller/TButtonScroller";
import TButtonTab, {
LIST_TYPE,
} from "../../../../components/TButtonTab/TButtonTab";
import TDropDown from "../../../../components/TDropDown/TDropDown";
import THeader from "../../../../components/THeader/THeader";
import TPopUp from "../../../../components/TPopUp/TPopUp";
import TScroller from "../../../../components/TScroller/TScroller";
import { $L } from "../../../../utils/helperMethods";
import css from "./MyOrders.module.less";
import CancelOrderList from "./OrderList/CancelOrderList";
@@ -51,15 +51,18 @@ export default function MyOrders({ title, cbScrollTo }) {
(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 orderProductInfo = orderInfo?.orderProductInfo;
const orderProductCouponInfo = orderProductInfo?.orderProductCouponInfo;
// console.log(orderInfoData, "orderInfoData");
// console.log(orderInfo, "orderInfo");
// console.log(orderProductInfo, "orderProductInfo");
// console.log(orderProductCouponInfo, "orderProductCouponInfo");
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);
const handleItemClick = useCallback(
({ index, ...rest }) => {
@@ -68,25 +71,41 @@ export default function MyOrders({ title, cbScrollTo }) {
},
[selectedTab]
);
const [popOpen, setPopOpen] = useState(false);
const [orderPopOpen, setOrderPopOpen] = useState(false);
const [orderTrackOpen, setOrderTrackOpen] = useState(false);
const [orderCancelOpen, setOrderCancelOpen] = useState(false);
let timerRef = useRef();
const onClose = useCallback(() => {
setPopOpen(true);
}, []);
const onOrderPopClose = useCallback(() => {
setOrderPopOpen(true);
setOrderDetailPopup((prev) => !prev);
}, []);
// 주문 상세 팝업
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(() => {
setOrderTrackOpen(true);
}, []);
const onOrderCancelClose = useCallback(() => {
setOrderCancelOpen(true);
}, []);
useEffect(() => {
const initFoucsedItem = document.querySelector(
'[data-spotlight-id="tab-0"]'
@@ -103,7 +122,6 @@ export default function MyOrders({ title, cbScrollTo }) {
};
}, []);
// 현재 MOCK 데이터 사용
useEffect(() => {
if (
appStatus &&
@@ -117,7 +135,6 @@ export default function MyOrders({ title, cbScrollTo }) {
})
);
}
// dispatch(getMyinfoOrderShippingSearch());
}, [dispatch, dropDownTab]);
const handleSelectFilter = useCallback(({ selected }) => {
@@ -161,12 +178,18 @@ export default function MyOrders({ title, cbScrollTo }) {
</div> */}
<div className={css.orderlist}>
{selectedTab === 0 && <OrderList orderInfo={orderInfo} />}
{selectedTab === 0 && (
<OrderList
orderInfo={orderInfo}
onOrderDetailPopup={onOrderDetailPopup}
/>
)}
{selectedTab === 1 && <CancelOrderList orderInfo={orderInfo} />}
</div>
</div>
</TBody>
<TPopUp
{/* <TPopUp
kind="optionPopup"
open={popOpen}
//options 옵션 넣어줘야함.
@@ -175,102 +198,122 @@ export default function MyOrders({ title, cbScrollTo }) {
hasButton
button1Text={$L("Cancel")}
title={$L("SELECT CANCELLATION REASON")}
/>
/> */}
{/* mypage order detail */}
<TPopUp
kind="scrollPopup"
open={orderPopOpen}
onClose={onOrderPopClose}
open={orderDetailPopup}
onClose={onClose}
hasText
hasButton
button1Text={$L("Cancel")}
title={$L("ORDER DETAILS")}
>
<div className={css.scrollBox}>
<ul>
<li>
<div className={css.leftBox}>Preparing for shipment</div>
<div className={css.rightBox}>
Arriving January 10~ January 15
</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 className={css.hideInfo}>
<h5>SHIPPING ADDRESS</h5>
<ul className={css.shippingInfo}>
<li>Hong Gil dong</li>
<li>8 Bennetts Mills RD</li>
<li>At Speedway</li>
<li>Jackson, NJ 08527-4510</li>
<li>United States</li>
<li>Phone number : 0821099461234</li>
<li>Email : honggildong00@gmail.com</li>
</ul>
<h5>BILLING ADDRESS</h5>
<ul className={css.shippingInfo}>
<li>Hong Gil dong</li>
<li>8 Bennetts Mills RD</li>
<li>At Speedway</li>
<li>Jackson, NJ 08527-4510</li>
<li>United States</li>
<li>Phone number : 0821099461234</li>
<li>Email : honggildong00@gmail.com</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}>$ 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>
<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"
@@ -281,75 +324,79 @@ export default function MyOrders({ title, cbScrollTo }) {
button1Text={$L("Cancel")}
title={$L("TRACK PACKAGE")}
>
<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} /> 회색
<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>
<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"

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";
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(() => {}, []);
useEffect(() => {
if (orderInfo) {
setOrederInfoCount(orderInfo.length);
}
}, [orderInfo]);
console.log(orderInfo, "orderInfo");
// 주문 상세 팝업
const handleOrderDetailClick = useCallback(
(orderInfo) => () => {
onOrderDetailPopup(orderInfo);
},
[onOrderDetailPopup]
);
return (
<>
@@ -54,18 +50,18 @@ export default function OrderList({ orderInfo }) {
</div>
<div className={css.underBox}>
<h4>order date</h4>
<span>January 5, 2023</span>
<span>January 5, 2023 : 주문 날짜 확인 팔요!</span>
</div>
</div>
<div className={css.rightBox}>
<ul>
<li>
<div>item</div>
<div>${order?.totProdQty}</div>
<div>{order?.totProdQty}</div>
</li>
<li>
<div>item total</div>
<div>{order?.totProdPrc}</div>
<div>${order?.totProdPrc}</div>
</li>
<li>
<div>option</div>
@@ -86,147 +82,114 @@ export default function OrderList({ orderInfo }) {
</ul>
</div>
</div>
<div className={css.totalAccount}>
<div className={css.accTitle}>order total</div>
<div className={css.accountNum}>$ 95.80</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>
{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}>
{$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
<TButton
size="small"
className={css.orderDetailBtn}
onClick={handleOrderDetailClick(
order.orderProductInfo[prodIndex]
)}
>
{$L("view order details")}
</TButton>
</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 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>
</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}>
{/* 디테일 버튼 */}
<div className={css.rightBox}>
<ul>
<li>ID: A565145</li>
<li>Qty: 1</li>
<li>Silver Metallic / XL</li>
<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 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}>
<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>
);
})}
</ul>
</div>
</div>

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

@@ -31,7 +31,6 @@
}
}
.orderCancelBtn {
background: #808080;
.size(@w:224px,@h:60px);
align-self: center;
}
@@ -158,7 +157,7 @@
list-style: none;
> li {
width: 1560px;
height: 423px;
// height: 423px;
background: #fff;
display: flex;
flex-wrap: wrap;
@@ -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;