s.esmaeili
e756fbaf85
- Fix silent redirect-to-home for unauthenticated users on protected routes; now redirects to login with a return path - Restyle OrderCard, SearchInput, Filters, DropDown, and product card image sizing/centering to match the app's LESS-token design language - Fix ant-design Slider handle placement/drag under RTL and seed a valid default range so handles actually render - Fix chip-row edge padding and top spacing across Orders/Cart/Search lists - Add pull-to-refresh to the dashboard and fix its header/padding to match the fixed PageBar pattern - Remove the floating WhatsApp button from index.html
95 lines
3.1 KiB
Vue
95 lines
3.1 KiB
Vue
<!--
|
|
Ported from legacy henza_pwa/src/views/newest.vue, restyled into the
|
|
redesigned design language (see components/home/* and HomeView).
|
|
See useProducts.ts for the pagination-simplification note.
|
|
|
|
Data wiring is untouched: the same useProducts() composable, the same
|
|
pull-to-fetch pagination, and the same ScrollFetchSearch infinite scroll.
|
|
Only the chrome and the card change — AppHeader -> PageBar, and the
|
|
Tailwind-utility product rows -> the shared ProductCard grid.
|
|
-->
|
|
<template>
|
|
<div class="newest">
|
|
<PageBar title="جدیدترین محصولات" back-to="home" />
|
|
|
|
<Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
|
|
<ScrollFetchSearch
|
|
class="newest__scroll"
|
|
:loading="loadingPull"
|
|
:flag="productsData.flag"
|
|
padding="0px"
|
|
@fetch="pull"
|
|
>
|
|
<container class="newest__body">
|
|
<SectionHead title="تازهها" subtitle="آخرین افزودههای مجموعه" />
|
|
|
|
<div v-if="productsData.productList.length" class="newest__grid">
|
|
<ProductCard v-for="item in visibleProducts" :key="item.id" :value="item" />
|
|
</div>
|
|
</container>
|
|
</ScrollFetchSearch>
|
|
</Spinner>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onBeforeMount, ref } from 'vue'
|
|
import PageBar from '../components/ui/PageBar.vue'
|
|
import Spinner from '../components/Spinner.vue'
|
|
import SectionHead from '../components/home/SectionHead.vue'
|
|
import ProductCard from '../components/product/ProductCard.vue'
|
|
import ScrollFetchSearch from '../components/ui/ScrollFetchSearch.vue'
|
|
import { useProducts } from '../composables/useProducts'
|
|
|
|
const { productsData, getProducts } = useProducts()
|
|
|
|
const loadingPage = ref(false)
|
|
const loadingPull = ref(false)
|
|
|
|
// ── Incremental rendering ────────────────────────────────────────────────
|
|
// useProducts() accumulates the fetched list, and this port fetches the whole
|
|
// (small) catalogue rather than truly paging the server. Mounting every card
|
|
// at once puts hundreds of images on screen, so render a window and grow it
|
|
// each time ScrollFetchSearch reports the user reached the end — which is the
|
|
// same @fetch signal that used to drive pagination.
|
|
const PAGE_SIZE = 20
|
|
const visibleCount = ref(PAGE_SIZE)
|
|
const visibleProducts = computed(() => productsData.productList.slice(0, visibleCount.value))
|
|
|
|
onBeforeMount(async () => {
|
|
await getProducts(loadingPage, false)
|
|
})
|
|
|
|
const pull = async () => {
|
|
// Reveal more of what is already loaded first; only go back to the server
|
|
// once the whole fetched list is on screen.
|
|
if (visibleCount.value < productsData.productList.length) {
|
|
visibleCount.value += PAGE_SIZE
|
|
return
|
|
}
|
|
await getProducts(loadingPull, true)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.newest {
|
|
background: @canvas;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.newest__scroll {
|
|
height: calc(100vh - 61px);
|
|
}
|
|
|
|
.newest__body {
|
|
padding-top: 76px;
|
|
padding-bottom: 90px;
|
|
}
|
|
|
|
.newest__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 11px;
|
|
}
|
|
</style>
|