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. 116
      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) =>
async (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;

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

@ -26,7 +26,10 @@ export default class Item extends Component {
{window.innerWidth < 1000 ? (
<article className="mobile-ar-book d-flex flex-column">
<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>
</a>
</article>

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

@ -1,142 +1,150 @@
.mobile-cart-table-product{
.mobile-cart-table-product {
width: 100%;
font-family: numeralLight;
img{
img {
height: 100px;
width: 70px;
border-radius: 10px;
}
&__info{
&__info {
width: 100%;
margin-left: 10px;
strong, p , span{
strong,
p,
span {
margin: 0px;
font-family: numeralLight;
}
p{
color: #00CC69;
p {
color: #00cc69;
}
span{
color: #2580EC;
span {
color: #2580ec;
}
&--delete{
&--delete {
margin-top: 10px;
}
}
}
.mobile-cart-table-price{
.mobile-cart-table-price {
text-align: center;
font-family: numeralLight;
&__price{
strong, span{
&__price {
strong,
span {
font-family: numeralLight;
}
strong{
color: #4D4D4F;
strong {
color: #4d4d4f;
}
span{
color: #4D4D4F;
span {
color: #4d4d4f;
letter-spacing: -1px;
}
}
&__info{
strong, p , span{
&__info {
strong,
p,
span {
margin: 0px;
font-family: numeralLight;
}
p{
color: #00CC69;
p {
color: #00cc69;
}
span{
color: #2580EC;
span {
color: #2580ec;
}
}
&__counter{
&__counter {
padding: 5px 5px;
border: 1px solid rgb(177, 177, 177);
border-radius: 8px;
margin-top: 10px;
button{
button {
border: 0px;
background-color: white;
color: #4D4D4F;
color: #4d4d4f;
&:focus {
outline: none;
}
}
span{
span {
margin: 0px 15px;
color: #4D4D4F;
color: #4d4d4f;
}
}
}
.MuiTableCell-root{
.MuiTableCell-root {
padding: 10px 0px !important;
font-family: numeralLight !important;
}
.cart-item{
.cart-item {
// justify-content: space-between;
border-top: 1px solid #eee;
padding: 15px 0px;
&__info{
&__info {
// flex-shrink: 1;
img{
img {
height: 100px;
border-radius: 10px;
margin-left: 10px;
}
div{
strong{
div {
strong {
font-family: numeralBold;
color: #373737;
}
p{
p {
font-family: numeralLight;
color: #00CC69;
color: #00cc69;
margin: 0px;
letter-spacing: -1px;
}
span{
span {
font-family: numeralLight;
color: #2580EC;
color: #2580ec;
letter-spacing: -1px;
}
}
}
&__price{
color: #4D4D4F;
strong{
&__price {
color: #4d4d4f;
strong {
font-family: numeralBold;
}
span{
span {
font-family: numeralLight;
}
}
&__counter{
&__counter {
justify-content: center;
&--box{
&--box {
padding: 5px 10px;
border: 1px solid rgb(177, 177, 177);
border-radius: 8px;
button{
button {
border: 0px;
background-color: white;
color: #4D4D4F;
color: #4d4d4f;
&:focus {
outline: none;
}
span{
}
span {
margin: 0px 15px;
color: #4D4D4F;
color: #4d4d4f;
}
}
}
&__delete{
&__delete {
margin-left: 20px;
span{
span {
font-family: numeralLight;
color : #FC120A;
color: #fc120a;
}
}
}

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

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

@ -37,8 +37,9 @@
&--purchase {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #00cc69;
color: white !important;
color: #c24141 !important;
border: 1px solid #c24141 !important;
border-right: 0px solid white;
flex: 1;
}
&--digitalButton {
@ -50,10 +51,19 @@
}
&--sampleButton {
border-radius: 8px;
border: 1px solid #c24141 !important;
background-color: white;
color: #c24141 !important;
background-color: #00cc69;
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 {

Loading…
Cancel
Save