pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

some mobile setting

Browse Source
main
alireza khaji 3 years ago
parent 119552b7dd
commit bce548d063
7 changed files with 255 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      src/components/Product/index.js
  2. 89
      src/components/ShoppingCart/index.js
  3. 8
      src/redux/actions/userProduct.js
  4. 24
      src/view/my-services/MyServices.js
  5. 67
      src/view/services/PaymentBox.js
  6. 72
      src/view/services/index.css
  7. 75
      src/view/services/index.js

18
src/components/Product/index.js
Unescape View File

@ -83,9 +83,7 @@ const ProductDesign = ({
if (catId == 3) {
return (
<div
className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full m-4 border border-red82OP${
isMobile && "w-11/12"
}`}
className={`flex flex-col pt-4 text-right rounded-xl justify-start w-full mt-3 border border-red82OP`}
style={{ width: !isMobile && "100%", direction: "rtl" }}
>
<div className="border-b border-red82OP pb-2 px-4 ">
@ -104,14 +102,16 @@ const ProductDesign = ({
<div className="flex border-b border-red82OP px-4 py-2">
<div>
<h1 className="font-bold text-red26">استاد : {teacher}</h1>
<h1 className="font-bold text-red26">
استاد : {product?.teacherName}
</h1>
</div>
</div>
<div
className="flex border-b border-red82OP px-4 py-2 text-red26"
// onClick={onClick}
>
<h1>نوع گروه : A</h1>
<h1>نوع گروه : {product?.productType===4 ?"حضوری":"آنلاین"}</h1>
</div>
<div className="flex p-4 justify-between items-center">
@ -187,7 +187,7 @@ const ProductDesign = ({
</h1>
<p
className={`font-bold ${
isMobile ? "text-xs text-center" : "text-sm "
isMobile ? "text-xs text-right px-2" : "text-sm "
} text-red26 border-b border-red82OP py-2`}
>
آدرس: {product?.address}
@ -196,7 +196,7 @@ const ProductDesign = ({
<div
className={`border-l font-bold text-red26 ${
isMobile
? "flex justify-center items-center w-1/2 text-xs"
? "flex px-2 items-center w-full text-xs"
: " w-1/4 p-2 pr-0 text-sm"
} border-red82OP `}
>
@ -276,7 +276,7 @@ const ProductDesign = ({
</div>
<div
className={`flex px-4 ${
isMobile ? "w-full border-red82OP border-t" : "w-2/5 py-4"
isMobile ? "w-full border-red82OP border-t px-1" : "w-2/5 py-4"
} justify-between items-center`}
>
<h1
@ -287,7 +287,7 @@ const ProductDesign = ({
>
{productPrice} تومان
</h1>
<div>
<div style={isMobile ? {width:"100%",display:'flex',justifyContent:'center'}:null}>
{!rulesAccepted && (
<Link
to="/register"

89
src/components/ShoppingCart/index.js
Unescape View File

@ -11,6 +11,9 @@ import alertIcon from "../../assets/img/alert.svg";
import { connect } from "react-redux";
import separate from "../../utils/separate";
import PaymentBox from "../../view/services/PaymentBox";
import { useLocation } from "react-router-dom";
import { toast } from "react-toastify";
function ShoppingCart({
isDark,
@ -32,11 +35,52 @@ function ShoppingCart({
pushSchoolToCart,
paySchool,
setShowPaymentBox,
showPaymentBox,
}) {
const [phase, setPhase] = useState("products");
const [showPaymentBoxM, setShowPaymentBoxM] = useState(false);
//handle payment response------------
let search = useLocation().search;
let query = Object.fromEntries(new URLSearchParams(search));
useEffect(() => {
getList();
if (query.status && window.innerWidth<1000) {
if (query.status === "OK") {
toast.success("پرداخت با موفقیت انجام شد");
} else {
toast.error(
`عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} می‌باشد`
);
// fireAlert({
// title: "پرداخت ناموفق",
// text: `عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} می‌باشد`,
// confirmButtonText: "توضیح بیشتر",
// showCancelButton: true,
// cancelButtonText: "متوجه شدم",
// showCloseButton: false,
// customClass: {
// title: "title-error-7",
// closeButton: "close-button-7",
// confirmButton: "confirm-button-7",
// cancelButton: "cancle-button7",
// },
// });
}
setShowPaymentBox(true);
}
}, []);
//----------------------------------------------
//--------------------------------------
useEffect(() => {
getList(
{
condition: 0,
},
{
condition: 0,
}
);
getFactorInfo({ userId });
setHeaderOptions(headerOptions);
}, []);
@ -45,11 +89,17 @@ function ShoppingCart({
//payHandler---------------------------------------
const payHandler = () => {
if(window.innerWidth<1000){
alert("hoooo");
setShowPaymentBoxM(true);
}else{
setShowPaymentBox(true);
}
};
return isMobile ? (
// ============================== mobile ========================================
<div
className="w-full flex flex-col justify-between items-center bg-gray-200 rtl left-0 pt-[3.5%]"
className="w-full flex flex-col justify-between items-center bg-gray-200 rtl left-0 pt-[13.5%]"
style={{ height: "100vh" }}
>
<div
@ -77,7 +127,11 @@ function ShoppingCart({
</div>
<button
className="w-full px-1 h-12 mt-1 text-white bg-red52 rounded-lg text-sm font-semibold"
onClick={() => paySchool()}
onClick={() =>
paySchool({
redirectUrl: "http://localhost:3000/myServices",
})
}
>
پرداخت مستقیم به حساب مدرسه با مبلغ {separate(school.price)}{" "}
تومان
@ -168,24 +222,25 @@ function ShoppingCart({
<p>جمع مبالغ خدمات</p>
<p>{factorInfo?.sumPrice} تومان</p>
</div>
{factorInfo?.offPrice && (
<div className="flex justify-between w-full py-2 text-red26 text-lg ">
<p> تخفیف </p>
<p> {factorInfo?.offPrice} - تومان</p>
</div>
)}
</div>
<Button
title={`پرداخت هزینه : ${
factorInfo?.payPrice ? separate(factorInfo?.payPrice) : 0
} تومان`}
borderType="rounded-xl"
className="h-16 w-full mx-none text-xl"
onClick={() => payFactor()}
/>
<div
className="w-full h-12 rounded-lg text-white text-xl bg-red52 flex items-center justify-center"
onClick={payHandler}
>
پرداخت {factorInfo?.payPrice ? separate(factorInfo?.payPrice) : 0}
</div>
</div>
{/* --------------payment-box------------------------------------- */}
{showPaymentBoxM && (
<PaymentBox setShowPaymentBox={setShowPaymentBoxM} query={query} />
)}
</div>
) : (
// ==============================desktop========================================
<div className="ccc w-full h-full flex flex-col justify-between items-center bg-gray-100 left-0 pt-14">
<div
className={`w-full flex items-center flex-col h-[60%] overflow-y-auto`}
@ -210,7 +265,11 @@ function ShoppingCart({
<button
className="w-full px-1 h-12 mt-1 text-white bg-red52 rounded-lg font-semibold"
style={{ fontSize: "0.65vw" }}
onClick={() => paySchool()}
onClick={() =>
paySchool({
redirectUrl: "http://localhost:3000/myServices",
})
}
>
پرداخت مستقیم به حساب مدرسه با مبلغ {separate(school.price)}{" "}
تومان
@ -301,12 +360,10 @@ function ShoppingCart({
<p>جمع مبالغ خدمات</p>
<p>{factorInfo?.sumPrice} تومان</p>
</div>
{factorInfo?.offPrice && (
<div className="flex justify-between w-full py-2 text-red26 text-lg ">
<p> تخفیف </p>
<p> {factorInfo?.offPrice} - تومان</p>
</div>
)}
</div>
<Button
title={`پرداخت هزینه : ${

8
src/redux/actions/userProduct.js
Unescape View File

@ -14,26 +14,26 @@ const userProduct = {
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.put("userProduct/update", data);
await proxy.get("userProduct/list", data2, { dispatch });
await proxy.get("userProduct/list", { condition: 0 }, { dispatch });
},
add:
(data = {}, data2 = {}, data3 = {}) =>
async (dispatch) => {
await proxy.post("userProduct/add", data, { dispatch });
await proxy.get("userProduct/list", data2, { dispatch });
await proxy.get("userProduct/list", {condition:0}, { dispatch });
await proxy.get("userFactor/info", data3, { dispatch });
},
del:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.delete("userProduct/delete", data);
await proxy.get("userProduct/list", data2, { dispatch });
await proxy.get("userProduct/list", { condition: 0 }, { dispatch });
},
addSchool:
(data = {}, data2 = {}) =>
async (dispatch) => {
await proxy.post('userProduct/addSchool', data, {dispatch});
await proxy.get('userProduct/listSchool', data2, {dispatch});
await proxy.get("userProduct/listSchool", { condition: 0 }, { dispatch });
}
};

24
src/view/my-services/MyServices.js
Unescape View File

@ -3,20 +3,38 @@ import Exams from "./Exams";
import MyCourse from "./MyCourse";
import MyOrders from "./MyOrders";
import MyRegisters from "./MyRegisters";
import {useState} from "react";
import {useEffect, useState} from "react";
import FutureExams from "./FutureExams";
import ResultExams from "./ResultExams";
import Calendar2 from "../../components/Calendar2/Calendar2";
import { toast } from "react-toastify";
import { useLocation } from "react-router-dom";
const MyServices=()=>{
//handle payment response------------
let search = useLocation().search;
let query = Object.fromEntries(new URLSearchParams(search));
useEffect(() => {
if (query.status) {
if (query.status === "OK") {
toast.success("پرداخت با موفقیت انجام شد");
} else {
toast.error(
`عملیات پرداخت موفق نبود. شناسه پیگیری شما ${query.authority} می‌باشد`
);
}
}
}, []);
//------------------------------------
const [seeMoreStatus, setSeeMoreStatus] = useState(0);
const seeMoreHandler = (index) => {
setSeeMoreStatus(index);
}
};
const deActiveSeeMore = () => {
setSeeMoreStatus(0);
}
};
return (
<div className="MyServices w-[93.5%] h-[100vh] pt-16 pb-2 px-4 flex flex-col justify-between relative">
<div className="MyServices-row w-full h-[49%] flex flex-row-reverse justify-between">

67
src/view/services/PaymentBox.js
Unescape View File

@ -6,6 +6,7 @@ import {
AiOutlineCloseCircle,
} from "react-icons/ai";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import { userFactor,userTransaction } from "../../redux/actions";
@ -212,26 +213,43 @@ const PaymentBox = ({
}
};
return (
<div className="w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center">
<div className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2 relative">
<div
className="w-[93.5vw] h-[93.5vh] bg-black fixed top-[6.5%] left-0 backdrop-blur-md bg-[#0000004D] flex items-center justify-center"
style={
window.innerWidth < 1000
? { width: "100vw", height: "100vh", top: "0px" }
: null
}
>
<div
className="w-[80%] h-[80%] bg-white rounded-lg px-8 py-2 relative"
style={
window.innerWidth < 1000 ? { padding: "10px", width: "90%" } : null
}
>
<div className="w-full flex items-center justify-between">
<div className="w-full text-right text-2xl text-[#DF1452]">
<div
className="w-full text-right text-2xl text-[#DF1452]"
style={window.innerWidth < 1000 ? { fontSize: "16px" } : null}
>
پرداخت و ثبت تراکنش‌ها
</div>
<Link to={window.innerWidth < 1000 ? "/shoppingCart" : "/services"}>
<AiOutlineCloseCircle
className="text-4xl text-red-600 cursor-pointer"
onClick={() => setShowPaymentBox(false)}
/>
</Link>
</div>
<div className="payment-container w-full mt-6 max-h-[85%] overflow-y-auto">
{paymentList.map((item, index) => (
<div
key={index}
className="w-full mb-2 flex justify-between text-black pb-2 border-b"
className="payment-container-item w-full mb-2 flex justify-between text-black pb-2 border-b"
>
{/* ----------choose-payment-type---------------------------------------- */}
<select
className="w-[17%] h-10 rounded outline-0 border text-black px-1 py-0"
className="payment-container-item-cpt w-[17%] h-10 rounded outline-0 border text-black px-1 py-0"
onChange={(e) => changeType(e, index)}
style={item.status !== null ? { pointerEvents: "none" } : null}
>
@ -242,37 +260,37 @@ const PaymentBox = ({
<option value={4}>پرداخت نقدی</option> */}
</select>
{/* ---------- payment-info ---------------------------------------- */}
<div className="w-[58%]">
<div className="payment-container-item-pi w-[58%]">
<div className="w-full h-10 flex box-border rounded overflow-hidden border">
<div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
<div className="pci-pi-badge w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
مبلغ
</div>
<input
type="text"
name="payment-box-amount-input"
id="payment-box-amount-input"
className="w-[70%] h-10 px-1 outline-0 text-center text-lg"
className="pci-pi-input w-[70%] h-10 px-1 outline-0 text-center text-lg"
value={item.amount}
onChange={(e) => changeAmount(e, index)}
style={
item.status !== null ? { pointerEvents: "none" } : null
}
/>
<div className="w-[10%] h-full flex items-center justify-center text-sm">
<div className="pci-pi-unit w-[10%] h-full flex items-center justify-center text-sm">
تومان
</div>
</div>
{/* - */}
{item.type === 2 && (
<div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
<div className="pci-pi-card-badge w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
شماره کارت
</div>
<input
type="text"
name="payment-box-amount-input"
id="paymentBox-cardNumber-input"
className="w-[80%] h-10 px-1 outline-0 text-center"
className="pci-pi-card-input w-[80%] h-10 px-1 outline-0 text-center"
maxLength={16}
style={
item.status !== null ? { pointerEvents: "none" } : null
@ -283,12 +301,12 @@ const PaymentBox = ({
)}
{/* - */}
{item.type === 2 && (
<div className="w-full h-10 flex items-center justify-between mt-1">
<div className="w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
<div className="pci-pi-card-dt w-full h-10 flex items-center justify-between mt-1">
<div className="pci-pi-card-d w-[60%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="pci-pi-card-d-badge w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
تاریخ پرداخت
</div>
<div className="w-[60%] h-full flex items-center justify-between p-1">
<div className="pci-pi-card-d-inputs w-[60%] h-full flex items-center justify-between p-1">
<input
type="text"
className="paymentBox-payment-date-input w-[29%] h-full rounded border text-center text-sm"
@ -343,11 +361,11 @@ const PaymentBox = ({
</div>
</div>
{/* ---- */}
<div className="w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
<div className="pci-pi-card-t w-[39%] h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="pci-pi-card-t-badge w-[40%] bg-[#6B7280] flex items-center justify-center text-white rounded-r text-sm">
ساعت پرداخت
</div>
<div className="w-[60%] h-full flex justify-between items-center p-1">
<div className="pci-pi-card-t-inputs w-[60%] h-full flex justify-between items-center p-1">
<input
type="text"
className="paymentBox-payment-date-input w-[45%] h-full rounded border text-center text-sm"
@ -388,14 +406,14 @@ const PaymentBox = ({
{/* - */}
{item.type === 2 && (
<div className="w-full h-10 flex box-border rounded overflow-hidden border mt-2">
<div className="w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
<div className="pci-pi-card-tc-badge w-1/5 bg-[#6B7280] flex items-center justify-center text-white rounded-r">
شماره پیگیری
</div>
<input
type="text"
name="payment-box-amount-input"
id="paymentBox-TracingNumber-input"
className="w-[80%] h-10 px-1 outline-0 text-center"
className="pci-pi-card-tc-input w-[80%] h-10 px-1 outline-0 text-center"
maxLength={30}
style={
item.status !== null ? { pointerEvents: "none" } : null
@ -406,7 +424,7 @@ const PaymentBox = ({
)}
</div>
{/* ---------- pay and submit btn ---------------------------------------- */}
<div className="w-[17%] h-10">
<div className="payment-container-item-pasb w-[17%] h-10">
{item.type === 1 && (
<div
className="w-full h-full rounded bg-[#DF1452] flex items-center justify-center text-white cursor-pointer"
@ -448,7 +466,7 @@ const PaymentBox = ({
</div>
{/* ------------------ */}
<div
className="w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white"
className="payment-container-item-delete w-[4%] h-10 rounded flex items-center justify-center cursor-pointer bg-red-600 text-white"
style={
index === 0
? { pointerEvents: "none", filter: "grayscale(100%)" }
@ -462,12 +480,13 @@ const PaymentBox = ({
))}
</div>
<div className="w-full h-[15%] bg-white flex items-center justify-center absolute bottom-0 left-0">
<div
<Link
to="/services"
className="w-[30%] h-1/2 rounded flex items-center justify-center text-lg bg-[#DF1452] text-white cursor-pointer"
onClick={() => setShowPaymentBox(false)}
>
تایید
</div>
</Link>
</div>
{/* <div
className="w-10 h-10 rounded-full mt-4 border mx-auto border-[#DF1452] cursor-pointer flex items-center justify-center"

72
src/view/services/index.css
Unescape View File

@ -10,3 +10,75 @@
height:125px;
padding: 15px;
}
@media only screen and (max-width: 999px){
.payment-container-item{
display: block !important;
}
.payment-container-item-cpt{
width: 100% !important;
}
.payment-container-item-pi{
width: 100% !important;
margin-top: 5px;
}
.payment-container-item-pasb{
width: 100% !important;
margin-top: 5px;
}
.payment-container-item-delete{
width: 15% !important;
margin: 5px auto;
}
.pci-pi-badge{
width: 50px !important;
font-size: 12px !important;
}
.pci-pi-unit{
width: 50px !important;
font-size: 12px !important;
}
.pci-pi-input{
width: calc(100% - 100px) !important;
}
.pci-pi-card-badge{
width: 50px !important;
font-size: 12px !important;
}
.pci-pi-card-input{
width: calc(100% - 50px) !important;
}
.pci-pi-card-dt{
display: block !important;
height: auto;
}
.pci-pi-card-d{
width: 100% !important;
margin-top: 5px;
}
.pci-pi-card-t{
width: 100% !important;
}
.pci-pi-card-d-badge{
width: 100px !important;
font-size: 12px !important;
}
.pci-pi-card-d-inputs{
width: calc(100% - 100px) !important;
}
.pci-pi-card-t-badge{
width: 100px !important;
font-size: 12px !important;
}
.pci-pi-card-t-inputs{
width: calc(100% - 100px) !important;
}
.pci-pi-card-tc-badge{
width: 100px !important;
font-size: 12px !important;
}
.pci-pi-card-tc-inputs{
width: calc(100% - 100px) !important;
}
}

75
src/view/services/index.js
Unescape View File

@ -306,7 +306,6 @@ const Services = ({
key={`PRODUCT__${gameId}__${index}`}
style={gameId === 5 ? { width: "100%" } : null}
>
{/* {console.log(product)} */}
{(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7)) && (
<Product
@ -459,8 +458,9 @@ const Services = ({
{books
?.filter((itm) => selectedProductTypes.includes(itm.productType))
.map((product, index) => (
<div className="bg-black" key={`PRODUCT__${gameId}__${index}`}>
{selectedProductTypes.includes(4) && (
<div className="w-[90%]" key={`PRODUCT__${gameId}__${index}`}>
{(selectedProductTypes.includes(4) ||
selectedProductTypes.includes(7)) && (
<Product
key={index}
productsType={filter.productsType}
@ -477,70 +477,25 @@ const Services = ({
catId={gameId}
userInfo={userInfo}
onClick={() => {
setPopUpContent({
id: gameId,
title: product?.name,
video: "",
teacher: product?.vodTeacher,
description:
"در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت قرار می‌گیرد در این قسمت یک توضیحات کوتاه در مورد دوره خواهد آمد که بصورت دو خط در این قسمت",
price: gameId == 2 ? 0 : product?.price,
classHour: 21,
classMinute: 56,
image:
"https://narafella.ir/wp-content/uploads/2021/08/books-min.jpg",
examCont: [
{
title: "بخش اول آزمون " + product.name,
date: "۱۴۰۰/۱۲/۱۳",
time: "۱۴:۴۶",
numberOfQ: "۱۸",
price: 10000,
},
{
title: "بخش دوم آزمون " + product.name,
date: "۱۴۰۰/۱۲/۱۴",
time: "۱۴:۴۶",
numberOfQ: "۱۸",
price: 10000,
},
{
title: "بخش سوم آزمون " + product.name,
date: "۱۴۰۰/۱۲/۱۵",
time: "۱۴:۴۶",
numberOfQ: "۳۲",
price: 250000,
},
],
});
if (gameId !== 5) {
setPopUp(true);
}
console.log(gameId);
productClickhandler(product);
}}
btnOnClick={() => {
if (selectedProductTypes.includes(7)) {
pushSchoolToCart({
productId: product?.id,
count: 1,
});
} else {
pushToCart({
productId: product?.id,
count: 1,
});
}
// console.log(gameId)
setTimeout(() => setPopUp(false), 0);
// console.log(popup)
// console.log(product.id)
AddToCartHandler(product);
}}
/>
)}
</div>
))}
{!selectedProductTypes.includes(4) &&
!selectedProductTypes.includes(7) &&
gameId !== 6 && (
<div className="w-full h-28 flex flex-col items-center justify-center mx-auto rounded">
<CgDanger className="text-4xl" />
<div className="text-xl mt-4" style={{ direction: "rtl" }}>
این بخش هنوز فعال نشده است.
</div>
</div>
)}
{gameId == 6 && (
<div className="w-full p-8 py-10 flex flex-col justify-between items-center ">
<div className="w-full text-right mb-4">

Write Preview
Loading…
Cancel
Save