Reza fixed product and cart desktop and mobile version

master
RezaAshrafi77 3 years ago
parent 75016e9540
commit 13345793e6
  1. 2
      src/Redux/actions/public.js
  2. 3
      src/Redux/reducers/public.js
  3. 5
      src/views/AR/Item/index.js
  4. 79
      src/views/AR/index.js
  5. 50
      src/views/Cart/Table/index.scss
  6. 5
      src/views/Cart/index.js
  7. 61
      src/views/Product/index.js
  8. 20
      src/views/Product/index.scss

@ -12,6 +12,8 @@ const publicApi = {
(data = {}, history) => (data = {}, history) =>
async (dispatch) => async (dispatch) =>
await proxy.get("public/contact", data, { history, dispatch }), await proxy.get("public/contact", data, { history, dispatch }),
getArList: (data, history) => async (dispatch) =>
await proxy.get("public/ar", data, { history, dispatch }),
}; };
export default publicApi; export default publicApi;

@ -5,6 +5,7 @@ const initialState = {
error: null, error: null,
searchResult: [], searchResult: [],
contactData: null, contactData: null,
arList: [],
}; };
export default function publicApi(state = initialState, action) { export default function publicApi(state = initialState, action) {
let { type, data } = action; let { type, data } = action;
@ -38,6 +39,8 @@ export default function publicApi(state = initialState, action) {
}; };
case "public/contact": case "public/contact":
return { ...state, loading: false, error: null, contactData: data }; return { ...state, loading: false, error: null, contactData: data };
case "public/ar":
return { ...state, loading: false, error: null, arList: data };
case "loading": case "loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":

@ -26,7 +26,10 @@ export default class Item extends Component {
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<article className="mobile-ar-book d-flex flex-column"> <article className="mobile-ar-book d-flex flex-column">
<a href={`https://ar.dnvn.ir/lunch?id=${data.id}`} target="_blank"> <a href={`https://ar.dnvn.ir/lunch?id=${data.id}`} target="_blank">
<img src={data.imageUrl} alt={data.title} /> <img
src={`https://dnvn.ir/api/v1/file/${data.fileId}`}
alt={data.title}
/>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1> <h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
</a> </a>
</article> </article>

@ -1,15 +1,12 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { connect } from "react-redux";
import { publicApi } from "~/Redux/actions";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Loader from "~/components/Loader/index";
import Item from "./Item/index"; import Item from "./Item/index";
import zist_10 from "~/assets/images/zist-10.png";
import chemistry_10 from "~/assets/images/chemistry-10.png";
import sciense_8 from "~/assets/images/sciense-8.png";
import sciense_7 from "~/assets/images/sciense-7.png";
import sciense_6 from "~/assets/images/sciense-6.png";
import sciense_9 from "~/assets/images/sciense-9.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
@ -21,12 +18,17 @@ const fontSize = {
}, },
}; };
export default class AR extends Component { class AR extends Component {
componentDidMount() {
this.props.getArList();
}
render() { render() {
const { data } = this.props; const { data, arList } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
arList ? (
<> <>
<div className="ar d-flex flex-column align-items-center"> <div className="ar d-flex flex-column align-items-center">
<Navbar /> <Navbar />
@ -34,53 +36,44 @@ export default class AR extends Component {
</div> </div>
<Footer /> <Footer />
</> </>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
arList ? (
<div className="mobile-ar d-flex flex-column"> <div className="mobile-ar d-flex flex-column">
<Navbar /> <Navbar />
<div className="mobile-ar__list d-flex flex-wrap"> <div className="mobile-ar__list d-flex flex-wrap">
{data.map((item, i) => ( {arList.map((item, i) => (
<Item data={item} key={i} /> <Item data={item} key={i} />
))} ))}
</div> </div>
</div> </div>
) : (
<div
className="d-flex justify-content-center align-items-center"
style={{ height: "100vh", width: "100vw" }}
>
<Loader />
</div>
)
) : null} ) : null}
</> </>
); );
} }
} }
AR.defaultProps = { export default connect(
data: [ (state) => ({
{ arList: state.publicApi.arList,
id: 222, }),
title: "دانوین زیست دهم",
imageUrl: zist_10,
},
{
id: 223,
title: "دانوین شیمی نهم",
imageUrl: chemistry_10,
},
{ {
id: 225, getArList: publicApi.getArList,
title: "دانوین علوم نهم", }
imageUrl: sciense_6, )(AR);
},
{
id: 226,
title: "دانوین علوم هشتم",
imageUrl: sciense_8,
},
{
id: 227,
title: "دانوین علوم هفتم",
imageUrl: sciense_7,
},
{
id: 228,
title: "دانوین علوم ششم",
imageUrl: sciense_6,
},
],
};

@ -9,48 +9,52 @@
&__info { &__info {
width: 100%; width: 100%;
margin-left: 10px; margin-left: 10px;
strong, p , span{ strong,
p,
span {
margin: 0px; margin: 0px;
font-family: numeralLight; font-family: numeralLight;
} }
p { p {
color: #00CC69; color: #00cc69;
} }
span { span {
color: #2580EC; color: #2580ec;
} }
&--delete { &--delete {
margin-top: 10px; margin-top: 10px;
} }
} }
} }
.mobile-cart-table-price { .mobile-cart-table-price {
text-align: center; text-align: center;
font-family: numeralLight; font-family: numeralLight;
&__price { &__price {
strong, span{ strong,
span {
font-family: numeralLight; font-family: numeralLight;
} }
strong { strong {
color: #4D4D4F; color: #4d4d4f;
} }
span { span {
color: #4D4D4F; color: #4d4d4f;
letter-spacing: -1px; letter-spacing: -1px;
} }
} }
&__info { &__info {
strong, p , span{ strong,
p,
span {
margin: 0px; margin: 0px;
font-family: numeralLight; font-family: numeralLight;
} }
p { p {
color: #00CC69; color: #00cc69;
} }
span { span {
color: #2580EC; color: #2580ec;
} }
} }
&__counter { &__counter {
@ -61,18 +65,21 @@
button { button {
border: 0px; border: 0px;
background-color: white; background-color: white;
color: #4D4D4F; color: #4d4d4f;
&:focus {
outline: none;
}
} }
span { span {
margin: 0px 15px; margin: 0px 15px;
color: #4D4D4F; color: #4d4d4f;
} }
} }
} }
.MuiTableCell-root { .MuiTableCell-root {
padding: 10px 0px !important; padding: 10px 0px !important;
font-family: numeralLight !important;
} }
.cart-item { .cart-item {
@ -93,19 +100,19 @@
} }
p { p {
font-family: numeralLight; font-family: numeralLight;
color: #00CC69; color: #00cc69;
margin: 0px; margin: 0px;
letter-spacing: -1px; letter-spacing: -1px;
} }
span { span {
font-family: numeralLight; font-family: numeralLight;
color: #2580EC; color: #2580ec;
letter-spacing: -1px; letter-spacing: -1px;
} }
} }
} }
&__price { &__price {
color: #4D4D4F; color: #4d4d4f;
strong { strong {
font-family: numeralBold; font-family: numeralBold;
} }
@ -122,21 +129,22 @@
button { button {
border: 0px; border: 0px;
background-color: white; background-color: white;
color: #4D4D4F; color: #4d4d4f;
&:focus {
outline: none;
}
} }
span { span {
margin: 0px 15px; margin: 0px 15px;
color: #4D4D4F; color: #4d4d4f;
} }
} }
} }
&__delete { &__delete {
margin-left: 20px; margin-left: 20px;
span { span {
font-family: numeralLight; font-family: numeralLight;
color : #FC120A; color: #fc120a;
} }
} }
} }

@ -201,9 +201,10 @@ class Cart extends Component {
<h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1> <h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1>
<div className="d-flex"> <div className="d-flex">
<Table <Table
list={this.state.list} list={list}
handleCounter={this.handleCounter} handleCounter={this.handleCounter}
handleDelete={this.handleDelete} handleDelete={this.handleDelete}
payPrice={payPrice}
/> />
</div> </div>
<div className="mobile-cart__payMethods d-flex flex-column"> <div className="mobile-cart__payMethods d-flex flex-column">
@ -228,7 +229,7 @@ class Cart extends Component {
</h3> </h3>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}> <strong style={{ fontSize: fontSize.mobile.h1 }}>
{this.totalPrice()} {payPrice}
</strong> </strong>
<span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span> <span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
</div> </div>

@ -4,6 +4,7 @@ import { ToastContainer } from "react-toastify";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "~/Redux/actions"; import { book } from "~/Redux/actions";
import { userProduct } from "~/Redux/actions";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
@ -51,8 +52,7 @@ class Product extends Component {
} }
render() { render() {
const { product, sameProducts, supportItems, info, page, loading, list } = const { product, supportItems, info, page } = this.props;
this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
@ -125,38 +125,56 @@ class Product extends Component {
/> />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{info.name}</h1> <h1 style={{ fontSize: fontSize.mobile.h1 }}>{info.name}</h1>
<h2 style={{ fontSize: fontSize.mobile.h2 }}> <h2 style={{ fontSize: fontSize.mobile.h2 }}>
{product.subTitle} {info.category}
</h2> </h2>
<div className="d-flex flex-column mt-3"> <div className="d-flex flex-column mt-3">
<div className="d-flex"> <div className="d-flex">
<Link <Link
to={`/cart`} to={`/products/${
page === "digital"
? `physical/${window.location.pathname.slice(
window.location.pathname.lastIndexOf("/") + 1,
window.location.pathname.length
)}`
: `digital/${window.location.pathname.slice(
window.location.pathname.lastIndexOf("/") + 1,
window.location.pathname.length
)}`
}`}
className="mobile-product__header--digitalButton" className="mobile-product__header--digitalButton"
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
> >
خرید نسخه دیجیتال {page === "digital" ? "کتاب فیزیکی" : "نسخه دیجیتال"}
</Link> </Link>
<Link <Link
to={`/cart`}
className="mobile-product__header--purchase" className="mobile-product__header--purchase"
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
> >
خرید نسخه چاپی مطالعه نمونه کتاب
</Link> </Link>
</div> </div>
<Link <button
to={`/products/${product.id}/sample`} onClick={() =>
this.props.pushToCart({
productId:
page === "digital"
? info.product[0].id
: info.product[1].id,
userId: this.props.id,
count: 1,
})
}
className="mobile-product__header--sampleButton" className="mobile-product__header--sampleButton"
style={{ fontSize: fontSize.mobile.a }} style={{ fontSize: fontSize.mobile.a }}
> >
مطالعه نمونه کتاب افزودن به سبد خرید
</Link> </button>
</div> </div>
</header> </header>
<div className="mobile-product__abstraction d-flex flex-column"> <div className="mobile-product__abstraction d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3> <h3 style={{ fontSize: fontSize.mobile.h3 }}>خلاصه کتاب</h3>
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{product.abstraction} {info.description || "توضیحات محصول خالیست"}
</p> </p>
</div> </div>
<div className="mobile-product__modules d-flex flex-column"> <div className="mobile-product__modules d-flex flex-column">
@ -164,11 +182,11 @@ class Product extends Component {
این کتاب شامل چه مواردی است؟ این کتاب شامل چه مواردی است؟
</h3> </h3>
<ul> <ul>
{product.modules.map((item, i) => ( {/* {product.modules.map((item, i) => (
<React.Fragment key={i}> <React.Fragment key={i}>
<Item item={item} /> <Item item={item} />
</React.Fragment> </React.Fragment>
))} ))} */}
</ul> </ul>
</div> </div>
<div className="mobile-product__tips d-flex flex-column"> <div className="mobile-product__tips d-flex flex-column">
@ -176,16 +194,16 @@ class Product extends Component {
نکاتی که هنگام خرید باید به آن توجه داشته باشید؟ نکاتی که هنگام خرید باید به آن توجه داشته باشید؟
</h3> </h3>
<ul> <ul>
{product.tips.map((item, i) => ( {/* {product.tips.map((item, i) => (
<React.Fragment key={i}> <React.Fragment key={i}>
<Item item={item} /> <Item item={item} />
</React.Fragment> </React.Fragment>
))} ))} */}
</ul> </ul>
</div> </div>
<div className="mobile-product__description d-flex"> <div className="mobile-product__description d-flex">
<p style={{ fontSize: fontSize.mobile.p }}> <p style={{ fontSize: fontSize.mobile.p }}>
{product.description} {info.description}
</p> </p>
</div> </div>
<div className="mobile-product__comments d-flex flex-column"> <div className="mobile-product__comments d-flex flex-column">
@ -193,9 +211,11 @@ class Product extends Component {
نظرات خریداران نظرات خریداران
</h3> </h3>
<div className="mobile-product__comments--list d-flex"> <div className="mobile-product__comments--list d-flex">
{product.comments.map((item, i) => ( {info.comment.length > 0
? info.comment.map((item, i) => (
<Comment comment={item} key={i} /> <Comment comment={item} key={i} />
))} ))
: null}
</div> </div>
</div> </div>
</div> </div>
@ -231,8 +251,9 @@ export default connect(
// status: state.user.status, // status: state.user.status,
loading: state.book.loading, loading: state.book.loading,
list: state.book.list, list: state.book.list,
id: state.user.status.id,
}), }),
{ getInfo: book.info, getList: book.list } { getInfo: book.info, getList: book.list, pushToCart: userProduct.add }
)(Product); )(Product);
Product.defaultProps = { Product.defaultProps = {

@ -37,8 +37,9 @@
&--purchase { &--purchase {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
background-color: #00cc69; color: #c24141 !important;
color: white !important; border: 1px solid #c24141 !important;
border-right: 0px solid white;
flex: 1; flex: 1;
} }
&--digitalButton { &--digitalButton {
@ -50,10 +51,19 @@
} }
&--sampleButton { &--sampleButton {
border-radius: 8px; border-radius: 8px;
border: 1px solid #c24141 !important; background-color: #00cc69;
background-color: white;
color: #c24141 !important;
margin-top: 8px; margin-top: 8px;
border: none;
border: 0px;
font-family: numeralLight;
padding: 10px 0px;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
color: white;
&:focus {
outline: none;
}
} }
} }
&__abstraction { &__abstraction {

Loading…
Cancel
Save