HAM!DREZA
265 lines
13 KiB
Vue
265 lines
13 KiB
Vue
<template>
|
|
<div class="flex flex-col md:flex-row justify-between">
|
|
<div class="w-full md:w-[41.5vw]">
|
|
<tabs
|
|
nav-item-active-class="text-primaryGreen relative"
|
|
nav-class="scrolBar flex gap-[2vw] md:gap-[0.8vw] border-b border-b-[0.144vw] pb-[0.7vw] text-[3.59vw] md:text-[0.938vw] text-[#878787]"
|
|
:options="{ useUrlFragment: false }"
|
|
>
|
|
<div class="relative flex w-full flex-col-reverse md:flex-row">
|
|
<div class="w-full">
|
|
<tab :name="tab1">
|
|
<ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
|
|
<!-- <p v-if="payments.data = null" class="p-[1vw] text-[0.8vw] underline">تراکنشی وجود ندارد !!!</p>
|
|
-->
|
|
<li
|
|
v-for="(item, index) in payments.data.value"
|
|
:key="index"
|
|
class="flex justify-between items-center"
|
|
>
|
|
|
|
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ item.reason }}
|
|
</p>
|
|
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ numberFormat(item.amount) }}
|
|
</p>
|
|
<p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">
|
|
{{ jDate(item.createdAt) }}
|
|
</p>
|
|
<button
|
|
v-if="item.reason === 'deposit'"
|
|
class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]"
|
|
>
|
|
واریز
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]"
|
|
>
|
|
برداشت
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</tab>
|
|
<tab :name="tab2">
|
|
<ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
|
|
<li
|
|
v-for="(item, index) in payments.data.value"
|
|
:key="index"
|
|
v-show="item.reason === 'deposit'"
|
|
class="flex justify-between items-center"
|
|
>
|
|
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ item.reason }}
|
|
</p>
|
|
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ numberFormat(item.amount) }}
|
|
</p>
|
|
<p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">
|
|
{{ jDate(item.createdAt) }}
|
|
</p>
|
|
<button
|
|
v-if="item.reason === 'deposit'"
|
|
class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]"
|
|
>
|
|
واریز
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]"
|
|
>
|
|
برداشت
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</tab>
|
|
<tab :name="tab3">
|
|
<ul class="space-y-[0.5vw] mt-[6vw] md:mt-[0.5vw]">
|
|
<li
|
|
v-for="(item, index) in payments.data.value"
|
|
:key="index"
|
|
v-show="item.reason === 'withdrawal'"
|
|
class="flex justify-between items-center"
|
|
>
|
|
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ item.reason }}
|
|
</p>
|
|
<p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
|
|
{{ numberFormat(item.amount) }}
|
|
</p>
|
|
<p class="text-[2.836vw] md:text-[0.833vw] text-[#878787]">
|
|
{{ jDate(item.createdAt) }}
|
|
</p>
|
|
<button
|
|
v-if="item.reason === 'deposit'"
|
|
class="text-[2.518vw] md:text-[0.658vw] bg-[#2ED5731A] text-[#2ED573] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[2.813vw] rounded-[2.051vw] md:rounded-[0.521vw]"
|
|
>
|
|
واریز
|
|
</button>
|
|
<button
|
|
v-else
|
|
class="text-[2.518vw] md:text-[0.658vw] bg-[#FBEAEA] text-[#D52E2E] h-[8.462vw] md:h-[2.135vw] w-[15.641vw] md:w-[3.594vw] rounded-[2.051vw] md:rounded-[0.521vw]"
|
|
>
|
|
برداشت
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</tab>
|
|
</div>
|
|
|
|
<div
|
|
class="my-[6vw] md:my-0 relative md:absolute left-0 md:-left-[20vw] absolute flexBox smallShadow w-full md:w-[18.906vw] h-[87.692vw] md:h-[20.729vw] rounded-[0.781vw]"
|
|
>
|
|
<div
|
|
class="w-[75vw] md:w-[17.229vw] space-y-[8vw] md:space-y-[3vw]"
|
|
>
|
|
<div class="flex justify-between">
|
|
<p
|
|
class="text-[4.038vw] md:text-[0.938vw] text-[#383E43] font-semibold"
|
|
>
|
|
موجودی حساب
|
|
</p>
|
|
<svg
|
|
class="h-[6.154vw] md:h-[1.406vw] w-[6.154vw] md:w-[1.406vw]"
|
|
viewBox="0 0 27 27"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M14.625 10.125H7.875"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M24.7498 12.3412V14.6588C24.7498 15.2775 24.2548 15.7837 23.6248 15.8062H21.4197C20.2047 15.8062 19.091 14.9175 18.9898 13.7025C18.9223 12.9937 19.1922 12.33 19.6647 11.8687C20.081 11.4412 20.6547 11.1938 21.2847 11.1938H23.6248C24.2548 11.2163 24.7498 11.7225 24.7498 12.3412Z"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M19.665 11.8687C19.1925 12.33 18.9225 12.9937 18.99 13.7025C19.0913 14.9175 20.205 15.8062 21.42 15.8062H23.625V17.4375C23.625 20.8125 21.375 23.0625 18 23.0625H7.875C4.5 23.0625 2.25 20.8125 2.25 17.4375V9.5625C2.25 6.5025 4.095 4.365 6.96375 4.005C7.25625 3.96 7.56 3.9375 7.875 3.9375H18C18.2925 3.9375 18.5737 3.94874 18.8437 3.99374C21.7462 4.33124 23.625 6.48 23.625 9.5625V11.1938H21.285C20.655 11.1938 20.0812 11.4412 19.665 11.8687Z"
|
|
stroke="#0D3F40"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p class="w-full text-end text-[4.544vw] md:text-[1.055vw]">
|
|
{{ numberFormat(data) }}
|
|
<span class="text-[2.836vw] md:text-[0.741vw] font-[400]">
|
|
تومان
|
|
</span>
|
|
</p>
|
|
<div class="pt-[10vw] md:pt-0 space-y-[3vw] md:space-y-[1vw]">
|
|
<p class="text-[3.19vw] md:text-[0.833vw] text-[#383E43]">
|
|
مبلغ مورد نظر <span v-if="price > 0" class="text-[0.6vw] font-bold text-end">{{ numberFormat(price) }} تومان</span>
|
|
</p>
|
|
<input
|
|
v-model="price"
|
|
type="number"
|
|
name="price"
|
|
placeholder="تومان"
|
|
class="text-[2.836vw] md:text-[0.741vw] h-[13.59vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw] bg-[#F5F5F5] ps-[4vw] md:ps-[1vw]"
|
|
/>
|
|
<button
|
|
@click="charge"
|
|
class="text-[3.59vw] md:text-[0.938vw] greenButton text-center h-[11.538vw] md:h-[2.969vw] w-full rounded-[2.564vw] md:rounded-[0.521vw]"
|
|
>
|
|
شارژ حساب
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Tabs, Tab } from "vue3-tabs-component";
|
|
|
|
const { data, refresh } = await useFetch("/api/user/balance");
|
|
const payments = await useFetch("/api/user/payments");
|
|
|
|
const payNum = Math.random()
|
|
const price = ref(null);
|
|
const charge = async () => {
|
|
const toPay = await useFetch("/api/user/add", {
|
|
method: "POST",
|
|
body: {
|
|
amount: price.value,
|
|
paymentNumber: payNum * Math.random(),
|
|
reason: "deposit",
|
|
},
|
|
});
|
|
refresh();
|
|
price.value = null;
|
|
};
|
|
|
|
const tab1 = `<p
|
|
class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
|
|
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M2.25 9.56808H24.75" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M6.75 18.5681H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11.8125 18.5681H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M7.245 3.94308H19.7438C23.7488 3.94308 24.75 4.93308 24.75 8.88183V18.1181C24.75 22.0668 23.7488 23.0568 19.755 23.0568H7.245C3.25125 23.0681 2.25 22.0781 2.25 18.1293V8.88183C2.25 4.93308 3.25125 3.94308 7.245 3.94308Z" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
همه تراکنش ها
|
|
</p>`;
|
|
const tab2 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
|
|
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M2.25 9.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M6.75 18.5625H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11.8125 18.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M24.75 15.7838V18.1238C24.75 22.0725 23.7488 23.0625 19.755 23.0625H7.245C3.25125 23.0625 2.25 22.0725 2.25 18.1238V8.87625C2.25 4.9275 3.25125 3.9375 7.245 3.9375H16.3125" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M22.5 3.9375V10.6875L24.75 8.4375" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M22.5 10.6875L20.25 8.4375" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
واریزی ها
|
|
</p>`;
|
|
const tab3 = `<p class="flex items-center gap-[0.5vw] p-[2vw] md:p-0 md:px-[0.6vw] rounded-[2.564vw]">
|
|
<svg class="hidden md:block w-[1.406vw] h-[1.406vw]" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M2.25 9.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M6.75 18.5625H9" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11.8125 18.5625H16.3125" stroke="#878787" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M24.75 15.7838V18.1238C24.75 22.0725 23.7488 23.0625 19.755 23.0625H7.245C3.25125 23.0625 2.25 22.0725 2.25 18.1238V8.87625C2.25 4.9275 3.25125 3.9375 7.245 3.9375H16.3125" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M22.5 10.6875V3.9375L24.75 6.1875" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M22.5 3.9375L20.25 6.1875" stroke="#878787" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
|
|
|
|
برداشت ها
|
|
</p>`;
|
|
</script>
|
|
|
|
<style>
|
|
.tabs-component .tabs-component-tab .is-active p svg path {
|
|
stroke: #0d3f40;
|
|
}
|
|
.tabs-component .tabs-component-tab .is-active::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 0.104vw;
|
|
top: 2.1vw;
|
|
background-color: #0d3f40;
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
</style> |