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

OTP Done

Browse Source
main
Pedram Keshavarzi 3 years ago
parent b18cf63a1c
commit 2d7da703e4
9 changed files with 243 additions and 53 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. 97
      src/components/Checkbox/index.css
  2. 31
      src/components/Checkbox/index.js
  3. 4
      src/components/ShoppingCart/index.js
  4. 6
      src/constants/defaultValues.js
  5. 2
      src/redux/reducers/userProduct.js
  6. 28
      src/view/LoginSignUp/index.js
  7. 64
      src/view/services/index.js
  8. 60
      src/view/services/service/index.js
  9. 4
      tailwind.config.js

97
src/components/Checkbox/index.css
Unescape View File

@ -0,0 +1,97 @@
.checkbox-symbol {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
user-select: none;
}
.checkbox-container {
box-sizing: border-box;
color: #222;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
.checkbox-container * {
box-sizing: border-box;
}
.checkbox-input {
position: absolute;
visibility: hidden;
}
.checkbox {
user-select: none;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
}
.checkbox:not(:last-child) {
margin-right: 6px;
}
.checkbox:hover {
background: inherit;
}
.checkbox span {
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.checkbox span:first-child {
position: relative;
flex: 0 0 18px;
width: 18px;
height: 18px;
border-radius: 4px;
transform: scale(1);
border: 1px solid #cccfdb;
transition: all 0.3s ease;
}
.checkbox span:first-child svg {
position: absolute;
top: 3px;
left: 2px;
fill: none;
stroke: #fff;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transform: translate3d(0, 0, 0);
}
.checkbox span:last-child {
padding-left: 8px;
line-height: 18px;
}
.checkbox:hover span:first-child {
border-color: #06BAC0;
}
.checkbox-input:checked + .checkbox span:first-child {
background: #06BAC0;
border-color: #06BAC0;
animation: zoom-in-out 0.3s ease;
}
.checkbox-input:checked + .checkbox span:first-child svg {
stroke-dashoffset: 0;
}
@keyframes zoom-in-out {
50% {
transform: scale(0.9);
}
}

31
src/components/Checkbox/index.js
Unescape View File

@ -0,0 +1,31 @@
import React from "react";
import './index.css';
export default function Checkbox(props) {
// console.log(props)
return (
<div>
<svg className="checkbox-symbol">
<symbol id="check" viewBox="0 0 12 10">
<polyline
points="1.5 6 4.5 9 10.5 1"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
></polyline>
</symbol>
</svg>
<div className="checkbox-container">
<input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} onChange={props.onChange}/>
<label className="checkbox" htmlFor={"ch"+props.name}>
<span>
<svg width="12px" height="10px">
<use xlinkHref="#check"></use>
</svg>
</span>
</label>
</div>
</div>
);
}

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

@ -29,11 +29,11 @@ function ShoppingCart({
}) {
const [phase, setPhase] = useState("products");
useEffect(() => {
getList();
getFactorInfo({ userId });
setHeaderOptions(headerOptions);
}, []);
// const Table = () => {
// return (

6
src/constants/defaultValues.js
Unescape View File

@ -1,7 +1,7 @@
export const ApiConfig = {
// apiKey: 'AIzaSyBBksq-Asxq2M4Ot-75X19IyrEYJqNBPcg',
// authDomain: 'dnvn.ir',
// baseUrl: 'https://dnvn.ir/api/v1',
apiKey: 'AIzaSyBBksq-Asxq2M4Ot-75X19IyrEYJqNBPcg',
authDomain: 'dnvn.ir',
baseUrl: 'https://dnvn.ir/api/v1',
//baseUrl: 'http://localhost:3030/api/v1',
loginURL: 'user/login',
otploginURL: 'user/otp/login',

2
src/redux/reducers/userProduct.js
Unescape View File

@ -14,7 +14,7 @@ export default function userFactor(state = initialState, action) {
switch (type) {
case "userProduct/list":
const checkEmpty = data.filter(
(item) => item.condition === 2 && item.product.productType === (1 || 3)
(item) => item.condition === 2
);
const hasPhysical =
data.filter((item) => item.product.productType === 2).length > 0

28
src/view/LoginSignUp/index.js
Unescape View File

@ -12,6 +12,10 @@ import Input from "../../components/input/signUpInput";
import onInput from "../../utils/onInput";
import Timer from "../../components/Timer";
import { connect } from "react-redux";
import { user, publicApi } from "../../redux/actions";
const LoginSignUp = ({ activeLogin,
sendOtp,
sendPhoneNumber,
@ -21,7 +25,7 @@ const LoginSignUp = ({ activeLogin,
setHeaderOptions,
}) => {
const [steps, setSteps] = useState(2);
const [steps, setSteps] = useState(0);
const [index, setIndex] = useState(1);
const [register, setRegister] = useState(false);
const timeoutRef = useRef(null);
@ -188,10 +192,12 @@ const LoginSignUp = ({ activeLogin,
signUpFields?.cellphone?.slice(0, 2) === "09" &&
signUpFields?.cellphone.length === 11
) {
setSteps(2)
setResend(false);
sendPhoneNumber({ cellphone: signUpFields?.cellphone });
setError(undefined);
console.log(signUpFields.cellphone)
} else {
setError("شماره موبایل خود را چک کنید.");
}
@ -215,7 +221,7 @@ const LoginSignUp = ({ activeLogin,
applicationToken: "22",
});
setError(undefined);
} else {
setError("کد وارد شده را چک کنید.");
}
@ -503,4 +509,18 @@ const LoginSignUp = ({ activeLogin,
);
};
export default LoginSignUp;
const mapStateToProps = (state) => ({
loginFlag : state.user.status,
});
const mapDispatchToProps = {
sendOtp: user.otp_login,
sendPhoneNumber: user.otp,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(LoginSignUp);

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

@ -17,7 +17,7 @@ import Packages from "../dashboard2/Packages";
const Services = ({
isMobile,
// books,
books,
getList,
grades,
gradeFilter,
@ -45,6 +45,7 @@ const Services = ({
const [popup, setPopUp] = useState(false);
const [popUpContent, setPopUpContent] = useState({
id: 1,
title: "",
video: "",
description: "",
@ -99,38 +100,7 @@ const Services = ({
role: "",
},
];
const books = [
{
name : 'علوم',
product: [{price: 1000}],
vodTeacher: 'علی استادی'
},
{
name : 'علوم',
product: [{price: 1000}],
vodTeacher: 'علی استادی'
},
{
name : 'علوم',
product: [{price: 1000}],
vodTeacher: 'علی استادی'
},
{
name : 'علوم',
product: [{price: 1000}],
vodTeacher: 'علی استادی'
},
{
name : 'علوم',
product: [{price: 1000}],
vodTeacher: 'علی استادی'
},
{
name : 'علوم',
product: [{price: 1000}],
vodTeacher: 'علی استادی'
},
]
const [selectedGames, setSelectedGames] = useState([]);
const [gameId, setGameId] = useState(1);
const chooseGame = (id) => {
@ -355,6 +325,7 @@ const Services = ({
to="#"
onClick={() => {
setPopUpContent({
id: gameId,
title: product?.name,
video: "",
teacher: product.vodTeacher,
@ -363,8 +334,33 @@ const Services = ({
price: product.product[0].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 == 1){setPopUp(true);}
setPopUp(true);
console.log(gameId)
}}
>
{/* {console.log(product)} */}

60
src/view/services/service/index.js
Unescape View File

@ -1,6 +1,6 @@
import React from "react";
import Button from "../../../components/Button";
import Checkbox from '../../../components/Checkbox';
const servicePopUp = ({
content,
closeOnClick,
@ -21,13 +21,17 @@ const servicePopUp = ({
</svg>
</div>
</div>
<div className="flex justify-between mb-20">
<div className="w-1/2 my-4 p-2">
<h1 className="text-red25 font-black text-md">کلاس آنلاین {content.title}</h1>
<div className={`flex justify-${content.id == 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id == 1 ? 'rtl' : 'ltr'}} >
{ content.id !== 3 && <div className={`${content.id == 1 ? 'w-1/2' : content.id == 4 ? 'w-2/3' : 'w-full'} my-4 p-2`}>
<h1 className="text-red25 font-black text-md">
{content.id == 1 ? 'کلاس آنلاین ' : content.id == 4 ? 'کتاب ' : null}
{content.title}</h1>
<p className="text-red26 text-sm my-2">
{content.description}
</p>
<div className="w-full flex flex-col">
<div className="w-full flex flex-col" style={{direction: 'rtl'}}>
<div className="flex mb-2">
<div className="bg-gray-100 rounded w-40 px-4 py-2 ml-2 text-red52">نام کلاس</div>
<div className="bg-gray-100 rounded w-full px-4 py-2 ml-2 text-red26">{content.title}</div>
@ -46,13 +50,53 @@ const servicePopUp = ({
</div>
</div>
<video className="w-1/2 rounded-md" controls>
</div>}
{
content.id == 3 &&
<div className="flex w-11/12 flex-col rounded-xl border border-red82OP">
<h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl text-blueE3 text-xl font-bold">آزمون {content.title}</h1>
<div className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" style={{direction : 'rtl'}}>
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP">نوع آزمون : آنلاین</div>
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تاریخ شروع : 1400/12/03</div>
<div className="w-1/4 flex justify-center py-4 border-l border-red82OP">تعداد آزمون : ۱۸</div>
<div className="w-1/4 flex items-center justify-center py-4 "> بودجه بندی آزمون </div>
</div>
<div className="flex w-full border-b border-red82OP text-red26 text-xs py-3 px-6 " style={{direction : 'rtl'}}>
<span className="text-red52 ml-1 font-bold">
توجه:
</span>
به صورت معمول تمامی آزمون ها برای شما خریداری خواهند شد مگر اینکه شما به صورت دلخواه یک یا چند آزمون را انتخاب نمایید
</div>
{
content.examCont?.map(
(item, index) => (
<div className="flex w-full items-center justify-between border-b border-red82OP font-bold text-red26 text-xs py-3 px-6 " style={{direction : 'rtl'}}>
<div className="flex items-center font-bold">
<Checkbox />
<p>{item.title}</p>
</div>
<p>تاریخ : {item.date}</p>
<p>ساعت : {item.time}</p>
<p>بودجه بندی !</p>
<p>تعداد سوالات: {item.numberOfQ}</p>
<p>{item.price} تومان</p>
</div>
)
)
}
</div>
}
{content.id == 1 && <video className="w-1/2 rounded-md" controls>
<source
src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4"
/>
</video>
</video>}
{
content.id == 4 && <img src={content.image} className="w-1/3 rounded mt-4"/>
}
</div>
<div className="flex w-full items-center justify-start mb-8" style={{direction: 'ltr'}}>
<Button title='افزودن به سبد خرید' onClick={addToCartFunction} className="w-40"/>

4
tailwind.config.js
Unescape View File

@ -33,7 +33,9 @@ module.exports = {
black40: '#404040',
green17 : '#8daf17',
blue5F : '#05335f',
blue7E : '#15517e'
blue7E : '#15517e',
blueFF : '#f2f9ff',
blueE3 : '#4c7fe3'
},
},
screens: {

Write Preview
Loading…
Cancel
Save