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.
 
 
 

144 lines
5.4 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 = [
window.t("پیش دبستان"),
window.t("اول"),
window.t("دوم"),
window.t("سوم"),
window.t("چهارم"),
window.t("پنجم"),
window.t("ششم"),
window.t("هفتم"),
window.t("هشتم"),
window.t("نهم"),
window.t("دهم"),
window.t("یازدهم"),
window.t("دوازدهم"),
];
class Orders extends Component {
componentDidMount() {
if (!this.props.list) this.props.getList();
}
render() {
// props.getList();
let data = this.props.list;
return (
<div className="order">
<Navbar />
<div className="order-title" align="center">
{window.t("سفارشات من")}
</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">
{window.t("شناسه سفارش")}: <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={{
color: [0, "#0F9420", "#30C2BD", "#FA4C0D"][
item.condition
],
backgroundColor: [0, "#B0F8B5", "#B5FFFD", "#FDC9B6"][
item.condition
],
}}
className="order-data-container-item-row1-order-status-text"
>
{
[
window.t("پرداخت نشده"),
window.t("در حال پردازش"),
window.t("ارسال شد"),
window.t("لغو شد"),
][item.condition]
}
</div>
</div>
</div>
<div className="order-data-container-item-row2">
<div className="order-data-container-item-row2-transactionId">
{window.t("شناسه پرداخت")} :{" "}
<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 ">
{window.t("مبلغ")} : <span>{window.tr(item.payPrice)}</span>{" "}
<span className="odcir2op-unit">{window.t("تومان")}</span>
</div>
<div className="order-data-container-item-row3-order-offcodeprice">
{window.t("تخفیف")} :{" "}
<span>{window.tr(item.offPrice)}</span>{" "}
<span className="odcir2oo-unit">{window.t("تومان")}</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">
{window.t("سفارشی برای نماش وجود ندارد")}
</div>
)}
</div>
</div>
);
}
}
export default connect(
(state) => ({
list: state.userFactor.list,
}),
{
getList: userFactor.list,
}
)(Orders);