خقثیثقس

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) {
let { type, data } = action;
switch (type) {
case "userFactor/list":
const checkEmpty = data.filter(
(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/myList":
return { ...state, loading: false, list: data, error: null };
case "userFactor/info":
return { ...state, loading: false, info: data, error: null };
case "userFactor/update":
@ -42,7 +33,6 @@ export default function userFactor(state = initialState, action) {
case "userFactor/loading":
return { ...state, loading: true };
case "userFactor/error":
console.log("error");
toast.error(data.message);
return { ...state, loading: false, error: data.message };
default:

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

@ -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);

24838
yarn.lock

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