Reza_ashrafi
3 years ago
commit
984374e466
13 changed files with 342 additions and 15 deletions
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 824 B |
@ -0,0 +1,51 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import circleTick from '../../assets/icons/vuesax-linear-tick-circle.svg'; |
||||||
|
import shieldTick from '../../assets/icons/vuesax-linear-shield-tick.svg'; |
||||||
|
import linearGroup from '../../assets/icons/vuesax-linear-group.svg'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const AddToCartCard = ({ |
||||||
|
numberOfSuggest, |
||||||
|
sendingTime, |
||||||
|
button, |
||||||
|
price, |
||||||
|
profit |
||||||
|
}) =>{ |
||||||
|
const specialities = [ |
||||||
|
{ |
||||||
|
icon: circleTick, |
||||||
|
description: ` توصیه به خرید توسط ${numberOfSuggest} نفر`, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: linearGroup, |
||||||
|
description: `زمان ارسال ${sendingTime} روز کاری پس از سفارش`, |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: shieldTick, |
||||||
|
description: `گارانتی اصالت و سلامت فیزیکی`, |
||||||
|
} |
||||||
|
]; |
||||||
|
return( |
||||||
|
<div className="felx flex-col bg-grayF7 p-4 pt-0 w-full mx-4 items-center justify-center"> |
||||||
|
{specialities.map((item, index) => ( |
||||||
|
<div className="flex items-center p-2 w-full border-0 border-b border-solid border-gray-300"> |
||||||
|
{item.icon && <img src={item.icon} className="pl-3" />} |
||||||
|
<p className="text-sm text-blue52 text-right">{item.description}</p> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
<div className="w-full flex flex-col items-center justify-center p-4"> |
||||||
|
<h1 className="text-xl text-gray-500"> |
||||||
|
<span className=" text-blueC0"> {price} </span> |
||||||
|
تومان </h1> |
||||||
|
{ profit && <h5 className="text-xs p-2 pb-0 text-blue52">با خرید این کالا {profit} تومان سود کنید</h5>} |
||||||
|
</div> |
||||||
|
<div className="w-full flex justify-center"> |
||||||
|
{button} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AddToCartCard; |
||||||
@ -0,0 +1,208 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { toast } from "react-toastify"; |
||||||
|
import { book, userProduct, publicApi } from "../../../../redux/actions"; |
||||||
|
import proxy from "../../../../redux/proxy"; |
||||||
|
import location from "../../../../utils/location"; |
||||||
|
import Button from "../../../../components/Button"; |
||||||
|
import Header from "../../../../components/Header"; |
||||||
|
import Comment from "../../Comment"; |
||||||
|
import Rate from "../../Rate"; |
||||||
|
import StarRating from "../../../../components/StarRating"; |
||||||
|
import AddToCartCard from "../../../../components/AddToCart"; |
||||||
|
|
||||||
|
export const ProductOverAll = ({ |
||||||
|
productType, |
||||||
|
getInfo, |
||||||
|
book, |
||||||
|
grades, |
||||||
|
isDark, |
||||||
|
userId, |
||||||
|
pushToCart, |
||||||
|
headerOptions, |
||||||
|
setHeaderOptions, |
||||||
|
}) => { |
||||||
|
const [type, setType] = useState("physical"); |
||||||
|
return ( |
||||||
|
|
||||||
|
<div> |
||||||
|
<header |
||||||
|
className={`w-full flex justify-between`} |
||||||
|
> |
||||||
|
<img |
||||||
|
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`} |
||||||
|
alt="" |
||||||
|
style={{ height: '320px' }} |
||||||
|
className="-md py-8 px-16 bg-grayF4 mx-4" |
||||||
|
/> |
||||||
|
<div className="flex flex-col flex-1 "> |
||||||
|
<div className="flex flex-col pr-2 py-2 border-0 border-b border-solid border-gray-100"> |
||||||
|
<h1 className="text-blue5F mb-3 font-semibold text-xl dark:text-white"> |
||||||
|
{type === "digital" |
||||||
|
? book?.product[0]?.name |
||||||
|
: book?.product[1]?.name} |
||||||
|
</h1> |
||||||
|
<div className="text-blueC0 text-xs dark:text-greenBA"> |
||||||
|
{"پایه" + " " + grades[book?.gradeId]} |
||||||
|
</div> |
||||||
|
<div className="flex float-left justify-end"> |
||||||
|
<div className="p-2"> |
||||||
|
<StarRating /> |
||||||
|
</div> |
||||||
|
<div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400"> |
||||||
|
بیش از 160 نفر امتیاز داده اند |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="py-4 border-0 border-b border-solid border-gray-100"> |
||||||
|
<div className="flex items-center py-2"> |
||||||
|
<h1>نوع کتاب</h1> |
||||||
|
<p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p> |
||||||
|
</div> |
||||||
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
||||||
|
<Button |
||||||
|
title="نسخه فیزیکی" |
||||||
|
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
||||||
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
||||||
|
color={isDark ? "text-white" : "text-blueC0"} |
||||||
|
active={type === "physical"} |
||||||
|
selectable={true} |
||||||
|
onClick={() => setType("physical")} |
||||||
|
borderType='dashed' |
||||||
|
customStyle='' |
||||||
|
twPaddings='py-4 px-12' |
||||||
|
radius={false} |
||||||
|
/> |
||||||
|
<Button |
||||||
|
title="نسخه دیجیتال" |
||||||
|
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
||||||
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
||||||
|
selectable={true} |
||||||
|
active={type === "digital"} |
||||||
|
color={isDark ? "text-white" : "text-blueC0"} |
||||||
|
onClick={() => setType("digital")} |
||||||
|
radius={false} |
||||||
|
twPaddings='py-4 px-12' |
||||||
|
/> |
||||||
|
<Button |
||||||
|
title="مشاهده نمونه" |
||||||
|
backgroundColor={isDark ? "bg-transparent" : "bg-white"} |
||||||
|
border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }} |
||||||
|
radius={false} |
||||||
|
twPaddings='py-4 px-6' |
||||||
|
color={isDark ? "text-white" : "text-red19"} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="flex justify-center py-6"> |
||||||
|
<Button |
||||||
|
title="مشاهده دوره ویدیویی این محصول >" |
||||||
|
backgroundColor={isDark ? "bg-transparent" : "bg-blueC0'"} |
||||||
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "2px" }} |
||||||
|
color={isDark ? "text-white" : "text-blue52"} |
||||||
|
|
||||||
|
selectable={true} |
||||||
|
onClick={() => setType("physical")} |
||||||
|
|
||||||
|
customStyle='bg-black bg-opacity-10' |
||||||
|
twPaddings='py-4 px-32' |
||||||
|
radius={false} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<AddToCartCard
|
||||||
|
price={type === "digital" ? book?.product[0]?.price : book?.product[1]?.price} |
||||||
|
sendingTime={20} |
||||||
|
numberOfSuggest={160} |
||||||
|
profit={12000} |
||||||
|
button={ |
||||||
|
<Button |
||||||
|
onClick={() => |
||||||
|
proxy.status() |
||||||
|
? pushToCart({ |
||||||
|
productId: |
||||||
|
type === "digital" |
||||||
|
? book?.product[0]?.id |
||||||
|
: book?.product[1]?.id, |
||||||
|
userId: userId, |
||||||
|
count: 1, |
||||||
|
}) |
||||||
|
: toast.info("ابتدا وارد حساب کاربری خود شوید.") |
||||||
|
} |
||||||
|
title='افزودن به سبد خرید' |
||||||
|
backgroundColor="bg-blueC0" |
||||||
|
border={{ color: "#196EC055", width: "1px" }} |
||||||
|
width="100%" |
||||||
|
color="text-white" |
||||||
|
twPaddings='py-4' |
||||||
|
/> |
||||||
|
} |
||||||
|
|
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
</header> |
||||||
|
<ul |
||||||
|
className="list-none flex flex-row divide-x items-center mt-4" |
||||||
|
style={{ direction: "ltr" }} |
||||||
|
> |
||||||
|
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
||||||
|
{book?.pagesNum} <br /> صفحه |
||||||
|
</li> |
||||||
|
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
||||||
|
{"فیزیکی - دیجیتالی"} <br /> در دسترس |
||||||
|
</li> |
||||||
|
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-xs font-medium text-blueC0 dark:text-white"> |
||||||
|
{book?.rate} <br /> امتیاز |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<h2 className="text-blueC0 text-sm font-semibold mt-7 dark:text-greenBA"> |
||||||
|
نسخه محصول را انتخاب کنید |
||||||
|
</h2> |
||||||
|
|
||||||
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="w-full flex flex-row justify-between items-center mt-4"> |
||||||
|
<Button |
||||||
|
title="مشاهده دوره ویدئویی این محصول" |
||||||
|
backgroundColor="bg-blueC0" |
||||||
|
border={{ color: "#196EC055", width: "0px" }} |
||||||
|
bgOpacity="bg-opacity-10" |
||||||
|
width="100%" |
||||||
|
color={isDark ? "text-white" : "text-blueC0"} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="w-full flex flex-col justify-between items-center mt-4"> |
||||||
|
<Header title="توضیحات" link="#" /> |
||||||
|
<p className="text-xs text-gray1 mt-2 dark:text-white"> |
||||||
|
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ |
||||||
|
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ |
||||||
|
ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ |
||||||
|
ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ﺩﺍﺩ : ﺩﺭ |
||||||
|
ﺯﻧﺪﮔﯽ ﺩﺭﻭﻍ ﻧﮕﻮ ﭼﺮﺍ ﮐﻪ ﺍﮔﺮ ﮔﻔﺘﯽ ﺻﺪﺍﻗﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﯿﺎﻧﺖ ﻧﮑﻦ ﮐﻪ ﺍﮔﺮ |
||||||
|
ﮐﺮﺩﯼ ﻋﺸﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺧﺸﻮﻧﺖ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﻣﺤﺒﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﻧﺎ ﺣﻖ |
||||||
|
ﻧﮕﻮ ﺍﮔﺮ ﮔﻔﺘﯽ ﺣﻖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ ﺍﯼ، ﺑﯽ ﺣﯿﺎﯾﯽ ﻧﮑﻦ ﺍﮔﺮ ﮐﺮﺩﯼ ﺷﺮﺍﻓﺖ ﺭﺍ ﺩﺯﺩﯾﺪﻩ |
||||||
|
ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
book: state.book.info, |
||||||
|
grades: state.publicApi.grades, |
||||||
|
isDark: state.publicApi.isDark, |
||||||
|
userId: state.user.status.id, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
getInfo: book.info, |
||||||
|
pushToCart: userProduct.add, |
||||||
|
setHeaderOptions: publicApi.setHeaderOptions, |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ProductOverAll); |
||||||
Loading…
Reference in new issue