85 lines
3.5 KiB
Vue
85 lines
3.5 KiB
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 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>
|
|
<button @click="testPaid" 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-pink focus:outline-none">
|
|
Пополнить
|
|
</button>
|
|
|
|
<button 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">
|
|
Вывести
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div 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 ">
|
|
|
|
<div v-for="point in points" :key="point.id" 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 == 0 ? 'text-green rotate-90' : '-rotate-90 text-red', '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>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Inertia } from "@inertiajs/inertia";
|
|
import Layout from '@/Shared/Layout'
|
|
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu'
|
|
import MetaHead from '@/Shared/MetaHead'
|
|
export default {
|
|
layout: Layout,
|
|
components: {
|
|
MetaHead,
|
|
SettingsMenu,
|
|
},
|
|
props:{
|
|
points: Array,
|
|
},
|
|
methods: {
|
|
testPaid(){
|
|
Inertia.post(route("users.testPaid"), {
|
|
preserveScroll: true,
|
|
preserveState: true,
|
|
});
|
|
}
|
|
},
|
|
}
|
|
</script>
|