diff --git a/ShopVue/img/default.jpg b/ShopVue/img/default.jpg new file mode 100644 index 0000000..af3ffa7 Binary files /dev/null and b/ShopVue/img/default.jpg differ diff --git a/ShopVue/index.html b/ShopVue/index.html new file mode 100644 index 0000000..4d596bc --- /dev/null +++ b/ShopVue/index.html @@ -0,0 +1,31 @@ + + + + + + Document + + + + +
+
+
+

{{title}}

+
+ +
+
+ +
+ +
+ + + + + + + + + diff --git a/ShopVue/js/Cart.js b/ShopVue/js/Cart.js new file mode 100644 index 0000000..0c30d80 --- /dev/null +++ b/ShopVue/js/Cart.js @@ -0,0 +1,71 @@ +Vue.component('cart', { + data() { + + return { + basket: [], + basketFile: 'getBasket.json', + isVisibleCart: false, + basket_amount: 0, + countGoods: 0, + } + }, + + methods: { + + deleteProduct(product_name) { + console.log(product_name); + for (let i = 0; i < this.basket.length; i++) { + if (this.basket[i].product_name === product_name) { + if (this.basket[i].quantity >= 2) { + this.basket[i].quantity--; + } else { + this.basket.splice(i, 1); + } + } + } + + + console.log(this.basket); + } + + }, + created() { + + this.$parent.getRequest(this.basketFile) + .then(data => { + console.log(data); + this.countGoods = data.countGoods; + this.basket_amount = data.amount; + this.basket = data.contents; + console.log(this.basket); + + }).catch(error => { + this.$parent.showError(error); + }); + }, + + template: `
+ + +
+ + +
+
` +}); + + +Vue.component('cart-item', { + props: ['item'], + template: `
+ {{item.product_name}} + x ({{item.quantity}}) + {{item.price * item.quantity}} P + +
+
` +}); diff --git a/ShopVue/js/Error.js b/ShopVue/js/Error.js new file mode 100644 index 0000000..a3e3806 --- /dev/null +++ b/ShopVue/js/Error.js @@ -0,0 +1,24 @@ +Vue.component('error', { + + data() { + + return { + error: '', + isError: false + } + }, + + methods: { + + closeError() { + this.$el.close(); + } + + }, + + template: ` +

Возникла ошибка - {{error}}

+ + ` + +}); diff --git a/ShopVue/js/Product.js b/ShopVue/js/Product.js new file mode 100644 index 0000000..2b562b2 --- /dev/null +++ b/ShopVue/js/Product.js @@ -0,0 +1,89 @@ +Vue.component('products', { + data() { + + return { + products: [], + filtered_products: [], + catalogFile: 'catalogData.json', + isNoProducts: false, + } + + }, + methods: { + + addProduct(product) { + this.$parent.getRequest('addToBasket.json') + .then(data => { + if (data.result === 1) { + this.addToBasket(product); + } + }); + + }, + + addToBasket(product) { + let isAdded = false; + for (item of this.$root.$refs.cart.basket) { + if (item.product_name === product.product_name) { + item.quantity += 1; + isAdded = true; + break; + } + } + + if (!isAdded) { + //product['quantity'] = 1; + let prod = Object.assign({ + quantity: 1 + }, product); + this.$root.$refs.cart.basket.push(prod); + } + + }, + + + }, + created() { + + this.$parent.getRequest(this.catalogFile) + .then(data => { + console.log(data); + for (let item of data) { + this.filtered_products.push(item); + this.products.push(item); + } + if (this.products.length === 0) { + this.isNoProducts = true; + } + console.log(this.products); + + }).catch(error => { + this.$parent.showError(error); + }); + }, + + template: `
+
+

Нет данных

+
+ + +
` + + +}); + + +Vue.component('product-item', { + + props: ['product'], + template: `
+ +

{{product.product_name}}

+

price - \${{product.price}}P

+ +
` +}); diff --git a/ShopVue/js/SearchLine.js b/ShopVue/js/SearchLine.js new file mode 100644 index 0000000..703e17b --- /dev/null +++ b/ShopVue/js/SearchLine.js @@ -0,0 +1,32 @@ +Vue.component('search_line', { + + data() { + + return { + search_info: '' + } + + }, + + methods : { + + filterGoods() { + regExp = new RegExp(this.search_info, 'igm'); + console.log(this.$root.$refs.products.products); + this.$root.$refs.products.filtered_products = this.$root.$refs.products.products.filter(el => regExp.test(el.product_name)) + }, + + }, + + template: ` + + + + +
+ + + +
` +}); + diff --git a/ShopVue/js/main.js b/ShopVue/js/main.js new file mode 100644 index 0000000..a2bef7e --- /dev/null +++ b/ShopVue/js/main.js @@ -0,0 +1,32 @@ +const API = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses/'; + +const app = new Vue({ + + el: '#app', + + data: { + + title: 'Интернет магазин', + + }, + + methods: { + + getRequest(jsonFile) { + + return fetch(`${API}${jsonFile}`) + .then(result => result.json()) + .catch(error => error) + + }, + + showError(error) { + let error_block = this.$root.$refs.error; + console.log(error_block); + error_block.error = error; + error_block.$el.showModal(); + }, + + }, + +}); diff --git a/ShopVue/styles/main.css b/ShopVue/styles/main.css new file mode 100644 index 0000000..f902ec2 --- /dev/null +++ b/ShopVue/styles/main.css @@ -0,0 +1,146 @@ +* { + margin: 0; + padding: 0; +} + +.header { + min-height: 60px; + background-color: aqua; + position: relative; +} + +h1 { + padding-top: 10px; +} + +.cart { + + position: absolute; + top: 10px; + right: 20px; + +} + +.search { + float: left; + margin-top: 3px; + margin-right: 20px; + border-collapse: collapse; +} + +.search_line { + border-bottom: 2px solid black; + padding: 2px; +} + +.search_line input { + padding: 5px; +} + +.search_btn { + border-bottom: 2px solid black; +} + +.search_btn .find { + display: block; + height: 30px; +} + +.btn-cart { + display: block; + right: 12px; + top: 10px; + width: 90px; + height: 40px; + +} + +.main-btn { + text-align: center; + display: block; + width: 150px; + height: 50px; + margin: 0 auto; +} + +.products { + min-height: 100px; + border: 1px solid black; +} + +.product-item { + margin: 15px 15px; + background-color: azure; + border: 1px solid black; + box-shadow: 0 0 10px rgba(0,0,0,0.5); +} + +.product-item img { + display: block; + max-height: 100px; + margin: 10px 10px; + float: left; + border-radius: 10%; +} + +.product-item h3 { + text-align: center; + margin-top: 10px; + font-style: oblique; +} + +.product-item p { + text-align: center; + margin-top: 10px; + color: royalblue; + font-style: italic; +} + +.product-item .by-btn { + display: block; + text-align: center; + height: 40px; + width: 150px; + margin: 10px auto; +} + +.user_cart { + position: absolute; + background-color: lightgrey; + display: block; + min-height: 50px; + width: 200px; + right: 5px; + top: 50px +} + +.user_cart:before { + content: ''; + width: 0; + position: absolute; + height: 0; + border-right: 10px solid transparent; + border-left: 10px solid transparent; + border-bottom: 10px solid lightgrey; + top: -10px; + right: 35px; +} + +.basket_item { + width: inherit; +} + +.hide { + display: none; +} + +.no_products p { + display: block; + margin: 0 auto; + font-size: 20px; + text-align: center; +} + +.error { + margin: 0 auto; +} \ No newline at end of file