Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added many options

Browse Source
master
RezaAshrafi77 3 years ago
parent 13345793e6
commit 03bc98379a
43 changed files with 1171 additions and 994 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/AppRouter.js
  2. 3
      src/Redux/actions/book.js
  3. 14
      src/Redux/reducers/book.js
  4. 2
      src/views/About/index.scss
  5. 820
      src/views/About/mobin.js
  6. BIN
      src/views/About/mobin.rar
  7. 4
      src/views/About/reza.js
  8. 4
      src/views/Activation/index.js
  9. 1
      src/views/Activation/index.scss
  10. 33
      src/views/Callback/Status/index.js
  11. 14
      src/views/Callback/Status/index.scss
  12. 299
      src/views/Callback/index.js
  13. 0
      src/views/Callback/index.scss
  14. 3
      src/views/Cart/DeliveryMethod/index.scss
  15. 144
      src/views/Cart/Table/index.js
  16. 2
      src/views/Cart/index.js
  17. 2
      src/views/Cart/index.scss
  18. 2
      src/views/Contact/index.scss
  19. 2
      src/views/Faq/index.scss
  20. 38
      src/views/Home/Navbar/Laptop/index.js
  21. 4
      src/views/Home/Navbar/Laptop/index.scss
  22. 1
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  23. 29
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  24. 5
      src/views/Home/Navbar/Mobile/index.js
  25. 2
      src/views/Home/index.scss
  26. 44
      src/views/Product/BreadCrumb/index.js
  27. 84
      src/views/Product/MaterialModal/index.js
  28. 23
      src/views/Product/MaterialModal/index.scss
  29. 42
      src/views/Product/index.js
  30. 32
      src/views/Product/index.scss
  31. 7
      src/views/Products/BreadCrumb/index.js
  32. 6
      src/views/Products/Product/index.scss
  33. 22
      src/views/Products/index.js
  34. 2
      src/views/Products/index.scss
  35. 89
      src/views/QR/Image/Modal/index.js
  36. 42
      src/views/QR/Image/Modal/index.scss
  37. 197
      src/views/QR/Image/index.js
  38. 73
      src/views/QR/Image/index.scss
  39. 2
      src/views/QR/index.scss
  40. 11
      src/views/QRScan/Modal/index.js
  41. 28
      src/views/QRScan/Modal/index.scss
  42. 15
      src/views/QRScan/index.js
  43. 4
      src/views/QRScan/index.scss

12
src/AppRouter.js
Unescape View File

@ -25,6 +25,7 @@ import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index"; import Cart from "./views/Cart/index";
import MyBooks from "./views/MyBooks/index"; import MyBooks from "./views/MyBooks/index";
import AR from "./views/AR/index"; import AR from "./views/AR/index";
import Callback from "./views/Callback/index";
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
@ -34,14 +35,6 @@ class AppRouter extends Component {
state = {}; state = {};
componentDidMount() {
// if (this.props.profile) {
// return;
// } else {
// this.props.getProfile();
// }
}
render() { render() {
let home = ( let home = (
<Route exact path={"/"}> <Route exact path={"/"}>
@ -83,6 +76,9 @@ class AppRouter extends Component {
/> />
)} )}
</Route> </Route>
<Route exact path={"/callback"}>
<Callback />
</Route>
<Route exact path={"/about"}> <Route exact path={"/about"}>
<About /> <About />
</Route> </Route>

3
src/Redux/actions/book.js
Unescape View File

@ -26,6 +26,9 @@ const book = {
await proxy.delete("book/delete", data); await proxy.delete("book/delete", data);
await proxy.get("book/list", data2, { dispatch }); await proxy.get("book/list", data2, { dispatch });
}, },
searchBook: (data) => async (dispatch) => {
dispatch({ type: "book/search", data: data });
},
}; };
export default book; export default book;

14
src/Redux/reducers/book.js
Unescape View File

@ -3,6 +3,7 @@ const initialState = {
error: null, error: null,
list: null, list: null,
info: null, info: null,
searchResult: [],
}; };
export default function book(state = initialState, action) { export default function book(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
@ -17,7 +18,18 @@ export default function book(state = initialState, action) {
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
case "book/delete": case "book/delete":
return { ...state, loading: false, error: null }; return { ...state, loading: false, error: null };
///////////// case "book/search":
return {
...state,
loading: false,
error: null,
searchResult: state.list.filter(
(item) =>
item.product[0].name.indexOf(data) !== -1 ||
item.product[1].name.indexOf(data) !== -1 ||
item.name.indexOf(data) !== -1
),
};
case "loading": case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":

2
src/views/About/index.scss
Unescape View File

@ -5,7 +5,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 60px;
&__fury { &__fury {
margin-top: 30px; margin-top: 30px;
width: 100%; width: 100%;

820
src/views/About/mobin.js
Unescape View File

@ -1,820 +0,0 @@
//about
let aboutData = {
fury: {
title: "ماموریت ما در دانوین",
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت",
},
keywords: {
title: "کلمات کلیدی ماموریت",
list: [
"کیفیت آموزش",
"جذابیت",
"سازگار با نظام آموزش و پرورش",
"در راستای نیل به سند تحول",
],
},
advantages: {
title: "مزیت رقابت اصلی",
list: [
"بکارگیری بروزترین تکنولوژی های تولید و مدیریت محتوای آموزشی-تربیتی (مانند واقعیت افزوده)",
"دارای رویکرد آموزش سرگرم کننده",
"بستر تعاملی و اشتراک گذاری فیلم و محتوای آموزشی",
"رویکرد معرفتی - ارزشی",
"ویدیوهای منحصر بفرد",
"متن گفتگو محور - روایی- قابل فهم - جذاب و سرگرم کننده",
],
},
};
//ar, images => http://localhost:3000/ar
arData = [
{
id: 222,
title: "دانوین زیست دهم",
imageUrl: zist_10,
},
{
id: 223,
title: "دانوین شیمی نهم",
imageUrl: chemistry_10,
},
{
id: 225,
title: "دانوین علوم نهم",
imageUrl: sciense_6,
},
{
id: 226,
title: "دانوین علوم هشتم",
imageUrl: sciense_8,
},
{
id: 227,
title: "دانوین علوم هفتم",
imageUrl: sciense_7,
},
{
id: 228,
title: "دانوین علوم ششم",
imageUrl: sciense_6,
},
];
//cart
deliveryMethods = [
{
name: "ارسال با پست پیشتاز",
price: 36.891,
},
{
name: "ارسال با پیک موتوری",
price: 36.891,
},
];
//contact
let contactData = {
address: "fdsfds",
cellphone: "32432",
email: "fsdafs",
};
//faq
let messages = [
{
id: 0,
title: "چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 1,
title: "نحوه سفارش برای خارج از کشور چگونه است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 2,
title: "آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 3,
title: "در صورت فراموشی رمزعبور باید چکار کنیم؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
{
id: 4,
title: "امکان بازگشت وجه تا چند روز ممکن است؟",
description:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
active: false,
},
];
//home
let mobileData = [
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 203,
design: "header",
number: 1,
data: [
{
id: 0,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 1,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 2,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: qr,
backgroundColor: {
first: "#2070CBED",
second: "#2070CBED",
angle: "180deg",
},
design: "flex",
title: "QR خوان",
subTitle: "در صفحات کتاب هوشمند",
link: "/qr-scan",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
{
id: 1,
imageUrl: home_ar,
backgroundColor: {
first: "#09DA76",
second: "#056D3B",
angle: "230deg",
},
design: "flex",
title: "واقعیت افزوده",
subTitle: "توضیحات مختصر در این رابطه",
link: "/ar",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: home_chat,
backgroundColor: {
first: "#0AB81B",
second: "#6CFF61",
angle: "110deg",
},
design: "flex",
title: "دانوینی ها",
subTitle: "",
link: "/chatroom",
badge: "5 پیام جدید",
flex: 1.6,
fontSize: "normal",
color: "white",
},
{
id: 1,
imageUrl: myBook,
backgroundColor: {
first: "#9446FCaa",
second: "#9446FCaa",
angle: "180deg",
},
design: "simple",
title: "کتابهای من",
subTitle: "",
justifyContent: "flex-start",
alignItems: "center",
link: "/mybooks",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
height: 160,
data: [
{
id: 0,
imageUrl: homeBlog,
backgroundColor: {
first: "#39BF55",
second: "#39BF4B55",
angle: "110deg",
},
design: "simple",
title: "بلاگ",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/blog",
badge: "",
flex: 1.2,
fontSize: "normal",
color: "white",
},
{
id: 1,
backgroundColor: {
first: "#5DBEFF",
second: "#0483D9",
angle: "180deg",
},
design: "vitrin",
title: "فروشگاه",
subTitle: "",
justifyContent: "flex-start",
alignItems: "center",
books: [
{ id: 0, imageUrl: sciense_6 },
{ id: 1, imageUrl: chemistry_10 },
{ id: 2, imageUrl: sciense_8 },
],
link: "/products",
badge: "",
flex: 2,
fontSize: "large",
color: "white",
},
],
},
{
type: "static",
title: "",
data: [
{
id: 0,
design: "3d",
flex: 1,
subData: [
{
id: 0,
imageUrl: "",
backgroundColor: {
first: "#FC365F",
second: "#7E1B30",
angle: "254deg",
},
design: "simple",
title: "پیشتیبانی",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/contact",
badge: "",
flex: 1,
fontSize: "normal",
color: "white",
},
{
id: 1,
imageUrl: "",
backgroundColor: {
first: "#FFCC00",
second: "#FF9800",
angle: "105deg",
},
design: "simple",
title: "پروفایل",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/profile",
badge: "",
flex: 1,
fontSize: "normal",
color: "white",
},
],
},
{
id: 1,
imageUrl: bookActivation,
backgroundColor: {
first: "#03FCDA7F",
second: "#03FCDA7F",
angle: "180deg",
},
design: "simple",
title: "فعال سازی کتاب",
subTitle: "",
justifyContent: "center",
alignItems: "center",
link: "/activation",
badge: "",
flex: 1,
fontSize: "large",
color: "white",
},
],
},
];
let homeData = [
{
type: "slider",
title: "",
height: window.innerWidth > 1000 ? 370 : 233,
design: "header",
number: 1,
data: [
{
id: 0,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 1,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
{
id: 2,
image: pic1,
width: "100%",
backgroundColor: "rgba(18, 159, 253,0.6)",
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "کاملا تضمینی با نمونه های موفق انفجاری",
link: "",
buttonText: "اطلاعات بیشتر",
},
],
},
{
type: window.innerWidth > 1000 ? "" : "static",
title: "",
height: 150,
data: [
{
image: qr,
width: 48,
link: "",
topText: "QR خوان",
bottomText: "توضیحات مختصر در این رابطه",
},
{
image: ar,
width: 48,
link: "",
topText: "واقعیت افزوده",
bottomText: "توضیحات مختصر در این رابطه",
},
],
},
{
type: window.innerWidth > 1000 ? "static" : "",
title: "",
height: 150,
data: [
{
image: online,
width: 24,
link: "",
topText: "دسترسی به محتوای آموزشی",
bottomText: "از تمامی دستگاهها",
},
{
image: chemistry,
width: 24,
link: "",
topText: " به صورت زنده و جالب انگیز",
bottomText: "آزمایش انجام دهید",
},
{
image: calculator,
width: 24,
link: "",
topText: "به صرفه تر هزینه کنید",
bottomText: "با خرید یکی دوتا ببرید",
},
{
image: homework,
width: 24,
link: "",
topText: "به صورت کاملا تعاملی",
bottomText: "درسهای خود را یاد بگیرید",
},
],
},
{
type: "search",
data: ["همه", "پرفروش"],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "کتاب‌های من",
moreText: "لیست کتاب‌ها",
height: window.innerWidth > 1000 ? 340 : 270,
design: window.innerWidth > 1000 ? "simple" : "myProduct",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
},
],
},
{
type: window.innerWidth < 1000 ? "scroll" : "",
title: "موضوعات",
moreText: "تمام موضوعات",
design: "subjects",
number: 4,
data: [
{ id: 0, name: "علوم طبیعی", backgroundColor: "yellow" },
{ id: 1, name: "شیمی الی", backgroundColor: "red" },
{ id: 2, name: "زمین شناسی", backgroundColor: "blue" },
{ id: 3, name: "ریاضیات", backgroundColor: "purple" },
],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "پرفروش‌ترین کتاب‌های دانوین",
moreText: "لیست کتاب‌ها",
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "simple" : "product",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
{
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "جدیدترین کتاب‌های دانوین",
height: window.innerWidth > 1000 ? 420 : 320,
design: window.innerWidth > 1000 ? "tab" : "product",
number: window.innerWidth > 1000 ? 4 : 3.5,
moreText: "لیست کتاب‌ها",
data: [
{
id: 0,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: sciense_6,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: chemistry_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: sciense_8,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: sciense_9,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: zist_10,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
{
type: "singleBlog",
height: 350,
direction: "rtl",
data: {
id: 0,
image: pic,
video: null,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.",
link: "",
buttonText: "اطلاعات بیشتر",
},
},
{
type: "slider",
title: "بلاگ",
height: "",
design: "blog",
number: window.innerWidth > 1000 ? 3 : 2,
data: [
{
id: 0,
image: blog1,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
date: new Date(),
link: "",
buttonText: "ادامه مطلب",
category: { name: "علمی تخیلی", color: "red" },
duration: "۲۰ دقیقه",
},
{
id: 1,
image: blog2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
date: new Date(),
link: "",
buttonText: "ادامه مطلب",
category: { name: "تاریخی", color: "blue" },
duration: "۲۰ دقیقه",
},
{
id: 2,
image: blog3,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
link: "",
buttonText: "ادامه مطلب",
category: { name: "ورزشی", color: "green" },
duration: "۲۰ دقیقه",
},
{
id: 3,
image: pic,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle:
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه ",
link: "",
buttonText: "ادامه مطلب",
category: { name: "سیاسی", color: "purple" },
duration: "۲۰ دقیقه",
},
],
},
{
type: "membership",
},
];
//product

BIN
src/views/About/mobin.rar
View File

Binary file not shown.

4
src/views/About/reza.js
Unescape View File

@ -1,4 +0,0 @@
//comment modal
//comment for book or bookPage
//user can edit self comment
//trophy

4
src/views/Activation/index.js
Unescape View File

@ -73,7 +73,7 @@ export default class Activation extends Component {
ثبت کد فعال سازی ثبت کد فعال سازی
</button> </button>
</form> </form>
<div className="activation__support d-flex align-center"> {/* <div className="activation__support d-flex align-center">
<span> <span>
<img src={danger} /> <img src={danger} />
</span> </span>
@ -87,7 +87,7 @@ export default class Activation extends Component {
{data.map((item, i) => ( {data.map((item, i) => (
<History data={item} key={i} /> <History data={item} key={i} />
))} ))}
</div> </div> */}
</div> </div>
<Footer /> <Footer />
</> </>

1
src/views/Activation/index.scss
Unescape View File

@ -117,6 +117,7 @@
padding: 0px 10px 40px; padding: 0px 10px 40px;
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
padding-top: 60px;
&__header { &__header {
max-width: 900px; max-width: 900px;
width: 100%; width: 100%;

33
src/views/Callback/Status/index.js
Unescape View File

@ -0,0 +1,33 @@
import React from "react";
import { Link } from "react-router-dom";
import mobileHome from "~/assets/icons/mobileHome.svg";
import "./index.scss";
export default function Status(props) {
const customStyle = {
backgroundColor: props.status ? "#6ada72" : "#ff0000",
borderColor: props.status ? "red" : "green",
};
const textHandler = () => {
return props.status
? "عملیات خرید شما با موفقیت انجام شد."
: "عملیات با موفقیت انجام نشد!";
};
return (
<>
{window.innerWidth < 1000 ? (
<div
className="mobile-callback-status d-flex justify-content-between"
style={customStyle}
>
{textHandler()}
<Link to="/">
<img src={mobileHome} />
</Link>
</div>
) : null}
</>
);
}

14
src/views/Callback/Status/index.scss
Unescape View File

@ -0,0 +1,14 @@
.mobile-callback-status {
flex: 1;
border-radius: 10px;
font-family: numeralLight;
padding: 15px;
margin-bottom: 20px;
color: white;
a {
text-decoration: none;
img {
width: 20px;
}
}
}

299
src/views/Callback/index.js
Unescape View File

@ -0,0 +1,299 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { userProduct } from "~/Redux/actions";
import { ToastContainer } from "react-toastify";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Table from "../Cart/Table/index";
import DiscoutCode from "../Cart/Discount/index";
import DeliveryMethod from "../Cart/DeliveryMethod/index";
import Factor from "../Cart/Factor/index";
import Loader from "~/components/Loader/index";
import Status from "./Status/index";
import sciense_6 from "../../assets/images/sciense-6.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 90,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
},
};
class Callback extends Component {
state = {
selectedDelivery: { name: "", price: 0 },
discount: 0,
totalPrice: null,
list: [
{
id: 0,
title: " گسسته ",
subTitle: " گیرد",
options: "بپشتی",
image: sciense_6,
slicePrice: 200000,
number: 1,
price: 1899900,
},
{
id: 1,
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
image: sciense_6,
slicePrice: 300000,
number: 1,
price: 2500000,
},
{
id: 2,
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
image: sciense_6,
slicePrice: 150000,
number: 1,
price: 1000000,
},
],
};
componentDidMount() {
this.props.getList();
}
handleCounter = (type, id) => {
if (type === "increase") {
this.setState((prevState) => ({
list: prevState.list.map((item) =>
item.id === id ? { ...item, number: item.number + 1 } : item
),
}));
} else {
this.setState((prevState) => ({
list: prevState.list.map((item) =>
item.id === id ? { ...item, number: item.number - 1 } : item
),
}));
}
};
handleDelete = (id) => {
let list = this.state.list.filter((item) => item.id !== id);
this.setState({
list: list,
});
};
totalPrice = () => {
let total = 0;
for (let i = 0; i < this.state.list.length; i++) {
total += this.state.list[i].price * this.state.list[i].number;
}
return total - this.state.discount + this.state.selectedDelivery.price;
};
render() {
const { list, payPrice } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
list ? (
<>
<div className="cart d-flex flex-column">
<Navbar />
<div
className="d-flex"
style={{ width: "100%", flex: 1, marginBottom: 10 }}
>
<section className="cart__right d-flex flex-column">
<header>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
سبد خرید
</h1>
</header>
<Table
list={list}
handleCounter={this.handleCounter}
handleDelete={this.handleDelete}
payPrice={payPrice}
route={"callback"}
/>
</section>
<section className="cart__left d-flex flex-column p-3">
<header className="cart__left--header d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
روشهای ارسال
</h2>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</header>
<DiscoutCode />
<Factor parent={this} />
<div className="cart__totalPrice d-flex align-items-center justify-content-center">
<h3 style={{ fontSize: fontSize.mobile.h2 }}>
جمع کل
<br />
سبد خرید
</h3>
<div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}>
{payPrice}
</strong>
<span style={{ fontSize: fontSize.mobile.h3 }}>
تومان
</span>
</div>
</div>
<div className="cart__left--header d-flex flex-column mt-3">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
روشهای ارسال
</h2>
<p style={{ fontSize: fontSize.desktop.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div>
<button className="cart__left--submit">پرداخت</button>
</section>
</div>
</div>
<Footer />
</>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
{window.innerWidth < 1000 ? (
list ? (
<div className="mobile-cart d-flex flex-column">
<Navbar />
{/* <h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1> */}
<Status status={true} />
<div className="d-flex">
<Table
list={list}
handleCounter={this.handleCounter}
handleDelete={this.handleDelete}
payPrice={payPrice}
route={"callback"}
/>
</div>
{/* <div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div> */}
{/* <DiscoutCode parent={this} /> */}
<Factor parent={this} />
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center mt-2">
<h3 style={{ fontSize: fontSize.mobile.h2 }} className="m-2">
جمع کل
<br />
سبد خرید
</h3>
<div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}>
{payPrice}
</strong>
<span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
</div>
</div>
{/* <div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div> */}
{/* <button className="mobile-cart__submit">پرداخت</button> */}
</div>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null}
<ToastContainer
position="bottom-right"
autoClose={1500}
hideProgressBar={true}
newestOnTop={true}
closeOnClick
rtl={true}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</>
);
}
}
export default connect(
(state) => ({
list: state.userProduct.list,
payPrice: state.userProduct.sum,
}),
{ getList: userProduct.list }
)(Callback);
Callback.defaultProps = {
payMethods: [
{
name: "ارسال با پست پیشتاز",
price: 36.891,
},
{
name: "ارسال با پیک موتوری",
price: 36.891,
},
],
};

0
src/views/Callback/index.scss
Unescape View File

3
src/views/Cart/DeliveryMethod/index.scss
Unescape View File

@ -3,7 +3,8 @@
border-radius: 10px; border-radius: 10px;
border: 1px solid #88a9ff; border: 1px solid #88a9ff;
margin-top: 10px; margin-top: 10px;
width: 48%; flex: 1;
margin: 5px;
h3, h3,
strong, strong,
span { span {

144
src/views/Cart/Table/index.js
Unescape View File

@ -61,7 +61,7 @@ const fontSize = {
function BasicTable(props) { function BasicTable(props) {
const classes = useStyles(); const classes = useStyles();
const { list, handleCounter, handleDelete } = props; const { list, handleCounter, handleDelete, route } = props;
const sum = () => { const sum = () => {
let total = 0; let total = 0;
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
@ -87,6 +87,10 @@ function BasicTable(props) {
<TableRow> <TableRow>
<TableCell align="right">محصولات</TableCell> <TableCell align="right">محصولات</TableCell>
<TableCell align="center">قیمت</TableCell> <TableCell align="center">قیمت</TableCell>
{route === "callback" ? (
<TableCell align="center">تعداد</TableCell>
) : null}
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
@ -99,18 +103,26 @@ function BasicTable(props) {
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route}
/> />
))} ))}
<TableRow> {route === "cart" ? (
<TableCell align="right" component="th" scope="row"> <TableRow>
<span style={{ color: "grey" }}>{sum()} محصول</span> <TableCell
</TableCell> align="right"
<TableCell align="center"> component="th"
<span style={{ color: "grey" }}> scope="row"
مبلغ کل {props.payPrice} ></TableCell>
</span> <TableCell align="center">
</TableCell> <span style={{ color: "grey" }}>
</TableRow> مبلغ کل {props.payPrice}
</span>
</TableCell>
<TableCell align="right" component="th" scope="row">
<span style={{ color: "grey" }}>{sum()} محصول</span>
</TableCell>
</TableRow>
) : null}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
@ -136,6 +148,7 @@ function BasicTable(props) {
info={props.info} info={props.info}
id={props.id} id={props.id}
handleDelete={handleDelete} handleDelete={handleDelete}
route={route}
/> />
))} ))}
<TableRow> <TableRow>
@ -163,7 +176,7 @@ function BasicTable(props) {
} }
const Item = (props) => { const Item = (props) => {
const { data, pushToCart, handleDelete, info, id } = props; const { data, pushToCart, handleDelete, info, id, route } = props;
return ( return (
<> <>
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
@ -188,21 +201,23 @@ const Item = (props) => {
<span style={{ fontSize: fontSize.mobile.info.span }}> <span style={{ fontSize: fontSize.mobile.info.span }}>
{data.product.book.item || "هیچی"} {data.product.book.item || "هیچی"}
</span> </span>
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end"> {route !== "callback" ? (
<DeleteOutlineOutlinedIcon <div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }} <DeleteOutlineOutlinedIcon
onClick={() => handleDelete(data.id)} style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }}
/> onClick={() => handleDelete(data.id)}
<span />
onClick={() => handleDelete(data.id)} <span
style={{ onClick={() => handleDelete(data.id)}
fontSize: fontSize.mobile.delete.span, style={{
color: "#FC120A", fontSize: fontSize.mobile.delete.span,
}} color: "#FC120A",
> }}
حذف >
</span> حذف
</div> </span>
</div>
) : null}
</div> </div>
</div> </div>
</TableCell> </TableCell>
@ -212,41 +227,52 @@ const Item = (props) => {
<strong style={{ fontSize: fontSize.mobile.price.strong }}> <strong style={{ fontSize: fontSize.mobile.price.strong }}>
{data.product.book.price || "1000"} {data.product.book.price || "1000"}
</strong> </strong>
<span style={{ fontSize: fontSize.mobile.price.span }}> {route !== "callback" ? (
{data.product.book.subPrice || "100"} قیمت هر واحد <span style={{ fontSize: fontSize.mobile.price.span }}>
</span> {data.product.book.subPrice || "100"} قیمت هر واحد
</div> </span>
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center"> ) : null}
<button
onClick={() =>
pushToCart({
productId: data.productId,
userId: id,
count: 1,
})
}
style={{ fontSize: fontSize.mobile.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.mobile.counter.span }}>
{data.count}
</span>
<button
onClick={() =>
pushToCart({
productId: data.productId,
userId: id,
count: -1,
})
}
style={{ fontSize: fontSize.mobile.counter.button }}
>
-
</button>
</div> </div>
{route === "cart" ? (
<div className="mobile-cart-table-price__counter d-flex justify-content-around align-items-center">
<button
onClick={() =>
pushToCart({
productId: data.productId,
userId: id,
count: 1,
})
}
style={{ fontSize: fontSize.mobile.counter.button }}
>
+
</button>
<span style={{ fontSize: fontSize.mobile.counter.span }}>
{data.count}
</span>
<button
onClick={() =>
pushToCart({
productId: data.productId,
userId: id,
count: -1,
})
}
style={{ fontSize: fontSize.mobile.counter.button }}
>
-
</button>
</div>
) : null}
</div> </div>
</TableCell> </TableCell>
{route === "callback" ? (
<TableCell>
<strong className="d-flex justify-content-center align-items-center">
{data.count}
</strong>
</TableCell>
) : null}
</TableRow> </TableRow>
) : null} ) : null}
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (

2
src/views/Cart/index.js
Unescape View File

@ -136,6 +136,7 @@ class Cart extends Component {
handleCounter={this.handleCounter} handleCounter={this.handleCounter}
handleDelete={this.handleDelete} handleDelete={this.handleDelete}
payPrice={payPrice} payPrice={payPrice}
route={"cart"}
/> />
</section> </section>
<section className="cart__left d-flex flex-column p-3"> <section className="cart__left d-flex flex-column p-3">
@ -205,6 +206,7 @@ class Cart extends Component {
handleCounter={this.handleCounter} handleCounter={this.handleCounter}
handleDelete={this.handleDelete} handleDelete={this.handleDelete}
payPrice={payPrice} payPrice={payPrice}
route={"cart"}
/> />
</div> </div>
<div className="mobile-cart__payMethods d-flex flex-column"> <div className="mobile-cart__payMethods d-flex flex-column">

2
src/views/Cart/index.scss
Unescape View File

@ -4,7 +4,7 @@
margin: 0px auto; margin: 0px auto;
padding: 0px; padding: 0px;
font-family: numeralLight; font-family: numeralLight;
padding-top: 100px; padding-top: 85px;
&__totalPrice { &__totalPrice {
padding: 20px 0px; padding: 20px 0px;
border-bottom: 1px dotted #a5a5a5; border-bottom: 1px dotted #a5a5a5;

2
src/views/Contact/index.scss
Unescape View File

@ -6,7 +6,7 @@
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
overflow-x: hidden; overflow-x: hidden;
padding-top: 100px; padding-top: 60px;
&__forms { &__forms {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;

2
src/views/Faq/index.scss
Unescape View File

@ -5,7 +5,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 70px;
&__header { &__header {
margin-top: 30px; margin-top: 30px;
width: 600px; width: 600px;

38
src/views/Home/Navbar/Laptop/index.js
Unescape View File

@ -1,4 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import proxy from "~/Redux/proxy";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import logo from "~/assets/icons/logo.png"; import logo from "~/assets/icons/logo.png";
@ -21,9 +22,9 @@ export default class LaptopNavbar extends Component {
return ( return (
<nav className="laptop-navbar d-flex"> <nav className="laptop-navbar d-flex">
<div className="d-flex"> <div className="d-flex">
<div className="laptop-navbar__logo"> <Link to="/" className="laptop-navbar__logo">
<img src={logo} alt="لوگو" /> <img src={logo} alt="لوگو" />
</div> </Link>
<ul className="laptop-navbar__list d-flex"> <ul className="laptop-navbar__list d-flex">
{links.map((item, i) => ( {links.map((item, i) => (
<li style={{ fontSize: fontSize.desktop.li }} key={i}> <li style={{ fontSize: fontSize.desktop.li }} key={i}>
@ -44,21 +45,24 @@ export default class LaptopNavbar extends Component {
<Link to="/cart"> <Link to="/cart">
<img width="30" height="35" src={basket} alt="سبد خرید" /> <img width="30" height="35" src={basket} alt="سبد خرید" />
</Link> </Link>
{proxy.status() ? null : (
<Link <>
style={{ fontSize: fontSize.desktop.a }} <Link
to={"/auth"} style={{ fontSize: fontSize.desktop.a }}
className="laptop-navbar__signin" to={"/auth"}
> className="laptop-navbar__signin"
ورود به حساب کاربری >
</Link> ورود به حساب کاربری
<Link </Link>
style={{ fontSize: fontSize.desktop.a }} <Link
to={"/auth"} style={{ fontSize: fontSize.desktop.a }}
className="laptop-navbar__signup" to={"/auth"}
> className="laptop-navbar__signup"
ثبت نام >
</Link> ثبت نام
</Link>
</>
)}
</div> </div>
</nav> </nav>
); );

4
src/views/Home/Navbar/Laptop/index.scss
Unescape View File

@ -8,6 +8,7 @@
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
padding: 0px 10px 0px 20px; padding: 0px 10px 0px 20px;
max-height: 60px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
width: 0px; width: 0px;
@ -18,6 +19,9 @@
// background : greenyellow; // background : greenyellow;
position: relative; position: relative;
left: 14px; left: 14px;
img {
max-height: 88%;
}
} }
&__list { &__list {
margin: 0px; margin: 0px;

1
src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
Unescape View File

@ -58,6 +58,7 @@ class NavbarDrawer extends Component {
className="navbar-drawer__header--dropdown" className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: true })} onClick={() => this.setState({ dropdown: true })}
> >
<span>25 امتیاز</span>
<KeyboardArrowDownIcon style={{ color: "grey", fontSize: 45 }} /> <KeyboardArrowDownIcon style={{ color: "grey", fontSize: 45 }} />
</div> </div>
)} )}

29
src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
Unescape View File

@ -10,7 +10,7 @@
// background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important; // background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important;
text-align: right !important; text-align: right !important;
direction: rtl; direction: rtl;
padding: 30px 0px 10px 10px; padding: 30px 0px 10px 0px;
&__header { &__header {
height: 60px; height: 60px;
background-color: white; background-color: white;
@ -23,19 +23,26 @@
& h1 { & h1 {
margin-bottom: 0px; margin-bottom: 0px;
font-size: calc(100vw / 22); font-size: calc(100vw / 22);
color: #4D4D4F; color: #4d4d4f;
letter-spacing: -1px; letter-spacing: -1px;
} }
& div { & div {
color: #4D4D4F; color: #4d4d4f;
font-size: calc(100vw / 34); font-size: calc(100vw / 34);
letter-spacing: -1px; letter-spacing: -1px;
} }
} }
&--dropdown{ &--dropdown {
position: absolute; position: absolute;
left: 10px; left: 0px;
top: 10px; top: 10px;
span {
background-color: #6cbe44;
color: white;
padding: 2px 4px;
border-radius: 7px;
font-size: calc(100vw / 27);
}
} }
& img { & img {
width: 100%; width: 100%;
@ -44,23 +51,23 @@
// bottom: 35px; // bottom: 35px;
} }
} }
&__dropdown{ &__dropdown {
width: calc(100vw * 0.8); width: calc(100vw * 0.8);
margin: 10px auto; margin: 10px auto;
.navbar-drawer-user{ .navbar-drawer-user {
padding: 10px 10px; padding: 10px 10px;
width : 100%; width: 100%;
position: relative; position: relative;
&__right{ &__right {
margin-right: 10px; margin-right: 10px;
& h1 { & h1 {
margin-bottom: 0px; margin-bottom: 0px;
font-size: calc(100vw / 22); font-size: calc(100vw / 22);
color: #4D4D4F; color: #4d4d4f;
letter-spacing: -1px; letter-spacing: -1px;
} }
& div { & div {
color: #4D4D4F; color: #4d4d4f;
font-size: calc(100vw / 34); font-size: calc(100vw / 34);
letter-spacing: -1px; letter-spacing: -1px;
} }

5
src/views/Home/Navbar/Mobile/index.js
Unescape View File

@ -70,12 +70,13 @@ export default function MobileNavbar(props) {
> >
<img src={hamburger} alt="منو" /> <img src={hamburger} alt="منو" />
</div> </div>
<div <Link
to="/"
className="mobile-navbar__logo" className="mobile-navbar__logo"
style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }} style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
> >
<img src={logo} alt="لوگو" /> <img src={logo} alt="لوگو" />
</div> </Link>
<div className="mobile-navbar__left"> <div className="mobile-navbar__left">
{page === "home" ? ( {page === "home" ? (
<img src={search} alt="جستجو" /> <img src={search} alt="جستجو" />

2
src/views/Home/index.scss
Unescape View File

@ -4,7 +4,7 @@
margin: 0px auto; margin: 0px auto;
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
padding-top: 100px; padding-top: 60px;
} }
.mobile-home { .mobile-home {

44
src/views/Product/BreadCrumb/index.js
Unescape View File

@ -1,12 +1,12 @@
import React from 'react'; import React from "react";
import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import './index.scss'; import "./index.scss";
function handleClick(event) { function handleClick(event) {
event.preventDefault(); event.preventDefault();
console.info('You clicked a breadcrumb.'); console.info("You clicked a breadcrumb.");
} }
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
@ -14,24 +14,40 @@ const maxMobileSize = 650;
const fontSize = { const fontSize = {
desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25, mobile: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
}; };
export default function ActiveLastBreadcrumb() { export default function ActiveLastBreadcrumb(props) {
const { name } = props;
return ( return (
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs aria-label="breadcrumb">
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}> <Link
محصولات style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
}}
to={"/"}
>
صفحه اصلی
</Link> </Link>
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}> <Link
پایه هفتم style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
}}
to={"/products"}
>
محصولات
</Link> </Link>
<Link <Link
style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}} style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
color: "#00CC69",
}}
to="/products/1" to="/products/1"
onClick={handleClick}
> >
زیست شناسی {name}
</Link> </Link>
</Breadcrumbs> </Breadcrumbs>
); );

84
src/views/Product/MaterialModal/index.js
Unescape View File

@ -0,0 +1,84 @@
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Modal from "@material-ui/core/Modal";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 22,
},
};
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
return {
top: `${50}%`,
left: `${50}%`,
transform: `translate(-${50}%, -${50}%)`,
padding: "10px",
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: "absolute",
width: "100%",
maxWidth: "500px",
backgroundColor: theme.palette.background.paper,
border: "0px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
direction: "rtl",
fontFamily: "numeralLight",
},
}));
export default function SimpleModal(props) {
const classes = useStyles();
// getModalStyle is not a pure function, we roll the style only on the first render
const [modalStyle] = React.useState(getModalStyle);
const body = (
<div style={modalStyle} className={classes.paper}>
<h2
id="simple-modal-title"
style={{
fontSize:
window.innerWidth > 1000 ? fontSize.desktop.h2 : fontSize.mobile.h2,
marginBottom: 20,
color: "#4e4e4e",
letterSpacing: "-1px",
}}
>
کامنت خود را وارد کرده و دکمه ثبت را بزنید.
</h2>
<textarea placeholder="متن پیام" name="description" rows="5"></textarea>
<button style={{ marginTop: 20, borderRadius: 6, padding: 8 }}>
ثبت
</button>
</div>
);
return (
<div>
<Modal
open={props.openComment}
onClose={props.handleOpenComment}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{body}
</Modal>
</div>
);
}

23
src/views/Product/MaterialModal/index.scss
Unescape View File

@ -0,0 +1,23 @@
textarea {
width: 100%;
font-family: numeralLight;
border-radius: 10px;
border: 1px solid #c4c4c5;
padding: 10px 8px;
color: #6f7074;
&::placeholder {
color: #797979;
}
&:focus {
outline: 0px;
}
}
button {
width: 100%;
font-family: numeralLight;
background-color: #00cc69;
color: white;
border: 0px;
margin-top: 20px;
}

42
src/views/Product/index.js
Unescape View File

@ -16,6 +16,7 @@ import AddToCart from "./AddToCart/index";
import HomeScroll from "../Home/HomeScroll/index"; import HomeScroll from "../Home/HomeScroll/index";
import HomeSlider from "../Home/HomeSlider/index"; import HomeSlider from "../Home/HomeSlider/index";
import Loader from "~/components/Loader/index"; import Loader from "~/components/Loader/index";
import MaterialModal from "./MaterialModal/index";
import product_shipping from "~/assets/icons/product-shipping.png"; import product_shipping from "~/assets/icons/product-shipping.png";
import product_cash_back from "~/assets/icons/product-cash-back.png"; import product_cash_back from "~/assets/icons/product-cash-back.png";
@ -41,6 +42,16 @@ const fontSize = {
}, },
}; };
class Product extends Component { class Product extends Component {
state = {
openComment: false,
};
handleOpenComment = () => [
this.setState({
openComment: !this.state.openComment,
}),
];
componentDidMount() { componentDidMount() {
this.props.getInfo({ this.props.getInfo({
id: window.location.pathname.slice( id: window.location.pathname.slice(
@ -60,7 +71,14 @@ class Product extends Component {
<> <>
<div className="product d-flex flex-column"> <div className="product d-flex flex-column">
<Navbar /> <Navbar />
<Breadcrumbs /> <Breadcrumbs
page={page}
name={
page === "digital"
? info.product[0].name
: info.product[1].name
}
/>
<header className="product__header d-flex mt-4"> <header className="product__header d-flex mt-4">
<Gallery gallery={info.files} /> <Gallery gallery={info.files} />
<Info <Info
@ -88,7 +106,7 @@ class Product extends Component {
<h3 style={{ fontSize: fontSize.desktop.h1 }}> <h3 style={{ fontSize: fontSize.desktop.h1 }}>
نظرات خریداران نظرات خریداران
</h3> </h3>
<button> <button onClick={() => this.handleOpenComment()}>
ارسال نظر ارسال نظر
<img src={send_comment} alt="ارسال نظر" /> <img src={send_comment} alt="ارسال نظر" />
</button> </button>
@ -103,6 +121,10 @@ class Product extends Component {
{0 ? <Identifier item={[]} /> : null} {0 ? <Identifier item={[]} /> : null}
</div> </div>
<Footer /> <Footer />
<MaterialModal
openComment={this.state.openComment}
handleOpenComment={this.handleOpenComment}
/>
</> </>
) : ( ) : (
<div <div
@ -207,9 +229,15 @@ class Product extends Component {
</p> </p>
</div> </div>
<div className="mobile-product__comments d-flex flex-column"> <div className="mobile-product__comments d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}> <div className="d-flex justify-content-between align-items-center mb-3">
نظرات خریداران <h3 style={{ fontSize: fontSize.mobile.h3 }}>
</h3> نظرات خریداران
</h3>
<button onClick={() => this.handleOpenComment()}>
ارسال نظر
<img src={send_comment} alt="ارسال نظر" />
</button>
</div>
<div className="mobile-product__comments--list d-flex"> <div className="mobile-product__comments--list d-flex">
{info.comment.length > 0 {info.comment.length > 0
? info.comment.map((item, i) => ( ? info.comment.map((item, i) => (
@ -219,6 +247,10 @@ class Product extends Component {
</div> </div>
</div> </div>
</div> </div>
<MaterialModal
openComment={this.state.openComment}
handleOpenComment={this.handleOpenComment}
/>
</> </>
) : ( ) : (
<div <div

32
src/views/Product/index.scss
Unescape View File

@ -144,11 +144,11 @@
&__comments { &__comments {
max-width: 100%; max-width: 100%;
margin-top: 30px; margin-top: 30px;
h1 { h3 {
font-family: numeralBold; font-family: numeralBold;
color: #6f7074; color: #6f7074;
letter-spacing: -1px; // letter-spacing: -1px;
margin-bottom: 30px; // margin-bottom: 30px;
} }
&--list { &--list {
@ -156,6 +156,27 @@
overflow-x: scroll !important; overflow-x: scroll !important;
transform: translateX(10px); transform: translateX(10px);
} }
button {
position: relative;
background-color: #ffc400;
border: 0px;
border-radius: 5px;
color: white;
font-family: numeralLight;
width: 110px;
text-align: right;
padding: 6px;
// height: 45px;
&:focus {
outline: none;
}
img {
position: absolute;
left: 5px;
top: 6px;
width: 25px;
}
}
} }
} }
@ -167,7 +188,7 @@
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 70px;
&__header { &__header {
margin-top: 30px; margin-top: 30px;
width: 100%; width: 100%;
@ -196,6 +217,9 @@
width: 130px; width: 130px;
text-align: right; text-align: right;
height: 45px; height: 45px;
&:focus {
outline: none;
}
img { img {
position: absolute; position: absolute;
left: 5px; left: 5px;

7
src/views/Products/BreadCrumb/index.js
Unescape View File

@ -21,12 +21,12 @@ export default function ActiveLastBreadcrumb() {
return ( return (
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs aria-label="breadcrumb">
<Link <Link
to={""} to={"/"}
style={{ style={{
fontSize: fontSize:
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
}} }}
onClick={handleClick} // onClick={handleClick}
> >
صفحه اصلی صفحه اصلی
</Link> </Link>
@ -37,8 +37,7 @@ export default function ActiveLastBreadcrumb() {
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile,
color: "#00CC69", color: "#00CC69",
}} }}
// onClick={handleClick}
onClick={handleClick}
> >
محصولات محصولات
</Link> </Link>

6
src/views/Products/Product/index.scss
Unescape View File

@ -26,6 +26,9 @@
border-radius: 7px; border-radius: 7px;
font-family: numeralMedium; font-family: numeralMedium;
text-decoration: none; text-decoration: none;
&:hover {
color: white;
}
} }
&--ar { &--ar {
border: 1px solid #7fc75d; border: 1px solid #7fc75d;
@ -33,6 +36,9 @@
border-radius: 7px; border-radius: 7px;
color: #7fc75d; color: #7fc75d;
margin-top: 10px; margin-top: 10px;
&:hover {
color: #7fc75d;
}
} }
} }

22
src/views/Products/index.js
Unescape View File

@ -28,6 +28,7 @@ const fontSize = {
class Products extends Component { class Products extends Component {
state = { state = {
selectedSort: null, selectedSort: null,
search: null,
selectedFilters: { selectedFilters: {
level: [], level: [],
subject: [], subject: [],
@ -56,6 +57,13 @@ class Products extends Component {
this.props.getList(); this.props.getList();
} }
handleProductSearch = (val) => {
this.setState({
search: val,
});
this.props.searchBook(val);
};
render() { render() {
const { dateFilters, degreeFilters, firstFilters } = this.state; const { dateFilters, degreeFilters, firstFilters } = this.state;
const { loading, list, page } = this.props; const { loading, list, page } = this.props;
@ -99,6 +107,7 @@ class Products extends Component {
type="search" type="search"
style={{ fontSize: fontSize.mobile.input }} style={{ fontSize: fontSize.mobile.input }}
placeholder={"جستجو"} placeholder={"جستجو"}
onChange={(e) => this.handleProductSearch(e.target.value)}
/> />
<img src={navbarSearch} alt="جستجو" /> <img src={navbarSearch} alt="جستجو" />
</div> </div>
@ -115,9 +124,13 @@ class Products extends Component {
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} /> <FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div> </div>
<div className="mobile-products__list d-flex flex-wrap"> <div className="mobile-products__list d-flex flex-wrap">
{list.map((item, i) => ( {this.state.search
<Product product={item} key={i} id={i} /> ? this.props.searchResult.map((item, i) => (
))} <Product product={item} key={i} id={i} />
))
: list.map((item, i) => (
<Product product={item} key={i} id={i} />
))}
</div> </div>
</div> </div>
</> </>
@ -138,10 +151,11 @@ class Products extends Component {
export default connect( export default connect(
(state) => ({ (state) => ({
list: state.book.list, list: state.book.list,
searchResult: state.book.searchResult,
loading: state.book.loading, loading: state.book.loading,
// status: state.user.status, // status: state.user.status,
}), }),
{ getList: book.list } { getList: book.list, searchBook: book.searchBook }
)(Products); )(Products);
Products.defaultProps = { Products.defaultProps = {

2
src/views/Products/index.scss
Unescape View File

@ -5,7 +5,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 70px;
&__body { &__body {
margin-top: 20px; margin-top: 20px;
&--left { &--left {

89
src/views/QR/Image/Modal/index.js
Unescape View File

@ -0,0 +1,89 @@
import React, { useState } from "react";
import ChevronRightRoundedIcon from "@material-ui/icons/ChevronRightRounded";
import ChevronLeftRoundedIcon from "@material-ui/icons/ChevronLeftRounded";
import CloseRoundedIcon from "@material-ui/icons/CloseRounded";
import "./index.scss";
export default function Modal(props) {
const [clientX, setClientX] = useState(100);
const { selectedImage, handleNavigation, setOpen } = props;
const handleTouch = (val) => {
if (val - clientX > 20) {
handleNavigation("left", selectedImage);
} else if (val - clientX < -20) {
handleNavigation("right", selectedImage);
}
};
return (
<>
{window.innerWidth > 1000 ? null : (
<div
className="qr-image-modal d-flex"
onTouchStart={(e) => setClientX(e.touches[0].clientX)}
onTouchEnd={(e) => handleTouch(e.changedTouches[0].clientX)}
>
<CloseRoundedIcon
onClick={() => setOpen(false)}
style={{
fontSize: 50,
color: "red",
position: "fixed",
right: 10,
top: 30,
zIndex: 1000,
}}
/>
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("right", selectedImage)}
>
<ChevronRightRoundedIcon style={{ fontSize: 35, color: "white" }} />
</div>
<img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("left", selectedImage)}
>
<ChevronLeftRoundedIcon style={{ fontSize: 35, color: "white" }} />
</div>
</div>
)}
{window.innerWidth > 1000 ? (
<div
className="qr-image-modal d-flex"
onTouchStart={(e) => setClientX(e.touches[0].clientX)}
onTouchEnd={(e) => handleTouch(e.changedTouches[0].clientX)}
>
<CloseRoundedIcon
onClick={() => setOpen(false)}
style={{
fontSize: 50,
color: "red",
position: "fixed",
right: 10,
top: 30,
zIndex: 1000,
}}
/>
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("right", selectedImage)}
>
<ChevronRightRoundedIcon style={{ fontSize: 55, color: "white" }} />
</div>
<img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("left", selectedImage)}
>
<ChevronLeftRoundedIcon style={{ fontSize: 55, color: "white" }} />
</div>
</div>
) : null}
</>
);
}

42
src/views/QR/Image/Modal/index.scss
Unescape View File

@ -0,0 +1,42 @@
.mobile-qr-image-modal {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
padding: 0px 5px;
z-index: 600;
background-color: rgba(0, 0, 0, 0.938);
&__slide {
width: 35px;
height: 100%;
// background-color: white;
}
& img {
width: calc(100% - 70px);
height: 100%;
object-fit: contain;
margin: 20px 0px;
}
}
.qr-image-modal {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
padding: 0px 100px;
z-index: 600;
background-color: rgba(0, 0, 0, 0.938);
&__slide {
width: 65px;
height: 100%;
// background-color: white;
}
& img {
width: calc(100% - 130px);
height: 100%;
object-fit: contain;
}
}

197
src/views/QR/Image/index.js
Unescape View File

@ -1,34 +1,201 @@
import React, { Component } from "react"; import React, { Component, useState } from "react";
import Modal from "./Modal/index";
import "./index.scss"; import "./index.scss";
const maxMobileSize = 550;
const fontSize = {
mobile: {
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 10,
},
};
export default function QRImage(props) { export default function QRImage(props) {
const list = props.data.fileIds.split(","); const list = props.data.fileIds.split(",");
return ( const [open, setOpen] = useState(null);
<> const [selectedImage, setSelectedImage] = useState(list[0]);
{window.innerWidth < 1000 ? (
(list.length === 1 ? ( const handleNavigation = (direction, item) => {
<div className="mobile-qr-image d-flex"> const position = list.indexOf(item);
const length = list.length;
if (direction === "left") {
if (position < length - 1) {
setSelectedImage(list[position + 1]);
}
} else {
if (position > 0) {
setSelectedImage(list[position - 1]);
}
}
};
const closeModal = (val) => {
console.log(val);
setOpen(false);
};
const mobileImages = () => {
if (list.length === 1) {
return (
<div
className="mobile-qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="mobile-qr-image__single"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 2) {
return (
<div
className="mobile-qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else {
return (
<div className="mobile-qr-image d-flex">
<div className="mobile-qr-image__two mobile-qr-image__more">
<img <img
className="mobile-qr-image__single"
src={`https://dnvn.ir/api/v1/file/${list[0]}`} src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/> />
</div> </div>
) : null, <div className="mobile-qr-image__two mobile-qr-image__more d-flex justify-content-center align-items-center">
list.length !== 2 ? ( <span
<div className="mobile-qr-image d-flex"> style={{ fontSize: fontSize.mobile.span }}
className="d-flex justify-content-center align-items-center"
onClick={() => setOpen(true)}
>
+{list.length - 2}
</span>
<img <img
className="mobile-qr-image__two" className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
/>
</div>
{open ? (
<Modal
setOpen={closeModal}
handleNavigation={handleNavigation}
selectedImage={selectedImage}
/>
) : null}
</div>
);
}
};
const desktopImages = () => {
if (list.length === 1) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="qr-image__single"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 2) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
className="qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else if (list.length === 3) {
return (
<div
className="qr-image d-flex"
// onClick={() => setOpen(true)}
>
<img
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/>
<img
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/>
<img
className="qr-image__three"
src={`https://dnvn.ir/api/v1/file/${list[2]}`}
onClick={() => setOpen(true)}
/>
</div>
);
} else {
return (
<div className="qr-image d-flex">
<div className="qr-image__three qr-image__more">
<img
src={`https://dnvn.ir/api/v1/file/${list[0]}`} src={`https://dnvn.ir/api/v1/file/${list[0]}`}
onClick={() => setOpen(true)}
/> />
</div>
<div className="qr-image__three qr-image__more">
<img <img
className="mobile-qr-image__two"
src={`https://dnvn.ir/api/v1/file/${list[1]}`} src={`https://dnvn.ir/api/v1/file/${list[1]}`}
onClick={() => setOpen(true)}
/> />
</div> </div>
) : null) <div className="qr-image__three qr-image__more d-flex justify-content-center align-items-center">
) : ( <span
<p>reza</p> style={{ fontSize: fontSize.mobile.span }}
)} className="d-flex justify-content-center align-items-center"
onClick={() => setOpen(true)}
>
+{list.length - 3}
</span>
<img src={`https://dnvn.ir/api/v1/file/${list[2]}`} />
</div>
{open ? (
<Modal
setOpen={closeModal}
handleNavigation={handleNavigation}
selectedImage={selectedImage}
/>
) : null}
</div>
);
}
};
return (
<>
{window.innerWidth < 1000 ? mobileImages() : null}
{window.innerWidth > 1000 ? desktopImages() : null}
</> </>
); );
} }

73
src/views/QR/Image/index.scss
Unescape View File

@ -10,4 +10,77 @@
width: 49%; width: 49%;
height: 150px; height: 150px;
} }
&__more {
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
span {
direction: ltr;
font-family: numeralLight;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.767);
color: white;
position: absolute;
left: 0px;
top: 0px;
}
}
}
.qr-image {
width: 100%;
justify-content: space-between;
max-width: 550px;
margin: 20px auto;
&__single {
width: 100%;
border-radius: 10px;
height: 280px;
& img {
object-fit: cover;
}
}
&__two {
width: 49%;
height: 225px;
& img {
object-fit: cover;
}
}
&__three {
width: 32.5%;
height: 180px;
& img {
object-fit: cover;
}
}
&__more {
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
}
span {
direction: ltr;
font-family: numeralLight;
width: 100%;
height: 100%;
z-index: 100;
background-color: rgba(0, 0, 0, 0.767);
color: white;
position: absolute;
left: 0px;
top: 0px;
}
}
} }

2
src/views/QR/index.scss
Unescape View File

@ -147,7 +147,7 @@
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
padding-top: 100px; padding-top: 90px;
&__notAccess { &__notAccess {
justify-content: center; justify-content: center;
h1 { h1 {

11
src/views/QRScan/Modal/index.js
Unescape View File

@ -24,7 +24,16 @@ export default class QRModal extends Component {
{this.props.tail} {this.props.tail}
</Link> </Link>
</div> </div>
) : null} ) : (
<div className="qr-modal d-flex flex-column justify-content-center align-items-center">
<span style={{ fontSize: fontSize.mobile.span }}>
اسکن کد QR موفقیت آمیز بود.
</span>
<Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}>
{this.props.tail}
</Link>
</div>
)}
</> </>
); );
} }

28
src/views/QRScan/Modal/index.scss
Unescape View File

@ -26,6 +26,34 @@
} }
} }
.qr-modal {
position: fixed;
left: 0px;
background-color: rgba(0, 0, 0, 0.925);
top: 0px;
width: 100vw;
height: 100vh;
z-index: 500;
animation-name: qrModal;
animation-duration: 0.4s;
span {
font-family: numeralLight;
color: white;
}
a {
text-decoration: none;
width: 50%;
margin: 25px auto;
background-color: #00cc69;
border: 2px solid white;
padding: 20px 0px;
text-align: center;
color: white;
font-family: numeralLight;
border-radius: 25px;
}
}
@keyframes qrModal { @keyframes qrModal {
0% { 0% {
left: -100vw; left: -100vw;

15
src/views/QRScan/index.js
Unescape View File

@ -29,7 +29,7 @@ class QRScan extends Component {
state = { state = {
value: null, value: null,
facingMode: 0, facingMode: 0,
tail: null, tail: "Zist13-10",
}; };
async componentDidUpdate() { async componentDidUpdate() {
@ -83,19 +83,8 @@ class QRScan extends Component {
)} )}
</section> </section>
{this.state.tail === null ? null : ( {this.state.tail === null ? null : (
<Link to={"/qr"} style={{ fontSize: fontSize.desktop.p }}> <Modal tail={this.state.tail} />
{this.state.tail}
</Link>
)} )}
<p
style={{ fontSize: fontSize.desktop.p }}
className="qr-scan__box--text d-flex"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و
مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای
</p>
</div> </div>
</div> </div>
<Footer /> <Footer />

4
src/views/QRScan/index.scss
Unescape View File

@ -128,7 +128,7 @@
padding: 0px 10px; padding: 0px 10px;
direction: rtl; direction: rtl;
overflow-x: hidden; overflow-x: hidden;
padding-top: 110px; padding-top: 80px;
&__back { &__back {
justify-content: flex-start; justify-content: flex-start;
a { a {
@ -181,6 +181,8 @@
&--camera { &--camera {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
max-width: 300px;
margin: 0px auto 40px;
* { * {
border-radius: 10px; border-radius: 10px;
} }

Write Preview
Loading…
Cancel
Save