commit(ark_order)

master
alireza khaji 3 years ago
parent 0671058b76
commit eb615986f6
  1. 4
      src/AppRouter.js
  2. 2
      src/Redux/actions/userFactor.js
  3. 2
      src/Redux/reducers/userFactor.js
  4. 0
      src/views/MyBook2/index.css
  5. 61
      src/views/MyBook2/index.js
  6. 138
      src/views/Orders/index.css
  7. 197
      src/views/Orders/index.js

@ -32,6 +32,7 @@ import Blogs from "./views/Blogs/index";
import Blog from "./views/Blog/index"; import Blog from "./views/Blog/index";
// import Sample from "./views/Sample/index"; // import Sample from "./views/Sample/index";
import PDF from "./views/PDF/index"; import PDF from "./views/PDF/index";
import Orders from "./views/Orders";
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -100,6 +101,9 @@ class AppRouter extends Component {
<Route exact path={"/products"}> <Route exact path={"/products"}>
<Products /> <Products />
</Route> </Route>
<Route exact path="/orders">
<Orders />
</Route>
{/* <Route path={"/sample"}> {/* <Route path={"/sample"}>
<Sample /> <Sample />
</Route> */} </Route> */}

@ -3,7 +3,7 @@ const userFactor = {
list: list:
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>
await proxy.get("userFactor/list", data, { dispatch }), await proxy.get("userFactor/myList", data, { dispatch }),
info: info:
(data = {}) => (data = {}) =>
async (dispatch) => async (dispatch) =>

@ -3,7 +3,7 @@ import { toast } from "react-toastify";
const initialState = { const initialState = {
loading: false, loading: false,
error: null, error: null,
list: [], list: null,
info: null, info: null,
sum: null, sum: null,
checkEmpty: false, checkEmpty: false,

@ -0,0 +1,61 @@
import { useState } from 'react';
import './index.css';
const MyBooks=()=>{
const [data, set_data] = useState([
{
id: 1,
name: "ریاضی دهم",
activation_date: "1400/05/22",
activation_code: "2434df3r3",
ARId: "",
QRId: "",
type: 1,
},
{
id: 2,
name: "ریاضی دهم",
activation_date: "1400/05/22",
activation_code: "2434df3r3",
ARId: "",
QRId: "",
type: 1,
},
{
id: 3,
name: "ریاضی دهم",
activation_date: "1400/05/22",
activation_code: "2434df3r3",
ARId: "",
QRId: "",
type: 1,
},
{
id: 4,
name: "ریاضی دهم",
activation_date: "1400/05/22",
activation_code: "2434df3r3",
ARId: "",
QRId: "",
type: 1,
},
]);
return (
<div className="mybooks">
<div className="mybooks-title">کتاب های من</div>
<div className="mybooks-tabs">
<div className="mybooks-tabs-item mybooks-tabs-item1">
فعال سازی شده
</div>
<div className="mybooks-tabs-item mybooks-tabs-item2">دیجیتال</div>
</div>
<div className="mybooks-line"></div>
<div className="mybooks-main-content">
</div>
</div>
);
}
export default MyBooks;

@ -0,0 +1,138 @@
.order{
width: 100%;
margin-top: 70px;
padding: 0 5px;
}
/* .order-line{
width: 100%;
height: 1px;
background-color: rgb(201, 199, 199);
margin-top: 10px;
} */
.order-title{
width: 100%;
direction: rtl;
font-size: 25px;
font-weight: bold;
color: #5DC964;
}
.order-data-container{
width: 100%;
}
.order-data-container-item{
width: 100%;
padding-bottom: 10px;
border-bottom: 1px solid rgb(201, 199, 199);
}
.order-data-container-item-row1{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
direction: rtl;
margin-top: 10px;
}
.order-data-container-item-row1-order-id,
.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{
font-size: 16px;
color: #555;
direction: rtl;
}
.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{
font-size: 16px;
color: #333;
margin-right: 5px;
direction: ltr !important;
}
.order-data-container-item-row1-order-status{
display: flex;
align-items: center;
direction: rtl;
}
.order-data-container-item-row1-order-status-circle{
width: 12px;
height: 12px;
border-radius: 50%;
background-color: black;
margin-left: 3px;
}
.order-data-container-item-row1-order-status-text{
font-size: 13px;
width: 100px;
text-align: center;
padding: 2px 0;
background-color: #999;
border-radius: 5px;
}
.order-data-container-item-row2{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.odcir2op-unit,.odcir2oo-unit{
font-size: 12px !important;
margin-right: 3px !important;
}
.order-data-container-item-row3{
width: 100%;
margin-top: 10px;
}
.order-data-container-item-row3-order-offcodeprice{
margin-top: 10px;
}
.order-data-container-item-row4{
width: 100%;
}
.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;
border-radius: 5px;
overflow: hidden;
background-color: brown;
margin-right: 5px;
}
.order-data-container-item-row4-imgs-img{
width: 100%;
height: 100%;
}
.order-message{
width: 100%;
font-size: 20px;
}

@ -0,0 +1,197 @@
import { useState } from "react";
import { userFactor } from "../../Redux/actions";
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 && "لغو شد"}
</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>
{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) => (
<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>
))}
{data == null && (
<div className="order-message">سفارشی برای نماش وجود ندارد</div>
)}
</div>
</div>
);
}
const mapStateToPropS = state =>{
return{
list:state.list
}
}
const mapDispatchToProps = dispatch =>{
return{
getList:()=> dispatch(userFactor.list())
}
}
export default connect(mapStateToPropS, mapDispatchToProps)(Orders);
Loading…
Cancel
Save