reza changed product page buttons

temp
Reza_ashrafi 3 years ago
parent fcb2390215
commit 5a84cdb19a
  1. 27
      src/components/ButtonBetween/index.js
  2. 6
      src/router.js
  3. 145
      src/views/Product/index.js

@ -0,0 +1,27 @@
import React from "react";
import { connect } from "react-redux";
export const ButtonBetween = ({ item, status, onClick, width }) => {
return (
<button
className={
"flex justify-between items-center bg-green-50 bg-opacity-80 rounded-sm border-2 border-solid border-green-500"
}
onClick={() => onClick()}
style={{ width, padding : '18px 8px' }}
>
<strong className="text-tiny text-green-700 font-semibold">{item}</strong>
{status && (
<span className="pr-3 border-r border-solid border-green-600 text-tiny text-green-700 font-semibold">
{status}
</span>
)}
</button>
);
};
const mapStateToProps = (state) => ({});
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(ButtonBetween);

@ -130,8 +130,8 @@ function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) {
hamburgerMenu: false,
title: false,
back: true,
menu: true,
bookmark: true,
menu: false,
bookmark: 'productId',
}}
/>
}
@ -196,7 +196,7 @@ function Router({ isDark, isMobile, headerOptions, dialog, menu, setMenu }) {
back: true,
shown: true,
menu: true,
bookmark: true,
bookmark: false,
}}
/>
}

@ -2,19 +2,23 @@ import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { toast } from "react-toastify";
import { book, userProduct, publicApi } from "../../redux/actions";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import proxy from "../../redux/proxy";
import location from "../../utils/location";
import separate from "../../utils/separate";
//components
import Button from "../../components/Button";
import Header from "../../components/Header";
import Comment from "./Comment";
import Rate from "./Rate";
import DesktopProductLayout from "./Desktop";
import Loading from "../../components/Loading";
import ButtonBetween from "../../components/ButtonBetween";
//assets
import arrow from "../../assets/icons/dropdown-blue.svg";
export const Product = ({
isMobile,
productType,
@ -29,6 +33,7 @@ export const Product = ({
}) => {
const [type, setType] = useState("physical");
const [desktopContentTransform, setDesktopContentTransform] = useState(false);
const navigation = useNavigate();
useEffect(() => {
getInfo({ id: location.getId(), vod: true });
@ -43,11 +48,17 @@ export const Product = ({
});
}
}, []);
return (
<>
{/* Portrait */}
{isMobile ? (
<div className="w-full flex flex-col bg-transparent px-4 pb-24">
{!book && (
<div className="w-full h-screen flex justify-center items-center bg-white bg-opacity-20 backdrop-filter backdrop-blur-xl fixed left-0 top-0 z-50">
<Loading size={4} color="bg-green-400" />
</div>
)}
<header
className={`w-full flex ${
productType === "book" ? "flex-row" : "flex-col"
@ -56,13 +67,11 @@ export const Product = ({
<img
src={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
alt=""
className="w-5/12 rounded-md"
className="w-5/12 rounded-sm object-contain"
/>
<div className="flex flex-1 flex-col pr-2 pt-2">
<h1 className="text-blue5F mb-3 font-semibold text-base dark:text-white">
{type === "digital"
? book?.product[0]?.name
: book?.product[1]?.name}
{book?.name}
</h1>
<div className="text-green7B text-tiny dark:text-greenBA">
{"پایه" + " " + grades[book?.gradeId]}
@ -70,7 +79,7 @@ export const Product = ({
</div>
</header>
<ul
className="list-none flex flex-row divide-x items-center mt-4"
className="list-none flex flex-row divide-x items-center mt-5"
style={{ direction: "ltr" }}
>
<li className="border-solid border-blueFE flex-1 flex-shrink-0 text-center text-tiny leading-5 font-medium text-green7B dark:text-white">
@ -83,96 +92,72 @@ export const Product = ({
{book?.rate} <br /> امتیاز
</li>
</ul>
<h2 className="text-green7B text-sm font-semibold mt-7 dark:text-greenBA">
<h2 className="text-green7B text-base font-semibold mt-10 dark:text-greenBA">
نسخه محصول را انتخاب کنید
</h2>
<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",
}}
width="49%"
color={isDark ? "text-white" : "text-blueC0"}
active={type === "physical"}
selectable={true}
onClick={() => setType("physical")}
/>
<Button
title="نسخه دیجیتال"
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "1px",
}}
width="49%"
selectable={true}
active={type === "digital"}
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => setType("digital")}
<div className="w-full flex flex-row justify-between items-center mt-5">
<ButtonBetween
width="100%"
item={"خرید نسخه فیزیکی کتاب"}
status={separate(book?.product[1]?.price) + " " + "تومان"}
onClick={() =>
userId
? pushToCart({
productId: book?.product[1]?.id,
userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
/>
</div>
<div className="w-full flex flex-row justify-between items-center mt-4 gap-2">
<Button
<ButtonBetween
width="72%"
item={"خرید نسخه دیجیتال کتاب"}
status={separate(book?.product[1]?.price) + " " + "تومان"}
onClick={() =>
proxy.status()
userId
? pushToCart({
productId:
type === "digital"
? book?.product[0]?.id
: book?.product[1]?.id,
userId: userId,
productId: book?.product[0]?.id,
userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
title={
"خرید با قیمت" +
" " +
(type === "digital"
? book?.product[0]?.price
: book?.product[1]?.price) +
" " +
"تومان"
}
backgroundColor="bg-blueC0"
border={{ color: "#196EC055", width: "0px" }}
width="65%"
color="text-white"
/>
<a href={`https://dnvn.ir/xpdf/${book?.sampleFileId}`} className="flex-1 py-3 border border-solid border-gray-300 rounded-md text-base font-bold text-blueC0 text-center">
<a
href={`https://dnvn.ir/xpdf/${book?.sampleFileId}`}
className="flex-1 border-2 border-solid border-green-500 bg-green-50 bg-opacity-70 rounded-sm text-tiny font-bold text-green-700 text-center"
style={{ padding: "18px 0px" }}
>
مشاهده نمونه
</a>
{/* <Button
title=""
backgroundColor={isDark ? "bg-transparent" : "bg-white"}
border={{
color: isDark ? "#ffffff55" : "#196EC055",
width: "1px",
}}
width="33%"
color={isDark ? "text-white" : "text-blueC0"}
onClick={() => {}}
/> */}
</div>
<div className="w-full flex flex-row justify-between items-center mt-4">
<Link
to={"/videos/" + book?.id}
className="bg-blueC0 text-green7B dark:text-blueC0 bg-opacity-5 font-semibold text-tiny rounded-md border border-solid border-blueC0 w-full py-3 text-center flex flex-row items-center justify-center"
>
مشاهده دوره ویدیویی این محصول
<img
src={arrow}
alt=""
className="mr-2 transform rotate-90 w-5"
<ButtonBetween
width="72%"
item={"خرید نسخه ویدئویی کتاب"}
status={separate(book?.product[1]?.price) + " " + "تومان"}
onClick={() =>
userId
? pushToCart({
productId: book?.product[2]?.id,
userId,
count: 1,
})
: toast.info("ابتدا وارد حساب کاربری خود شوید.")
}
/>
<ButtonBetween
width="25%"
item={"پیش نمایش"}
onClick={() => navigation('/videos/' + book?.idK)}
/>
</Link>
</div>
<div className="w-full flex flex-col justify-between items-center mt-4">
<div className="w-full flex flex-col justify-between items-center mt-8">
<Header title="توضیحات" link="#" />
<p className="text-sm text-gray70 mt-2 dark:text-white leading-5">
<p className="text-sm text-gray70 mt-2 dark:text-white leading-6">
خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ
ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ
ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ
@ -183,12 +168,12 @@ export const Product = ({
ﺩﺯﺩﯾﺪﻩ ﺍی... ﭘﺲ ﺩﺭ ﺯﻧﺪﮔﯽ ﻓﻘﻂ ﺩﺯﺩﯼ نکن{" "}
</p>
</div>
<div className="w-full flex flex-col justify-between items-center mt-6">
<div className="w-full flex flex-col justify-between items-center mt-10">
<Header title="امتیازات و نظرات" link="#" />
<Rate />
</div>
<div
className="flex flex-row w-full pb-4 mt-6 no-scrollbar"
className="flex flex-row w-full pb-4 mt-10 no-scrollbar"
style={{ overflowX: "scroll" }}
>
{[0, 1, 2, 2].map((comment, index) => (

Loading…
Cancel
Save