86 lines
3.0 KiB
Vue
86 lines
3.0 KiB
Vue
<template>
|
|
<div class="relative min-h-0 h-full">
|
|
<div class="pointer-events-none absolute inset-0 bg-cover bg-center opacity-60" aria-hidden="true"></div>
|
|
<div
|
|
class="bg-white w-full transaction-list py-3 px-3 font-bold drop-shadow flex justify-between z-10"
|
|
>
|
|
<div>لیست تراکنش ها</div>
|
|
<BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
|
|
</div>
|
|
|
|
<div ref="el" class="transactions-page-body px-3 pt-16">
|
|
<list-anim v-if="!loading">
|
|
<Item v-for="item in items" :key="item.id" :item="item" />
|
|
<div :ref="bindMobileObserver" v-show="!loading" class="w-full opacity-0 relative">
|
|
در حال بارگذاری
|
|
</div>
|
|
<TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
|
|
</list-anim>
|
|
<TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
|
|
<div v-if="items.length <= 0 && !loading" class="flex flex-col items-center justify-center h-80vh">
|
|
<DotLottieVue
|
|
class="w-11rem h-11rem"
|
|
autoplay
|
|
src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
|
|
/>
|
|
<div class="font-bold">{{ emptyText }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<BasicActionSheet v-model:show="showFilter">
|
|
<div class="font-bold text-lg">فیلتر</div>
|
|
<div class="pb-20 mt-5">
|
|
<a-form-item class="w-full gap-2 !flex-col" label="تاریخ" name="password">
|
|
<BaseDatePicker v-model:value="dateFilter" class="w-full" size="large" />
|
|
</a-form-item>
|
|
<BasicButton class="w-full mt-5" type="primary" @click="applyFilter">اعمال فیلتر</BasicButton>
|
|
<BasicButton class="w-full mt-2" @click="showFilter = false">بازگشت</BasicButton>
|
|
</div>
|
|
</BasicActionSheet>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { loading, loadingMore } from '@/utils'
|
|
import Item from './components/Item.vue'
|
|
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
|
|
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
|
|
import ListAnim from '@/components/ListAnim.vue'
|
|
import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
|
|
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
|
|
import { useTransactionsPageContext } from './composables/useTransactionsPage'
|
|
|
|
const el = ref<HTMLElement | null>(null)
|
|
|
|
const {
|
|
items,
|
|
showFilter,
|
|
dateFilter,
|
|
emptyText,
|
|
applyFilter,
|
|
bindMobileObserver,
|
|
} = useTransactionsPageContext()
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.transaction-list {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
@media screen and (min-width: 426px) {
|
|
width: 426px;
|
|
left: auto;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
.transactions-page-body {
|
|
padding-bottom: calc(var(--app-bottom-chrome-height, 108px) + 1rem);
|
|
}
|
|
</style>
|