added logic for notification

This commit is contained in:
Kostya
2023-12-20 17:29:02 +03:00
parent 33d40cc65a
commit 613ea20bb7
2 changed files with 18 additions and 12 deletions

View File

@@ -1,11 +1,9 @@
<template> <template>
<transition name="fade"> <div class="notification" v-if="notification">
<div class="notification" v-if="isAnimationOn">
<div class="notification__content"> <div class="notification__content">
<h3>Анимации выключены</h3> <h3>Успешное пополнение</h3>
</div> </div>
</div> </div>
</transition>
</template> </template>
<script> <script>
@@ -13,18 +11,18 @@ import '@/assets/css/ComponentsStyles/notification.css'
export default { export default {
props: { props: {
isAnimationOn: Boolean notification: Boolean
}, },
emits: ['animationchange'], emits: ['notificationremove'],
methods: { methods: {
NotificationsTimer() { NotificationsTimer() {
setTimeout(() => { setTimeout(() => {
this.$emit('animationchange', false) this.$emit('notificationremove')
}, 4000) }, 4000)
} }
}, },
watch: { watch: {
isAnimationOn(newVal, oldVal) { notification(newVal, oldVal) {
if (newVal !== oldVal) { if (newVal !== oldVal) {
this.NotificationsTimer() this.NotificationsTimer()
} }

View File

@@ -49,7 +49,8 @@
</div> </div>
</div> </div>
</section> </section>
<payments-modal v-if="openModal" @notifacetionmoney="notification = true" @closemodal="openModal = false" :payments="payments"></payments-modal> <payments-modal v-if="openModal" @notifacetionmoney="NotificationMethod" @closemodal="openModal = false" :payments="payments"></payments-modal>
<notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
</div> </div>
</template> </template>
@@ -59,12 +60,14 @@ import ChatComponent from "@/components/ChatComponent.vue";
import HeaderComponent from "@/components/HeaderComponent.vue"; import HeaderComponent from "@/components/HeaderComponent.vue";
import PaymentsModal from "@/components/PaymentsModal.vue"; import PaymentsModal from "@/components/PaymentsModal.vue";
import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue"; import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
import { GetCookie } from "@/assets/js/storage/CookieStorage"; import { GetCookie } from "@/assets/js/storage/CookieStorage";
import '@/assets/css/PagesStyles/profile.css' import '@/assets/css/PagesStyles/profile.css'
import {GetCurrentMoney} from "@/assets/js/rest/RestMethods"; import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
export default { export default {
components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal }, components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
data() { data() {
return { return {
username: 'Artemka', username: 'Artemka',
@@ -77,6 +80,7 @@ export default {
arrayHistory: [], arrayHistory: [],
} }
}, },
emits: ['notificationremove'],
mounted() { mounted() {
this.checkWindowSize() this.checkWindowSize()
@@ -108,6 +112,10 @@ export default {
this.openModal = true this.openModal = true
this.payments = false this.payments = false
}, },
NotificationMethod() {
this.notification = !this.notification
this.openModal = false
}
// formatNumber(number) { // formatNumber(number) {
// return number < 10 ? `0${number}` : number; // return number < 10 ? `0${number}` : number;
// }, // },