husanjon/getgreen-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restore composer.json, add mysqli extension

Browse Source
This commit is contained in:
husanjon
2026-04-15 17:02:52 +05:00
commit 77cf56a348
4317 changed files with 1397107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
resources/js/components/Products/BuyOneClick.vue Executable file
View File

@@ -0,0 +1,131 @@
<template>
<div>
<div class="modal fade buy-by-one-click" ref="buy_one_click" id="buy-by-one-click">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<i class="fal fa-times"></i>
</button>
<h4>{{ $t('vue.buy_one.title') }}</h4>
<div class="alert alert-danger" v-if="error">
<ul>
<li v-for="(error, index) in errors" :key="index">
<span v-for="msg in error" :key="msg">
{{ msg }}
</span>
</li>
</ul>
</div>
<form @submit.prevent="SendForm" class="my-form my-form__auth">
<div class="mt-4 my-form__group">
<input type="text" placeholder="" v-model="first_name" id="your_name2" required />
<label for="your_name2">{{ $t('vue.buy_one.first_name') }}</label>
</div>
<div class="mt-4 my-form__group">
<input type="tel" :placeholder="$t('vue.buy_one.phone_place')" v-model="phone" v-mask="'+### ## ###-##-##'" id="phoneee" required />
<label for="phoneee">{{ $t('vue.buy_one.phone') }}</label>
</div>
<div class="mt-4 my-form__group">
<input type="email" placeholder="" v-model="email" id="your_name" />
<label for="your_name">{{ $t('vue.buy_one.email') }}</label>
</div>
<div class="mt-4 my-form__group">
<textarea name="" id="your_message2" v-model="comment" cols="30" rows="5"></textarea>
<label for="your_message2">{{ $t('vue.buy_one.comment') }}</label>
</div>
<div class="mt-3 d-flex justify-content-md-end justify-content-center align-items-center">
<button type="sumbit" class="my-btn my-btn__orange">
{{ $t('vue.buy_one.send') }}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade success" ref="alertNotification">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<img src="/vendor/site/img/tick.png" alt="Tick icon">
<div class="my-3">
<h4 class="text-center">
{{ $t('vue.buy_one.thx') }}
</h4>
<h5 class="text-center px-lg-5">
{{ $t('vue.buy_one.thx_text') }}
</h5>
</div>
<div class="mt-4">
<button type="button" data-dismiss="modal" class="my-btn my-btn__orange">{{ $t('vue.noti.ok') }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
phoneProfile: {},
productId: {},
firstName: {}
},
data() {
return {
phone: this.phoneProfile,
first_name: this.firstName,
email: null,
comment: null,
product_id: this.productId,
error: false,
errors: []
}
},
methods: {
SendForm() {
const field = {
phone: this.phone,
first_name: this.first_name,
email: this.email,
comment: this.comment,
product_id: this.product_id
};
axios.post('/product/buy/click', field).then((response) => {
if (response.data.status) {
$(this.$refs.buy_one_click).modal('hide');
$(this.$refs.alertNotification).modal('show');
this.phone = this.phoneProfile;
this.first_name = null;
this.email = null;
this.comment = null
}
}).catch((error) => {
if (error.response) {
this.error = true;
this.errors = error.response.data.errors;
}
});
}
}
}
</script>
<style scoped>
</style>w

235
resources/js/components/Products/Credit.vue Executable file
View File

@@ -0,0 +1,235 @@
<template>
<div>
<div class="modal fade installment" id="installment" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body">
<!-- -->
<button class="close" data-dismiss="modal"><i class="fal fa-times"></i></button>
<div>
<h4 class="text-center">{{ $t('app.credit.title') }}</h4>
<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#by_alifmoliya">Alif Moliya</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#by_apelsin">Apelsin</a>
</li>
</ul>
<hr>
<div class="tab-content">
<div class="tab-pane container p-0 active" id="by_alifmoliya">
<form class="my-form my-form__auth">
<div class="row">
<div class="col-md-6">
<div class="my-form__group">
<input class="payment-price" readonly
:value="firstPay | number('0,0', { thousandsSeparator: ' ' })" type="number" id="initial-payment"
required="">
<label for="initial-payment">{{ $t('app.credit.alif.first_pay') }}</label>
</div>
<div class="small mt-1"><i class="fal fa-info-circle"></i> {{ $t('app.credit.alif.min_pay') }} {{ product.first_pay }}
</div>
</div>
<div class="col-md-6">
<div class="mt-md-0 mt-4 my-form__group">
<label>{{ $t('app.credit.alif.months') }}</label>
<div
class="d-flex justify-content-center align-items-center select-months">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input months"
id="month6" v-model="months" @change="handleMonth"
:value="6">
<label class="custom-control-label" for="month6">6
{{ $t('app.credit.month') }}</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input months"
id="month9" v-model="months" @change="handleMonth"
:value="9">
<label class="custom-control-label" for="month9">9
{{ $t('app.credit.month') }}.</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input months"
id="month12" v-model="months" @change="handleMonth"
:value="12">
<label class="custom-control-label" for="month12">12
{{ $t('app.credit.month') }}</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input months"
id="month3" v-model="months" @change="handleMonth"
:value="15">
<label class="custom-control-label" for="month3">15
{{ $t('app.credit.month') }}.</label>
</div>
<!-- <div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="month15" name="months"
value="customEx">
<label class="custom-control-label" for="month15">15 мес.</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="month18" name="months"
value="customEx">
<label class="custom-control-label" for="month18">18 мес.</label>
</div> -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="mt-4 my-form__group">
<input type="text" disabled="" :value="perMonth | number('0,0', { thousandsSeparator: ' ' })"
id="for_month" class="payment-price">
<label for="for_month">{{ $t('app.credit.alif.per_month') }}</label>
</div>
</div>
<div class="col-md-6">
<div class="mt-4 my-form__group">
<input type="text" disabled=""
:value="price | number('0,0', { thousandsSeparator: ' ' })"
class="payment-price" id="all_price">
<label for="all_price">{{ $t('app.credit.alif.price') }}</label>
</div>
</div>
<div class="col-md-6" v-if="phoneVerify">
<div class="mt-4 my-form__group">
<input type="tel"
v-model="phone"
v-mask="'+998 (##) ###-##-##'"
class="payment-price" id="phone">
<label for="phone">{{ $t('app.credit.alif.phone') }}</label>
</div>
</div>
<div class="col-md-6" v-if="phoneVerify">
<div class="mt-4 my-form__group" v-if="showVerify">
<input type="text"
v-mask="'####'"
v-model="verify"
class="payment-price" id="verify">
<label for="verify">{{ $t('app.credit.alif.verify_code') }}</label>
</div>
</div>
<div class="col-md-6 mx-auto mt-3">
<div
class="mt-4 d-flex justify-content-md-end justify-content-center align-items-center">
<button v-if="!phoneVerify" @click="showPhoneVerify" type="button" class="my-btn my-btn__orange w-100">
{{ $t('app.credit.btn') }}
</button>
<button v-if="phoneVerify && !showVerify" @click="sendPhone" type="button" class="my-btn my-btn__orange w-100">
{{ $t('app.credit.btn') }}
</button>
<button v-if="showVerify" @click="submit" type="button" class="my-btn my-btn__orange w-100">
{{ $t('app.credit.btn') }}
</button>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane container p-0 fade" id="by_apelsin">
<div class="mt-3">
<p>{{ $t('app.credit.apelsin_text') }}</p>
</div>
<div class="row">
<div class="col-md-6 mx-auto mt-3">
<a :href="`/product/oncredit/${product.id}`">
<button class="my-btn my-btn__orange w-100">{{ $t('app.credit.btn') }}</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Credit",
props: {
productData: {}
},
data() {
return {
product: this.productData,
firstPay: 0,
perMonth: this.productData.per_month,
price: Math.round(this.productData.price + (this.productData.price / 100) * 25),
months: 6,
phoneVerify: false,
showVerify: false,
phone: null,
verify: null
}
},
methods: {
handleFirstPay(event) {
if ((parseInt(event.target.value) < parseInt(this.product.first_pay)) || (parseInt(event.target.value) > parseInt(this.price)) || !event.target.value) {
this.firstPay = this.product.first_pay
} else {
this.perMonth = Math.round((this.price - this.firstPay) / this.months)
}
},
handleMonth(event) {
switch (this.months) {
case 6:
this.price = Math.round(this.product.price + (this.product.price / 100) * 25)
break
case 9:
this.price = Math.round(this.product.price + (this.product.price / 100) * 32)
break
case 12:
this.price = Math.round(this.product.price + (this.product.price / 100) * 38)
break
case 15:
this.price = Math.round(this.product.price + (this.product.price / 100) * 50)
break
}
this.months = parseInt(event.target.value)
this.perMonth = Math.round((this.price - this.firstPay) / parseInt(event.target.value))
},
showPhoneVerify(event) {
this.phoneVerify = true
},
sendPhone(event) {
axios.post('/product/phone-verify/', {phone: this.phone}).then(response => {
this.showVerify = true
})
},
submit() {
const form = new FormData()
form.append('phone', this.phone)
form.append('code', this.verify)
form.append('duration', this.months)
axios.post(`/product/oncredit/${this.product.id}`, form).then(response => {
$('#installment').modal('hide')
$('#success').modal('show')
})
}
}
}
</script>
<style scoped>
#initial-payment {
-webkit-appearance: none;
margin: 0;
-moz-appearance: textfield;
}
</style>

91
resources/js/components/Products/Notification.vue Executable file
View File

@@ -0,0 +1,91 @@
<template>
<div>
<div class="modal fade alert-when-has-product" ref="notification_available" id="alert-when-has-product">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal">
<i class="fal fa-times"></i>
</button>
<h4>{{ $t('vue.noti.title') }}</h4>
<p>{{ $t('vue.noti.text') }}</p>
<form @submit.prevent="SendForm" class="my-form my-form__auth">
<div class="mt-4 my-form__group">
<input type="tel" v-mask="'+### ## ###-##-##'" v-model="phone" :placeholder="$t('vue.buy_one.phone_place')" id="has_productsss" required />
<label for="has_productsss">{{ $t('vue.buy_one.phone') }}</label>
</div>
<div class="mt-3 d-flex justify-content-md-end justify-content-center align-items-center">
<button type="sumbit" class="my-btn my-btn__orange">{{ $t('vue.buy_one.send') }}</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade success" ref="alertNotification">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body text-center">
<img src="/vendor/site/img/tick.png" alt="Tick icon">
<div class="my-3">
<h5 class="text-center px-lg-5">
{{ $t('vue.noti.alert') }}
</h5>
</div>
<div class="mt-4">
<button type="button" data-dismiss="modal" class="my-btn my-btn__orange">{{ $t('vue.noti.ok') }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
productId: {},
phoneProfile: {}
},
data() {
return {
phone: this.phoneProfile,
product_id: this.productId
}
},
methods: {
async SendForm() {
const { data } = await axios.post('/product/notification/available', {
phone: this.phone,
product_id: this.product_id
});
if (data.status) {
if (!this.phoneProfile) {
this.phone = null;
} else {
this.phone = '+' + this.phoneProfile;
}
$(this.$refs.notification_available).modal('hide');
$(this.$refs.alertNotification).modal('show');
}
},
doSomethingOnHidden(){
alert('hidden')
}
}
}
</script>
<style scoped>
</style>

131
resources/js/components/Products/Product.vue Executable file
View File

@@ -0,0 +1,131 @@
<template>
<div class="product">
<div class="product-top">
<div class="type" v-if="product.diffDate && product.isAvailable">NEW</div>
<div class="discound" v-if="product.discountPrice > 0 && product.price_discount && product.isAvailable">
{{ $t('vue.sale') }}
</div>
<div class="xit" v-if="product.leader_of_sales && product.isAvailable">{{ $t('vue.xit') }}</div>
<div class="no-product" v-if="!product.isAvailable">{{ $t('vue.not_available') }}</div>
</div>
<a :href="'/product/show/' + product.id + '-' + product.slug" class="product-img">
<img :src="'/' + product.poster_thumb" :class="!product.isAvailable ? 'no-product-img' : ''" :alt="getName(product.name)" />
</a>
<div class="product-category">
<a v-for="(category, index) in product.categories" :href="category.link">
{{ getName(category.name) }}
</a>
</div>
<h3 class="product-title">
<a :href="'/product/show/' + product.id + '-' + product.slug">
{{ getName(product.name) }}
</a>
</h3>
<div class="product-price">
<div class="old-price" v-if="product.price_discount">
{{ product.price | number('0,0', { thousandsSeparator: ' ' }) }} {{ $t('app.sum') }}
</div>
<div class="new-price">
{{ product.price_discount ? product.price_discount : product.price | number('0,0', { thousandsSeparator: ' ' }) }} {{ $t('app.sum') }}
</div>
</div>
<div class="product-buttons">
<div class="product-to_cart">
<button v-if="product.isAvailable && !product.isCart" :class="product.isCart ? 'product-to_basket is-active' : 'product-to_basket'" @click="AddToCart(product)">
<i class="far fa-shopping-basket"></i>
<span>{{ $t('app.product.in_cart') }}</span>
<div class="added-to-basket" v-html="$t('vue.favorite.added_to_basket')">
</div>
</button>
<button v-if="product.isAvailable && product.isCart" data-target="#basket_modal" data-toggle="modal" :class="product.isCart ? 'product-to_basket is-active' : 'product-to_basket'" @click="AddToCart(product)">
<i class="far fa-shopping-basket"></i>
<span>{{ $t('app.product.in_cart') }}</span>
</button>
<!-- <button class="product-to_compare">-->
<!-- <i class="far fa-balance-scale"></i>-->
<!-- </button>-->
</div>
<button class="product-to_favorite" data-target="#login" data-toggle="modal" v-if="!loginInfo">
<i class="fas fa-heart"></i>
</button>
<button :class="product.isFavorite ? 'product-to_favorite is-active' : 'product-to_favorite'" @click="Favorite(product)" v-if="loginInfo">
<i class="fas fa-heart"></i>
</button>
</div>
</div>
</template>
<script>
export default {
props: ['product', 'loginInfo'],
methods: {
getName(name) {
const lang = document.documentElement.lang.substr(0, 2);
let value = '';
if (lang) {
switch(lang){
case "ru":
value = name.ru;
break;
case "uz":
value = name.uz;
break;
}
} else {
value = name.ru;
}
return value;
},
async Favorite(product) {
var field = document.getElementById("favorite-count");
var count = field.value;
if (product.isFavorite === false) {
const { data } = await axios.get('/favorites/store/' + product.id);
this.product.isFavorite = true;
field.value = parseInt(count) + 1;
} else {
const { data } = await axios.get('/favorites/delete/' + product.id);
this.product.isFavorite = false;
field.value = parseInt(count) - 1;
}
},
async AddToCart(product) {
if (this.product.isCart){
this.$eventBus.$emit('cart-preview');
return;
}
const fields = {
product_id: product.children.id,
count: 1
};
const { data } = await axios.post('/cart/store', fields);
if (data.status) {
product.isCart = true;
var basket = document.getElementById("basket-count");
basket.value = data.count;
}
}
}
};
</script>
<style lang="scss" scoped>
</style>

511
resources/js/components/Products/ProductShow.vue Executable file
View File

@@ -0,0 +1,511 @@
<template>
<section class="section-product-item">
<div class="container">
<div class="row" itemtype="http://schema.org/Product" itemscope>
<meta itemprop="mpn" :content="product.id" />
<meta itemprop="name" :content="getName(product.name)" />
<link itemprop="image" :href="product.children.screen.path_thumb" />
<meta itemprop="description" :content="getName(product.short_body)" />
<div itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
<link itemprop="url" :href="'https://alistore.uz/product/show/' + product.id + '-' + product.slug " />
<meta itemprop="availability" content="https://schema.org/InStock" />
<meta itemprop="priceCurrency" content="UZS" />
<meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
<meta itemprop="price" :content="product.price_discount ? product.price_discount : product.price" />
</div>
<div class="col-lg-4">
<div class="product-cart">
<div class="product-top">
<div class="type" v-if="product.diffDate && product.isAvailable">NEW</div>
<div class="discound" v-if="product.discountPrice > 0 && product.price_discount && product.isAvailable">
{{ $t('vue.sale') }}
</div>
<div class="xit" v-if="product.leader_of_sales && product.isAvailable">{{ $t('vue.xit') }}</div>
<div class="discound"
v-if="product.discountPrice > 0 && product.price_discount && product.isAvailable">-{{
product.discountPrice }}%
</div>
<div class="xit" v-if="product.leader_of_sales && product.isAvailable">{{ $t('vue.xit') }}
</div>
<div class="no-product" v-if="!product.isAvailable">{{ $t('vue.not_available') }}</div>
</div>
<div class="product-buttons">
<button class="product-to_favorite" data-target="#login" data-toggle="modal"
v-if="!loginInfo">
<i class="fas fa-heart"></i>
</button>
<button
:class="product.isFavorite ? 'product-to_favorite is-active' : 'product-to_favorite'"
@click="Favorite(product)" v-if="loginInfo">
<i class="fas fa-heart"></i>
</button>
<!-- <button class="product-to_compare mt-2">-->
<!-- <i class="far fa-balance-scale"></i>-->
<!-- </button>-->
</div>
</div>
<div class="slider slider-big" id="aniimated-thumbnial">
<div class="slider__content" v-for="(screen, index) in product.childrens[0].screens">
<div class="slider__img">
<div class="item" :data-src="'/' + screen.path">
<img :src="'/' + screen.path_thumb" :alt="getName(product.name)">
</div>
</div>
</div>
</div>
<div class="slider slider-small py-3 px-2" id="aniimated-thumbnials">
<div class="slider__img" v-for="(screen, index) in product.childrens[0].screens">
<div class="item1" :data-src="'/' + screen.path">
<img class="" :src="'/' + screen.path_thumb" :alt="getName(product.name)">
</div>
</div>
</div>
</div>
<div class="col-lg-8 view_box">
<div class="product pt-lg-3 pt-0">
<div class="share d-flex align-items-md-center mt-lg-4 mt-2 flex-column flex-md-row mb-3">
<p class="mb-md-0 mr-md-3 mt-1">{{ $t('vue.news.news_share') }}:</p>
<div class="socials">
<ShareNetwork :url="url" network="facebook" :title="getName(product.name)">
<i class="fab fa-facebook-f"></i>
</ShareNetwork>
<ShareNetwork :url="url" network="telegram" :title="getName(product.name)">
<i class="fab fa-telegram-plane"></i>
</ShareNetwork>
<ShareNetwork :url="url" network="vk" :title="getName(product.name)">
<i class="fab fa-vk"></i>
</ShareNetwork>
<ShareNetwork :url="url" network="odnoklassniki" :title="getName(product.name)">
<i class="fab fa-odnoklassniki"></i>
</ShareNetwork>
</div>
</div>
<h1 class="product-title">
{{ getName(product.name) }}
</h1>
<div class="product-price mb-0">
<div class="new-price">
{{ product.price_discount ? product.price_discount : product.price | number('0,0', {
thousandsSeparator: ' ' }) }} {{ $t('app.sum') }}
</div>
<div class="old-price mt-1" v-if="product.price_discount">
{{ product.price | number('0,0', { thousandsSeparator: ' ' }) }} {{ $t('app.sum') }}
</div>
</div>
<div class="product-price align-items-md-center h-100" v-if="settingData.on_credit && product.category.credit && product.price > 500000 && product.price > 500000">
<h3 class="product-title mr-2 mt-3 mt-md-0 mb-0">{{ $t('vue.product.in_credit') }}</h3>
<div class="new-price">{{ product.onCredit | number('0,0', { thousandsSeparator: ' ' }) }}
{{ $t('vue.product.sum_m') }}
</div>
</div>
<p class="product-subtitle" v-html="getName(product.short_body)">
</p>
<div class="product-color" v-if="colors">
<p>{{ $t('vue.cart.product_color_title') }}:</p>
<div class="colors">
<ul>
<li v-for="(color, index) in product.childrens" :key="index">
<label v-if="color.color">
<input type="radio" name="color" v-model="color_id" value="black"
:checked="index === 0">
<span class="swatch"
:style="{ 'background-color': '#' + color.color.color, 'border-color': '#' + color.color.color }"></span>
</label>
</li>
</ul>
</div>
</div>
<div class="d-flex align-items-md-center flex-wrap flex-md-row" v-if="product.isAvailable">
<div class="product-count">
<span class="decrement" @click="CountMinus"><i class="fal fa-minus"></i></span>
<input type="text" value="1" v-model="count" min="0" readonly>
<span class="increment" @click="CountAdd"><i class="fal fa-plus"></i></span>
</div>
<div class="product-buttons">
<button v-if="!product.isCart"
:class="product.isCart ? 'product-to_basket is-actived is-active' : 'product-to_basket is-actived'"
@click="AddToCart">
<i class="far fa-shopping-basket"></i>
<span class="d-inline-block">{{ $t('vue.cart.product_to_basket_title') }}</span>
<div class="added-to-basket" v-html="$t('vue.favorite.added_to_basket')">
</div>
</button>
<button v-if="product.isCart"
:class="product.isCart ? 'product-to_basket is-actived is-active' : 'product-to_basket is-actived'"
@click="AddToCart" data-target="#basket_modal" data-toggle="modal">
<i class="far fa-shopping-basket"></i>
<span class="d-inline-block">{{ $t('vue.cart.product_to_basket_title') }}</span>
</button>
<div v-if="product.category.credit && product.price > 500000">
<a href="javasciprt:" v-if="!loginInfo && settingData.on_credit && product.price > 500000"
data-target="#login" data-toggle="modal" @click="CreditCookie"
class="btn-links btn-links__one">{{ $t('vue.cart.buy_in_credit') }}</a>
<a href="javasciprt:" data-target="#installment" data-toggle="modal"
v-if="loginInfo && settingData.on_credit && product.price > 500000" class="btn-links btn-links__one">{{
$t('vue.cart.buy_in_credit') }}</a>
</div>
<a href="javascript:0" class="btn-links btn-links__one bg__green"
data-target="#buy-by-one-click" data-toggle="modal">{{ $t('vue.cart.buy_in_click')
}}</a>
</div>
</div>
<div class="now-no-product" v-if="!product.isAvailable">
<p>{{ $t('vue.not_available') }}</p>
<button data-target="#alert-when-has-product" data-toggle="modal">{{ $t('vue.notification')
}}
</button>
</div>
<div class="payments d-flex align-items-center my-4 flex-wrap">
<p class="mr-3 mb-0">{{ $t('vue.cart.payment_title') }}: </p>
<div class="d-flex align-items-baseline flex-wrap">
<div class="payments-item mr-md-4 m-3 ml-md-0 my-md-0">
<img class="img-fluid" src="/vendor/site/img/apelsin.png" alt="Apelsin">
</div>
<div class="payments-item mr-md-4 m-3 ml-md-0 my-md-0">
<img class="img-fluid" src="/vendor/site/img/click.png" alt="Click">
</div>
<div class="payments-item mr-md-4 m-3 ml-md-0 my-md-0">
<img class="img-fluid" src="/vendor/site/img/payme.png" alt="Payme">
</div>
<div class="payments-item mr-md-4 m-3 ml-md-0 my-md-0">
<img class="img-fluid" src="/vendor/site/img/naqt.png" alt="Naqt">
<span style="transform: translateY(2px);" class="ml-1 d-inline-block">{{ $t('vue.checkout.delivery_in_cash') }}</span>
</div>
</div>
</div>
<div class="product-info mb-2" v-if="settingData.delivery">
<p><b>{{ $t('vue.checkout.delivery_title') }}:</b>
{{ getName(settingData.other.delivery) }}
</p>
</div>
<div class="product-info mb-2" v-if="settingData.pickup">
<p><b>{{ $t('vue.checkout.delivery_pickup') }}:</b> {{ getName(settingData.other.pickup) }}
</p>
</div>
</div>
</div>
</div>
<div class="all_tabs py-4">
<ul class="tabs">
<li :class="product.characteristics.length > 0 ? 'active' : ''"
v-if="product.characteristics.length > 0" rel="tab1">{{ $t('vue.cart.characteristic') }}
</li>
<li :class="product.characteristics.length === 0 ? 'active' : ''" rel="tab2">{{
$t('vue.cart.description') }}
</li>
<li rel="tab3">{{ $t('vue.cart.reviews') }} <span class="badge badge-secondary">{{ product.comments.length }}</span>
</li>
<!-- <li rel="tab3">{{ $t('vue.cart.reviews') }} <sup><span class="badge badge-secondary" style="font-size: 100%;">5</span></sup></li>-->
</ul>
<div class="tab_container">
<h3 class="d_active tab_drawer_heading" rel="tab1" v-if="product.characteristics.length > 0 ">{{
$t('vue.cart.characteristic') }}</h3>
<div id="tab1" class="tab_content" v-if="product.characteristics.length > 0 ">
<h4 class="title title--lg p-b-15 view__title">{{ $t('vue.cart.all_characteristic') }}</h4>
<table class="view__table table table-bordered table-striped">
<tbody>
<tr v-for="(char, index) in product.characteristics" :key="index"
v-if="char.pivot.value != 'null'">
<td class="view__td-1">
<div class="view__td-dots">
<span class="view__td-info">
{{ getName(char.name) }}
</span>
</div>
</td>
<td class="view__td-2" v-if="char.type === 'checkbox'">
<span v-if="char.pivot.value === 'true'">
{{ $t('app.exist') }}
</span>
<span v-if="char.pivot.value === 'false'">
{{ $t('app.no') }}
</span>
</td>
<td class="view__td-2" v-else>
{{ char.pivot.value }}
</td>
</tr>
</tbody>
</table>
</div>
<!-- #tab1 -->
<h3 class="tab_drawer_heading" rel="tab2">{{ $t('vue.cart.description') }}</h3>
<div id="tab2" class="tab_content" v-html="getName(product.body)">
</div>
<!-- #tab2 -->
<h3 class="tab_drawer_heading" rel="tab3">{{ $t('vue.cart.reviews') }} <span
class="badge badge-secondary">{{ product.comments.length }}</span></h3>
<div id="tab3" class="tab_content">
<div class="container">
<div class="row">
<div class="message-wrap">
<div id="review" v-if="product.comments.length === 0">
<p>{{ $t('vue.cart.no_reviews') }}</p>
</div>
<div class="msg-wrap" v-if="product.comments.length > 0">
<comment-list v-for="(comment, index) in product.comments"
:comment-data="comment" :key="index"></comment-list>
</div>
</div>
</div>
</div>
<hr>
<div v-if="!loginInfo">
<h5>{{ $t('vue.cart.only_comment_after_auth') }}</h5>
<button type="button" class="my-btn my-btn__orange mt-3" data-target="#login"
data-toggle="modal">
{{ $t('vue.login.auth_title') }}
</button>
</div>
<div class="alert alert-success" v-if="alertComment">
<i class="fas fa-info-circle"></i> {{ $t('vue.cart.success_comment') }}
</div>
<form class="form-horizontal" @submit.prevent="StoreComment" id="form-review" v-if="loginInfo">
<h2>{{ $t('vue.cart.write_review') }}</h2>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">{{ $t('vue.cart.your_name')
}}:</label>
<input type="text" name="name" v-model="comment.first_name" value="" id="input-name"
class="form-control">
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">{{ $t('vue.cart.your_review')
}}:</label>
<textarea name="text" v-model="comment.body" rows="5" id="input-review"
class="form-control"></textarea>
<!-- <div class="help-block">-->
<!-- <span style="color: #FF0000;">{{ $t('vue.cart.only_text') }}</span>-->
<!-- </div>-->
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">{{ $t('vue.cart.product_rating') }}</label>
&nbsp;&nbsp;&nbsp;{{ $t('vue.cart.bad') }}&nbsp;
<input type="radio" name="rating" v-model="comment.star" value="1">
&nbsp;
<input type="radio" name="rating" v-model="comment.star" value="2">
&nbsp;
<input type="radio" name="rating" v-model="comment.star" value="3">
&nbsp;
<input type="radio" name="rating" v-model="comment.star" value="4">
&nbsp;
<input type="radio" name="rating" v-model="comment.star" value="5">
&nbsp;{{ $t('vue.cart.good') }}
</div>
</div>
<div class="buttons clearfix">
<div class="pull-right">
<button type="submit" id="button-review" data-loading-text="Загрузка..."
class="btn btn-primary">{{ $t('vue.cart.sending') }}
</button>
</div>
</div>
</form>
</div>
<!-- #tab3 -->
</div>
</div>
</div>
<notification :product-id="this.product.id" v-if="!product.isAvailable"
:phone-profile="this.phoneProfile"></notification>
<buy-one-click :product-id="this.product.id" v-if="product.isAvailable" :phone-profile="this.phoneProfile"
:first-name="this.firstName"></buy-one-click>
</section>
</template>
<script>
import CommentList from '../Comment/CommentList';
import Notification from './Notification';
import BuyOneClick from './BuyOneClick';
import VueSocialSharing from 'vue-social-sharing'
export default {
props: {
productData: {},
loginInfo: {},
firstName: {},
settingData: {},
phoneProfile: {}
},
components: {
'comment-list': CommentList,
'ShareSocial': VueSocialSharing,
'notification': Notification,
'buy-one-click': BuyOneClick
},
created() {
this.url = window.location.href;
},
data() {
return {
product: this.productData,
count: 1,
color_id: null,
comment: {
star: 0,
body: '',
first_name: this.firstName
},
alertComment: false,
alertBasket: false,
colors: false,
url: ''
}
},
methods: {
getName(name) {
const lang = document.documentElement.lang.substr(0, 2);
let value = '';
if (name) {
if (lang) {
switch(lang){
case "ru":
value = name.ru;
break;
case "uz":
value = name.uz;
break;
default:
value = name.ru;
break;
}
} else {
value = name.ru;
}
return value;
}
},
async Favorite(product) {
var field = document.getElementById("favorite-count");
var count = field.value;
if (product.isFavorite === false) {
const { data } = await axios.get('/favorites/store/' + product.id);
this.product.isFavorite = true;
field.value = parseInt(count) + 1;
} else {
const { data } = await axios.get('/favorites/delete/' + product.id);
this.product.isFavorite = false;
field.value = parseInt(count) - 1;
}
},
async AddToCart() {
if (this.product.isCart) {
this.$eventBus.$emit('cart-preview');
return;
}
const fields = {
product_id: this.product.childrens[0].id,
count: this.count
};
const { data } = await axios.post('/cart/store', fields);
if (data.status) {
this.product.isCart = true;
var basket = document.getElementById("basket-count");
basket.value = data.count;
}
},
CountMinus() {
if (this.product.isAvailable) {
if (this.count <= 1) {
return 1;
} else {
this.count -= 1;
}
}
},
CountAdd() {
if (this.product.isAvailable && this.product.count > this.count) {
this.count += 1;
}
},
CreditCookie() {
this.$cookie.delete('cart-preview');
this.$cookie.set('product-credit', this.product.id);
},
async StoreComment() {
const { data } = await axios.post('/product/comment/' + this.product.id, this.comment);
if (data.status) {
this.comment = {
star: 0,
body: '',
first_name: this.firstName
};
this.alertComment = true;
}
}
}
}
</script>

157
resources/js/components/Products/ProductSlider.vue Executable file
View File

@@ -0,0 +1,157 @@
<template>
<swiper
ref="mySwiper"
class="swiper-container swiper-product swiper-product-lider_sales"
:options="swiperOptions"
>
<swiper-slide v-for="(product, index) in products" :key="index">
<Product :product="product" :login-info="loginInfo"/>
</swiper-slide>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-next-product" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-prev-product" slot="button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-product" slot="pagination"></div>
</swiper>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
//import "swiper/swiper-bundle.css";
import Product from './Product.vue';
import 'swiper/css/swiper.css'
export default {
props: {
productsData: {},
loginInfo: {}
},
components: {
Swiper,
SwiperSlide,
Product
},
data() {
return {
swiperOptions: {
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next-product",
prevEl: ".swiper-button-prev-product",
},
pagination: {
el: ".swiper-pagination-product",
dynamicBullets: true,
},
breakpoints: {
1200: {
slidesPerView: 5,
},
1024: {
slidesPerView: 4,
},
768: {
slidesPerView: 3,
},
576: {
slidesPerView: 2,
},
0: {
slidesPerView: 1.3,
},
},
autoplay: {
delay: 4000,
},
},
products: this.productsData,
};
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
},
},
};
</script>
<style scoped lang="scss">
$breakpoints: (
"phone-smallest": 251px,
"phone-small": 321px,
"phone": 400px,
"phone-wide": 480px,
"phablet": 560px,
"tablet-small": 640px,
"tablet": 768px,
"tablet-wide": 1024px,
"desktop": 1248px,
"desktop-wide": 1440px,
"desktop-large": 2500px,
);
@mixin mq($width, $type: min) {
@if map_has_key($breakpoints, $width) {
$width: map_get($breakpoints, $width);
@if $type==max {
$width: $width - 1px;
}
@media only screen and (#{$type}-width: $width) {
@content;
}
}
}
// Transition
%tr03 {
transition: all 0.3s ease-out;
}
%tr02 {
transition: all 0.2s ease-out;
}
$my-orange: rgb(255, 98, 26);
$my-dark-gray: #5b5b5b;
$my-blue-dark: #0a0d21;
// Vertical or Horizontal position
%v-c {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
%h-c {
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
%c-c {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.swiper-product {
padding: 75px 0 50px;
margin-top: -50px;
padding-left: 10px;
padding-right: 10px;
@include mq("tablet", max) {
margin-left: -15px;
margin-right: -15px;
padding-bottom: 30px;
}
}
</style>