master
amir hosein gorji 3 years ago
commit dc578f4ea4
  1. 8
      src/AppRouter.js
  2. 95
      src/views/MyBook2/index.css
  3. 144
      src/views/MyBook2/index.js

@ -33,6 +33,7 @@ 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"; import Orders from "./views/Orders";
import MyBooks2 from "./views/MyBook2";
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -104,6 +105,9 @@ class AppRouter extends Component {
<Route exact path="/orders"> <Route exact path="/orders">
<Orders /> <Orders />
</Route> </Route>
<Route exact path="/mybooks">
<MyBooks2/>
</Route>
{/* <Route path={"/sample"}> {/* <Route path={"/sample"}>
<Sample /> <Sample />
</Route> */} </Route> */}
@ -255,7 +259,7 @@ class AppRouter extends Component {
/> />
)} )}
</Route> </Route>
<Route exact path={"/mybooks"}> {/* <Route exact path={"/mybooks"}>
{mobile ? ( {mobile ? (
status ? ( status ? (
<MyBooks /> <MyBooks />
@ -275,7 +279,7 @@ class AppRouter extends Component {
}} }}
/> />
)} )}
</Route> </Route> */}
<Route exact path={"/ar"}> <Route exact path={"/ar"}>
{mobile ? ( {mobile ? (
status ? ( status ? (

@ -0,0 +1,95 @@
.mybooks{
width: 100%;
padding:0 5px;
margin-top: 60px;
}
.mybooks-title{
width: 100%;
direction: rtl;
font-size: 25px;
font-weight: bold;
color: #5DC964;
}
.mybooks-tabs{
width: 100%;
display: flex;
align-items: center;
direction: rtl;
margin-top: 10px;
}
.mybooks-tabs-item{
width: 50%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
}
.mybooks-tabs-item1{
border-radius: 0 5px 5px 0;
border: 1px solid #418f46;
background-color: white;
color: #5DC964;
}
.mybooks-tabs-item2{
border-radius: 5px 0px 0px 5px;
border: 1px solid #418f46;
background-color: #5DC964;
color: white;
}
.mybooks-line{
width: 100%;
height: 1px;
background-color: rgb(201, 199, 199);
margin-top: 15px;
}
.mybooks-main-content{
width: 100%;
margin-top: 15px;
}
.mybooks-main-content-item{
width: 100%;
}
.mybooks-main-content-row1{
width: 100%;
display: flex;
justify-content: space-between;
direction: ltr;
padding: 15px 0;
border-bottom: 1px solid rgb(201, 199, 199);
}
.mybooks-main-content-row1-img-container{
width: 25%;
height: auto;
border-radius: 5px;
overflow: hidden;
}
.mybooks-main-content-row1-img{
width: 100%;
height: 100%;
}
.mybooks-main-content-row1-text{
width: 80%;
}
.mybooks-main-content-row1-text-name,
.mybooks-main-content-row1-text-activation-date,
.mybooks-main-content-row1-text-activation-code{
width: 100%;
font-size: 16px;
margin-bottom: 10px;
}

@ -1,48 +1,97 @@
import { useState } from 'react'; import { useState } from 'react';
import Navbar from '../Home/Navbar';
import './index.css'; import './index.css';
import moment from "jalali-moment";
const MyBooks=()=>{ const MyBooks2=()=>{
const [data, set_data] = useState([ const [data, set_data] = useState([
{ {
id: 1, id: 291,
name: "ریاضی دهم", pid: null,
activation_date: "1400/05/22", ord: null,
activation_code: "2434df3r3", productId: 3,
ARId: "", userId: 21,
QRId: "", factorId: null,
type: 1, authorId: null,
count: 1,
price: null,
finalPrice: null,
condition: 2,
isActive: 1,
productType: 3,
createdAt: "2021-09-16T14:01:02.180Z",
updatedAt: "2021-09-16T14:01:02.180Z",
activation_code: "2042308",
deletedAt: null,
product: {
bookId: 1,
productType: 3,
price: 0,
ARId: 228,
book: {
id: 1,
name: "علوم تجربی",
category: "دسته بندی",
text: null,
description: null,
publishYear: 1399,
pagesNum: 1,
authorName: "دکتر علی عبدالعالی",
gradeId: 6,
fileIds: "2094",
operators: null,
items: null,
sampleFileId: "2132",
categoryIds: null,
},
},
}, },
{ {
id: 2, id: 170,
name: "ریاضی دهم", pid: null,
activation_date: "1400/05/22", ord: null,
activation_code: "2434df3r3", productId: 36,
ARId: "", userId: 21,
QRId: "", factorId: null,
type: 1, authorId: null,
}, count: 1,
{ price: null,
id: 3, finalPrice: null,
name: "ریاضی دهم", condition: 2,
activation_date: "1400/05/22", isActive: 1,
activation_code: "2434df3r3", productType: 3,
ARId: "", createdAt: "2021-09-12T18:27:57.399Z",
QRId: "", updatedAt: "2021-09-12T18:27:57.399Z",
type: 1, activation_code: "2042308",
}, deletedAt: null,
{ product: {
id: 4, bookId: 12,
name: "ریاضی دهم", productType: 3,
activation_date: "1400/05/22", price: 0,
activation_code: "2434df3r3", ARId: 258,
ARId: "", book: {
QRId: "", id: 12,
type: 1, name: "ریاضی",
category: "دسته بندی",
text: null,
description: null,
publishYear: 1399,
pagesNum: 1,
authorName: "دکتر علی عبدالعالی",
gradeId: 1,
fileIds: "2104",
operators: null,
items: null,
sampleFileId: "2125",
categoryIds: null,
},
},
}, },
]); ]);
return ( return (
<div className="mybooks"> <div className="mybooks">
<Navbar />
<div className="mybooks-title">کتاب های من</div> <div className="mybooks-title">کتاب های من</div>
<div className="mybooks-tabs"> <div className="mybooks-tabs">
<div className="mybooks-tabs-item mybooks-tabs-item1"> <div className="mybooks-tabs-item mybooks-tabs-item1">
@ -52,10 +101,35 @@ const MyBooks=()=>{
</div> </div>
<div className="mybooks-line"></div> <div className="mybooks-line"></div>
<div className="mybooks-main-content"> <div className="mybooks-main-content">
{data.map((item) => (
<div key={item.id} className="mybooks-main-content-item">
<div className="mybooks-main-content-row1">
<div className="mybooks-main-content-row1-img-container">
<img
src={`https://dnvn.ir/api/v1/file/${
item.product.book.fileIds.split(",")[0]
}`}
className="mybooks-main-content-row1-img"
alt="mybook-img"
/>
</div>
<div className="mybooks-main-content-row1-text">
<div className="mybooks-main-content-row1-text-name">
نام آیتم: {item.product.book.name}
</div>
<div className="mybooks-main-content-row1-text-activation-date">
تاریخ فعالسازی: {moment(item.updatedAt).format("YYYY/M/D")}
</div>
<div className="mybooks-main-content-row1-text-activation-code">
کد فعالسازی: {item.activation_code}
</div>
</div>
</div>
</div>
))}
</div> </div>
</div> </div>
); );
} }
export default MyBooks; export default MyBooks2;
Loading…
Cancel
Save