added captcha in paymentsmodal withdraw

luckydiamond/src/components/CaptchaComponent.vue

@@ -0,0 +1,45 @@
+<template>
+  <vue-recaptcha v-show="showcaptcha" sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8"
+                 size="normal"
+                 theme="dark"
+                 hl="tr"
+                 :loading-timeout="loadingTimeout"
+                 @verify="recaptchaVerified"
+                 @expire="eventCloseModal"
+                 @fail="eventCloseModal"
+                 @error="eventCloseModal"
+                 ref="vueRecaptcha">
+  </vue-recaptcha>
+</template>
+
+<script>
+import vueRecaptcha from 'vue3-recaptcha2';
+
+export default {
+  name: 'app',
+  components: {
+    vueRecaptcha
+  },
+  props: {
+    showcaptcha: Boolean,
+  },
+  data() {
+    return {
+      loadingTimeout: 30000,
+      captchaToken: ''
+    }
+  },
+  methods: {
+    recaptchaVerified(vueRecaptcha) {
+      this.captchaToken = vueRecaptcha
+
+      return this.$emit('captchatokendata', this.captchaToken)
+    },
+    eventCloseModal() {
+      setTimeout(() => {
+        return this.$emit("captchadata");
+      }, 1000)
+    }
+  }
+};
+</script>

luckydiamond/src/components/PaymentsModal.vue

@@ -61,28 +61,24 @@
       <div class="count-withdraw deposit-icon-diamond">
         <h3>Сумма вывода</h3>
         <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input class="with-input" v-model="amount" type="number" />
+        <input class="with-input" v-model="amountWithdraw" type="number" />
       </div>
       <div class="number-card deposit-promocode__padding--input">
         <h3>Введите номер карты</h3>
         <input class="with-input" v-model="card" type="number" />
       </div>
       <div class="withdraw-checkbox checkbox-styles">
-        <input type="checkbox" />
+        <input @click="agreeUser = !agreeUser; showRecaptcha = true" type="checkbox"/>
         <h3>Я согласен с пользовательским соглашением.</h3>
       </div>
-      <!-- <VueRecaptcha :sitekey="this.sitekey" :loadRecaptchaScript="true" @verify="validate"/> -->
-      <!-- <vue-recaptcha ref="recaptcha"
-      @verify="onVerify" sitekey="6LcuUDQpAAAAAPz8007pFD2FigaSh6InnUq_MEd8">
-    </vue-recaptcha> -->
-    <span id="captcha" style="color:red" ></span>
+      <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="showRecaptcha" @captchadata="closeModal"></captcha-component>
       <div
         class="btn-withdraw btn-text-style btn-display-deposit btn-style-payments"
       >
         <p>
           Вы подтверждаете правильность введенных данных при создании вывода.
         </p>
-        <button type="submit" @click="RedirectedMethodTransferMoneyToSp">
+        <button type="submit" :disabled="checkOffBtn" @click="RedirectedMethodTransferMoneyToSp">
           Вывод
         </button>
         <p>
@@ -98,17 +94,22 @@
 import "@/assets/css/ComponentsStyles/payments-modal.css";
 import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
 import { GettingMoneyOperation } from "@/assets/js/moneyoperation/Claimmoney";
+import CaptchaComponent from "@/components/CaptchaComponent.vue";
 
 export default {
+  components: { CaptchaComponent },
   props: ["payments"],
   data() {
     return {
       amount: 0,
+      amountWithdraw: 0,
       card: 0,
+      captchaToken: '',
       clickedBtn: "",
       url: "",
       offBtn: true,
       agreeUser: false,
+      showRecaptcha: false,
       PaymentsModalNumbers,
     };
   },
@@ -129,6 +130,9 @@ export default {
         }, 2000);
       }
     },
+    amountWithdraw(newAmount) {
+      console.log(newAmount)
+    }
   },
 
   computed: {
@@ -140,6 +144,9 @@ export default {
     closeModal() {
       return this.$emit("closemodal");
     },
+    claimCaptchaToken(Token) {
+      this.captchaToken = Token
+    },
     RedirectedMethodDep() {
       console.log(`From /profile to - ${this.url} url`)
       window.location.href = this.url