LuckyDiamond/luckydiamond/src/components/PaymentsModal.vue

<template>
  <div class="payment-modal">
    <div class="payments-modal__content close-modal__icon text-styles__margin">
      <h1>{{ payments ? 'Пополнить' : 'Вывод' }}</h1>
      <img @click="closeModal" src="@/assets/icons-other/icon-payments-modal-close.svg">
    </div>
    <div v-if="payments" class="payments-modal__deposit">
      <div class="deposit-input deposit-text deposit-icon-diamond deposit-icon__input">
        <h3>Сумма пополнения</h3>
        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
        <input v-model="amount" type="number">
        <div class="deposit-btns">
          <ul class="display-btns btns-style-diamonds">
            <li v-for="number in PaymentsModalNumbers" :key="number">
              <button @click="clickedBtnChoice(number, number.diamonds)" :class="{ 'btn-click': clickedBtn === number, [number]: clickedBtn === number }">{{ number.diamonds }}</button>
            </li>
          </ul>
        </div>
        <div class="deposit-promocode deposit-promocode__padding--input">
          <h3>Промокод</h3>
          <input type="text">
        </div>
        <div class="btn-deposit btn-style-payments">
          <button type="submit" :disabled="offBtn" @click="RedirectedMethodDep">Пополнить</button>
        </div>
      </div>
    </div>
    <div v-else class="payments-modal__withdraw deposit-text withdraw-input">
      <div class="count-withdraw deposit-icon-diamond">
        <h3>Сумма вывода</h3>
        <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
        <input v-model="amount" type="number">
      </div>
      <div class="number-card deposit-promocode__padding--input">
        <h3>Введите номер карты</h3>
        <input v-model="card" type="number">
      </div>
      <div class="btn-withdraw btn-style-payments">
        <button type="submit">Вывод</button>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/ComponentsStyles/payments-modal.css'
import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
import { GettingMoneyOperation } from "@/assets/js/moneyoperation/Claimmoney";

export default {
  props: [
      'payments'
  ],
  data() {
    return {
      amount: 1,
      card: 0,
      clickedBtn: '',
      url: '',
      offBtn: true,
      PaymentsModalNumbers
    }
  },
  watch: {
    amount(newAmount) {
      console.log(newAmount)
      this.offBtn = true
      setTimeout(() => {
        try {
          GettingMoneyOperation(newAmount)
              .then((response) => {
                console.log('Payments Modal Working!: ', response)
                this.url = response.url
                this.offBtn = false
              })
        }
        catch (e) {
          console.error('Error in PaymentModal!', e)
        }
      }, 2000)
    }
  },
  methods: {
    closeModal() {
      return this.$emit('closemodal')
    },
    RedirectedMethodDep() {
      window.location.href = this.url
    },
    // detectorMethod(method) {
    //   this.closeModal()
    //   if (method === 'dep') {
    //     return this.$emit('deposit', this.amount)
    //   }
    //   else if (method === 'with') {
    //     return this.$emit('withdraw', this.amount, this.card)
    //   }
    //   else {
    //     console.log('Произошла ошибка при взаимодействие')
    //     return
    //   }
    // },
    clickedBtnChoice(index, content) {
      this.clickedBtn = index
      this.amount = content
    }
  }
}
</script>