خقثیثقس

master
amir hosein gorji 3 years ago
parent d6c3c29232
commit 6809694c20
  1. 1675
      package-lock.json
  2. 14
      src/Redux/reducers/userFactor.js
  3. 76
      src/views/Orders/index.css
  4. 310
      src/views/Orders/index.js
  5. 24838
      yarn.lock

1675
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -12,17 +12,8 @@ const initialState = {
export default function userFactor(state = initialState, action) { export default function userFactor(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
switch (type) { switch (type) {
case "userFactor/list": case "userFactor/myList":
const checkEmpty = data.filter( return { ...state, loading: false, list: data, error: null };
(item) => item.condition === 2 && item.product.productType === (1 || 3)
);
return {
...state,
loading: false,
list: data,
checkEmpty: checkEmpty.length > 0 ? false : true,
error: null,
};
case "userFactor/info": case "userFactor/info":
return { ...state, loading: false, info: data, error: null }; return { ...state, loading: false, info: data, error: null };
case "userFactor/update": case "userFactor/update":
@ -42,7 +33,6 @@ export default function userFactor(state = initialState, action) {
case "userFactor/loading": case "userFactor/loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "userFactor/error": case "userFactor/error":
console.log("error");
toast.error(data.message); toast.error(data.message);
return { ...state, loading: false, error: data.message }; return { ...state, loading: false, error: data.message };
default: default:

@ -1,7 +1,4 @@
.order {
.order{
width: 100%; width: 100%;
margin-top: 70px; margin-top: 70px;
padding: 0 5px; padding: 0 5px;
@ -14,25 +11,27 @@
margin-top: 10px; margin-top: 10px;
} */ } */
.order-title{ .order-title {
width: 100%; width: 100%;
direction: rtl; direction: rtl;
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
color: #5DC964; color: #5dc964;
} }
.order-data-container{ .order-data-container {
width: 100%; width: 100%;
} }
.order-data-container-item{ .order-data-container-item {
width: 100%; width: 100%;
padding-bottom: 10px; max-width: 700px;
padding: 10px;
border-bottom: 1px solid rgb(201, 199, 199); border-bottom: 1px solid rgb(201, 199, 199);
margin: auto;
} }
.order-data-container-item-row1{ .order-data-container-item-row1 {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -45,7 +44,7 @@
.order-data-container-item-row2-order-date, .order-data-container-item-row2-order-date,
.order-data-container-item-row3-order-price, .order-data-container-item-row3-order-price,
.order-data-container-item-row2-transactionId, .order-data-container-item-row2-transactionId,
.order-data-container-item-row3-order-offcodeprice{ .order-data-container-item-row3-order-offcodeprice {
font-size: 16px; font-size: 16px;
color: #555; color: #555;
direction: rtl; direction: rtl;
@ -54,20 +53,20 @@
.order-data-container-item-row1-order-id span, .order-data-container-item-row1-order-id span,
.order-data-container-item-row2-order-date span, .order-data-container-item-row2-order-date span,
.order-data-container-item-row3-order-price span, .order-data-container-item-row3-order-price span,
.order-data-container-item-row3-order-offcodeprice span{ .order-data-container-item-row3-order-offcodeprice span {
font-size: 16px; font-size: 16px;
color: #333; color: #333;
margin-right: 5px; margin-right: 5px;
direction: ltr !important; direction: ltr !important;
} }
.order-data-container-item-row1-order-status{ .order-data-container-item-row1-order-status {
display: flex; display: flex;
align-items: center; align-items: center;
direction: rtl; direction: rtl;
} }
.order-data-container-item-row1-order-status-circle{ .order-data-container-item-row1-order-status-circle {
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50%; border-radius: 50%;
@ -75,7 +74,7 @@
margin-left: 3px; margin-left: 3px;
} }
.order-data-container-item-row1-order-status-text{ .order-data-container-item-row1-order-status-text {
font-size: 13px; font-size: 13px;
width: 100px; width: 100px;
text-align: center; text-align: center;
@ -84,7 +83,7 @@
border-radius: 5px; border-radius: 5px;
} }
.order-data-container-item-row2{ .order-data-container-item-row2 {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -92,47 +91,60 @@
margin-top: 10px; margin-top: 10px;
} }
.odcir2op-unit,.odcir2oo-unit{ .odcir2op-unit,
.odcir2oo-unit {
font-size: 12px !important; font-size: 12px !important;
margin-right: 3px !important; margin-right: 3px !important;
} }
.order-data-container-item-row3{ .order-data-container-item-row3 {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 8px;
justify-content: space-between;
/* position: relative;
top: -90px;
height: 0px; */
} }
.order-data-container-item-row3-order-offcodeprice{ .order-data-container-item-row3-order-offcodeprice {
margin-top: 10px;
} }
.order-data-container-item-row4 {
.order-data-container-item-row4{
width: 100%; width: 100%;
margin-top: 10px;
} }
.order-data-container-item-row4-imgs{ .order-data-container-item-row4-imgs {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
direction: ltr; direction: ltr;
} }
.order-data-container-item-row4-imgs-container{ .order-data-container-item-row4-imgs-container {
width:18%; width: 8%;
aspect-ratio: 1/1; max-width: 100px;
min-width: 50px;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
background-color: brown;
margin-right: 5px; margin-right: 5px;
} }
.order-data-container-item-row4-imgs-img-count {
.order-data-container-item-row4-imgs-img{ border-radius: 5px;
background-color: #99999999;
color: #fff;
position: relative;
top: -25px;
width: fit-content;
padding: 0 10px;
left: 0;
}
.order-data-container-item-row4-imgs-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.order-message{ .order-message {
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
} }

@ -1,197 +1,139 @@
import { useState } from "react"; import React, { Component } from "react";
import { userFactor } from "../../Redux/actions";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Navbar from "../Home/Navbar"; import Navbar from "../Home/Navbar";
import { userFactor } from "~/Redux/actions";
import "./index.css";
import './index.css'; import moment from "jalali-moment";
const grades = [
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: { class Orders extends Component {
// name: "", componentDidMount() {
// fileId: "", console.log(this.props);
// }, if (!this.props.list) this.props.getList();
// }, }
// { render() {
// id: 2, // props.getList();
// ARId: "", let data = this.props.list;
// book: { console.log(data);
// name: "", return (
// fileId: "", <div className="order">
// }, <Navbar />
// }, <div className="order-title" align="center">
// ], سفارشات من
// }, </div>
// { <div className="order-data-container">
// id: "45679f", {data != null &&
// transactionId: "43448y35", data.map((item, i) => (
// payedAt: "1400/06/24", <div key={i} className="order-data-container-item">
// condition: 2, <div className="order-data-container-item-row1">
// payPrice: 2500000, <div className="order-data-container-item-row1-order-id">
// offPrice: 0, شناسه سفارش: <span>{item.id}</span>
// description: "", </div>
// products: [ <div className="order-data-container-item-row1-order-status">
// { <div
// id: '1', style={{
// ARId: "", backgroundColor: [0, "#11FA2F", "#11FADB", "#FA3011"][
// book: { item.condition
// name: "", ],
// fileId: "", }}
// }, className="order-data-container-item-row1-order-status-circle"
// }, ></div>
// { <div
// id: 2, style={
// ARId: "", item.condition == 1
// book: { ? { backgroundColor: "#B0F8B5", color: "#0F9420" }
// name: "", : item.condition == 2
// fileId: "", ? { backgroundColor: "#B5FFFD", color: "#30C2BD" }
// }, : item.condition == 3
// }, ? { backgroundColor: "#FDC9B6", color: "#FA4C0D" }
// ], : null
// }, }
// { className="order-data-container-item-row1-order-status-text"
// id: "509685f", >
// transactionId: "43448y35", {item.condition == 1 && "در حال پردازش"}
// payedAt: "1400/06/24", {item.condition == 2 && "ارسال شد"}
// condition: 3, {item.condition == 3 && "لغو شد"}
// payPrice: 2500000, </div>
// 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>
</div> <div className="order-data-container-item-row2">
<div className="order-data-container-item-row2"> <div className="order-data-container-item-row2-transactionId">
<div className="order-data-container-item-row2-transactionId"> شناسه پرداخت : <span>{item.transactionId}</span>
شناسه پرداخت : <span>{item.transactionId}</span> </div>
</div> <div className="order-data-container-item-row2-order-date">
<div className="order-data-container-item-row2-order-date"> <span>
تاریخ سفارش : <span>{item.payedAt}</span> {moment(item.payedAt).format("jYYYY/jMM/jDD hh:mm")}
</div> </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> </div>
{item.offCodePrice != 0 && (
<div className="order-data-container-item-row3-order-offcodeprice"> <div className="order-data-container-item-row3 d-flex">
میزان تخفیف : <span>{item.offPrice}</span>{" "} <div className="order-data-container-item-row3-order-price ">
<span className="odcir2oo-unit">تومان</span> مبلغ : <span>{item.payPrice}</span>{" "}
<span className="odcir2op-unit">تومان</span>
</div> </div>
)} {item.offCodePrice != 0 && (
</div> <div className="order-data-container-item-row3-order-offcodeprice">
<div className="order-data-container-item-row4"> تخفیف : <span>{item.offPrice}</span>{" "}
<div className="order-data-container-item-row4-imgs"> <span className="odcir2oo-unit">تومان</span>
{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 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> </div>
</div> ))}
))} {data == null && (
{data == null && ( <div className="order-message">سفارشی برای نماش وجود ندارد</div>
<div className="order-message">سفارشی برای نماش وجود ندارد</div> )}
)} </div>
</div> </div>
</div> );
);
}
const mapStateToPropS = state =>{
return{
list:state.list
} }
} }
export default connect(
const mapDispatchToProps = dispatch =>{ (state) => ({
return{ list: state.userFactor.list,
getList:()=> dispatch(userFactor.list()) }),
{
getList: userFactor.list,
} }
} )(Orders);
export default connect(mapStateToPropS, mapDispatchToProps)(Orders);

24838
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save