خقثیثقس

master
amir hosein gorji 3 years ago
parent d6c3c29232
commit 6809694c20
  1. 1675
      package-lock.json
  2. 14
      src/Redux/reducers/userFactor.js
  3. 38
      src/views/Orders/index.css
  4. 196
      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,6 +1,3 @@
.order { .order {
width: 100%; width: 100%;
margin-top: 70px; margin-top: 70px;
@ -19,7 +16,7 @@
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 {
@ -28,8 +25,10 @@
.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 {
@ -92,23 +91,27 @@
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 {
@ -119,14 +122,23 @@
} }
.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 {
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 { .order-data-container-item-row4-imgs-img {
width: 100%; width: 100%;
height: 100%; height: 100%;

@ -1,120 +1,54 @@
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: "",
// 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 ( return (
<div className="order"> <div className="order">
<Navbar /> <Navbar />
<div className="order-title">سفارشات من</div> <div className="order-title" align="center">
سفارشات من
</div>
<div className="order-data-container"> <div className="order-data-container">
{data != null && {data != null &&
data.map((item) => ( data.map((item, i) => (
<div className="order-data-container-item"> <div key={i} className="order-data-container-item">
<div className="order-data-container-item-row1"> <div className="order-data-container-item-row1">
<div className="order-data-container-item-row1-order-id"> <div className="order-data-container-item-row1-order-id">
شناسه سفارش: <span>{item.id}</span> شناسه سفارش: <span>{item.id}</span>
</div> </div>
<div className="order-data-container-item-row1-order-status"> <div className="order-data-container-item-row1-order-status">
<div <div
style={ style={{
item.condition == 1 backgroundColor: [0, "#11FA2F", "#11FADB", "#FA3011"][
? { backgroundColor: "#11FA2F" } item.condition
: item.condition == 2 ],
? { backgroundColor: "#11FADB" } }}
: item.condition == 3
? { backgroundColor: "#FA3011" }
: null
}
className="order-data-container-item-row1-order-status-circle" className="order-data-container-item-row1-order-status-circle"
></div> ></div>
<div <div
@ -140,30 +74,47 @@ const Orders=(props)=>{
شناسه پرداخت : <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>{item.payedAt}</span> <span>
{moment(item.payedAt).format("jYYYY/jMM/jDD hh:mm")}
</span>
</div> </div>
</div> </div>
<div className="order-data-container-item-row3">
<div className="order-data-container-item-row3 d-flex">
<div className="order-data-container-item-row3-order-price "> <div className="order-data-container-item-row3-order-price ">
مبلغ : <span>{item.payPrice}</span>{" "} مبلغ : <span>{item.payPrice}</span>{" "}
<span className="odcir2op-unit">تومان</span> <span className="odcir2op-unit">تومان</span>
</div> </div>
{item.offCodePrice != 0 && ( {item.offCodePrice != 0 && (
<div className="order-data-container-item-row3-order-offcodeprice"> <div className="order-data-container-item-row3-order-offcodeprice">
میزان تخفیف : <span>{item.offPrice}</span>{" "} تخفیف : <span>{item.offPrice}</span>{" "}
<span className="odcir2oo-unit">تومان</span> <span className="odcir2oo-unit">تومان</span>
</div> </div>
)} )}
</div> </div>
<div className="order-data-container-item-row4"> <div className="order-data-container-item-row4">
<div className="order-data-container-item-row4-imgs"> <div className="order-data-container-item-row4-imgs">
{item.products.map((item) => ( {item.products.map((item, i) => (
<div className="order-data-container-item-row4-imgs-container"> <div
key={i}
className="order-data-container-item-row4-imgs-container"
>
<img <img
className="order-data-container-item-row4-imgs-img" className="order-data-container-item-row4-imgs-img"
src={`https://dnvn.ir/api/v1/file/${item.book.fileIds.split(",")[0]}`} src={`https://dnvn.ir/api/v1/file/${
alt="order-img" 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>
@ -177,21 +128,12 @@ const Orders=(props)=>{
</div> </div>
); );
} }
const mapStateToPropS = state =>{
return{
list:state.list
} }
export default connect(
(state) => ({
list: state.userFactor.list,
}),
{
getList: userFactor.list,
} }
)(Orders);
const mapDispatchToProps = dispatch =>{
return{
getList:()=> dispatch(userFactor.list())
}
}
export default connect(mapStateToPropS, mapDispatchToProps)(Orders);

24838
yarn.lock

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