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-07 18:55:13 +09:00
parent 76322d4c94
commit f194b55a30
4 changed files with 347 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
com.twin.app.shoptime/assets/mock/temp.json Normal file
View File

@@ -0,0 +1,92 @@
{
"retCode": 0,
"retMsg": "Success",
"data": {
"orderInfo": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"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",
"orderProductInfo": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"cntryCd": "US",
"patnrId": "1",
"prdtId": "A523924",
"prodSno": 34,
"prodPrc": "65.0",
"prodQty": "1",
"taxAmt": "0.2",
"dlvrAmt": "3.5",
"shptmDlvrStCd": "ORD00201",
"shptmOrdStCd": "ORD00601",
"ordReqDtt": "2023-07-25 06:49:16",
"cnclReqDtt": null,
"rtunReqDtt": null,
"intchReqDtt": null,
"shptmChngRsnCd": null,
"chngRsnCtnt": null,
"prdtOpt": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"cntryCd": "US",
"patnrId": "1",
"prdtId": "A523924",
"prodSno": 34,
"prodOptSno": "3",
"prodOptCdCval": "111",
"prodOptTpCdCval": "",
"optNm": "Color",
"prodOptCval": "red"
}
],
"orderProductCouponInfo": [
{
"mbrNo": "US2201180082892",
"ordNo": "t8202307200126612",
"cntryCd": "US",
"patnrId": "1",
"prdtId": "A523924",
"prodSno": 34,
"cpnSno": "49",
"cpnCdCval": "c02",
"cpnCdSeq": "1",
"dcAmt": "1.0"
}
]
}
],
"orderProductCoupontUse": null
}
]
}
}

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

@@ -1,9 +1,12 @@
import axios from "axios";
import tempData from "../../assets/mock/temp.json";
import { URLS } from "../api/apiConfig";
import { TAxios } from "../api/TAxios";
import { types } from "./actionTypes";
import { getTermsAgreeYn } from "./commonActions";
// 회원 주문 정보 조회 (IF-LGSP-340)
// 회원 주문 정보 조회 (IF-LGSP-340) --> MOCK 데이터 사용 API 완성후 변경 2024.05.07
export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
const {
mbrNo,
@@ -21,7 +24,7 @@ export const getMyinfoOrderSearch = (params) => (dispatch, getState) => {
dispatch({
type: types.GET_MY_INFO_ORDER_SEARCH,
payload: response.data.data,
payload: tempData,
});
};

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

@@ -8,6 +8,15 @@ import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDeco
import Spottable from "@enact/spotlight/Spottable";
import noOrderImg from "../../../../../assets/images/img-my-info-billing@3x.png";
// getMyinfoOrderSearch : 회원 주문 정보 조회
// getMyinfoOrderDetailSearch : 회원 주문 상세 정보 조회
// getMyinfoOrderShippingSearch : 회원 주문 배송 상세 정보 조회
import {
getMyinfoOrderDetailSearch,
getMyinfoOrderSearch,
getMyinfoOrderShippingSearch,
tempGetInfo,
} from "../../../../actions/orderActions";
import TBody from "../../../../components/TBody/TBody";
import TButtonTab, {
LIST_TYPE,
@@ -26,6 +35,8 @@ const TabContainer = SpotlightContainerDecorator(
);
export default function MyOrders({ title, cbScrollTo }) {
const { appStatus } = useSelector((state) => state.common);
const [selectedTab, setSelectedTab] = useState(0);
const [dropDownTab, setDropDownTab] = useState(0);
@@ -39,6 +50,17 @@ export default function MyOrders({ title, cbScrollTo }) {
const { userInfo } = useSelector(
(state) => state.common.appStatus.loginUserData
);
const orderInfoData = useSelector((state) => state.order.orderInfoData.data);
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 handleItemClick = useCallback(
({ index, ...rest }) => {
console.log("#TButtonTab onItemClick", index, rest);
@@ -50,7 +72,9 @@ export default function MyOrders({ title, cbScrollTo }) {
const [orderPopOpen, setOrderPopOpen] = useState(false);
const [orderTrackOpen, setOrderTrackOpen] = useState(false);
const [orderCancelOpen, setOrderCancelOpen] = useState(false);
let timerRef = useRef();
const onClose = useCallback(() => {
setPopOpen(true);
}, []);
@@ -78,6 +102,28 @@ export default function MyOrders({ title, cbScrollTo }) {
clearTimeout(timerRef.current);
};
}, []);
// 현재 MOCK 데이터 사용
useEffect(() => {
if (
appStatus &&
appStatus.loginUserData &&
appStatus.loginUserData.userInfo
) {
dispatch(
getMyinfoOrderSearch({
mbrNo: appStatus.loginUserData.userInfo,
srchMonth: dropDownTab === 0 ? 3 : 6,
})
);
}
// dispatch(getMyinfoOrderShippingSearch());
}, [dispatch, dropDownTab]);
const handleSelectFilter = useCallback(({ selected }) => {
setDropDownTab(selected);
}, []);
return (
<>
<THeader title={title} />
@@ -95,6 +141,7 @@ export default function MyOrders({ title, cbScrollTo }) {
className={css.dropdown}
selectedIndex={dropDownTab && dropDownTab}
width="small"
onSelect={handleSelectFilter}
>
{filterMethods}
</TDropDown>
@@ -114,8 +161,8 @@ export default function MyOrders({ title, cbScrollTo }) {
</div> */}
<div className={css.orderlist}>
{selectedTab === 0 && <OrderList />}
{selectedTab === 1 && <CancelOrderList />}
{selectedTab === 0 && <OrderList orderInfo={orderInfo} />}
{selectedTab === 1 && <CancelOrderList orderInfo={orderInfo} />}
</div>
</div>
</TBody>

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

@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback, useEffect, useState } from "react";
import Spottable from "@enact/spotlight/Spottable";
@@ -7,15 +7,38 @@ import { $L } from "../../../../../utils/helperMethods";
import css from "./OrderList.module.less";
const SpottableComponent = Spottable("div");
export default function OrderList() {
export default function OrderList({ orderInfo }) {
// console.log(orderInfo, "아더인포!!!");
const [orderInfoCount, setOrederInfoCount] = useState();
// 주문 취소
const onCancel = useCallback(() => {}, []);
useEffect(() => {
if (orderInfo) {
setOrederInfoCount(orderInfo.length);
}
}, [orderInfo]);
console.log(orderInfo, "orderInfo");
return (
<>
{orderInfo &&
orderInfo.map((order, index) => {
return (
<div className={css.orderBorder}>
<div className={css.orderNmInfo}>
<p className={css.orderTitle}>
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
ORDER NUMBER :{" "}
<span className={css.orderNm}>{order.ordNo}</span>
</p>
<TButton size="small" className={css.orderCancelBtn}>
<TButton
size="small"
className={css.orderCancelBtn}
onClick={onCancel}
>
{$L("Cancel order")}
</TButton>
</div>
@@ -25,7 +48,9 @@ export default function OrderList() {
<div className={css.leftBox}>
<div className={css.topBox}>
<h4>payment method</h4>
<span>Mastercard / ****-1199</span>
<span>
{order.cardKnd} / {order.cardNo}
</span>
</div>
<div className={css.underBox}>
<h4>order date</h4>
@@ -36,27 +61,27 @@ export default function OrderList() {
<ul>
<li>
<div>item</div>
<div>4</div>
<div>${order?.totProdQty}</div>
</li>
<li>
<div>item total</div>
<div>$90.40</div>
<div>{order?.totProdPrc}</div>
</li>
<li>
<div>option</div>
<div>$4.40</div>
<div>${order?.totOptPrc}</div>
</li>
<li>
<div>s&h</div>
<div>$11.00</div>
<div>${order?.totDlvrAmt}</div>
</li>
<li>
<div>tax</div>
<div>$5.00</div>
<div>${order?.ordTotTaxAmt}</div>
</li>
<li>
<div>coupon</div>
<div>-$10.00</div>
<div>-${order?.totDcAmt}</div>
</li>
</ul>
</div>
@@ -79,7 +104,8 @@ export default function OrderList() {
<span className={css.orderRed}>Canceled</span>
<span className={css.orderBlack}>Completed</span>
*/}
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
Arriving January 10~ January 15{" "}
{/* 문구 다틀릴예정 */}
</div>
<TButton size="small" className={css.orderDetailBtn}>
@@ -91,7 +117,8 @@ export default function OrderList() {
<div className={css.productBox}>
<div className={css.logo}>
<span className={css.logoImg}></span>
IHWIP XL Everyday Essentials Crossbody with 2 Straps
IHWIP XL Everyday Essentials Crossbody with 2
Straps
</div>
<div className={css.orderPdInfo}>
<div className={css.productImg}></div>
@@ -144,7 +171,8 @@ export default function OrderList() {
<span className={css.orderRed}>Canceled</span>
<span className={css.orderBlack}>Completed</span>
*/}
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
Arriving January 10~ January 15{" "}
{/* 문구 다틀릴예정 */}
</div>
<TButton size="small" className={css.orderDetailBtn}>
@@ -156,199 +184,8 @@ export default function OrderList() {
<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}>
<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>
</div>
</div>
</div>
<div className={css.orderBorder}>
<div className={css.orderNmInfo}>
<p className={css.orderTitle}>
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
</p>
<TButton size="small" className={css.orderCancelBtn}>
{$L("Cancel order")}
</TButton>
</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 className={css.rightBox}>
<ul>
<li>
<div>item</div>
<div>4</div>
</li>
<li>
<div>item total</div>
<div>$90.40</div>
</li>
<li>
<div>option</div>
<div>$4.40</div>
</li>
<li>
<div>s&h</div>
<div>$11.00</div>
</li>
<li>
<div>tax</div>
<div>$5.00</div>
</li>
<li>
<div>coupon</div>
<div>-$10.00</div>
</li>
</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>
<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}>
<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
IHWIP XL Everyday Essentials Crossbody with 2
Straps
</div>
<div className={css.orderPdInfo}>
<div className={css.productImg}></div>
@@ -394,6 +231,8 @@ export default function OrderList() {
</div>
</div>
</div>
);
})}
</>
);
}