SearchView: Removed the dynamic collection-tile grid (e.g. "پرفروشهای این هفته") and the "نتایج / N محصول" section header from the UI. Underlying data/filtering logic untouched.
DashboardView ("میز کار"): Rebuilt from scratch with a new structure, distinct from the old card+grid layout but visually aligned with HomeView (same blurred bar, @ink/@wine palette, staged reveal animation on mount):
Single hero card (ink→wine gradient) showing balance, gold/fiat debt, and identity — no quick-action icons inside it anymore.
Live gold rate folded into a slim inline row at the bottom instead of a titled section.
Iterated shadow/spacing on the hero card per feedback (softer, less clipped).
DialogVant / DialogVantOneButton (shared modal components, used in 7+ call sites: Dashboard, Cart, SingleProduct, Register, App): Replaced Vant's default dialog chrome with the app's own rounded-card language — circular icon badge for the illustration, pill-shaped primary/secondary buttons. No call-site markup changed.
LoginView: Rebuilt from scratch — full-bleed dark hero (brand + step copy) overlapped by a floating white form sheet, animated crossfade transition between the mobile-number and OTP steps, same staged entrance animation as Home/Dashboard. All auth logic (API check, OTP stub, session login) unchanged.
This commit is contained in:
s.esmaeili
@@ -0,0 +1,120 @@
|
||||
<!--
|
||||
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>
|
||||
|
||||
<!-- Previously this view rendered its heading over blank space when
|
||||
the catalogue came back empty. Same empty state the other
|
||||
catalogue screens use, chained to the results above it. -->
|
||||
<section v-else-if="!loadingPage" class="newest__empty">
|
||||
<Icon icon="vuesax-linear:box" size="26" />
|
||||
<p>هنوز محصولی در مجموعه ثبت نشده است.</p>
|
||||
</section>
|
||||
</container>
|
||||
</ScrollFetchSearch>
|
||||
</Spinner>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeMount, ref } from 'vue'
|
||||
import Icon from '../components/icon/Icon.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: 14px;
|
||||
}
|
||||
|
||||
// Same empty state the other catalogue screens draw.
|
||||
.newest__empty {
|
||||
margin-top: 8px;
|
||||
padding: 34px 20px;
|
||||
border: 1px dashed @hairline;
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: @inkFaint;
|
||||
}
|
||||
.newest__empty p {
|
||||
margin: 0;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user