parent
d6c3c29232
commit
6809694c20
5 changed files with 14669 additions and 12244 deletions
File diff suppressed because it is too large
Load Diff
@ -1,197 +1,139 @@ |
||||
import { useState } from "react"; |
||||
import { userFactor } from "../../Redux/actions"; |
||||
import React, { Component } from "react"; |
||||
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 && "لغو شد"} |
||||
import { userFactor } from "~/Redux/actions"; |
||||
import "./index.css"; |
||||
import moment from "jalali-moment"; |
||||
const grades = [ |
||||
"پیش دبستان", |
||||
"اول", |
||||
"دوم", |
||||
"سوم", |
||||
"چهارم", |
||||
"پنجم", |
||||
"ششم", |
||||
"هفتم", |
||||
"هشتم", |
||||
"نهم", |
||||
"دهم", |
||||
"یازدهم", |
||||
"دوازدهم", |
||||
]; |
||||
class Orders extends Component { |
||||
componentDidMount() { |
||||
console.log(this.props); |
||||
if (!this.props.list) this.props.getList(); |
||||
} |
||||
render() { |
||||
// props.getList();
|
||||
let data = this.props.list; |
||||
console.log(data); |
||||
return ( |
||||
<div className="order"> |
||||
<Navbar /> |
||||
<div className="order-title" align="center"> |
||||
سفارشات من |
||||
</div> |
||||
<div className="order-data-container"> |
||||
{data != null && |
||||
data.map((item, i) => ( |
||||
<div key={i} 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={{ |
||||
backgroundColor: [0, "#11FA2F", "#11FADB", "#FA3011"][ |
||||
item.condition |
||||
], |
||||
}} |
||||
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> |
||||
<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 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> |
||||
{moment(item.payedAt).format("jYYYY/jMM/jDD hh:mm")} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
{item.offCodePrice != 0 && ( |
||||
<div className="order-data-container-item-row3-order-offcodeprice"> |
||||
میزان تخفیف : <span>{item.offPrice}</span>{" "} |
||||
<span className="odcir2oo-unit">تومان</span> |
||||
|
||||
<div className="order-data-container-item-row3 d-flex"> |
||||
<div className="order-data-container-item-row3-order-price "> |
||||
مبلغ : <span>{item.payPrice}</span>{" "} |
||||
<span className="odcir2op-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" |
||||
/> |
||||
{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, i) => ( |
||||
<div |
||||
key={i} |
||||
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="" |
||||
/> |
||||
<div style={{ height: 0 }}> |
||||
<div className="order-data-container-item-row4-imgs-img-count"> |
||||
{item.count}{" "} |
||||
<span style={{ fontSize: "12px" }}>×</span> |
||||
</div> |
||||
</div> |
||||
<div style={{ fontSize: "10px" }} align="center"> |
||||
{`${item.book.name} ${grades[item.book.gradeId]}`} |
||||
</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
))} |
||||
{data == null && ( |
||||
<div className="order-message">سفارشی برای نماش وجود ندارد</div> |
||||
)} |
||||
))} |
||||
{data == null && ( |
||||
<div className="order-message">سفارشی برای نماش وجود ندارد</div> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
|
||||
const mapStateToPropS = state =>{ |
||||
return{ |
||||
list:state.list |
||||
); |
||||
} |
||||
} |
||||
|
||||
const mapDispatchToProps = dispatch =>{ |
||||
return{ |
||||
getList:()=> dispatch(userFactor.list()) |
||||
export default connect( |
||||
(state) => ({ |
||||
list: state.userFactor.list, |
||||
}), |
||||
{ |
||||
getList: userFactor.list, |
||||
} |
||||
} |
||||
|
||||
export default connect(mapStateToPropS, mapDispatchToProps)(Orders); |
||||
|
||||
|
||||
|
||||
)(Orders); |
||||
|
||||
Loading…
Reference in new issue