commit(ark_mybooks)

master
alireza khaji 3 years ago
parent d6c3c29232
commit 99f72e42c7
  1. 8
      src/AppRouter.js
  2. 95
      src/views/MyBook2/index.css
  3. 143
      src/views/MyBook2/index.js

@ -33,6 +33,7 @@ import Blog from "./views/Blog/index";
// import Sample from "./views/Sample/index";
import PDF from "./views/PDF/index";
import Orders from "./views/Orders";
import MyBooks2 from "./views/MyBook2";
class AppRouter extends Component {
constructor(props) {
super(props);
@ -104,6 +105,9 @@ class AppRouter extends Component {
<Route exact path="/orders">
<Orders />
</Route>
<Route exact path="/mybooks">
<MyBooks2/>
</Route>
{/* <Route path={"/sample"}>
<Sample />
</Route> */}
@ -255,7 +259,7 @@ class AppRouter extends Component {
/>
)}
</Route>
<Route exact path={"/mybooks"}>
{/* <Route exact path={"/mybooks"}>
{mobile ? (
status ? (
<MyBooks />
@ -275,7 +279,7 @@ class AppRouter extends Component {
}}
/>
)}
</Route>
</Route> */}
<Route exact path={"/ar"}>
{mobile ? (
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,96 @@
import { useState } from 'react';
import Navbar from '../Home/Navbar';
import './index.css';
const MyBooks=()=>{
const MyBooks2=()=>{
const [data, set_data] = useState([
{
id: 1,
name: "ریاضی دهم",
activation_date: "1400/05/22",
activation_code: "2434df3r3",
ARId: "",
QRId: "",
type: 1,
id: 291,
pid: null,
ord: null,
productId: 3,
userId: 21,
factorId: null,
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,
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,
id: 170,
pid: null,
ord: null,
productId: 36,
userId: 21,
factorId: null,
authorId: null,
count: 1,
price: null,
finalPrice: null,
condition: 2,
isActive: 1,
productType: 3,
createdAt: "2021-09-12T18:27:57.399Z",
updatedAt: "2021-09-12T18:27:57.399Z",
activation_code: "2042308",
deletedAt: null,
product: {
bookId: 12,
productType: 3,
price: 0,
ARId: 258,
book: {
id: 12,
name: "ریاضی",
category: "دسته بندی",
text: null,
description: null,
publishYear: 1399,
pagesNum: 1,
authorName: "دکتر علی عبدالعالی",
gradeId: 1,
fileIds: "2104",
operators: null,
items: null,
sampleFileId: "2125",
categoryIds: null,
},
},
},
]);
return (
<div className="mybooks">
<Navbar />
<div className="mybooks-title">کتاب های من</div>
<div className="mybooks-tabs">
<div className="mybooks-tabs-item mybooks-tabs-item1">
@ -52,10 +100,35 @@ const MyBooks=()=>{
</div>
<div className="mybooks-line"></div>
<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">
تاریخ فعالسازی: {item.updatedAt}
</div>
<div className="mybooks-main-content-row1-text-activation-code">
کد فعالسازی: {item.activation_code}
</div>
</div>
</div>
</div>
))}
</div>
</div>
);
}
export default MyBooks;
export default MyBooks2;
Loading…
Cancel
Save