reza added scanner and activation

master
ravino 3 years ago
parent 5e28e53d1a
commit 811431a9ed
  1. 1
      package.json
  2. 8
      src/AppRouter.js
  3. 1
      src/assets/icons/analytics.svg
  4. 1
      src/assets/icons/danger.svg
  5. BIN
      src/assets/images/user1.png
  6. BIN
      src/assets/images/user2.png
  7. 31
      src/views/Activation/History/index.js
  8. 44
      src/views/Activation/History/index.scss
  9. 87
      src/views/Activation/index.js
  10. 111
      src/views/Activation/index.scss
  11. 125
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  12. 24
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  13. 3
      src/views/Home/Navbar/Mobile/index.js
  14. 31
      src/views/QRScan/LastQr/index.js
  15. 44
      src/views/QRScan/LastQr/index.scss
  16. 40
      src/views/QRScan/Scanner/index.js
  17. 82
      src/views/QRScan/index.js
  18. 104
      src/views/QRScan/index.scss
  19. 27
      yarn.lock

@ -16,6 +16,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-elastic-carousel": "^0.11.5",
"react-qr-scanner": "^1.0.0-alpha.7",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",

@ -10,6 +10,8 @@ import Products from './views/Products/index';
import Product from './views/Product/index';
import QR from './views/QR/index';
import Auth from './views/Auth/index';
import QRScan from './views/QRScan/index';
import Activation from './views/Activation/index';
class AppRouter extends Component {
constructor(props) {
@ -56,6 +58,12 @@ class AppRouter extends Component {
<Route exact path={'/profile'}>
<Auth page={'profile'} />
</Route>
<Route exact path={'/qr-scan'}>
<QRScan />
</Route>
<Route exact path={'/activation'}>
<Activation />
</Route>
</Switch>
</Router>
);

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="226" height="183.075" viewBox="0 0 226 183.075"><defs><style>.a{fill:#00cc69;}.b{fill:#02a255;}.c{fill:#e8e9e9;}.d{fill:#c7cfcf;}.e{fill:#f4f5f5;}.f{fill:#f3d064;}.g{fill:#7ca1d8;}.h{fill:#c5d65c;}.i{fill:#4ce1be;}</style></defs><g transform="translate(-36.944 -83.597)"><path class="a" d="M8.328,114.906H217.672A8.331,8.331,0,0,1,226,123.24V241.293a21.735,21.735,0,0,1-21.737,21.737H121.328A8.33,8.33,0,0,1,113,254.7h0a8.33,8.33,0,0,1-8.328,8.328H21.737A21.735,21.735,0,0,1,0,241.293V123.24A8.332,8.332,0,0,1,8.328,114.906Z" transform="translate(36.944 -14.685)"/><path class="b" d="M0,114.906H104.4a8.331,8.331,0,0,1,8.328,8.334V241.293A21.735,21.735,0,0,1,90.993,263.03H8.058A8.325,8.325,0,0,1,0,256.771V114.906Z" transform="translate(150.213 -14.685)"/><path class="c" d="M212.825,92.421V223.485a8.828,8.828,0,0,0,8.824,8.824h80.335a8.828,8.828,0,0,0,8.824-8.824V92.421a8.825,8.825,0,0,0-8.824-8.824H221.649A8.824,8.824,0,0,0,212.825,92.421Z" transform="translate(-160.25)"/><path class="d" d="M28.282,311.508v18.878a8.828,8.828,0,0,0,8.824,8.824h80.334a8.828,8.828,0,0,0,8.824-8.824V311.508a8.828,8.828,0,0,1-8.824,8.824H37.106A8.828,8.828,0,0,1,28.282,311.508Z" transform="translate(121.662 -106.902)"/><path class="e" d="M28.282,92.421V204.606a8.828,8.828,0,0,0,8.824,8.824h80.334a8.828,8.828,0,0,0,8.824-8.824V92.421a8.825,8.825,0,0,0-8.824-8.824H37.106A8.824,8.824,0,0,0,28.282,92.421Z" transform="translate(121.662)"/><path class="d" d="M212.825,311.508v18.878a8.828,8.828,0,0,0,8.824,8.824h80.335a8.828,8.828,0,0,0,8.824-8.824V311.508a8.828,8.828,0,0,1-8.824,8.824H221.649A8.828,8.828,0,0,1,212.825,311.508Z" transform="translate(-160.25 -106.902)"/><path class="f" d="M89.9,363.521v32.4a2.045,2.045,0,0,0,2.907,1.856l7.611-3.511,7.611,3.511a2.045,2.045,0,0,0,2.907-1.856v-32.4Z" transform="translate(104.449 -131.298)"/><circle class="f" cx="15.237" cy="15.237" r="15.237" transform="translate(166.246 166.688)"/><path class="g" d="M154.942,250.962h19.432V231.531a1.04,1.04,0,0,0-1.1-1.036,20.5,20.5,0,0,0-19.37,19.37A1.041,1.041,0,0,0,154.942,250.962Z" transform="translate(7.161 -68.902)"/><path class="h" d="M62.476,135.908v19.6H75.421v-19.6a1.975,1.975,0,0,0-1.974-1.974h-9A1.975,1.975,0,0,0,62.476,135.908Z" transform="translate(154.351 -23.611)"/><path class="i" d="M107.175,116.606v29.849H120.12V116.606a1.975,1.975,0,0,0-1.974-1.974h-9A1.975,1.975,0,0,0,107.175,116.606Z" transform="translate(86.127 -14.557)"/><g transform="translate(68.228 119.223)"><path class="d" d="M53.823,208.564h9.17a4.045,4.045,0,1,0,0-8.091h-9.17a4.045,4.045,0,1,0,0,8.091Z" transform="translate(101.248 -174.043)"/><path class="d" d="M94.459,208.564h23.193a4.045,4.045,0,1,0,0-8.091H94.458a4.045,4.045,0,1,0,0,8.091Z" transform="translate(25.013 -174.043)"/><path class="d" d="M53.823,241.072H78.635a4.045,4.045,0,1,0,0-8.091H53.823a4.045,4.045,0,1,0,0,8.091Z" transform="translate(85.606 -189.291)"/><path class="d" d="M55.856,269.517h9.708a4.045,4.045,0,1,0,0-8.091H55.855a4.045,4.045,0,1,0,0,8.091Z" transform="translate(97.597 -202.633)"/><path class="d" d="M266.174,175.035a4.045,4.045,0,0,0,3.212-6.5l-11.71-15.342a4.045,4.045,0,1,0-6.431,4.909l11.71,15.342A4.039,4.039,0,0,0,266.174,175.035Z" transform="translate(-208.459 -151.12)"/><path class="d" d="M291.455,173.889a4.032,4.032,0,0,0,2.853-1.178l15.183-15.1a4.045,4.045,0,0,0-5.706-5.735l-15.183,15.1a4.045,4.045,0,0,0,2.853,6.913Z" transform="translate(-268.569 -150.695)"/><path class="d" d="M344.651,173.889a4.046,4.046,0,0,0,3.522-6.029l-8.494-15.1a4.045,4.045,0,0,0-7.052,3.967l8.494,15.1A4.046,4.046,0,0,0,344.651,173.889Z" transform="translate(-330.31 -150.695)"/><path class="d" d="M248.871,241.072h28.047a4.045,4.045,0,1,0,0-8.091H248.871a4.045,4.045,0,0,0,0,8.091Z" transform="translate(-216.239 -189.291)"/><path class="d" d="M332.172,241.072h12.406a4.045,4.045,0,1,0,0-8.091H332.172a4.045,4.045,0,0,0,0,8.091Z" transform="translate(-328.127 -189.291)"/><path class="d" d="M252.444,271.968v9.256a2.926,2.926,0,0,0,2.923,2.923h50.788a2.926,2.926,0,0,0,2.923-2.923v-9.256a2.926,2.926,0,0,0-2.923-2.923H255.367A2.925,2.925,0,0,0,252.444,271.968Z" transform="translate(-248.399 -206.207)"/><path class="d" d="M53.315,175.041H98.083a4.045,4.045,0,1,0,0-8.091H53.315a4.045,4.045,0,1,0,0,8.091Z" transform="translate(66.427 -158.319)"/></g><g transform="translate(80.951 111.941)"><circle class="g" cx="6.472" cy="6.472" r="6.472" transform="translate(0 24.811)"/><circle class="g" cx="6.472" cy="6.472" r="6.472" transform="translate(23.733)"/></g><g transform="translate(66.398 110.323)"><circle class="f" cx="6.472" cy="6.472" r="6.472" transform="translate(56.635 28.048)"/><circle class="f" cx="6.472" cy="6.472" r="6.472" transform="translate(0)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.253" height="16.253" viewBox="0 0 16.253 16.253"><defs><style>.a{fill:#f52301;}</style></defs><g transform="translate(-886 -1243.904)"><g transform="translate(886 1243.904)"><path class="a" d="M886,1252.031a8.126,8.126,0,1,1,8.126,8.126A8.126,8.126,0,0,1,886,1252.031Zm1.219,0a6.907,6.907,0,1,0,6.907-6.907A6.908,6.908,0,0,0,887.219,1252.031Zm6.294,3.088a.611.611,0,0,1,.527-.6l.091-.006a.61.61,0,0,1,.081,1.214l-.086,0a.61.61,0,0,1-.614-.605Zm.006-2.5-.006-.081v-3.6a.609.609,0,0,1,1.213-.081l.006.081v3.591a.609.609,0,0,1-1.213.081Z" transform="translate(-886 -1243.904)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 639 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -0,0 +1,31 @@
import React, { Component } from 'react';
import './index.scss';
export default function History(props){
const {data} = props;
return(
<>
{
window.innerWidth > 1000 ?
<div className="last-qr">
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-activation-history d-flex">
<div className="mobile-activation-history__right d-flex">
<img src={data.image} alt={data.title} />
<div className="d-flex flex-column">
<strong>{data.title}</strong>
<span>{data.subTitle}</span>
</div>
</div>
<div className="mobile-activation-history__left d-flex">
<button>{data.status}</button>
</div>
</div> : null
}
</>
);
}

@ -0,0 +1,44 @@
.mobile-activation-history{
width: 100%;
padding: 15px 10px;
justify-content: space-between;
background-color:white;
align-items:center;
border-radius: 10px;
box-shadow: 0px 0px 10px rgb(226, 226, 226);
&__right{
align-items:center;
img{
height: 100px;
border-radius: 10px;
margin-left: 15px;
}
strong{
font-family: numeralMedium;
font-size: calc(100vw / 30);
font-weight: 600;
letter-spacing: -1px;
}
span{
font-family: numeralMedium;
font-size: calc(100vw / 35);
color: #00CC69;
}
}
&__left{
button{
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
color: #00CC69;
border-radius: 25px;
font-size: calc(100vw / 26);
border: 1px solid #00cc69;
background-color: white;
&:focus:enabled{
text-decoration: none;
}
}
}
}

@ -0,0 +1,87 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import {Link} from 'react-router-dom';
import History from './History/index';
import book1 from '../../assets/images/book1.png';
import analytics from '../../assets/icons/analytics.svg';
import danger from '../../assets/icons/danger.svg';
import './index.scss';
export default class Activation extends Component {
state= {
value: null,
}
render() {
const { data } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="mobile-activation d-flex">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-activation d-flex flex-column align-items-center">
<Navbar />
<div className="mobile-activation__back d-flex">
<Link to="/">بازگشت</Link>
</div>
<header className="mobile-activation__header d-flex flex-column align-items-center">
<img src={analytics} alt="فعال سازی کتاب" />
<h1>فعال سازی کتاب الکترونیک</h1>
</header>
<div className="mobile-activation__description d-flex">
<span>.</span>
<p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p>
</div>
<form
className="mobile-activation__form d-flex flex-column"
onSubmit={() =>
console.log()
}
>
<input
id="code"
type="text"
maxLength={9}
autoComplete="off"
onChange={(e) => this.setState({ code: e.target.value })}
/>
<button type="submit">ثبت کد فعال سازی</button>
</form>
<div className="mobile-activation__support d-flex align-center">
<span><img src={danger} /></span>
<p>کد فعال سازی در اختیار شما قرار گرفته است را در قسمت زیر وارد وارد تا کتاب الکترونیک آن فعالسازی شود</p>
</div>
<div className="mobile-activation__history d-flex flex-column">
<h2>آخرین مشاهدات</h2>
{
data.map((item, i) => (
<History data={item} key={i} />
))
}
</div>
</div>
</>
) : null}
</>
);
}
}
Activation.defaultProps = {
data: [
{
title : 'ریاضیات گسسته خیلی پیشرفته',
subTitle: 'پایه هفتم ابتدایی',
status: 'انجام شد',
image : book1
}
]
}

@ -0,0 +1,111 @@
.mobile-activation{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
&__back{
width: 100%;
justify-content:flex-end;
a{
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
background-color: #00CC69;
border-radius: 25px;
font-size: calc(100vw / 26);
color: white;
&:focus:enabled{
text-decoration: none;
}
}
}
&__header{
margin-top: 30px;
h1{
font-size: calc(100vw / 16);
font-family: numeralBold;
margin-top: 15px;
color: #00CC69;
letter-spacing: -2px;
}
}
&__description{
width: 100%;
margin-top: 30px;
span{
font-size: 50px;
color: #00CC69;
margin-left: 10px;
position: relative;
bottom: 35px;
}
p{
font-size: calc(100vw / 30);
color: #6F7074;
font-family: numeralMedium;
}
}
&__form{
width: 100%;
font-family: numeralMedium;
input{
width: 100%;
background-color: #F6F6F6;
color: #4D4D4F;
text-align: center;
direction: ltr;
font-size: calc(100vw / 18);
border: 0px;
padding: 15px 0px;
border-radius: 10px;
&:focus{
outline: 0px;
}
}
button{
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 14px 20px 14px;
background-color: #00CC69;
border-radius: 10px;
font-size: calc(100vw / 18);
color: white;
border: 0px;
margin-top: 10px;
letter-spacing: -1px;
&:focus:enabled{
text-decoration: none;
}
}
}
&__support{
width: 80%;
margin-top: 30px;
span{
color: #00CC69;
margin-left: 10px;
}
p{
font-size: calc(100vw / 30);
color: #6F7074;
font-family: numeralMedium;
text-align: center;
}
}
&__history{
width: 100%;
margin: 30px 0px;
h2{
font-family: numeralBold;
color: #02A255;
font-size: calc(100vw / 24);
margin-bottom: 20px;
}
}
}

@ -1,9 +1,11 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
import Avatar from '@material-ui/core/Avatar';
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import HomeIcon from '@material-ui/icons/Home';
import CloseIcon from '@material-ui/icons/Close';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SettingsIcon from '@material-ui/icons/Settings';
import UpdateIcon from '@material-ui/icons/Update';
@ -12,65 +14,41 @@ import ShareIcon from '@material-ui/icons/Share';
// import { logout } from '../../../../Redux/actions/user';
// import { connect } from 'react-redux';
import user1 from '../../../../../assets/images/user1.png';
import user2 from '../../../../../assets/images/user2.png';
import './NavbarDrawer.scss';
class NavbarDrawer extends Component {
constructor(props) {
super(props);
this.state = {
links: [
{
name: 'صفحه اصلی',
link: '/',
icon: <HomeIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'تنظیمات',
link: '/',
icon: <SettingsIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'به روز رسانی',
link: '/',
icon: <UpdateIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'همرسانی',
link: '/',
icon: <ShareIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'گزارش ایراد',
link: '/',
icon: <ReportIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'خروج',
link: '/',
icon: <ExitToAppIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
onClick: this.props.logout,
},
],
};
state = {
dropdown: false,
}
render() {
return (
<div className="navbar-drawer d-flex flex-column">
<div className="navbar-drawer__header d-flex">
<div className="navbar-drawer__header--right d-fex flex-column">
<h1>رضا</h1>
<div>منوی دسترسی سریع</div>
</div>
<CloseIcon style={{ color: 'white', width: 40, height: 40 }} />
{
this.props.users.map((item, i) => item.status === 1 ? (
<React.Fragment key={i}>
<Avatar style={{width: 60, height: 60}} alt="Remy Sharp" src={item.image} />
<div className="navbar-drawer__header--right d-fex flex-column">
<h1>{item.firstName + ' ' + item.lastName}</h1>
<div>{item.title}</div>
</div>
</React.Fragment>
) : null)
}
{
this.state.dropdown ?
<KeyboardArrowUpIcon style={{ color: 'grey', width: 40, height: 40 }} /> :
<KeyboardArrowDownIcon style={{ color: 'grey', width: 40, height: 40 }} />
}
</div>
<div className="navbar-drawer__bottom mt-5">
{this.state.links.map((item, key) => (
{this.props.links.map((item, key) => (
<Link
to={item.link}
key={key}
@ -95,3 +73,50 @@ class NavbarDrawer extends Component {
export default NavbarDrawer;
// export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer);
NavbarDrawer.defaultProps = {
users: [
{ id: 0, firstName: 'محمدرضا', lastName: 'خراسانی', title: 'استاد علوم تجربی',image:user1 , status: 0},
{ id: 0, firstName: 'اکبر', lastName: 'خراسانی', title: 'استاد علوم تجربی',image:user2, status: 1},
],
links: [
{
name: 'صفحه اصلی',
link: '/',
icon: <HomeIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'تنظیمات',
link: '/',
icon: <SettingsIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'به روز رسانی',
link: '/',
icon: <UpdateIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'همرسانی',
link: '/',
icon: <ShareIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'گزارش ایراد',
link: '/',
icon: <ReportIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'خروج',
link: '/',
icon: <ExitToAppIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
// onClick: this.props.logout,
},
],
}

@ -1,5 +1,5 @@
.MuiDrawer-paperAnchorRight {
background: linear-gradient(180deg, #00cba2 16.9%, #ffffff 17%) !important;
background: white;
&::-webkit-scrollbar {
display: none;
width: 0px;
@ -10,32 +10,32 @@
// background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important;
text-align: right !important;
direction: rtl;
padding: 30px 10px 10px 10px;
padding: 30px 0px 10px 10px;
&__header {
height: 60px;
background-color: #00cba2;
background-color: white;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0px 8px;
&--right {
margin-right: 10px;
& h1 {
margin-bottom: 0px;
font-size: 24px;
color: white;
font-size: calc(100vw / 22);
color: #4D4D4F;
letter-spacing: -1px;
}
& div {
color: white;
font-size: 12px;
color: #4D4D4F;
font-size: calc(100vw / 34);
letter-spacing: -1px;
}
}
& img {
width: 22px;
height: 22px;
position: relative;
bottom: 35px;
width: 100%;
height: 100%;
// position: relative;
// bottom: 35px;
}
}
&__bottom {

@ -49,8 +49,7 @@ export default function MobileNavbar(props) {
[classes.fullList]: anchor === "top" || anchor === "bottom",
})}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<NavbarDrawer
setShare={props.setShare}

@ -0,0 +1,31 @@
import React, { Component } from 'react';
import './index.scss';
export default function LastQR(props){
const {data} = props;
return(
<>
{
window.innerWidth > 1000 ?
<div className="last-qr">
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-last-qr d-flex">
<div className="mobile-last-qr__right d-flex">
<img src={data.image} alt={data.title} />
<div className="d-flex flex-column">
<strong>{data.title}</strong>
<span>{data.subTitle}</span>
</div>
</div>
<div className="mobile-last-qr__left d-flex">
<button>صفحه {data.page}</button>
</div>
</div> : null
}
</>
);
}

@ -0,0 +1,44 @@
.mobile-last-qr{
width: 100%;
padding: 15px 10px;
justify-content: space-between;
background-color:white;
align-items:center;
border-radius: 10px;
box-shadow: 0px 0px 10px rgb(226, 226, 226);
&__right{
align-items:center;
img{
height: 100px;
border-radius: 10px;
margin-left: 15px;
}
strong{
font-family: numeralMedium;
font-size: calc(100vw / 30);
font-weight: 600;
letter-spacing: -1px;
}
span{
font-family: numeralMedium;
font-size: calc(100vw / 35);
color: #00CC69;
}
}
&__left{
button{
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
border: 1px solid #00cc69;
background-color: white;
border-radius: 25px;
font-size: calc(100vw / 26);
color: #00cc69;
&:focus:enabled{
text-decoration: none;
}
}
}
}

@ -0,0 +1,40 @@
import React, { Component } from 'react'
import QrReader from 'react-qr-scanner'
export default class Scanner extends Component {
constructor(props){
super(props)
this.state = {
delay: 100,
result: '',
}
this.handleScan = this.handleScan.bind(this)
}
handleScan(data){
this.props.parent.setState({
value: data,
})
}
handleError(err){
console.error(err)
}
render(){
const previewStyle = {
height: 300,
width: 300,
}
return(
<div>
<QrReader
delay={this.state.delay}
style={previewStyle}
onError={this.handleError}
onScan={this.handleScan}
/>
</div>
)
}
}

@ -0,0 +1,82 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import {Link} from 'react-router-dom';
import Scanner from './Scanner/index';
import LastQr from './LastQr/index';
import book1 from '../../assets/images/book1.png';
import './index.scss';
export default class QRScan extends Component {
state= {
value: null,
}
render() {
const { data } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="product-sample d-flex">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-qr-scan d-flex flex-column">
<Navbar />
<div className="mobile-qr-scan__back d-flex">
<Link to="/">بازگشت</Link>
</div>
<header className="mobile-qr-scan__header d-flex flex-column">
<h1>اسکن بارکد</h1>
<p>لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته قرار دهید تا اسکن دوربین انجام شود</p>
</header>
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
<div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeBottom mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeLeft mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeRight mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeCenter d-flex">
</div>
<Scanner />
</section>
<p className="mobile-qr-scan__text d-flex">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای</p>
<section className="mobile-qr-scan__lasts d-flex flex-column">
<h2>آخرین مشاهدات</h2>
{
data.map((item, i) => (
<LastQr data={item} key={i} />
))
}
</section>
</div>
</>
) : null}
</>
);
}
}
QRScan.defaultProps = {
data: [
{
title : 'ریاضیات گسسته خیلی پیشرفته',
subTitle: 'پایه هفتم ابتدایی',
page: 13,
image : book1
}
]
}

@ -0,0 +1,104 @@
.mobile-qr-scan{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
&__back{
justify-content:flex-end;
a{
display: inline;
font-family: numeralLight;
text-decoration: none;
padding: 5px 20px 3px;
background-color: #00CC69;
border-radius: 25px;
font-size: calc(100vw / 26);
color: white;
&:focus:enabled{
text-decoration: none;
}
}
}
&__header{
margin-top: 30px;
width: 100%;
h1{
font-family: numeralBold;
color: #4CE1BE;
font-size: calc(100vw / 13);
}
p{
text-align: justify;
font-family: numeralMedium;
color: #4CE1BE;
font-size: calc(100vw / 28);
}
}
&__camera{
margin-top: 20px;
width: 300px;
height: 300px;
border-radius: 10px;
margin: 30px auto;
position: relative;
&--shape{
position: absolute;
background-color: rgba(80, 80, 80, 0.541);
}
&--shapeTop{
width: calc(100% - 100px);
height: 50px;
left: 50px;
top: 0px;
}
&--shapeBottom{
width: calc(100% - 100px);
height: 50px;
left: 50px;
bottom: 0px;
}
&--shapeLeft{
width: 50px;
height: 100%;
left: 0px;
bottom: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
&--shapeRight{
width: 50px;
height: 100%;
right: 0px;
bottom: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
&--shapeCenter{
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
right: 50px;
bottom: 50px;
border: 3px solid red;
}
}
&__text{
text-align: justify;
font-family: numeralMedium;
color: #4CE1BE;
font-size: calc(100vw / 28);
}
&__lasts{
width: 100%;
margin: 30px 0px;
h2{
font-family: numeralBold;
color: #02A255;
font-size: calc(100vw / 24);
margin-bottom: 20px;
}
}
}

@ -2312,6 +2312,20 @@
resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
"@zxing/library@^0.18.3":
version "0.18.6"
resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.18.6.tgz#717af8c6c1fd982865e21051afdd7b470ae6674c"
integrity sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==
dependencies:
ts-custom-error "^3.0.0"
optionalDependencies:
"@zxing/text-encoding" "~0.9.0"
"@zxing/text-encoding@~0.9.0":
version "0.9.0"
resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
abab@^2.0.3, abab@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
@ -9446,6 +9460,14 @@ react-only-when@^1.0.2:
resolved "https://registry.yarnpkg.com/react-only-when/-/react-only-when-1.0.2.tgz#a8a79b48dd6cfbd91ddc710674a94153e88039d3"
integrity sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==
react-qr-scanner@^1.0.0-alpha.7:
version "1.0.0-alpha.7"
resolved "https://registry.yarnpkg.com/react-qr-scanner/-/react-qr-scanner-1.0.0-alpha.7.tgz#f63993cffe238f8cbca4984d03973accc842500b"
integrity sha512-gitUvuT0SvU2e11Fa8N7TY/1k4FUL+d0iuQYYCuLjJZT3hSjCvk9argxzmefrGQzVQhbhQpl4Bj7Ek07f68s4g==
dependencies:
"@zxing/library" "^0.18.3"
prop-types "^15.7.2"
react-redux@^7.2.4:
version "7.2.4"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
@ -11104,6 +11126,11 @@ tryer@^1.0.1:
resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
ts-custom-error@^3.0.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.2.0.tgz#ff8f80a3812bab9dc448536312da52dce1b720fb"
integrity sha512-cBvC2QjtvJ9JfWLvstVnI45Y46Y5dMxIaG1TDMGAD/R87hpvqFL+7LhvUDhnRCfOnx/xitollFWWvUKKKhbN0A==
ts-pnp@1.2.0, ts-pnp@^1.1.6:
version "1.2.0"
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"

Loading…
Cancel
Save