parent
0671058b76
commit
eb615986f6
7 changed files with 402 additions and 2 deletions
@ -0,0 +1,138 @@ |
||||
|
||||
|
||||
|
||||
.order{ |
||||
width: 100%; |
||||
margin-top: 70px; |
||||
padding: 0 5px; |
||||
} |
||||
|
||||
/* .order-line{ |
||||
width: 100%; |
||||
height: 1px; |
||||
background-color: rgb(201, 199, 199); |
||||
margin-top: 10px; |
||||
} */ |
||||
|
||||
.order-title{ |
||||
width: 100%; |
||||
direction: rtl; |
||||
font-size: 25px; |
||||
font-weight: bold; |
||||
color: #5DC964; |
||||
} |
||||
|
||||
.order-data-container{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.order-data-container-item{ |
||||
width: 100%; |
||||
padding-bottom: 10px; |
||||
border-bottom: 1px solid rgb(201, 199, 199); |
||||
} |
||||
|
||||
.order-data-container-item-row1{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
direction: rtl; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.order-data-container-item-row1-order-id, |
||||
.order-data-container-item-row2-order-date, |
||||
.order-data-container-item-row3-order-price, |
||||
.order-data-container-item-row2-transactionId, |
||||
.order-data-container-item-row3-order-offcodeprice{ |
||||
font-size: 16px; |
||||
color: #555; |
||||
direction: rtl; |
||||
} |
||||
|
||||
.order-data-container-item-row1-order-id span, |
||||
.order-data-container-item-row2-order-date span, |
||||
.order-data-container-item-row3-order-price span, |
||||
.order-data-container-item-row3-order-offcodeprice span{ |
||||
font-size: 16px; |
||||
color: #333; |
||||
margin-right: 5px; |
||||
direction: ltr !important; |
||||
} |
||||
|
||||
.order-data-container-item-row1-order-status{ |
||||
display: flex; |
||||
align-items: center; |
||||
direction: rtl; |
||||
} |
||||
|
||||
.order-data-container-item-row1-order-status-circle{ |
||||
width: 12px; |
||||
height: 12px; |
||||
border-radius: 50%; |
||||
background-color: black; |
||||
margin-left: 3px; |
||||
} |
||||
|
||||
.order-data-container-item-row1-order-status-text{ |
||||
font-size: 13px; |
||||
width: 100px; |
||||
text-align: center; |
||||
padding: 2px 0; |
||||
background-color: #999; |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.order-data-container-item-row2{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.odcir2op-unit,.odcir2oo-unit{ |
||||
font-size: 12px !important; |
||||
margin-right: 3px !important; |
||||
} |
||||
|
||||
.order-data-container-item-row3{ |
||||
width: 100%; |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.order-data-container-item-row3-order-offcodeprice{ |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
|
||||
.order-data-container-item-row4{ |
||||
width: 100%; |
||||
} |
||||
|
||||
.order-data-container-item-row4-imgs{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
direction: ltr; |
||||
} |
||||
|
||||
.order-data-container-item-row4-imgs-container{ |
||||
width:18%; |
||||
aspect-ratio: 1/1; |
||||
border-radius: 5px; |
||||
overflow: hidden; |
||||
background-color: brown; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.order-data-container-item-row4-imgs-img{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.order-message{ |
||||
width: 100%; |
||||
font-size: 20px; |
||||
} |
||||
@ -0,0 +1,197 @@ |
||||
import { useState } from "react"; |
||||
import { userFactor } from "../../Redux/actions"; |
||||
import { connect } from "react-redux"; |
||||
import Navbar from "../Home/Navbar"; |
||||
|
||||
|
||||
import './index.css'; |
||||
|
||||
const Orders=(props)=>{ |
||||
// const [data, set_data] = useState([
|
||||
// {
|
||||
// id: "12345",
|
||||
// transactionId: "43448y35",
|
||||
// payedAt: "1400/06/24",
|
||||
// condition: 1,
|
||||
// payPrice: 2500000,
|
||||
// offPrice: 10000,
|
||||
// description: "",
|
||||
// products: [
|
||||
// {
|
||||
// id: 1,
|
||||
// ARId: "",
|
||||
// book: {
|
||||
// name: "",
|
||||
// fileId: "",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// ARId: "",
|
||||
// book: {
|
||||
// name: "",
|
||||
// fileId: "",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: "45679f",
|
||||
// transactionId: "43448y35",
|
||||
// payedAt: "1400/06/24",
|
||||
// condition: 2,
|
||||
// payPrice: 2500000,
|
||||
// offPrice: 0,
|
||||
// description: "",
|
||||
// products: [
|
||||
// {
|
||||
// id: '1',
|
||||
// ARId: "",
|
||||
// book: {
|
||||
// name: "",
|
||||
// fileId: "",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// ARId: "",
|
||||
// book: {
|
||||
// name: "",
|
||||
// fileId: "",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// id: "509685f",
|
||||
// transactionId: "43448y35",
|
||||
// payedAt: "1400/06/24",
|
||||
// condition: 3,
|
||||
// payPrice: 2500000,
|
||||
// offPrice: 10000,
|
||||
// description: "",
|
||||
// products: [
|
||||
// {
|
||||
// id: 1,
|
||||
// ARId: "",
|
||||
// book: {
|
||||
// name: "",
|
||||
// fileId: "",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// ARId: "",
|
||||
// book: {
|
||||
// name: "",
|
||||
// fileId: "",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ]);
|
||||
props.getList(); |
||||
let data = props.list; |
||||
return ( |
||||
<div className="order"> |
||||
<Navbar /> |
||||
<div className="order-title">سفارشات من</div> |
||||
<div className="order-data-container"> |
||||
{data != null && |
||||
data.map((item) => ( |
||||
<div className="order-data-container-item"> |
||||
<div className="order-data-container-item-row1"> |
||||
<div className="order-data-container-item-row1-order-id"> |
||||
شناسه سفارش: <span>{item.id}</span> |
||||
</div> |
||||
<div className="order-data-container-item-row1-order-status"> |
||||
<div |
||||
style={ |
||||
item.condition == 1 |
||||
? { backgroundColor: "#11FA2F" } |
||||
: item.condition == 2 |
||||
? { backgroundColor: "#11FADB" } |
||||
: item.condition == 3 |
||||
? { backgroundColor: "#FA3011" } |
||||
: null |
||||
} |
||||
className="order-data-container-item-row1-order-status-circle" |
||||
></div> |
||||
<div |
||||
style={ |
||||
item.condition == 1 |
||||
? { backgroundColor: "#B0F8B5", color: "#0F9420" } |
||||
: item.condition == 2 |
||||
? { backgroundColor: "#B5FFFD", color: "#30C2BD" } |
||||
: item.condition == 3 |
||||
? { backgroundColor: "#FDC9B6", color: "#FA4C0D" } |
||||
: null |
||||
} |
||||
className="order-data-container-item-row1-order-status-text" |
||||
> |
||||
{item.condition == 1 && "در حال پردازش"} |
||||
{item.condition == 2 && "ارسال شد"} |
||||
{item.condition == 3 && "لغو شد"} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="order-data-container-item-row2"> |
||||
<div className="order-data-container-item-row2-transactionId"> |
||||
شناسه پرداخت : <span>{item.transactionId}</span> |
||||
</div> |
||||
<div className="order-data-container-item-row2-order-date"> |
||||
تاریخ سفارش : <span>{item.payedAt}</span> |
||||
</div> |
||||
</div> |
||||
<div className="order-data-container-item-row3"> |
||||
<div className="order-data-container-item-row3-order-price"> |
||||
مبلغ : <span>{item.payPrice}</span>{" "} |
||||
<span className="odcir2op-unit">تومان</span> |
||||
</div> |
||||
{item.offCodePrice != 0 && ( |
||||
<div className="order-data-container-item-row3-order-offcodeprice"> |
||||
میزان تخفیف : <span>{item.offPrice}</span>{" "} |
||||
<span className="odcir2oo-unit">تومان</span> |
||||
</div> |
||||
)} |
||||
</div> |
||||
<div className="order-data-container-item-row4"> |
||||
<div className="order-data-container-item-row4-imgs"> |
||||
{item.products.map((item) => ( |
||||
<div className="order-data-container-item-row4-imgs-container"> |
||||
<img |
||||
className="order-data-container-item-row4-imgs-img" |
||||
src={`https://dnvn.ir/api/v1/file/${item.book.fileIds.split(",")[0]}`} |
||||
alt="order-img" |
||||
/> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
))} |
||||
{data == null && ( |
||||
<div className="order-message">سفارشی برای نماش وجود ندارد</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
|
||||
const mapStateToPropS = state =>{ |
||||
return{ |
||||
list:state.list |
||||
} |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch =>{ |
||||
return{ |
||||
getList:()=> dispatch(userFactor.list()) |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToPropS, mapDispatchToProps)(Orders); |
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue