site/resources/js/Pages/Settings/SettingsPayouts.vue

<template>
  <meta-head title="Выплаты"></meta-head>

  <div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
        <settings-menu />
        <div class="col-span-4">
          <div class="border-b border-indigo-300">
            <div v-if="isVerified" class="py-5 px-4 2xl:px-28">
              <div class="flex">
                <input v-model="amount" type="number"
                       placeholder="Введите сумму"
                       class="w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light"
                />
                <button class="ml-5 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-pink focus:outline-none" @click="pay">
                  Вывести
                </button>
              </div>
            </div>
            <div v-else class="py-5 px-4 2xl:px-28">
              <div class="text-white text-lg">
                Заполните номер телефона в  <inertia-link :href="route('setting.index')" class="underline">
                  профиле
                </inertia-link>  и пройдите  <inertia-link :href="route('setting.verification')" class="underline">
                  верификацию
                </inertia-link>
              </div>
            </div>
            <!-- <div class="py-5 px-4 2xl:px-28">
              <div class="flex">
                <input v-model="bank_info.number" type="number"
                       placeholder="Введите номер карты"
                       class="w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light" label="Фамилия"
                />
                <button class="ml-5 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center  text-base rounded-md text-white bg-pink focus:outline-none" @click="updateRequisites">
                  {{ bank_info?.id ? 'Обновить' : 'Создать' }}
                </button>
              </div>
              <div class="text-red text-sm">
                Банковские реквизиты
              </div>
            </div> -->

            <div class="flex justify-between px-4 2xl:px-28 my-4 lg:my-8">
              <div class="flex flex-col text-white">
                <span class="text-lg">Баланс:</span>
                <span class="text-3xl">{{ $page.props.balance }}</span>
              </div>
            </div>
          </div>

          <div v-if="withdrawalsLists.length" class="my-4 lg:my-8">
            <div class="py-4 px-4 2xl:px-28  md:text-lg text-white">
              История операций:
            </div>
            <div class="divide-y divide-indigo-300 ">
              <InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
                              @fromPagination="putFromPagination"
              >
                <div v-for="withdrawal in withdrawalsLists" :key="withdrawal.id"
                     :ref="el => { if (el && withdrawal.id === lastElementID) lastNodeLement = el }"
                     class="py-4 px-4 2xl:px-28 lg:items-center flex flex-col lg:grid gap-2 lg:gap-5 grid-cols-12"
                >
                  <div class="col-span-4 flex items-center">
                    <div class="flex-shrink-0 mr-3 lg:mr-8">
                      <svg class="transform w-8 h-8 rotate-90" :class="{
                        'text-gray-light': withdrawal.status === 'pending',
                        'text-green': withdrawal.status === 'success',
                        'text-red': withdrawal.status === 'cancel',
                      }"
                      >
                        <use xlink:href="#arrow-up-circle"></use>
                      </svg>
                    </div>

                    <div class="flex flex-col">
                      <p class="truncate text-base lg:text-lg font-semibold text-gray">
                        {{ withdrawal.datePart }}
                      </p>
                      <p class="truncate lg:mt-1 text-base text-gray-light">
                        {{ withdrawal.timePart }}
                      </p>
                    </div>
                  </div>
                  <div class="col-span-2 text-left lg:text-center text-white xl:text-xl font-semibold">
                    {{ withdrawal.amount }}
                  </div>
                  <div class="col-span-6 text-left lg:text-right text-gray-light xl:text-lg flex flex-col">
                    <span v-html="withdrawal.history_payment_details"></span>
                    <span class="mt-2 text-orange">{{ withdrawal.meta }}</span>
                    <span v-show="withdrawal.description" class="mt-2">{{ withdrawal.description }}</span>
                  </div>
                </div>
              </InfinityScroll>
            </div>
          </div>
          <div v-else class="py-4 px-4 2xl:px-28  md:text-lg text-gray-light">
            Нет данных
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Inertia } from '@inertiajs/inertia'
import { ref } from 'vue'
import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import InfinityScroll from '@/Shared/Misc/InfinityScroll.vue'

export default {
    components: {
        MetaHead,
        SettingsMenu,
        InfinityScroll,
    },
    layout: Layout,
    props: {
        nextCursor: {
            type: String,
            default: ''
        },
        isVerified: {
            type: Boolean,
            default: false
        },
        withdrawals: {
            type: Array,
            default: () => []
        },
        // requisites: {
        //     type: Object,
        //     default: () => {}
        // }
    },

    setup() {
        const containerRef = ref(null)
        return {
            lastNodeLement: containerRef,
        }
    },

    data() {
        return {
            withdrawalsLists: [],
            bank_info: {},
            amount: null,
        }
    },

    computed: {
        lastElementID() {
            return this.withdrawalsLists[this.withdrawalsLists.length - 1]?.id
        },
    },

    watch: {
        withdrawals(withdrawals){
            this.withdrawalsLists = withdrawals
        }
    },

    mounted() {
        this.withdrawalsLists = this.withdrawals
        // this.bank_info = this.requisites
    },

    methods: {
        // updateRequisites() {
        //     if(!this.bank_info?.number) return
        //     Inertia.post(route('requisites.bank'), {
        //         number: this.bank_info.number,
        //     })
        // },
        pay() {
            if(!this.amount) return
            const that = this
            Inertia.post(route('payouts.start'), {
                amount: that.amount,
            }, {
                onSuccess: () => {
                    that.amount = null
                }
            })
        },
        putFromPagination(lists) {
            for (let list of lists) {
                this.withdrawalsLists.push(list)
            }
        },
    },
}
</script>