reza finished lvl1 cart

temp
Reza_ashrafi 3 years ago
commit ef98869598
  1. 10
      src/assets/icons/delete.svg
  2. 2
      src/components/Button/index.js
  3. 2
      src/components/Checkbox/index.js
  4. 4
      src/components/Product/index.js
  5. 11
      src/views/Product/Desktop/index.js
  6. 15
      src/views/Product/index.js
  7. 4
      src/views/Products/layouts/Main.js
  8. 34
      src/views/ShoppingCart/Product/index.js
  9. 117
      src/views/ShoppingCart/index.js
  10. 25
      tailwind.config.js

@ -0,0 +1,10 @@
<svg id="vuesax_linear_trash" data-name="vuesax/linear/trash" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31">
<g id="trash">
<path id="Vector" d="M23.25.646C18.949.22,14.622,0,10.307,0A76.3,76.3,0,0,0,2.635.388L0,.646" transform="translate(3.875 7.078)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M0,3.836.284,2.144C.491.917.646,0,2.829,0H6.213C8.4,0,8.564.969,8.757,2.157l.284,1.679" transform="translate(10.979 2.583)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M17.7,0l-.84,13.007c-.142,2.028-.258,3.6-3.862,3.6H4.7c-3.6,0-3.72-1.576-3.862-3.6L0,0" transform="translate(6.652 11.806)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-4" data-name="Vector" d="M0,0H4.3" transform="translate(13.343 21.313)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-5" data-name="Vector" d="M0,0H6.458" transform="translate(12.271 16.146)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-6" data-name="Vector" d="M0,0H31V31H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -13,7 +13,7 @@ export default function Button({
}) { }) {
return ( return (
<button <button
className={`rounded-md py-3 justify-center text-sm ${ className={`rounded-md py-3 justify-center text-sm cursor-pointer ${
selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
} ${selectable ? (active ? "text-blueC0" : color) : color} ${ } ${selectable ? (active ? "text-blueC0" : color) : color} ${
selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity

@ -16,7 +16,7 @@ export default function Checkbox(props) {
</svg> </svg>
<div className="checkbox-container"> <div className="checkbox-container">
<input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} /> <input className="checkbox-input" name={String("name")} id="apples" type="checkbox" checked={props.checked} />
<label className="checkbox" htmlFor="apples"> <label className="checkbox" htmlFor="apples">
<span> <span>
<svg width="12px" height="10px"> <svg width="12px" height="10px">

@ -78,7 +78,7 @@ const ProductDesign = ({
<img <img
src={productImg} src={productImg}
alt="" alt=""
className="h-full rounded-lg cursor-pointer py-8" className="h-full rounded-lg cursor-pointer py-5"
onMouseEnter={() => setIsHovering(true)} onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)} onMouseLeave={() => setIsHovering(false)}
/> />
@ -132,7 +132,7 @@ const ProductDesign = ({
<div className="px-2"> <div className="px-2">
<div className="mt-4"> <div className="mt-4">
<h2 <h2
className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`} className={`leading-4 text-xs py-1 ${productTitleColor} ${productTitleAlignment}`}
> >
{productName} {productName}
</h2> </h2>

@ -0,0 +1,11 @@
import React from "react";
const DesktopProductLayout = () =>{
return (
<div className="w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3">
Desktop
</div>
);
};
export default DesktopProductLayout;

@ -8,8 +8,10 @@ import Button from "../../components/Button";
import Header from "../../components/Header"; import Header from "../../components/Header";
import Comment from "./Comment"; import Comment from "./Comment";
import Rate from "./Rate"; import Rate from "./Rate";
import DesktopProductLayout from "./Desktop";
export const Product = ({ export const Product = ({
isMobile,
productType, productType,
getInfo, getInfo,
book, book,
@ -21,14 +23,25 @@ export const Product = ({
setHeaderOptions, setHeaderOptions,
}) => { }) => {
const [type, setType] = useState("physical"); const [type, setType] = useState("physical");
const [desktopContentTransform, setDesktopContentTransform] = useState(false);
useEffect(() => { useEffect(() => {
getInfo({ id: location.getId() }); getInfo({ id: location.getId() });
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
if (!isMobile) {
window.addEventListener("scroll", () => {
if (window.scrollY >= 64) {
setDesktopContentTransform(() => true);
} else {
setDesktopContentTransform(() => false);
}
});
}
}, []); }, []);
return ( return (
<> <>
{/* Portrait */} {/* Portrait */}
{isMobile ? (
<div className="w-full flex flex-col bg-transparent px-4"> <div className="w-full flex flex-col bg-transparent px-4">
<header <header
className={`w-full flex ${ className={`w-full flex ${
@ -161,7 +174,7 @@ export const Product = ({
<Comment key={index} /> <Comment key={index} />
))} ))}
</div> </div>
</div> </div>) : <DesktopProductLayout />}
</> </>
); );
}; };

@ -55,13 +55,13 @@ export const Main = ({ isMobile,
<ul className='flex justify-between w-3/4 px-4 py-0 '> <ul className='flex justify-between w-3/4 px-4 py-0 '>
{ {
filteringNavItems.map(e => ( filteringNavItems.map(e => (
<li className='text-sm rounded py-2 px-6 transition-all hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li> <li className='text-sm rounded py-2 px-6 transition-all duration-700 hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li>
)) ))
} }
</ul> </ul>
</div> </div>
<div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center"> <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between">
{selectedGrade {selectedGrade
? gradeFilterBooks?.map((product, index) => ( ? gradeFilterBooks?.map((product, index) => (
<Product <Product

@ -5,6 +5,7 @@ import { userProduct } from "../../../redux/actions";
// assets // assets
import bookImage from "../../../assets/images/zist-11.svg"; import bookImage from "../../../assets/images/zist-11.svg";
import exitIcon from "../../../assets/icons/exit.svg"; import exitIcon from "../../../assets/icons/exit.svg";
import deleteIcon from "../../../assets/icons/delete.svg";
function Product({ product, grades, pushToCart, isMobile }) { function Product({ product, grades, pushToCart, isMobile }) {
return isMobile ? ( return isMobile ? (
@ -88,21 +89,25 @@ function Product({ product, grades, pushToCart, isMobile }) {
src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds} src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds}
className="rounded-md w-20" className="rounded-md w-20"
/> />
<div className="flex flex-col pr-4"> <div className="flex flex-col pr-4 pt-1">
<strong className="text-sm text-blue5F mb-1 dark:text-white"> <strong className="text-lg text-blue5F mb-1 dark:text-white font-semibold">
{product?.product?.book?.name} {product?.product?.book?.name}
</strong> </strong>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA"> <div className="flex flex-row items-center mt-4">
<span className="w-2 h-2 bg-greenBA rounded-md ml-1"></span>
<div className="text-gray70 text-sm dark:text-greenBA">
{"پایه" + " " + grades[product?.product?.book?.gradeId]} {"پایه" + " " + grades[product?.product?.book?.gradeId]}
</span> </div>
<span className="text-gray70 text-xs mb-1 dark:text-greenBA"> <span className="w-2 h-2 bg-greenBA rounded-md mr-5 ml-1"></span>
<div className="text-gray70 text-sm dark:text-greenBA">
{product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"} {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
</span> </div>
</div>
</div> </div>
</div> </div>
<div className="w-1/4 flex flex-row items-center"> <div className="w-1/4 flex flex-row items-center">
<button <button
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0" className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
onClick={() => onClick={() =>
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,
@ -113,11 +118,11 @@ function Product({ product, grades, pushToCart, isMobile }) {
> >
+ +
</button> </button>
<span className="mx-2.5 font-semibold text-md text-blueC0"> <span className="mx-2.5 font-semibold text-lg text-blueC0">
{product.count} {product.count}
</span> </span>
<button <button
className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0" className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0 text-lg"
onClick={() => onClick={() =>
pushToCart({ pushToCart({
productId: product?.productId, productId: product?.productId,
@ -129,10 +134,15 @@ function Product({ product, grades, pushToCart, isMobile }) {
- -
</button> </button>
</div> </div>
<div className="w-1/4 flex flex-row items-center"> <div className="w-1/4 flex flex-row items-center justify-end pl-4">
<strong className="font-bold text-md text-blue5F dark:text-white"> <strong className="font-semibold text-md text-blue5F dark:text-white">
{product?.product?.price}&nbsp;تومان &nbsp;{product?.product?.price}&nbsp;&nbsp;تومان
</strong> </strong>
<img
src={deleteIcon}
alt="delete"
className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4"
/>
</div> </div>
</div> </div>
); );

@ -10,22 +10,6 @@ import alertIcon from "../../assets/icons/alert.svg";
import { connect } from "react-redux"; import { connect } from "react-redux";
const PriceStatus = ({ name, value, type, isDark }) => {
return (
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-bold text-sm dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value + " " + "تومان"}
</span>
</div>
);
};
function ShoppingCart({ function ShoppingCart({
isDark, isDark,
isMobile, isMobile,
@ -43,8 +27,8 @@ function ShoppingCart({
desktopContentTransform, desktopContentTransform,
}) { }) {
useEffect(() => { useEffect(() => {
// getList(); getList();
// getFactorInfo({ userId }); getFactorInfo({ userId });
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}, []); }, []);
@ -63,13 +47,52 @@ function ShoppingCart({
</strong> </strong>
</header> </header>
<ul className="w-full mt-2 list-none p-0"> <ul className="w-full mt-2 list-none p-0">
{[0,1].map((product, index) => ( {list.map((product, index) => (
<Product key={index} product={product} /> <Product key={index} product={product} />
))} ))}
</ul> </ul>
</div> </div>
); );
}; };
const PriceStatus = ({ name, value, type }) => {
return isMobile ? (
<div className="w-full flex flex-row justify-between py-2">
<strong className="font-light text-sm dark:text-white">{name}</strong>
<span
className="font-bold text-sm dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value + " " + "تومان"}
</span>
</div>
) : (
<div className="w-full flex flex-row justify-between py-4">
<strong className="font-light text-base dark:text-white text-blue5F">
{name}
</strong>
<span
className="font-medium text-xl dark:text-white"
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
>
{value}
<span
style={{
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
}}
className="text-sm mr-2"
>
تومان
</span>
</span>
</div>
);
};
return isMobile ? ( return isMobile ? (
<div className="w-full flex flex-col px-4"> <div className="w-full flex flex-col px-4">
{list.map((product, index) => ( {list.map((product, index) => (
@ -81,19 +104,16 @@ function ShoppingCart({
name="مبلغ سبد خرید" name="مبلغ سبد خرید"
value={factorInfo?.sumPrice} value={factorInfo?.sumPrice}
type="normal" type="normal"
isDark={isDark}
/> />
<PriceStatus <PriceStatus
name="میزان تخفیف" name="میزان تخفیف"
value={factorInfo?.offPrice} value={factorInfo?.offPrice}
type="error" type="error"
isDark={isDark}
/> />
<PriceStatus <PriceStatus
name="مالیات بر ارزش افزوده" name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009} value={factorInfo?.sumPrice * 0.009}
type="error" type="error"
isDark={isDark}
/> />
</div> </div>
<div className="flex flex-row justify-between items-center w-full py-3"> <div className="flex flex-row justify-between items-center w-full py-3">
@ -124,14 +144,61 @@ function ShoppingCart({
</div> </div>
) : ( ) : (
<div <div
className={`w-full flex flex-row relative px-5 ${ className={`w-full flex flex-row relative gap-10 px-5 mt-10 ${
desktopContentTransform ? "top-24" : "" desktopContentTransform ? "top-24" : ""
}`} }`}
> >
<div className="flex flex-col w-3/4 mt-10"> <div className="flex flex-col w-3/4">
<Table /> <Table />
</div> </div>
<div className="flex flex-col w-1/4"></div> <div
className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
style={{ height: "fit-content" }}
>
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
<PriceStatus
name="مبلغ سبد خرید"
value={factorInfo?.sumPrice}
type="normal"
/>
<PriceStatus
name="میزان تخفیف"
value={factorInfo?.offPrice}
type="error"
/>
<PriceStatus
name="مالیات بر ارزش افزوده"
value={factorInfo?.sumPrice * 0.009}
type="error"
/>
</div>
<div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
<strong className="font-medium text-base text-blue5F dark:text-white">
جمع کل سبد خرید
</strong>
<p className="font-medium text-greenBA text-xl dark:text-white">
{factorInfo?.payPrice}
<span className="font-medium text-greenBA text-sm mr-2">تومان</span>
</p>
</div>
<div
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
style={{ backgroundColor: "#196EC01a" }}
>
<img src={alertIcon} className="w-5 ml-2" />
<p className="text-xs text-blueC0 dark:text-white text-justify">
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود
</p>
</div>
<Button
title="ادامه فرایند خرید"
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "1px" }}
width="100%"
color="text-white"
// onClick={() => }
/>
</div>
</div> </div>
); );
} }

@ -20,6 +20,7 @@ module.exports = {
yellow3: "#EFFF00", yellow3: "#EFFF00",
gray36: "#363636", gray36: "#363636",
orange1: "#FF6600", orange1: "#FF6600",
greenBA: "#06BACE",
green1: "#00FF80", green1: "#00FF80",
gray20: "#202020", gray20: "#202020",
gray2077: "#20202077", gray2077: "#20202077",
@ -67,18 +68,18 @@ module.exports = {
greenBA: "#06BACE", greenBA: "#06BACE",
}), }),
fontSize: { fontSize: {
'xs': 'clamp(calc(100vw / 38), 8, 13)', 'xs': 'clamp(9px, 2.78vw, 11px)',
'sm': '.875rem', 'sm': 'clamp(11px, 3.02vw , 13px)',
'tiny': '.875rem', 'tiny': 'clamp(13px,3.28vw, 15px)',
'base': '1rem', 'base': 'clamp(15px, 3.52vw, 17px)',
'lg': '1.125rem', 'lg': 'clamp(17px, 3.76vw, 19px)',
'xl': '1.25rem', 'xl': 'clamp(19px, 4vw, 21px)',
'2xl': '1.5rem', '2xl': 'clamp(21px, 4.24vw, 23px)',
'3xl': '1.875rem', '3xl': 'clamp(23px, 4.48vw, 25px)',
'4xl': '2.25rem', '4xl': 'clamp(25px, 4.72vw, 27px)',
'5xl': '3rem', '5xl': 'clamp(27px, 4.96vw, 29px)',
'6xl': '4rem', '6xl': 'clamp(29px, 5.22vw, 31px)',
'7xl': '5rem', '7xl': 'clamp(31px, 4.46vw, 33px)',
'sm-1': '0.5rem' 'sm-1': '0.5rem'
}, },
extend: { extend: {

Loading…
Cancel
Save