You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

139 lines
5.2 KiB

import React, { Component } from "react";
import { connect } from "react-redux";
import Navbar from "../Home/Navbar";
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 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>
<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>
{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>
))}
{data == null && (
<div className="order-message">سفارشی برای نماش وجود ندارد</div>
)}
</div>
</div>
);
}
}
export default connect(
(state) => ({
list: state.userFactor.list,
}),
{
getList: userFactor.list,
}
)(Orders);