Files
site/resources/js/Pages/Settings/SettingsMoney.vue

197 lines
9.0 KiB
Vue
Executable File

<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 class="py-5 px-4 2xl:px-28">
<a rel="noopener noreferrer nofollow" target="_blank"
href="https://yoomoney.ru/pay/page?id=526623"
>
<svg class="h-10 mb-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1440 320"
><defs></defs><path fill="#fff" d="M1265.12,160.92c0-39.25-29.7-71-71.65-71-41.12,0-70.4,30.53-70.4,72.48,0,42.16,30.11,72.9,73.31,72.9,27.41,0,50.46-12.26,64.79-37.18l-29.07-13.5c-6.85,12.46-21.81,20.56-35.72,20.56-17.65,0-38-13.29-39.25-31.77h106.95A77.88,77.88,0,0,0,1265.12,160.92Zm-107.37-12c2.5-18.69,15.37-30.94,35.93-30.94,20.35,0,32.81,12,34.47,30.94Z" /><path fill="#fff" d="M864.79,89.89c-42.16,0-72.06,30.33-72.06,73.11,0,42.36,29.9,72.27,72.48,72.27,42.78,0,72.68-29.91,72.68-71.65C937.89,120.63,907.16,89.89,864.79,89.89Zm.42,113.6c-21.19,0-34.27-15.78-34.27-40.29,0-24.92,13.29-41.95,34.27-41.95,21.18,0,34.47,16.82,34.47,41.95C899.68,187.92,886.6,203.49,865.21,203.49Z" /><path fill="#fff" d="M714.67,89.93c-17.27,0-30.28,5.9-43.29,20.53h-4.27c-8.74-13.21-23-20.53-39-20.53A50.44,50.44,0,0,0,587,110.46h-4.27l-.21-.2V92.78H546.78V232.22H585.4V160.46c0-23.17,9.76-36.79,26.63-36.79,15.65,0,25.81,11.59,25.81,29.27v79.28h38.82V160.46c0-23,9.76-36.79,26.84-36.79,15.44,0,25.4,11.59,25.4,29.48v79.07h38.83V148.47C767.73,112.09,748.21,89.93,714.67,89.93Z" /><path fill="#fff" d="M1351,183.86h-2.76c0-2.48-16.84-46.64-27.88-74l-6.9-17.11h-38.91l55.2,139.93L1308,286h38.64l79.49-193.2H1387.2l-6.35,14.63-21.53,53.27C1353.25,175.58,1350.76,182.48,1351,183.86Z" /><path fill="#fff" d="M1045,89.93c-17.28,0-32.12,7.52-42.08,20.94h-4.07l-.4-.2V92.78H962.69V232.22h38.62V160.87c0-22.76,11-37,29.07-37,16.87,0,29.27,12.6,29.27,32.52v75.82h38.62V148.07C1098.27,113.92,1075.91,89.93,1045,89.93Z" /><path fill="#8b3ffd" d="M284.49,10C201.05,10,134,77.5,134,160c0,83.18,67.71,150,150.47,150S435,242.5,435,160,367.25,10,284.49,10Zm0,205.91c-30.78,0-56.08-25.23-56.08-55.91s25.3-55.91,56.08-55.91,56.09,25.23,56.09,55.91C339.89,190.68,315.27,215.91,284.49,215.91Z" /><path fill="#8b3ffd" d="M134,53.58V271.76H80.68L12.28,53.58Z" /></svg>
</a>
<form method="GET" class="flex"
action="/actions-to-payments"
>
<input v-model="sum" type="number"
name="sum"
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 type="submit" 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">
Пополнить
</button>
</form>
<p v-show="sum" class="text-white mt-1">
ИТОГО + 3.5% комиссия сервиса yoomoney = {{ amount }}
</p>
</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>
<inertia-link :href="route('setting.payouts')" type="button"
class="my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none"
>
Вывести
</inertia-link>
</div>
<div class="text-white flex justify-end gap-3 flex-wrap pb-2 px-4 2xl:px-28">
<div class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-check-square"
><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
Ознакомлен:
</div>
<p>
<a class="underline" rel="noopener noreferrer nofollow"
target="_blank"
href="https://yoomoney.ru/pay/page?id=526623"
>Yoomoney</a>
</p>
<inertia-link class="underline" :href="route('setting.tarif')">
Тарифы
</inertia-link>
</div>
</div>
<div v-if="pointLists.length" class="my-4 lg:my-8">
<div class="py-4 px-4 2xl:px-28 md:text-lg text-white">
История операций:
<!-- <button class="text-xs" @click="testPaid">
Пополнить
</button> -->
</div>
<div class="divide-y divide-indigo-300 ">
<InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
@fromPagination="putFromPagination"
>
<div v-for="point in pointLists" :key="point.id"
:ref="el => { if (el && point.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-5 flex items-center">
<div class="flex-shrink-0 mr-3 lg:mr-8">
<svg :class="[point.direction == 2 ? 'text-white rotate-180' : point.direction == 0 ? 'text-green rotate-90' : 'text-red -rotate-90', 'transform w-8 h-8']">
<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">
{{ point.date }}
</p>
<p class="truncate lg:mt-1 text-base text-gray-light">
{{ point.time }}
</p>
</div>
</div>
<div class="col-span-2 text-left lg:text-center text-white xl:text-xl font-semibold">
{{ point.point }}
</div>
<div class="col-span-5 text-left lg:text-right text-gray-light xl:text-lg">
{{ point.type }}
<div v-if="point.direction == 2">
<button class="text-green underline" @click="checkPaid(point.id)">
Проверить оплату
</button>
</div>
</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 { ref } from 'vue'
import { Inertia } from '@inertiajs/inertia'
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: String,
points: Array,
},
setup() {
const containerRef = ref(null)
return {
lastNodeLement: containerRef,
}
},
data() {
return {
pointLists: [],
sum: null,
}
},
computed: {
amount(){
return ((Math.abs(this.sum) * 0.035) + Math.abs(this.sum)).toFixed(1)
},
lastElementID() {
return this.pointLists[this.pointLists.length - 1]?.id
},
},
watch: {
points(points){
this.pointLists = points
}
},
mounted() {
this.pointLists = this.points
},
methods: {
putFromPagination(lists) {
for (let list of lists) {
this.pointLists.push(list)
}
},
checkPaid(id) {
Inertia.post(route('payouts.checkPointPay', id), {
preserveScroll: true,
preserveState: true,
})
},
},
}
</script>