bubble/digital-store
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/digital-store.git synced 2026-10-11 10:19:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Pay Modal

Browse Source
This commit is contained in:
Sergey Yarkov 2019-11-26 23:49:11 +03:00
parent ceca81dfbb
commit f872737a3e
12 changed files with 85 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dist/public/css/style.css vendored
View File

@ -133,6 +133,7 @@ hr {
left: 0;
bottom: 0;
z-index: 999;
overflow-y: auto;
}
.cart-content,

34
dist/public/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

5
dist/views/assets/templates/modals/pay.pug vendored
View File

@ -9,12 +9,11 @@
h4.small-title Оплатить товар
span#payClose.cart-close
i.material-icons close
form(action='#')
form#purchaseInfo(action='#')
.modal-content__fields
.title-field
label(for='title') Наименование
select#title(name='title')
option(value='js_title') Cs:go(prime) + открыта тп + инв. 901руб
input#title(name='title' readonly)
.email-field
label(for='email') Ваш E-mail
input#email(required='' type='text' name='email')

2
dist/views/index.pug vendored
View File

@ -95,7 +95,7 @@ main.main-section
// Items Block
.col.s12
#items.items
.items-content.block-content
#pay-js.items-content.block-content
.items-title.block-title
i.material-icons list
h2.small-title Список товаров:

4
dist/views/product.pug vendored
View File

@ -26,9 +26,9 @@ main.main-section
small(style="font-size: 12px") Дата добавления: #{date}
.product-info
.product-info__left
.product-left__pay
#pay-js.product-left__pay
img(src='../img/service-icons/'+image alt='#')
button.waves-effect.waves-light.btn Купить
button#payOpen.waves-effect.waves-light.btn(data-id=id data-title=title data-date=date data-count=count data-price=price) Купить
.product-info__cost
.product-info__count
span #{count} шт

3
src/js/core/modal.js
View File

@ -24,8 +24,9 @@ export class Modal {
}
}
function openHandler() {
function openHandler(e) {
this.show();
this.onShow(e);
}
function closeHandler() {

3
src/js/index.js
View File

@ -6,6 +6,7 @@ import { CategoryComponent } from "./components/category.component.js";
import { BreadcrumbComponent } from "./components/breadcrumb.component.js";
import { FilterComponent } from "./components/filter.component.js";
import { CartModal } from "./modals/cart.modal.js";
import { PayModal } from "./modals/pay.modal.js";
const header = new HeaderComponent('header');
@ -16,4 +17,4 @@ const filter = new FilterComponent('filter', {items});
const category = new CategoryComponent('category', {items}, {filter});
const breadcumb = new BreadcrumbComponent('breadcrumb');
const cart = new CartModal('cart', 'cartOpen', 'cartClose', {items});
const pay = new PayModal('pay', 'pay-js', 'payClose');

16
src/js/modals/cart.modal.js
View File

@ -1,6 +1,5 @@
import { Modal } from "../core/modal";
import { insertCount } from "../other/counter";
import { defaultBtnColor } from "../other/defaultColorBtn";
export class CartModal extends Modal {
constructor(id, open, close, {items}) {
@ -54,7 +53,7 @@ export class CartModal extends Modal {
this.list.innerHTML = '';
this.insertItems(this.list);
defaultBtnColor(id, this.items.$el);
this.defaultBtnColor(id);
}
}
@ -76,10 +75,17 @@ export class CartModal extends Modal {
let totalPrice = 0;
payInfo.items.forEach(item => totalPrice += parseFloat(item.price));
payInfo.totalPrice = Math.round(totalPrice * 100) / 100;
payInfo.payMethod = this.$el.querySelector('.payment-field select').value;
payInfo.phone = this.$el.querySelector('.phone-field input').value;
payInfo.email = this.$el.querySelector('.email-field input').value;
payInfo.payMethod = this.$el.querySelector('.payment-field #payment').value;
payInfo.phone = this.$el.querySelector('.phone-field #phone').value;
payInfo.email = this.$el.querySelector('.email-field #email').value;
console.log('Pay info:', payInfo);
}
defaultBtnColor(id) {
if (this.items.roster.querySelector(`#addItem[data-id="${id}"]`)) {
this.items.roster.querySelector(`#addItem[data-id="${id}"]`).classList.remove('orange');
this.items.roster.querySelector(`#addItem[data-id="${id}"] i`).innerHTML = 'shopping_cart';
}
}
}

45
src/js/modals/pay.modal.js Normal file
View File

@ -0,0 +1,45 @@
import { Modal } from "../core/modal";
export class PayModal extends Modal {
constructor (id, open, close) {
super(id, open, close);
this.open.addEventListener('click', this.openHandler.bind(this));
this.close.addEventListener('click', this.closeHandler.bind(this));
}
closeHandler() {
this.$el.querySelector('#purchaseInfo').onsubmit = null;
}
openHandler(e) {
if (e.target.id === 'payOpen') {
const targetInfo = e.target.dataset;
this.$el.querySelector('.title-field #title').value = targetInfo.title;
this.show();
this.$el.querySelector('#purchaseInfo').onsubmit = (e) => {
this.makePay(e, targetInfo);
}
} else {
this.hide();
}
}
makePay(e, info) {
e.preventDefault();
const payInfo = {
item: [{
id: info.id,
title: info.title
}],
totalPrice: parseFloat(info.price)
}
payInfo.payMethod = this.$el.querySelector('.payment-field #payment').value;
payInfo.phone = this.$el.querySelector('.phone-field #phone').value;
payInfo.email = this.$el.querySelector('.email-field #email').value;
console.log('Pay info: ', payInfo);
}
}

6
src/js/other/defaultColorBtn.js
View File

@ -1,6 +0,0 @@
export function defaultBtnColor(id, context) {
if (context.querySelector(`#roster #addItem[data-id="${id}"]`)) {
context.querySelector(`#roster #addItem[data-id="${id}"]`).classList.remove('orange');
context.querySelector(`#roster #addItem[data-id="${id}"] i`).innerHTML = 'shopping_cart';
}
}

2
src/js/templates/items.template.js
View File

@ -32,7 +32,7 @@ export function renderItems(categories, items) {
<span>${item.price.toFixed(2)}₽</span>
</div>
<div class="list-buttons">
<button class="btn-small waves-effect waves-light">Купить</button>
<button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="payOpen" class="btn-small waves-effect waves-light">Купить</button>
<button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="addItem" class="btn-small waves-effect waves-light"><i
class="material-icons">shopping_cart</i></button>
</div>

2
src/js/templates/itemsOne.template.js
View File

@ -31,7 +31,7 @@ export function renderItemsOne(category, items) {
<span>${item.price.toFixed(2)}₽</span>
</div>
<div class="list-buttons">
<button class="btn-small waves-effect waves-light">Купить</button>
<button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="payOpen" class="btn-small waves-effect waves-light">Купить</button>
<button data-id="${item._id}" data-title="${item.title}" data-date="${item.date}" data-count="${item.count}" data-price="${item.price}" id="addItem" class="btn-small waves-effect waves-light"><i
class="material-icons">shopping_cart</i></button>
</div>