From ad804c3dea15df631d3774b2c179b72bd4964998 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 13 Jan 2024 12:00:37 +0300
Subject: [PATCH] added template for payments-mobile, add show for
 payments-mobile in profile-mobiile

---
 .../AdaptiveStyles/payments-modalmobile.css   | 50 +++++++++++++++
 .../adaptive-components/PaymentsMobile.vue    | 61 ++++++++++++++++++-
 .../adaptive-pages/ProfilemobilePage.vue      | 26 ++++++--
 3 files changed, 131 insertions(+), 6 deletions(-)
 create mode 100644 luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css
new file mode 100644
index 0000000..4509ae9
--- /dev/null
+++ b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css
@@ -0,0 +1,50 @@
+.root-mobile {
+    position: absolute;
+    top: 15%;
+    left: 10%;
+    background: #22252F;
+    width: 80%;
+    height: 405px;
+    max-width: 400px;
+}
+
+.payments-modal-mobile {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.text-style-mobile h1 {
+    font-size: 22px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+}
+
+.padding-elements__mobile h1,
+.padding-elements__mobile img {
+    padding: 3% 3%;
+}
+
+.icon-close__mobile {
+    margin-top: 2%;
+}
+
+.payments-modal-mobile__content h2 {
+    color: #44C6EF54;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    line-height: 31px;
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.payments-modal-mobile__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.payments-modal__btns-mobile ul {
+    display: flex;
+}
\ No newline at end of file
diff --git a/luckydiamond/src/components/adaptive-components/PaymentsMobile.vue b/luckydiamond/src/components/adaptive-components/PaymentsMobile.vue
index 4c85eec..63ad347 100644
--- a/luckydiamond/src/components/adaptive-components/PaymentsMobile.vue
+++ b/luckydiamond/src/components/adaptive-components/PaymentsMobile.vue
@@ -1,7 +1,64 @@
 <template>
-
+  <div class="root-mobile">
+    <div class="payments-modal-mobile text-style-mobile padding-elements__mobile">
+      <h1>{{ payments.paymentsView ? 'Пополнить' : 'Вывод' }}</h1>
+      <img
+          src="@/assets/icons-other/icon-payments-modal-close.svg"
+          class="icon-close__mobile"
+          @click="closeModal()"
+      >
+    </div>
+    <div class="payments-modal-mobile__content">
+      <h2>Сумма {{ payments.paymentsView ? 'пополнения' : 'вывода' }}</h2>
+      <div class="payments-modal__input">
+        <input type="text">
+        <div class="payments-modal__btns-mobile">
+          <ul>
+            <li v-for="number in PaymentsModalNumbers" :key="number">
+              <button>{{ number.diamonds }}</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="payments-modal__promocode" v-if="payments.paymentsView === true">
+        <input type="text">
+      </div>
+      <div class="payments-modal__agree checkbox-styles">
+        <input type="checkbox" v-model="agreeUser">
+        <h3>Я согласен с пользовательским соглашением.</h3>
+      </div>
+      <captcha-component :showcaptcha="agreeUser"></captcha-component>
+      <div class="payments-modal__submit">
+        <p>Вы подтверждаете правильность введенных данных при создании вывода.</p>
+        <button @click="closeModal()">{{ payments.paymentsView ? 'Пополнить' : 'Вывод' }}</button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
+import CaptchaComponent from "@/components/CaptchaComponent.vue";
 
-</script>
\ No newline at end of file
+import '@/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css'
+
+export default {
+  components: { CaptchaComponent },
+  props: [ 'payments' ],
+  data() {
+    return {
+      PaymentsModalNumbers,
+      agreeUser: false
+    }
+  },
+  methods: {
+    closeModal() {
+      return this.$emit('closemodal')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue b/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
index de8269c..b9100a3 100644
--- a/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
@@ -12,25 +12,43 @@
           <h3 class="text-nickname-user">Artmeka</h3>
           <h3 class="balance-border balance-display balance-text"><img src="@/assets/icons-profile/icon-diamond-ore.png">999</h3>
           <div class="profile-mobile__btns-payments">
-            <a href="#" class="deposit-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
-            <a href="#" class="withdraw-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
+            <a href="#" @click="paymetsCall('dep')" class="deposit-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
+            <a href="#" @click="paymetsCall('with')" class="withdraw-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
           </div>
         </div>
       </div>
     </main>
     <menu-mobile-component></menu-mobile-component>
-
+    <payments-mobile @closemodal="paymentsClose" :payments="payments" v-if="payments.paymentsWindow"></payments-mobile>
   </div>
 </template>
 
 <script>
 import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
 import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
+import PaymentsMobile from "@/components/adaptive-components/PaymentsMobile.vue";
 
 import '@/assets/css/PagesStyles/adaptive-pages/profilemobile.css'
 
 export default {
-  components: { HeaderMobileComponent, MenuMobileComponent }
+  components: { HeaderMobileComponent, MenuMobileComponent, PaymentsMobile },
+  data () {
+    return {
+      payments: {
+        paymentsWindow: false,
+        paymentsView: false
+      },
+    }
+  },
+  methods: {
+    paymetsCall(view) {
+      this.payments.paymentsWindow = true
+      this.payments.paymentsView = view === 'dep'
+    },
+    paymentsClose() {
+      this.payments.paymentsWindow = false
+    }
+  }
 }
 </script>