Update ReferalModal.vue

connected referral system

luckydiamond/src/components/ReferalModal.vue

@@ -8,75 +8,39 @@
       <div class="error-deposit" v-if="errorDeposit">
         <h2>Ошибка с суммой депозита</h2>
       </div>
-      <div
+      <div class="deposit-input deposit-text referal-icon-diamond deposit-icon__input">
-        class="deposit-input deposit-text referal-icon-diamond deposit-icon__input"
-      >
         <br>
-      <h3 v-if="data in ReferralData">{{ referralCode }}</h3>
+        <h3 v-if="referralData.referralCode">{{ referralData.referralCode }}</h3>
-      <input
+        <input :class="{ 'animate-start-btn': errorDeposit }" readonly class="deposit-amount__input" v-model="amount" type="number" />
-          :class="{ 'animate-start-btn': errorDeposit }" readonly
-          class="deposit-amount__input"
-          v-model="amount"
-          type="number"
-        />
         <br>
         <br>
         <h3>Доступно к выводу</h3>
         <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input
+        <input :class="{ 'animate-start-btn': errorDeposit }" readonly class="deposit-amount__input" v-model="amount" type="number" />
-          :class="{ 'animate-start-btn': errorDeposit }" readonly
-          class="deposit-amount__input"
-          v-model="amount"
-          type="number"
-        />
         <div class="deposit-btns">
           <ul class="display-btns btns-style-diamonds">
             <li v-for="(number, index) in PaymentsModalNumbers" :key="index">
-              <button
+              <button @click="clickedBtnChoice(index, number.diamonds)" :class="{ 'btn-click': clickedBtn === index, [number]: clickedBtn === number }">{{ number.diamonds }}</button>
-                @click="clickedBtnChoice(index, number.diamonds)"
-                :class="{
-                  'btn-click': clickedBtn === index,
-                  [number]: clickedBtn === number,
-                }"
-              >
-                {{ number.diamonds }}
-              </button>
             </li>
           </ul>
         </div>
         <div class="deposit-promocode deposit-promocode__padding--input">
           <h3>Всего привели рефералов</h3>
           <div class="promokods">
-            <input
+            <input :class="{ 'animate-start-btn': errorDeposit }" readonly class="deposit-amount__input" v-model="amount" type="number" />
-          :class="{ 'animate-start-btn': errorDeposit }" readonly
-          class="deposit-amount__input"
-          v-model="amount"
-          type="number"
-        />
           </div>
         </div>
         <div class="error-checkbox" v-if="errorAgree">
           <h2>Подтвердите согласие!</h2>
         </div>
         <div class="deposit-checkbox checkbox-styles">
-          <input
+          <input @click="agreeUser = !agreeUser" type="checkbox" :class="{ 'animate-start-btn': errorAgree }" />
-            @click="agreeUser = !agreeUser"
-            type="checkbox"
-            :class="{ 'animate-start-btn': errorAgree }"
-          />
           <h3>Я согласен с <a href="https://docs.google.com/document/d/1lU_zTWJdD1lcMlIAFDIVz-DlZAoq3a-OFkoO8WBIkzo/edit?usp=sharing">пользовательским соглашением</a></h3>
         </div>
-        <div
+        <div class="btn-deposit btn-text-style btn-display-deposit btn-style-payments">
-          class="btn-deposit btn-text-style btn-display-deposit btn-style-payments"
+          <p>Вы подтверждаете правильность введенных данных при создании вывода.</p>
-        >
-          <p>
-            Вы подтверждаете правильность введенных данных при создании вывода.
-          </p>
           <button type="submit" @click="RedirectedMethodDep">Вывести</button>
-          <p>
+          <p>Перед пополнение прочитайте политику конфиденциальности и пользовательское соглашение.</p>
-            Перед пополнение прочитайте политику конфиденциальности и
-            пользовательское соглашение.
-          </p>
         </div>
       </div>
     </div>
@@ -86,13 +50,23 @@
 <script>
 import "@/assets/css/ComponentsStyles/payments-modal.css";
 import { GetReferralData } from "@/assets/js/Profile/Referrals";
+
 export default {
   data() {
     return {
-        ReferralData: GetReferralData
+      referralData: {}, // Добавляем пустой объект для данных о реферале
-      }
+      errorDeposit: false, // Добавляем флаг для отслеживания ошибок
+      errorAgree: false, // Добавляем флаг для отслеживания ошибок
+      agreeUser: false, // Добавляем флаг для отслеживания согласия пользователя
+      amount: 0, // Устанавливаем начальное значение суммы
+      PaymentsModalNumbers: [], // Добавляем массив для номеров платежей (если он используется)
+    };
   },
   props: ["payments"],
+  async created() {
+    // При создании компонента загружаем данные о реферале
+    this.referralData = await GetReferralData();
+  },
   methods: {
     closeModal() {
       return this.$emit("closemodal");