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