137 lines
3.8 KiB
Vue
137 lines
3.8 KiB
Vue
<template>
|
|
<div class="boursecu-transactions pb-[calc(var(--app-bottom-chrome-height)+1rem)]">
|
|
<MobilePageHeader title="تراکنش ها" />
|
|
|
|
<div class="mpage-content px-4">
|
|
<div class="dtxn-toolbar boursecu-transactions__toolbar">
|
|
<div class="dtxn-tabs">
|
|
<button
|
|
v-for="tab in BOURSECU_TRANSACTION_TABS"
|
|
:key="tab.id"
|
|
type="button"
|
|
class="dtxn-tabs__btn"
|
|
:class="{ 'dtxn-tabs__btn--active': activeTabId === tab.id }"
|
|
@click="setActiveTab(tab.id)"
|
|
>
|
|
{{ tab.label }}
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="activeTab.showTradeToggle" class="dtxn-toggle">
|
|
<button
|
|
type="button"
|
|
class="dtxn-toggle__btn"
|
|
:class="{ 'dtxn-toggle__btn--active': tradeSide === 'buy' }"
|
|
@click="setTradeSide('buy')"
|
|
>
|
|
خرید
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="dtxn-toggle__btn"
|
|
:class="{ 'dtxn-toggle__btn--active': tradeSide === 'sell' }"
|
|
@click="setTradeSide('sell')"
|
|
>
|
|
فروش
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<BoursecuTransactionFilters
|
|
v-if="activeTab.showAdvancedFilters"
|
|
mobile-layout
|
|
/>
|
|
|
|
<div ref="listRef" :class="loading ? 'min-h-[50vh]' : ''" class="mt-5">
|
|
<list-anim v-if="!loading">
|
|
<template v-if="activeTab.fetchMode === 'physical'">
|
|
<RequestItem
|
|
v-for="item in physicalItems"
|
|
:key="item.id"
|
|
:item="item"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<Item v-for="item in items" :key="item.id" :item="item" />
|
|
</template>
|
|
<div :ref="bindMobileObserver" class="w-full opacity-0 relative">
|
|
در حال بارگذاری
|
|
</div>
|
|
<TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
|
|
</list-anim>
|
|
|
|
<template v-else>
|
|
<TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
|
|
</template>
|
|
|
|
<div v-if="!loading && listEmpty" class="dtxn-empty">
|
|
<img :src="emptyImage" alt="" class="dtxn-empty__image" />
|
|
<p class="dtxn-empty__text">{{ emptyText }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { loading, loadingMore } from '@/utils'
|
|
import MobilePageHeader from '@/layouts/components/MobilePageHeader.vue'
|
|
import ListAnim from '@/components/ListAnim.vue'
|
|
import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
|
|
import emptyImage from '@/assets/img/cash_empty.svg'
|
|
import Item from './components/Item.vue'
|
|
import RequestItem from '@/views/base/physicalReceive/components/RequestItem.vue'
|
|
import BoursecuTransactionFilters from './components/BoursecuTransactionFilters.vue'
|
|
import { BOURSECU_TRANSACTION_TABS } from './config/boursecuTabs'
|
|
import { useTransactionsPageContext } from './composables/useTransactionsPage'
|
|
|
|
const listRef = ref<HTMLElement | null>(null)
|
|
|
|
const {
|
|
items,
|
|
physicalItems,
|
|
activeTabId,
|
|
tradeSide,
|
|
activeTab,
|
|
emptyText,
|
|
listEmpty,
|
|
setActiveTab,
|
|
setTradeSide,
|
|
bindMobileObserver,
|
|
} = useTransactionsPageContext()
|
|
</script>
|
|
|
|
<style lang="less">
|
|
@import './desktop/styles/desktop-transactions.less';
|
|
|
|
.boursecu-transactions {
|
|
background: #fff;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.boursecu-transactions__toolbar {
|
|
margin-top: 4px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.boursecu-transactions__filters {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
.dtxn-filters__product {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.boursecu-transactions__filter-select,
|
|
.boursecu-transactions__filter-date {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.boursecu-transactions__filter-dates {
|
|
width: 100%;
|
|
}
|
|
</style>
|