add SettingsPage

luckydiamond/src/assets/css/PagesStyles/SettingsPage.css

@@ -0,0 +1,213 @@
+.profile__content {
+    width: 30%;
+    margin-left: 3%;
+}
+
+
+.icon-diamond h2 img {
+    width: 33px;
+    height: 33px;
+}
+
+.deposit-icon {
+    margin: 3px 0 0 10px;
+}
+
+.withdraw-icon {
+    margin-left: 33px;
+}
+
+.btn-bg {
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.12);
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 36%;
+}
+
+.btn-margin {
+    padding: 3.8% 46% 3% 14%;
+    margin-bottom: 11px;
+    background: #62D4B2;
+}
+
+.btn-display {
+    display: flex;
+}
+
+.text-btn {
+    text-decoration: none;
+    color: #000;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 18px;
+    margin-left: 4px;
+}
+
+.icon-margin-deposit-withdraw {
+    margin-right: 4px;
+}
+
+.withdraw {
+    padding: 3.8% 46% 3% 14%;
+    background: #EF4444;
+}
+
+
+.payments {
+    margin: 2% 0 0 -4.25%;
+}
+
+.types {
+    display: flex;
+}
+
+.types-margin h3 {
+    margin-right: 7.813em;
+}
+
+.types-text h3 {
+    color: #ABABB4;
+    font-weight: 600;
+    font-family: Montserrat;
+    font-size: 14px;
+}
+
+.types-line {
+    margin-top: 2.1%;
+    background: #38383E;
+    width: 86%;
+    height: 3px;
+}
+
+.payments__card {
+    margin-top: 4.9%;
+    display: flex;
+}
+
+.user-info {
+    display: flex;
+}
+
+.user-name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0.625em;
+}
+
+.user-name__text h3 {
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat;
+    font-size: 20px;
+}
+
+.user-name__text p {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 20px;
+}
+
+.data-info {
+    margin-left: 10%;
+}
+
+.data-info__text h3 {
+    color: #A9A9A9;
+    font-weight: 400;
+    font-family: Montserrat;
+    font-size: 17px;
+}
+
+.transaction-info {
+    margin-left: 7%;
+}
+
+.transaction-info__text h3 {
+    font-weight: 500;
+    font-family: Montserrat;
+    font-size: 22px;
+}
+
+.deposit-color h3 {
+    color: #32C966;
+}
+
+.withdraw-color h3 {
+    color: #EA3D38;
+}
+
+.error-deposit {
+    position: absolute;
+    left: 190px;
+    top: 52px;
+}
+
+.error-deposit h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 11px;
+}
+
+.error-card {
+    position: absolute;
+    top: 130px;
+    left: 210px;
+}
+
+.error-card h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 11px;
+}
+
+.error-checkbox h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 11px;
+}
+
+.error-captcha {
+    top: 235px;
+    left: 45px;
+    position: absolute;
+}
+
+.error-captcha h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 13px;
+}
+
+/* Media */
+
+@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
+    .profile__card h2 {
+        width: 72%;
+    }
+    .btn-margin {
+        padding-right: 56%;
+    }
+    .withdraw {
+        padding-right: 56%;
+    }
+}
+
+@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
+    .profile__card h2 {
+        width: 80%;
+    }
+    .btn-margin {
+        padding-right: 66%;
+    }
+    .withdraw {
+        padding-right: 66%;
+    }
+}
+
+/* /Media */

luckydiamond/src/components/AsidebarComponent.vue

@@ -2,7 +2,7 @@
   <aside class="menu">
     <div class="menu__content">
       <div class="menu__btn--home">
-        <a href="#" @click="$router.push({ name: 'home' })"><img width="73" height="73" src="../assets/icons-menu/home-icon.svg"></a>
+        <a href="" @click="$router.push({ name: 'home' })"><img width="73" height="73" src="../assets/icons-menu/home-icon.svg"></a>
       </div>
       <div class="menu__btns--gamemodes">
         <div class="menu__content--gamemodes">
@@ -13,23 +13,26 @@
         </div>
       </div>
       <div class="menu__btn--settings">
-        <a @click="ChangeAnimation" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
+        <a @click="SettingsPage=!SettingsPage" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
       </div>
     </div>
   </aside>
+  <SettingsPage></SettingsPage>
 </template>
 
 
 <script>
 // import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import '@/assets/css/ComponentsStyles/asidebar.css'
-
+import {
+  SettingsPage
+} from "@/pages/SettingsPage.vue"
 export default {
   name: 'AsideBar-Element',
-  // components: { NotiicationwindowComponent },
+  components: { SettingsPage },
   data() {
     return {
-      AnimationOff: false
+      SettingsPage: false
     }
   },
   // emits: ['animationchange'],

luckydiamond/src/pages/ProfilePage.vue

@@ -24,7 +24,7 @@
         <div class="payments__types">
           <div class="types types-margin types-text">
             <h3>Игрок и вид транзакции</h3>
-            <h3>sdds</h3>
+            <h3>Дата</h3>
             <h3>Сумма</h3>
           </div>
           <div class="types-line"></div>

luckydiamond/src/pages/SettingsPage.vue

@@ -0,0 +1,114 @@
+<template>
+    <profilemobile-page v-if="mobile"></profilemobile-page>
+    <div class="content__grid-profile" v-else>
+      <aside-bar-component></aside-bar-component>
+  
+      <chat-component></chat-component>
+  
+      <header-component></header-component>
+  
+    <section class="profile">
+      <div class="profile__content">
+        
+      </div>
+    </section>
+      <payments-modal v-if="openModal" @notifacetionmoney="NotificationEventListener" @closemodal="openModal = false" :payments="payments"></payments-modal>
+      <notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
+    </div>
+  </template>
+  
+  <script>
+  import AsideBarComponent from "@/components/AsidebarComponent.vue";
+  import ChatComponent from "@/components/ChatComponent.vue";
+  import HeaderComponent from "@/components/HeaderComponent.vue";
+  import PaymentsModal from "@/components/PaymentsModal.vue";
+  import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
+  import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
+  
+  import { GetCookie } from "@/assets/js/storage/CookieStorage";
+  import '@/assets/css/PagesStyles/SettingsPage.css'
+  import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+  
+  export default {
+    components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
+    data() {
+      return {
+        username: 'Artemka',
+        imageUrl: '',
+        notification: false,
+        balance: 0,
+        mobile: false,
+        openModal: false,
+        payments: true,
+        arrayHistory: [],
+      }
+    },
+    emits: ['notificationremove'],
+    mounted() {
+      this.checkWindowSize()
+  
+      this.AddWindowListener()
+    },
+    beforeUnmount() {
+      this.RemoveWindowListener()
+    },
+    created() {
+      this.username = GetCookie('SpUserName')
+  
+      GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+          .then((response) => {
+            this.balance = response.currentMoney
+            console.log('balance in profile', this.balance)
+          })
+          .catch((error) => {
+            console.error('error in profile, get money', error)
+          })
+  
+      this.imageUrl = `https://avatar.spworlds.ru/front/256/${this.username}`
+    },
+    methods: {
+      depositClick() {
+        this.openModal = true
+        this.payments = true
+      },
+      withdrawClick() {
+        this.openModal = true
+        this.payments = false
+      },
+      NotificationEventListener() {
+        this.notification = true
+        this.openModal = false
+      },
+      NotificationMethod() {
+        this.notification = false
+      }
+      // formatNumber(number) {
+      //   return number < 10 ? `0${number}` : number;
+      // },
+      // getCurrentFormattedDate() {
+      //   const currentDate = new Date();
+      //   return `${this.formatNumber(currentDate.getDate())}.${this.formatNumber(currentDate.getMonth() + 1)}.${currentDate.getFullYear()}, ${this.formatNumber(currentDate.getHours())}:${this.formatNumber(currentDate.getMinutes())}`;
+      // },
+      // claimDataDeposit(amount) {
+      //   const historyPayments = {
+      //     name: 'TEST USER',
+      //     comment: 'test',
+      //     data: this.getCurrentFormattedDate(),
+      //     amount: amount
+      //   }
+      //
+      //   this.arrayHistory.unshift(historyPayments)
+      // },
+      // claimDataWithdraw(amount) {
+      //   const historyPayments = {
+      //     name: 'TEST USER',
+      //     comment: 'test',
+      //     data: this.getCurrentFormattedDate(),
+      //     amount: -amount
+      //   }
+      //
+      //   this.arrayHistory.unshift(historyPayments)
+      // }
+    }
+  }
+  </script>