s.esmaeiliandClaude Opus 5
cc62975dd0
Applies the home/product-detail design language (LESS colour tokens, BEM
class names, hairline-bordered cards, SectionHead, dashed empty states) to
the screens a shopper actually walks through: search, collection, newest,
cart and favorites.
Two shared pieces are extracted so the language stays consistent rather than
re-typed per screen:
- components/ui/PageBar.vue — the sticky translucent bar with blur and a
hairline, lifted from the home screen's own header so every other screen
gets identical chrome instead of the old dark AppHeader.
- components/product/ProductCard.vue — the catalogue workhorse card. It is
deliberately a sibling of home/ShowcaseCard (which keeps its editorial "wide"
variant and badge) and additionally surfaces stock, which the
catalogue needs and the home screen does not.
Deleted as orphaned once nothing imported them: ProductList,
ProductVerticalFull, ProductVertical, ProductHorizontal, CollectionCard —
all Tailwind utility soup carried over from the legacy PWA.
Behaviour is preserved throughout; only chrome and cards change. The cart
still posts to the real POST /orders with wagePercent from each item's
pinned variant, still gates on a real session, and still keeps the note
drawer and success step. Search keeps its client-side filtering, the Filters
sheet, category chips and collection tiles. No rial price is printed
anywhere, for the same reason as the rest of the redesign: a finished
piece's price is the live gold rate x weight plus wage, computed at order
time and never stored on the product.
FIXED a regression this redesign introduced before it shipped: dropping
ScrollFetchSearch from the search grid meant all 205 catalogue products
mounted at once (205 cards, 205 images). Both search and newest now render
a 20-item window that grows as the user reaches the end.
Verified in a real browser against the running API and native database, not
just a green build: home 13 cards, search 20 -> 40 -> 60 -> 80 on scroll,
newest 20 -> 40 -> 60, cart empty state, favorites 3 cards behind a seeded
session. All images loaded (0 broken), no horizontal overflow, no console
errors beyond pre-existing vue3-lazyload noise that predates this work.
vue-tsc and vite build both clean.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<!--
|
|
Ported from legacy henza_pwa/src/views/search/collection/index.vue, restyled
|
|
into the redesigned design language (see components/home/* and HomeView).
|
|
|
|
Filters the one flat product list client-side by collection id (route
|
|
param) — no server-side ciny_id query param exists; consistent with the
|
|
rest of this port's "small catalog, client-side filtering" approach. That
|
|
logic is carried over unchanged.
|
|
|
|
The view no longer owns a Drawer: ProductCard opens the product detail
|
|
itself, the same way it does on every other catalogue screen, so the
|
|
detail behaviour is identical everywhere instead of re-implemented here.
|
|
-->
|
|
<template>
|
|
<div class="coll">
|
|
<PageBar :title="collectionTitle" back-to="search" />
|
|
|
|
<Spinner :spinning="loadingPage" tip="درحال دریافت اطلاعات">
|
|
<container class="coll__body">
|
|
<SectionHead title="محصولات این مجموعه" subtitle="برای دیدن جزئیات، روی محصول ضربه بزنید" />
|
|
|
|
<div v-if="collectionProducts.length" class="coll__grid">
|
|
<ProductCard v-for="item in collectionProducts" :key="item.id" :value="item" />
|
|
</div>
|
|
|
|
<section v-else-if="!loadingPage" class="coll__empty">
|
|
<Icon icon="vuesax-linear:box" size="26" />
|
|
<p>در این مجموعه محصولی ثبت نشده است.</p>
|
|
</section>
|
|
</container>
|
|
</Spinner>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
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 { api, type ProductSummary } from '../../api/client'
|
|
|
|
const route = useRoute()
|
|
|
|
const loadingPage = ref(false)
|
|
const allProducts = ref<ProductSummary[]>([])
|
|
|
|
// legacy passed the collection's title through as ?page=<title>; kept, with a
|
|
// neutral fallback so the bar is never blank on a direct link.
|
|
const collectionTitle = computed(() => (route.query.page as string) || 'مجموعه')
|
|
|
|
const collectionProducts = computed(() =>
|
|
allProducts.value.filter((p) => p.collections.some((c) => c.collectionId === route.params.id)),
|
|
)
|
|
|
|
onMounted(async () => {
|
|
loadingPage.value = true
|
|
try {
|
|
allProducts.value = await api.listProducts()
|
|
} finally {
|
|
loadingPage.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.coll {
|
|
background: @canvas;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.coll__body {
|
|
padding-top: 16px;
|
|
padding-bottom: 90px;
|
|
}
|
|
|
|
.coll__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 11px;
|
|
}
|
|
|
|
.coll__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;
|
|
}
|
|
.coll__empty p {
|
|
margin: 0;
|
|
font-size: 12.5px;
|
|
}
|
|
</style>
|