Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Reza added cart mobile

Browse Source
master
Reza_ashrafi 3 years ago
parent b1db5b2d03
commit 35713c49e2
6 changed files with 529 additions and 98 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. 151
      src/views/About/index.js
  2. 10
      src/views/About/index.scss
  3. 27
      src/views/Cart/Table/index.js
  4. 8
      src/views/Cart/Table/index.scss
  5. 248
      src/views/Cart/index.js
  6. 181
      src/views/Cart/index.scss

151
src/views/About/index.js
Unescape View File

@ -14,15 +14,14 @@ const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop:{
desktop: {
h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
p: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
li : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
}
li: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
},
};
export default class About extends Component {
state = {
fury: {
@ -55,52 +54,122 @@ export default class About extends Component {
const { fury, advantages, keywords } = this.state;
return (
<>
<div className="about d-flex flex-column align-items-center">
<Navbar page={'about'} />
<div className="about__fury d-flex">
<div className="about__fury--right d-flex flex-column justify-content-center">
<div className="right-top align-self-start">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
</div>
<div className="right-bottom align-self-end">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>{keywords.title}</h2>
<ul>
{keywords.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li><br/>
</Fragment>
{window.innerWidth > 1000 ? (
<>
<div className="about d-flex flex-column align-items-center">
<Navbar page={"about"} />
<div className="about__fury d-flex">
<div className="about__fury--right d-flex flex-column justify-content-center">
<div className="right-top align-self-start">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{fury.title}
</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
</div>
<div className="right-bottom align-self-end">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
{keywords.title}
</h2>
<ul>
{keywords.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>
{item}
</li>
<br />
</Fragment>
))}
</ul>
</div>
</div>
<div className="about__fury--left d-flex align-items-center">
<img
className="about__fury--left__1"
src={aboutLg}
alt="عکس"
/>
{this.props.absoluteImages.map((item, i) => (
<img src={item.imageUrl} className={item.class} alt="عکس" />
))}
</ul>
</div>
</div>
<div className="about__advantages d-flex">
<div className="about__advantages--right d-flex">
<img src={pic} alt={"عکس"} />
</div>
<div className="about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{advantages.title}
</h1>
<ul>
{advantages.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>
{item}
</li>
<br />
</Fragment>
))}
</ul>
</div>
</div>
</div>
<div className="about__fury--left d-flex align-items-center">
<img className="about__fury--left__1" src={aboutLg} alt="عکس" />
<img className="about__fury--left__2" src={aboutMd} alt="عکس" />
<img className="about__fury--left__3" src={aboutXs1} alt="عکس" />
<img className="about__fury--left__4" src={aboutXs2} alt="عکس" />
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-about d-flex flex-column">
<Navbar page={"about"} />
<div className="mobile-about__fury d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
<p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
</div>
</div>
<div className="about__advantages d-flex">
<div className="about__advantages--right d-flex">
<img src={pic} alt={'عکس'} />
<div className="mobile-about__images-- d-flex">
{this.props.absoluteImages.map((item, i) => (
<img src={item.imageUrl} className={item.class} alt="عکس" />
))}
</div>
<div className="about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{advantages.title}</h1>
<div className="right-bottom align-self-end">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>
{keywords.title}
</h2>
<ul>
{advantages.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li><br/>
</Fragment>
))}
</ul>
{keywords.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
<br />
</Fragment>
))}
</ul>
</div>
<div className="mobile-about__video d-flex">
<img src={pic} alt={"عکس"} />
</div>
<div className="mobile-about__advantages--left">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{advantages.title}
</h1>
<ul>
{advantages.list.map((item, i) => (
<Fragment key={i}>
<li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
<br />
</Fragment>
))}
</ul>
</div>
</div>
</div>
<Footer />
) : null}
</>
);
}
}
About.defaultProps = {
absoluteImages: [
{ class: "about__fury--left__1", imageUrl: aboutLg },
{ class: "about__fury--left__2", imageUrl: aboutMd },
{ class: "about__fury--left__3", imageUrl: aboutXs1 },
{ class: "about__fury--left__4", imageUrl: aboutXs2 },
],
};

10
src/views/About/index.scss
Unescape View File

@ -131,3 +131,13 @@
}
}
}
.mobile-about{
width: 100vw;
max-width: 650px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
}

27
src/views/Cart/Table/index.js
Unescape View File

@ -43,6 +43,21 @@ const fontSize = {
export default function BasicTable(props) {
const classes = useStyles();
const {list, handleCounter, handleDelete} = props;
const sum = () => {
let total = 0;
for(let i = 0; i < list.length; i++) {
total += list[i].number;
}
return total;
};
const totalPrice = () => {
let total = 0;
for(let i = 0; i < list.length; i++) {
total += list[i].price * list[i].number;
}
return total;
}
return (
<>
@ -60,6 +75,14 @@ export default function BasicTable(props) {
{ list.map((row,i) => (
<Item data={row} key={i} handleCounter={handleCounter} handleDelete={handleDelete} />
))}
<TableRow>
<TableCell align="right" component="th" scope="row">
<span style={{ color : 'grey' }}>{sum()} محصول</span>
</TableCell>
<TableCell align="center">
<span style={{ color : 'grey' }}>مبلغ کل {totalPrice()}</span>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer> : null
@ -94,9 +117,9 @@ const Item = (props) => {
<span style={{ fontSize: fontSize.mobile.info.span }}>
{data.options}
</span>
<div className="cart-item__delete d-flex align-items-center justify-content-center">
<div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
<DeleteOutlineOutlinedIcon
style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }}
onClick={() => handleDelete(data.id)}
/>
<span

8
src/views/Cart/Table/index.scss
Unescape View File

@ -1,11 +1,14 @@
.mobile-cart-table-product{
width: 100%;
font-family: numeralLight;
img{
height: 100px;
width: 70px;
border-radius: 10px;
}
&__info{
width: 100%;
margin-left: 10px;
strong, p , span{
margin: 0px;
font-family: numeralLight;
@ -16,11 +19,16 @@
span{
color: #2580EC;
}
&--delete{
margin-top: 10px;
}
}
}
.mobile-cart-table-price{
text-align: center;
font-family: numeralLight;
&__price{
strong, span{
font-family: numeralLight;

248
src/views/Cart/index.js
Unescape View File

@ -9,6 +9,7 @@ import book1 from "../../assets/images/book1.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
@ -20,11 +21,19 @@ const fontSize = {
span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
},
mobile: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 18,
}
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
},
};
export default class Cart extends Component {
state = {
selectedDelivery: { name : '', price : 0},
discount: 0,
totalPrice: null,
list: [
{
@ -79,9 +88,18 @@ export default class Cart extends Component {
handleDelete = (id) => {
let list = this.state.list.filter((item) => item.id !== id);
this.setState({
list: list
})
list: list,
});
};
totalPrice = () => {
let total = 0;
for (let i = 0; i < this.state.list.length; i++) {
total += this.state.list[i].price * this.state.list[i].number;
}
return total - this.state.discount + this.state.selectedDelivery.price;
};
render() {
return (
<>
@ -98,30 +116,29 @@ export default class Cart extends Component {
<thead>
<tr>
<div className="d-flex align-items-center">
<th style={{ flex: 3, textAlign: 'center'}}>1</th>
<th style={{ flex: 1.5, textAlign: 'center' }}>2</th>
<th style={{ flex: 1.5, textAlign: 'center'}}>3</th>
<th style={{ flex: 1, textAlign: 'center'}}>4</th>
<th style={{ flex: 3, textAlign: "center" }}>1</th>
<th style={{ flex: 1.5, textAlign: "center" }}>2</th>
<th style={{ flex: 1.5, textAlign: "center" }}>3</th>
<th style={{ flex: 1, textAlign: "center" }}>4</th>
</div>
</tr>
</thead>
<tbody>
{this.state.list.map((item, i) => (
<Item
handleDelete={this.handleDelete}
handleCounter={this.handleCounter}
data={item}
key={i}
/>
))}
{this.state.list.map((item, i) => (
<Item
handleDelete={this.handleDelete}
handleCounter={this.handleCounter}
data={item}
key={i}
/>
))}
</tbody>
</table>
{this.state.totalPrice ? (
<div className="cart__right--price d-flex justify-content-end">
<div className="d-flex ml-2">جمع کل سبد خرید</div>
<div className="d-flex">
<strong>تومان {this.state.totalPrice}</strong>
<strong>{this.state.totalPrice} تومان </strong>
</div>
</div>
) : null}
@ -133,7 +150,7 @@ export default class Cart extends Component {
</h2>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<PayMethod data={item} key={i} />
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</header>
@ -144,36 +161,195 @@ export default class Cart extends Component {
<Footer />
</>
) : null}
{
window.innerWidth < 1000 ?
{window.innerWidth < 1000 ? (
<div className="mobile-cart d-flex flex-column">
<Navbar />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1>
<div className="d-flex">
<Table list={this.state.list} handleCounter={this.handleCounter} handleDelete={this.handleDelete} />
<Table
list={this.state.list}
handleCounter={this.handleCounter}
handleDelete={this.handleDelete}
/>
</div>
<div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div>
<DiscoutCode />
<Factor parent={this} />
<div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center">
<h3 style={{ fontSize: fontSize.mobile.h2 }}>
جمع کل
<br />
سبد خرید
</h3>
<div className="d-flex align-items-center">
<strong style={{ fontSize: fontSize.mobile.h1 }}>
{this.totalPrice()}
</strong>
<span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
</div>
</div>
<div className="mobile-cart__payMethods d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
</p>
</div> : null
}
<div className="d-flex justify-content-between">
{this.props.payMethods.map((item, i) => (
<DeliveryMethod data={item} key={i} parent={this} />
))}
</div>
</div>
<button className="mobile-cart__submit">پرداخت</button>
</div>
) : null}
</>
);
}
}
const PayMethod = (props) => {
const DeliveryMethod = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div
className="delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#00ff00"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.desktop.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
{props.data.price}
</h3>
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div
className="mobile-delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#ccffcc"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.mobile.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3>
<span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
</div>
</div>
) : null}
</>
);
};
const DiscoutCode = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div
className="delivery-methods d-flex justify-content-between align-items-center"
style={{
background:
props.parent.state.selectedDelivery === props.data
? "#00ff00"
: "white",
}}
onClick={() =>
props.parent.setState({ selectedDelivery: props.data })
}
>
<strong style={{ fontSize: fontSize.desktop.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
{props.data.price}
</h3>
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="mobile-discount-code__box d-flex align-items-center">
<input style={{ fontSize: fontSize.mobile.input }} type="text" />
<button>ثبت کد</button>
</div>
</div>
) : null}
</>
);
};
const Factor = (props) => {
const { list, parent } = props;
const totalPrice = () => {
let total = 0;
for (let i = 0; i < parent.state.list.length; i++) {
total += parent.state.list[i].price * parent.state.list[i].number;
}
return total;
};
return (
<div className="payment-methods d-flex justify-content-between align-items-center">
<strong style={{ fontSize: fontSize.desktop.strong }}>
{props.data.name}
</strong>
<div className="d-flex flex-column align-items-center">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>{props.data.price}</h3>
<span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
</div>
</div>
<>
{window.innerWidth < 1000 ? (
<div className="mobile-factor d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.mobile.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="d-flex justify-content-between">
<strong>مبلغ سبد خرید</strong>
<span>{totalPrice()} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>هزینه ارسال</strong>
<span>{props.parent.state.selectedDelivery.price} تومان</span>
</div>
<div className="d-flex justify-content-between">
<strong>میزان تخفیف</strong>
<span>{props.parent.state.discount} تومان</span>
</div>
</div>
) : null}
</>
);
};

181
src/views/Cart/index.scss
Unescape View File

@ -4,6 +4,7 @@
max-width: 1250px;
margin: 0px auto;
padding: 0px 10px;
font-family: numeralLight;
&__right {
flex: 4;
padding: 10px 0px 0px;
@ -14,70 +15,214 @@
}
}
table {
tr{
tr {
th {
font-family: numeralLight;
color: #afafaf;
}
}
}
}
&__left {
flex: 1.2;
box-shadow: 0px 0px 13px #D5D5D5B0;
box-shadow: 0px 0px 13px #d5d5d5b0;
border-radius: 13px;
margin-right: 30px;
&--header{
h2{
&--header {
h2 {
font-family: numeralBold;
color: #2580EC;
color: #2580ec;
}
}
button{
button {
justify-self: flex-end;
padding: 12px;
width: 100%;
font-family: numeralLight;
color: white;
background-color: #6CBE44;
background-color: #6cbe44;
border: 0px;
border-radius: 10px;
margin-top: 50px;
}
.payment-methods{
.delivery-methods {
padding: 6px;
border-radius: 10px;
border: 1px solid #88A9FF;
border: 1px solid #88a9ff;
margin-top: 10px;
h3, strong, span{
h3,
strong,
span {
font-family: numeralLight;
font-weight: 100;
margin: 0px;
}
strong{
strong {
width: 50%;
color: #678EF8;
color: #678ef8;
letter-spacing: -1px;
}
h3, span{
color: #02A255;
h3,
span {
color: #02a255;
font-family: numeralMedium;
}
}
}
}
.mobile-cart{
.mobile-cart {
width: 100vw;
max-width: 650px;
margin: 0px auto;
padding : 0px 10px 40px;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 60px;
overflow-x: hidden;
h1{
font-family: numeralLight;
&__submit{
justify-self: flex-end;
padding: 12px;
width: 100%;
font-family: numeralLight;
color: white;
background-color: #6cbe44;
border: 0px;
border-radius: 10px;
margin-top: 30px;
}
h1 {
font-family: numeralBold;
color: #373737;
}
&__totalPrice{
padding: 20px 0px;
border-bottom: 1px dotted #A5A5A5;
padding-bottom: 20px;
h3{
font-family: numeralLight;
color: #00CC69;
margin: 0px;
}
div{
margin-right: 20px;
strong{
font-family: numeralBold;
color: #4D4D4F;
margin-left: 5px;
}
span{
font-family: numeralLight;
color: #848484;
}
}
}
&__payMethods {
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
.mobile-delivery-methods {
padding: 6px;
border-radius: 10px;
border: 1px solid #88a9ff;
margin-top: 10px;
width: 48%;
h3,
strong,
span {
font-family: numeralLight;
font-weight: 100;
margin: 0px;
}
strong {
// width: 50%;
color: #678ef8;
letter-spacing: -1px;
}
h3,
span {
color: #02a255;
font-family: numeralMedium;
}
}
}
.mobile-discount-code {
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
&__box{
border: 1px solid #2b95ff;
padding: 5px;
border-radius: 10px;
input {
color: #2b95ff;
font-family: numeralLight;
text-align: center;
padding: 5px;
border-radius: 10px;
border: 0px;
flex: 1;
direction: ltr;
&:focus{
outline : none;
}
}
button {
border-radius: 10px;
background-color: #2b95ff;
font-family: numeralLight;
color: white;
padding: 10px 20px;
border: 0px;
}
}
}
.mobile-factor{
border-bottom: 1px dotted #A5A5A5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
font-family: numeralBold;
color: #2580ec;
}
p {
font-family: numeralLight;
color: #a5a5a5;
letter-spacing: -1px;
}
div{
margin-bottom: 10px;
strong{
font-family: numeralLight;
color: #373737;
font-weight: 300;
}
span{
font-family: numeralLight;
color: #373737;
}
}
}
}
Write Preview
Loading…
Cancel
Save