safavimohadeseh78
29c58c4202
# Conflicts: # src/utils/productAssets.ts # src/views/base/products/components/ProductItem.vue # src/views/base/transactions/DefaultTransactionsPage.vue
68 lines
2.7 KiB
Vue
68 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="absolute inset-0 bg-cover bg-center opacity-60"></div>
|
|
<MobilePageHeader title="تراکنش ها">
|
|
<template #trailing>
|
|
<BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
|
|
</template>
|
|
</MobilePageHeader>
|
|
|
|
<!-- <div ref="el" :class="loading ? 'h-screen' : ''" class="px-3 mpage-content pb-10">-->
|
|
<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 MobilePageHeader from '@/layouts/components/MobilePageHeader.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>
|