added connect for payments-modal, added event-bus for upd-money in profile and header

luckydiamond/src/components/adaptive-components/PaymentsMobile.vue

@@ -12,27 +12,39 @@
       <h2>Сумма {{ payments.paymentsView ? 'пополнения' : 'вывода' }}</h2>
       <div class="payments-modal__input input-style__mobile img-style">
         <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
-        <input type="number" v-model="number" class="input-mobile__number">
+        <input type="number" v-model="amount" class="input-mobile__number">
         <div class="payments-modal__btns-mobile">
           <ul class="button-style__mobile">
-            <li v-for="number in PaymentsModalNumbers" :key="number">
-              <button>{{ number.diamonds }}</button>
+            <li v-for="(number, index) in PaymentsModalNumbers" :key="index">
+              <button
+                  @click="clickedBtnChoice(index, number.diamonds)"
+                  :class="{
+                  'btn-click': clickedBtn === index,
+                  [number]: clickedBtn === number,
+                }"
+              >
+                {{ number.diamonds }}
+              </button>
             </li>
           </ul>
         </div>
+        <div class="payments-modal__card input-style__mobile" v-if="payments.paymentsView === false">
+          <h2>Номер карты</h2>
+          <input type="text" v-model="card" class="input-mobile__number">
+        </div>
       </div>
       <div class="payments-modal__promocode input-style__mobile" v-if="payments.paymentsView === true">
         <input type="text" placeholder="Введите промокод">
       </div>
       <div class="payments-modal__agree checkbox-styles">
-        <input v-if="!payments.paymentsView" type="checkbox" v-model="agreeUser">
-        <input v-else type="checkbox">
+        <input v-if="!payments.paymentsView" type="checkbox" @click="agreeUser = !agreeUser">
+        <input v-else type="checkbox" @click="agreeUserDonate = !agreeUserDonate">
         <h3>Я согласен с пользовательским соглашением.</h3>
       </div>
-      <captcha-component class="captcha-mobile" :showcaptcha="agreeUser"></captcha-component>
+      <captcha-component class="captcha-mobile" @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser"></captcha-component>
       <div class="payments-modal__submit">
         <p>Вы подтверждаете правильность введенных данных при создании вывода.</p>
-        <button @click="closeModal()">{{ payments.paymentsView ? 'Пополнить' : 'Вывод' }}</button>
+        <button @click="clickBtn()">{{ payments.paymentsView ? 'Пополнить' : 'Вывод' }}</button>
       </div>
     </div>
   </div>
@@ -42,6 +54,26 @@
 import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
 import CaptchaComponent from "@/components/CaptchaComponent.vue";
 
+import {
+  GettingMoneyOperation,
+  WithdrawMoneyOperation,
+} from "@/assets/js/moneyoperation/Claimmoney";
+import { eventBus } from "@/main";
+
+import { useVuelidate } from "@vuelidate/core";
+import {
+  minValue,
+  required,
+  numeric,
+  integer,
+  minLength,
+  maxLength,
+} from "@vuelidate/validators";
+
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+// import { ApplyPromoCode } from "@/assets/js/rest/RestMethods.js"; // Замените на правильный путь к файлу с функцией ApplyPromoCode
+
 import '@/assets/css/ComponentsStyles/AdaptiveStyles/payments-modalmobile.css'
 
 export default {
@@ -51,13 +83,147 @@ export default {
     return {
       PaymentsModalNumbers,
       agreeUser: false,
-      number: 0
+      agreeUserDonate: false,
+      amount: 0,
+      card: '',
+      captchaToken: null,
+      url: '',
+      clickedBtn: "",
+    }
+  },
+  watch: {
+    amount(DepositCount) {
+      console.log(DepositCount);
+      if (![1, 5, 10, 50, 100, 1000].includes(DepositCount)) {
+        this.clickedBtn = null;
+      } else {
+        let index;
+        switch (DepositCount) {
+          case 1:
+            index = 0;
+            break;
+          case 5:
+            index = 1;
+            break;
+          case 10:
+            index = 2;
+            break;
+          case 50:
+            index = 3;
+            break;
+          case 100:
+            index = 4;
+            break;
+          case 1000:
+            index = 5;
+            break;
+        }
+        this.clickedBtnChoice(index, DepositCount);
+      }
+    }
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations() {
+    return {
+      amount: { required, numeric, minValue: minValue(1), integer },
+      card: { required, numeric, minLength: minLength(5), maxLength: maxLength(5), integer }
     }
   },
   methods: {
     closeModal() {
       return this.$emit('closemodal')
-    }
+    },
+    clickBtn() {
+      this.v$.$touch()
+
+      if (this.payments.paymentsView === true) {
+
+        if (this.v$.amount.$error) {
+          console.log('error amount')
+        }
+
+        if (this.agreeUserDonate !== true) {
+          console.log('agreeuser error')
+        }
+
+        if (
+            !this.v$.amount.$error &&
+            this.agreeUserDonate === true
+        ) {
+          try {
+            GettingMoneyOperation(this.amount).then((response) => {
+              this.url = response
+
+              window.location.href = this.url;
+            })
+          }
+          catch (e) {
+            console.error(e)
+          }
+        }
+
+      }
+      else if (this.payments.paymentsView === false) {
+        this.v$.$touch()
+
+        if (this.v$.amount.$error) {
+          console.log('amount error')
+        }
+        if (this.v$.card.$error) {
+          console.log('card error')
+        }
+
+        if (this.agreeUser !== true) {
+          console.log('agree error')
+        }
+        if (this.captchaToken === null) {
+          console.log('token error')
+        }
+
+        let balanceUser = 0
+        GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+            .then((response) => {
+              balanceUser = response.currentMoney
+            })
+
+        if (this.amount < balanceUser) {
+          console.log('money small balance')
+        }
+
+        if (
+            !this.v$.amount.$error &&
+            !this.v$.card.$error &&
+            this.agreeUser === true &&
+            this.captchaToken !== null &&
+            this.amount >= balanceUser
+        ) {
+          WithdrawMoneyOperation(
+              this.amount,
+              this.card.toString(),
+              this.captchaToken
+          ) .then((response) => {
+            try {
+              console.log('work', response)
+              eventBus.emit('Updatebalance')
+              return this.$emit('closemodal')
+            }
+            catch (e) {
+              console.error(e)
+            }
+          })
+        }
+      }
+    },
+    claimCaptchaToken(Token) {
+      this.captchaToken = Token
+    },
+    clickedBtnChoice(index, content) {
+      this.clickedBtn = index;
+      this.amount = content;
+      console.log(index);
+    },
   }
 }
 </script>