Route shop browse through categories and catalogs, and align product detail with the mockup.
Customers can add items without a company-first path, and the detail page matches the card, badge, share, and footer layout. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
size?: number
|
||||
color?: string
|
||||
}>(),
|
||||
{ size: 20, color: '#9AA3AF' },
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="size"
|
||||
:height="size"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
d="M12 3.5v11"
|
||||
:stroke="color"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M8.25 7 12 3.25 15.75 7"
|
||||
:stroke="color"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.5 11.5v7.25c0 .97.78 1.75 1.75 1.75h7.5c.97 0 1.75-.78 1.75-1.75V11.5"
|
||||
:stroke="color"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -14,9 +14,9 @@ function navigate(path: string, event: Event) {
|
||||
const target = event.currentTarget
|
||||
if (target instanceof HTMLElement) target.blur()
|
||||
|
||||
// «ثبت سفارش»: سبد خالی → انتخاب شرکت؛ در غیر این صورت سبد خرید
|
||||
// «ثبت سفارش»: سبد خالی → دستهبندیها؛ در غیر این صورت سبد خرید
|
||||
if (path === '/cart' && cartStore.itemCount === 0) {
|
||||
router.push('/companies')
|
||||
router.push('/categories')
|
||||
return
|
||||
}
|
||||
router.push(path)
|
||||
|
||||
@@ -74,12 +74,7 @@ export function useCartPage() {
|
||||
async function createNewInvoice() {
|
||||
await cartStore.createNewCartForSameCompany()
|
||||
showFullDialog.value = false
|
||||
const companyId = cartStore.selectedCompanyId || cartStore.activeCart?.companyId
|
||||
if (companyId) {
|
||||
router.push(`/companies/${companyId}/catalogs`)
|
||||
} else {
|
||||
router.push('/companies')
|
||||
}
|
||||
router.push('/categories')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
+7
-2
@@ -121,8 +121,13 @@ const router = createRouter({
|
||||
{
|
||||
path: '/companies/:companyId/catalogs/:catalogId/products',
|
||||
name: 'company-products',
|
||||
component: () => import('@/views/products/ProductListView.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
redirect: (to) => ({
|
||||
path: '/products',
|
||||
query: {
|
||||
catalogId: String(to.params.catalogId ?? ''),
|
||||
companyId: String(to.params.companyId ?? ''),
|
||||
},
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: '/cart',
|
||||
|
||||
@@ -25,6 +25,7 @@ export type BrowseProductDto = {
|
||||
companyId?: string
|
||||
catalogId?: string
|
||||
catalogCode?: string
|
||||
catalogName?: string
|
||||
color?: string
|
||||
minMeterage?: number
|
||||
orderMultiplier?: number
|
||||
@@ -80,12 +81,16 @@ export async function fetchCatalogCategories() {
|
||||
export async function fetchBrowseProducts(query?: {
|
||||
categoryId?: string
|
||||
season?: string
|
||||
catalogId?: string
|
||||
companyId?: string
|
||||
}) {
|
||||
return apiRequest<BrowseProductDto[]>('/products', {
|
||||
query: {
|
||||
activeOnly: true,
|
||||
categoryId: query?.categoryId,
|
||||
season: query?.season,
|
||||
catalogId: query?.catalogId,
|
||||
companyId: query?.companyId,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
+12
-8
@@ -231,14 +231,15 @@ export const useCartStore = defineStore('cart', () => {
|
||||
catalogCode: string,
|
||||
meterage: number,
|
||||
): Promise<{ success: boolean; message?: string }> {
|
||||
const company = catalogStore.getCompany(product.companyId)
|
||||
if (!company) {
|
||||
return { success: false, message: 'شرکت محصول یافت نشد.' }
|
||||
if (!catalogStore.companies.length) {
|
||||
await catalogStore.loadCompanies()
|
||||
}
|
||||
|
||||
const cart = getOrCreateCart(company)
|
||||
const companyMax = company.maxMeteragePerInvoice
|
||||
const currentCompanyMeterage = companyMeterage(cart, company.id)
|
||||
const company = catalogStore.getCompany(product.companyId)
|
||||
const cart = activeCart.value ?? emptyCart()
|
||||
const companyMax = company?.maxMeteragePerInvoice ?? DEFAULT_MAX_METERAGE
|
||||
const currentCompanyMeterage = product.companyId
|
||||
? companyMeterage(cart, product.companyId)
|
||||
: 0
|
||||
const existing = cart.items.find((i) => i.productId === product.id)
|
||||
const previousMeterage = existing?.meterage ?? 0
|
||||
|
||||
@@ -254,6 +255,9 @@ export const useCartStore = defineStore('cart', () => {
|
||||
}
|
||||
|
||||
if (useLocalCart()) {
|
||||
if (!company) {
|
||||
return { success: false, message: 'شرکت محصول یافت نشد.' }
|
||||
}
|
||||
return addItemLocal(product, catalogCode, meterage, company)
|
||||
}
|
||||
|
||||
@@ -271,7 +275,7 @@ export const useCartStore = defineStore('cart', () => {
|
||||
})
|
||||
}
|
||||
applyServerCart(serverCart)
|
||||
selectedCompanyId.value = company.id
|
||||
selectedCompanyId.value = company?.id || product.companyId || selectedCompanyId.value
|
||||
return { success: true }
|
||||
} catch (e) {
|
||||
return {
|
||||
|
||||
+9
-1
@@ -25,6 +25,7 @@ function mapProduct(p: {
|
||||
companyId?: string
|
||||
catalogId?: string
|
||||
catalogCode?: string
|
||||
catalogName?: string
|
||||
color?: string
|
||||
minMeterage?: number
|
||||
orderMultiplier?: number
|
||||
@@ -63,6 +64,7 @@ function mapProduct(p: {
|
||||
companyId: p.companyId,
|
||||
catalogId: p.catalogId,
|
||||
catalogCode: p.catalogCode,
|
||||
catalogName: p.catalogName,
|
||||
color: p.color,
|
||||
minMeterage: p.minMeterage ?? 30,
|
||||
orderMultiplier: p.orderMultiplier ?? 10,
|
||||
@@ -87,7 +89,12 @@ export const useCrmStore = defineStore('crm', () => {
|
||||
return data
|
||||
}
|
||||
|
||||
async function loadBrowseProducts(query?: { categoryId?: string; season?: string }) {
|
||||
async function loadBrowseProducts(query?: {
|
||||
categoryId?: string
|
||||
season?: string
|
||||
catalogId?: string
|
||||
companyId?: string
|
||||
}) {
|
||||
const list = await fetchBrowseProducts(query)
|
||||
browseProducts.value = list.map(mapProduct)
|
||||
return browseProducts.value
|
||||
@@ -101,6 +108,7 @@ export const useCrmStore = defineStore('crm', () => {
|
||||
companyId?: string
|
||||
catalogId?: string
|
||||
catalogCode?: string
|
||||
catalogName?: string
|
||||
color?: string
|
||||
minMeterage?: number
|
||||
orderMultiplier?: number
|
||||
|
||||
@@ -92,6 +92,7 @@ export interface CatalogProductCard {
|
||||
companyId?: string
|
||||
catalogId?: string
|
||||
catalogCode?: string
|
||||
catalogName?: string
|
||||
color?: string
|
||||
minMeterage?: number
|
||||
orderMultiplier?: number
|
||||
|
||||
+10
-4
@@ -34,9 +34,10 @@ export const DESKTOP_NAV_ITEMS: NavItem[] = [
|
||||
{ name: 'profile', path: '/profile', label: 'پروفایل', icon: IconProfile },
|
||||
]
|
||||
|
||||
export function getOrderingPath(activeCompanyId: string | null | undefined): string {
|
||||
if (activeCompanyId) return `/companies/${activeCompanyId}/catalogs`
|
||||
return '/companies'
|
||||
export const SHOP_BROWSE_PATH = '/categories'
|
||||
|
||||
export function getOrderingPath(_activeCompanyId?: string | null): string {
|
||||
return SHOP_BROWSE_PATH
|
||||
}
|
||||
|
||||
const CATALOG_PATHS = [
|
||||
@@ -51,7 +52,12 @@ const CATALOG_PATHS = [
|
||||
|
||||
export function isNavItemActive(name: string, path: string, currentPath: string): boolean {
|
||||
if (name === 'ordering') {
|
||||
return currentPath.startsWith('/companies/')
|
||||
return (
|
||||
currentPath.startsWith('/categories') ||
|
||||
currentPath.startsWith('/products') ||
|
||||
currentPath.startsWith('/product') ||
|
||||
currentPath.startsWith('/catalogs')
|
||||
)
|
||||
}
|
||||
if (name === 'home') {
|
||||
return currentPath === '/'
|
||||
|
||||
@@ -88,7 +88,7 @@ const desktopFilterTabs: { id: DesktopOrderFilterId; label: string }[] = [
|
||||
@set-desktop-filter="setDesktopFilter"
|
||||
@select="goToOrder"
|
||||
@set-page="setPage"
|
||||
@new-order="router.push('/companies')"
|
||||
@new-order="router.push('/categories')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -77,7 +77,6 @@ async function submit() {
|
||||
|
||||
<div class="page__scroll flex flex-col justify-center py-6">
|
||||
<div class="auth-header">
|
||||
<div class="text-5xl mb-3">🧵</div>
|
||||
<h1 class="page-title">ورود به سامانه</h1>
|
||||
<p class="page-subtitle">سامانه سفارش عمده پارچه</p>
|
||||
</div>
|
||||
|
||||
@@ -24,12 +24,7 @@ const {
|
||||
} = useCartPage()
|
||||
|
||||
function goToOrdering() {
|
||||
const companyId = cartStore.selectedCompanyId || cartStore.activeCart?.companyId
|
||||
if (companyId) {
|
||||
router.push(`/companies/${companyId}/catalogs`)
|
||||
return
|
||||
}
|
||||
router.push('/companies')
|
||||
router.push('/categories')
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -50,7 +45,7 @@ function goToOrdering() {
|
||||
@back="router.push('/')"
|
||||
@remove="removeItem"
|
||||
@checkout="proceedToCheckout"
|
||||
@select-company="router.push('/companies')"
|
||||
@select-company="goToOrdering()"
|
||||
/>
|
||||
|
||||
<DesktopCartPage
|
||||
@@ -65,7 +60,7 @@ function goToOrdering() {
|
||||
:submitting="submitting"
|
||||
@remove="removeItem"
|
||||
@checkout="proceedToCheckout"
|
||||
@select-company="router.push('/companies')"
|
||||
@select-company="goToOrdering()"
|
||||
@back="goToOrdering"
|
||||
/>
|
||||
|
||||
|
||||
@@ -88,13 +88,12 @@ const quickLinks = [
|
||||
</div>
|
||||
<h2 class="cart-empty-card__heading">سبد خرید شما خالی است</h2>
|
||||
<p class="cart-empty-card__text">
|
||||
برای ثبت سفارش جدید، ابتدا شرکت موردنظر را انتخاب کنید و سپس کالیته و محصولات
|
||||
را به سبد اضافه کنید.
|
||||
از دستهبندی یا کالیته محصول را انتخاب کنید، جزئیات را ببینید و به سبد اضافه کنید.
|
||||
</p>
|
||||
<div class="cart-empty-card__actions">
|
||||
<button type="button" class="cart-btn cart-btn--primary" @click="emit('selectCompany')">
|
||||
<IconBuilding :size="18" />
|
||||
انتخاب شرکت
|
||||
مشاهده محصولات
|
||||
</button>
|
||||
<button type="button" class="cart-btn cart-btn--outline" @click="emit('back')">
|
||||
<IconChevronLeft :size="16" />
|
||||
|
||||
@@ -106,8 +106,8 @@ const emit = defineEmits<{
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EmptyState v-else variant="cart" message="برای شروع سفارش، یک شرکت انتخاب کنید">
|
||||
<BaseButton @click="emit('selectCompany')">انتخاب شرکت</BaseButton>
|
||||
<EmptyState v-else variant="cart" message="از دستهبندی یا کالیته محصول را انتخاب کنید">
|
||||
<BaseButton @click="emit('selectCompany')">مشاهده محصولات</BaseButton>
|
||||
</EmptyState>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -32,7 +32,10 @@ onMounted(load)
|
||||
watch(companyId, load)
|
||||
|
||||
function openCatalog(catalogId: string) {
|
||||
router.push(`/companies/${companyId.value}/catalogs/${catalogId}/products`)
|
||||
router.push({
|
||||
path: '/products',
|
||||
query: { catalogId, companyId: companyId.value },
|
||||
})
|
||||
}
|
||||
|
||||
function getProductCount(catalogId: string) {
|
||||
|
||||
@@ -38,9 +38,12 @@ onMounted(async () => {
|
||||
error.value = null
|
||||
try {
|
||||
const list = await crm.loadBrowseProducts()
|
||||
products.value = list
|
||||
if (preselectId.value) {
|
||||
quantities.value = { ...quantities.value, [preselectId.value]: 1 }
|
||||
const selected = preselectId.value
|
||||
products.value = selected
|
||||
? [...list].sort((a, b) => Number(b.id === selected) - Number(a.id === selected))
|
||||
: list
|
||||
if (selected) {
|
||||
quantities.value = { ...quantities.value, [selected]: 1 }
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'بارگذاری محصولات ناموفق بود.'
|
||||
@@ -79,11 +82,18 @@ async function submit() {
|
||||
<div class="page">
|
||||
<PageHeader title="درخواست کالیته" show-back centered @back="router.back()" />
|
||||
<div class="page__scroll page__scroll--with-nav body">
|
||||
<p class="hint">محصولات و تعداد اقلام موردنظر را مشخص کنید.</p>
|
||||
<p class="hint">
|
||||
{{ preselectId ? 'این محصول برای درخواست کالیته انتخاب شده است. در صورت نیاز اقلام دیگر را هم اضافه کنید.' : 'محصولات و تعداد اقلام موردنظر را مشخص کنید.' }}
|
||||
</p>
|
||||
<PageSkeleton v-if="loading" variant="form" />
|
||||
<p v-else-if="error" class="error">{{ error }}</p>
|
||||
<template v-else>
|
||||
<article v-for="item in products" :key="item.id" class="row">
|
||||
<article
|
||||
v-for="item in products"
|
||||
:key="item.id"
|
||||
class="row"
|
||||
:class="{ 'row--selected': preselectId === item.id }"
|
||||
>
|
||||
<div>
|
||||
<strong>{{ item.name }}</strong>
|
||||
<span>کد {{ item.code }}</span>
|
||||
@@ -141,6 +151,10 @@ async function submit() {
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.row--selected {
|
||||
outline: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.row strong {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
|
||||
@@ -36,7 +36,8 @@ onMounted(async () => {
|
||||
|
||||
function openCatalog(item: Catalog) {
|
||||
router.push({
|
||||
path: `/companies/${item.companyId}/catalogs/${item.id}/products`,
|
||||
path: '/products',
|
||||
query: { catalogId: item.id, companyId: item.companyId },
|
||||
})
|
||||
}
|
||||
|
||||
@@ -61,9 +62,9 @@ function companyName(companyId: string) {
|
||||
<strong>مشاهده دستهبندیها</strong>
|
||||
<span>انتخاب بر اساس کاربرد و فصل</span>
|
||||
</button>
|
||||
<button type="button" class="hub-card" @click="router.push('/companies')">
|
||||
<strong>کالیتههای برندها</strong>
|
||||
<span>مسیر انتخاب شرکت و کالیته</span>
|
||||
<button type="button" class="hub-card" @click="router.push('/products')">
|
||||
<strong>همه محصولات</strong>
|
||||
<span>مشاهده کاتالوگ و ثبت سفارش</span>
|
||||
</button>
|
||||
|
||||
<PageSkeleton v-if="loading" variant="grid" />
|
||||
|
||||
@@ -95,6 +95,7 @@ function openSeason(id: string) {
|
||||
>
|
||||
<div
|
||||
class="usage-card__image"
|
||||
:class="`usage-card__image--${item.id}`"
|
||||
:style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : undefined"
|
||||
>
|
||||
<span class="usage-card__icon">
|
||||
@@ -123,10 +124,6 @@ function openSeason(id: string) {
|
||||
class="season-card"
|
||||
@click="openSeason(item.id)"
|
||||
>
|
||||
<div
|
||||
class="season-card__image"
|
||||
:style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : undefined"
|
||||
/>
|
||||
<div class="season-card__body">
|
||||
<div class="season-card__title-row">
|
||||
<span class="season-card__icon">
|
||||
@@ -140,6 +137,11 @@ function openSeason(id: string) {
|
||||
<IconChevronLeft :size="14" />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="season-card__image"
|
||||
:class="`season-card__image--${item.id}`"
|
||||
:style="item.imageUrl ? { backgroundImage: `url(${item.imageUrl})` } : undefined"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@@ -261,10 +263,22 @@ function openSeason(id: string) {
|
||||
|
||||
.usage-card__image {
|
||||
position: relative;
|
||||
height: 72px;
|
||||
height: 96px;
|
||||
background: linear-gradient(140deg, #6b7280, #1f2937) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.usage-card__image--suit {
|
||||
background: linear-gradient(150deg, #2c3038, #111318) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.usage-card__image--shirt {
|
||||
background: linear-gradient(150deg, #e8eef3, #9aa8b5) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.usage-card__image--trousers {
|
||||
background: linear-gradient(150deg, #1a1d24, #0b0d12) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.usage-card__icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -308,7 +322,7 @@ function openSeason(id: string) {
|
||||
|
||||
.season-card {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
grid-template-columns: 1fr 42%;
|
||||
border: none;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -320,10 +334,22 @@ function openSeason(id: string) {
|
||||
}
|
||||
|
||||
.season-card__image {
|
||||
min-height: 100px;
|
||||
min-height: 124px;
|
||||
background: linear-gradient(160deg, #d6c3a8, #8b7355) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.season-card__image--summer {
|
||||
background: linear-gradient(160deg, #f3e6c8, #c4a574) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.season-card__image--winter {
|
||||
background: linear-gradient(160deg, #cfd6de, #7d8b99) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.season-card__image--all_season {
|
||||
background: linear-gradient(160deg, #efe6d6, #b9a48a) center / cover no-repeat;
|
||||
}
|
||||
|
||||
.season-card__body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -140,7 +140,7 @@ async function submitChecks() {
|
||||
<div v-if="checks.length === 0" class="check-list-page__empty page__scroll page__scroll--with-nav">
|
||||
<EmptyState variant="checks" message="برای ادامه، حداقل یک چک ثبت کنید">
|
||||
<BaseButton v-if="isCheckout" @click="addAnother">ثبت چک جدید</BaseButton>
|
||||
<BaseButton v-else variant="outline" @click="router.push('/companies')">ثبت سفارش جدید</BaseButton>
|
||||
<BaseButton v-else variant="outline" @click="router.push('/categories')">ثبت سفارش جدید</BaseButton>
|
||||
</EmptyState>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -7,14 +7,31 @@ import { useCartStore } from '@/stores/cart'
|
||||
import { useCatalogStore } from '@/stores/catalog'
|
||||
import type { CatalogProductCard } from '@/types/crm'
|
||||
import type { Product } from '@/types'
|
||||
import { formatMeterage, formatNumber } from '@/utils/format'
|
||||
import { formatNumber } from '@/utils/format'
|
||||
import IconChevronBack from '@/components/icons/IconChevronBack.vue'
|
||||
import IconCart from '@/components/icons/IconCart.vue'
|
||||
import IconCatalog from '@/components/icons/IconCatalog.vue'
|
||||
import IconHeart from '@/components/icons/IconHeart.vue'
|
||||
import IconMail from '@/components/icons/IconMail.vue'
|
||||
import IconShare from '@/components/icons/IconShare.vue'
|
||||
import IconShoppingBag from '@/components/icons/IconShoppingBag.vue'
|
||||
import { useGoBack } from '@/composables/useGoBack'
|
||||
import PageSkeleton from '@/components/ui/PageSkeleton.vue'
|
||||
import {
|
||||
CATALOG_SEASON_CATEGORIES,
|
||||
CATALOG_USAGE_CATEGORIES,
|
||||
} from '@/data/catalogCategories'
|
||||
|
||||
const USAGE_CHIP_LABEL: Record<string, string> = {
|
||||
suit: 'پارچه کتشلواری',
|
||||
trousers: 'پارچه شلواری',
|
||||
shirt: 'پارچه پیراهنی',
|
||||
}
|
||||
|
||||
const SEASON_CHIP_LABEL: Record<string, string> = {
|
||||
summer: 'پارچه تابستانه',
|
||||
winter: 'پارچه زمستانه',
|
||||
all_season: 'پارچه چهارفصل',
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -30,7 +47,6 @@ const error = ref<string | null>(null)
|
||||
const selectedColor = ref(0)
|
||||
const rolls = ref(1)
|
||||
const adding = ref(false)
|
||||
const actionMessage = ref<string | null>(null)
|
||||
const showAllSpecs = ref(false)
|
||||
|
||||
const rollMeters = computed(() => product.value?.rollMeters ?? 50)
|
||||
@@ -42,6 +58,65 @@ const minOrderMeters = computed(() => {
|
||||
const minRolls = computed(() =>
|
||||
Math.max(1, Math.ceil(minOrderMeters.value / rollMeters.value)),
|
||||
)
|
||||
const usageLabel = computed(
|
||||
() => USAGE_CHIP_LABEL[product.value?.categoryId ?? ''] || '—',
|
||||
)
|
||||
const seasonLabel = computed(
|
||||
() => SEASON_CHIP_LABEL[product.value?.season ?? ''] || '—',
|
||||
)
|
||||
|
||||
const categoryChips = computed(() => {
|
||||
const p = product.value
|
||||
if (!p) return []
|
||||
|
||||
const chips: Array<{
|
||||
key: string
|
||||
label: string
|
||||
to?: { path: string; query: Record<string, string> }
|
||||
}> = []
|
||||
|
||||
const usageId = CATALOG_USAGE_CATEGORIES.some((c) => c.id === p.categoryId)
|
||||
? p.categoryId
|
||||
: ''
|
||||
const usageLabel = usageId ? USAGE_CHIP_LABEL[usageId] : ''
|
||||
if (usageLabel) {
|
||||
chips.push({
|
||||
key: `usage-${usageId}`,
|
||||
label: usageLabel,
|
||||
to: { path: '/products', query: { categoryId: usageId } },
|
||||
})
|
||||
}
|
||||
|
||||
const seasonId = CATALOG_SEASON_CATEGORIES.some((c) => c.id === p.season)
|
||||
? p.season
|
||||
: ''
|
||||
const seasonLabel = seasonId ? SEASON_CHIP_LABEL[seasonId] : ''
|
||||
if (seasonLabel) {
|
||||
chips.push({
|
||||
key: `season-${seasonId}`,
|
||||
label: seasonLabel,
|
||||
to: { path: '/products', query: { season: seasonId } },
|
||||
})
|
||||
}
|
||||
|
||||
const covered = new Set(
|
||||
chips.flatMap((c) => [c.label, c.label.replace(/^پارچه\s*/, '')]),
|
||||
)
|
||||
for (const tag of p.tags) {
|
||||
const short = tag.replace(/^پارچه?های?\s*/, '').trim()
|
||||
if (!short || covered.has(short) || chips.some((c) => c.label.includes(short))) {
|
||||
continue
|
||||
}
|
||||
const label = tag.startsWith('پارچه') ? tag : `پارچه ${short}`
|
||||
covered.add(short)
|
||||
chips.push({
|
||||
key: `tag-${tag}`,
|
||||
label,
|
||||
})
|
||||
}
|
||||
|
||||
return chips
|
||||
})
|
||||
|
||||
async function load() {
|
||||
if (!productId.value) {
|
||||
@@ -51,7 +126,6 @@ async function load() {
|
||||
}
|
||||
loading.value = true
|
||||
error.value = null
|
||||
actionMessage.value = null
|
||||
try {
|
||||
await Promise.all([favorites.hydrate(), catalogStore.loadCompanies()])
|
||||
product.value = await crm.loadProductById(productId.value)
|
||||
@@ -68,15 +142,14 @@ async function load() {
|
||||
onMounted(load)
|
||||
watch(productId, load)
|
||||
|
||||
function toCartProduct(p: CatalogProductCard): Product | null {
|
||||
if (!p.companyId || !p.catalogId) return null
|
||||
function toCartProduct(p: CatalogProductCard): Product {
|
||||
const roll = p.rollMeters || 50
|
||||
const step = p.orderMultiplier && p.orderMultiplier > 0 ? p.orderMultiplier : roll
|
||||
const min = p.minMeterage && p.minMeterage > 0 ? p.minMeterage : roll
|
||||
return {
|
||||
id: p.id,
|
||||
companyId: p.companyId,
|
||||
catalogId: p.catalogId,
|
||||
companyId: p.companyId || '',
|
||||
catalogId: p.catalogId || '',
|
||||
name: p.name,
|
||||
code: p.code,
|
||||
color: p.color || p.colors[selectedColor.value] || '—',
|
||||
@@ -97,32 +170,18 @@ function snapMeterage(meters: number, step: number, min: number) {
|
||||
async function addToOrder() {
|
||||
if (!product.value) return
|
||||
const cartProduct = toCartProduct(product.value)
|
||||
if (!cartProduct) {
|
||||
actionMessage.value = 'اطلاعات شرکت/کاتالوگ محصول ناقص است.'
|
||||
return
|
||||
}
|
||||
if (!catalogStore.getCompany(cartProduct.companyId)) {
|
||||
await catalogStore.loadCompanies()
|
||||
}
|
||||
adding.value = true
|
||||
actionMessage.value = null
|
||||
try {
|
||||
const meterage = snapMeterage(
|
||||
orderMeters.value,
|
||||
cartProduct.orderMultiplier,
|
||||
cartProduct.minMeterage,
|
||||
)
|
||||
const result = await cartStore.addItem(
|
||||
await cartStore.addItem(
|
||||
cartProduct,
|
||||
product.value.catalogCode || product.value.code,
|
||||
meterage,
|
||||
)
|
||||
if (result.success) {
|
||||
actionMessage.value = 'به سفارش اضافه شد.'
|
||||
await router.push('/cart')
|
||||
} else {
|
||||
actionMessage.value = result.message || 'افزودن به سفارش ناموفق بود.'
|
||||
}
|
||||
} finally {
|
||||
adding.value = false
|
||||
}
|
||||
@@ -133,19 +192,15 @@ function toggleFavorite() {
|
||||
void favorites.toggle(product.value.id)
|
||||
}
|
||||
|
||||
function adjustRolls(delta: number) {
|
||||
rolls.value = Math.max(minRolls.value, rolls.value + delta)
|
||||
}
|
||||
|
||||
function shareProduct() {
|
||||
const url = window.location.href
|
||||
if (navigator.share) {
|
||||
void navigator.share({ title: product.value?.name, url }).catch(() => undefined)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
void navigator.clipboard?.writeText(url)
|
||||
actionMessage.value = 'لینک محصول کپی شد.'
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -173,7 +228,7 @@ function shareProduct() {
|
||||
/>
|
||||
</button>
|
||||
<button type="button" class="icon-btn" aria-label="اشتراکگذاری" @click="shareProduct">
|
||||
<IconMail :size="20" />
|
||||
<IconShare :size="20" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -203,9 +258,10 @@ function shareProduct() {
|
||||
type="button"
|
||||
class="thumb"
|
||||
:class="{ 'thumb--active': selectedColor === idx }"
|
||||
:style="{ background: color }"
|
||||
@click="selectedColor = idx"
|
||||
/>
|
||||
>
|
||||
<span class="thumb__swatch" :style="{ background: color }" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -218,36 +274,58 @@ function shareProduct() {
|
||||
|
||||
<div class="specs">
|
||||
<div class="spec-cell">
|
||||
<span class="spec-cell__label">عرض</span>
|
||||
<strong>{{ formatNumber(product.widthCm) }} سانتی متر</strong>
|
||||
<span class="spec-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<rect x="4" y="8" width="16" height="8" rx="2" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>عرض</span>
|
||||
<strong>{{ formatNumber(product.widthCm) }} سانتیمتر</strong>
|
||||
</div>
|
||||
<div class="spec-cell">
|
||||
<span class="spec-cell__label">جنس</span>
|
||||
<span class="spec-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M12 3.5 20 8v8l-8 4.5L4 16V8l8-4.5Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>جنس</span>
|
||||
<strong>{{ product.composition || '—' }}</strong>
|
||||
</div>
|
||||
<div class="spec-cell">
|
||||
<span class="spec-cell__label">وزن</span>
|
||||
<span class="spec-icon" aria-hidden="true">
|
||||
<IconShoppingBag :size="22" color="#98a2ad" />
|
||||
</span>
|
||||
<span>وزن</span>
|
||||
<strong>{{ product.weightGrams ? `${formatNumber(product.weightGrams)} گرم` : '—' }}</strong>
|
||||
</div>
|
||||
<div class="spec-cell">
|
||||
<span class="spec-cell__label">نوع بافت</span>
|
||||
<span class="spec-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<circle cx="12" cy="12" r="8" />
|
||||
<path d="M12 8a6 6 0 0 1 0 8" />
|
||||
</svg>
|
||||
</span>
|
||||
<span>نوع بافت</span>
|
||||
<strong>{{ product.weaveType || '—' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="specs-more" @click="showAllSpecs = !showAllSpecs">
|
||||
{{ showAllSpecs ? 'بستن مشخصات' : 'مشاهده همه مشخصات' }}
|
||||
<svg class="specs-more__chevron" :class="{ 'is-open': showAllSpecs }" viewBox="0 0 12 12" aria-hidden="true">
|
||||
<path d="M3 4.5 6 8l3-3.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<div v-if="showAllSpecs" class="specs-extra">
|
||||
<p>فصل: {{ product.season }}</p>
|
||||
<p>دسته: {{ product.categoryId }}</p>
|
||||
<p v-if="product.basePrice">قیمت پایه: {{ formatNumber(product.basePrice) }} تومان</p>
|
||||
<p>فصل: {{ seasonLabel }}</p>
|
||||
<p>دسته: {{ usageLabel }}</p>
|
||||
<p>جمع سفارش: {{ formatNumber(orderMeters) }} متر</p>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2 class="section-label">
|
||||
رنگ بندی
|
||||
<section class="pd-section pd-section--boxed">
|
||||
<div class="section-head">
|
||||
<h2>رنگبندی</h2>
|
||||
<span>({{ formatNumber(product.colors.length) }} رنگ موجود)</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="colors">
|
||||
<button
|
||||
v-for="(color, idx) in product.colors"
|
||||
@@ -261,45 +339,42 @@ function shareProduct() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-label">دسته بندی</h2>
|
||||
<div class="tags">
|
||||
<span v-for="tag in product.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
<span v-if="!product.tags.length" class="tag">{{ product.categoryId }}</span>
|
||||
<section class="pd-section">
|
||||
<h2 class="section-title">دستهبندی</h2>
|
||||
<div class="tags" role="list">
|
||||
<button
|
||||
v-for="chip in categoryChips"
|
||||
:key="chip.key"
|
||||
type="button"
|
||||
class="tag"
|
||||
:class="{ 'tag--link': !!chip.to }"
|
||||
role="listitem"
|
||||
@click="chip.to && router.push(chip.to)"
|
||||
>
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-label">متراژ هر ساقه (طاقه)</h2>
|
||||
<section class="pd-section">
|
||||
<h2 class="section-title">متراژ هر ساقه (طاقه)</h2>
|
||||
<div class="roll-field">{{ formatNumber(product.rollMeters) }} متر</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 class="section-label">تعداد طاقه</h2>
|
||||
<div class="roll-stepper">
|
||||
<button type="button" class="step-btn" @click="adjustRolls(-1)">−</button>
|
||||
<strong>{{ formatNumber(rolls) }}</strong>
|
||||
<button type="button" class="step-btn" @click="adjustRolls(1)">+</button>
|
||||
</div>
|
||||
<p class="order-meters">جمع متراژ سفارش: {{ formatNumber(orderMeters) }} متر</p>
|
||||
</section>
|
||||
|
||||
<p v-if="actionMessage" class="action-msg">{{ actionMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="pd-footer">
|
||||
<button type="button" class="btn-secondary" @click="router.push({ path: '/catalog-request', query: { productId: product.id } })">
|
||||
<IconCatalog :size="18" />
|
||||
درخواست کالیته
|
||||
</button>
|
||||
<div class="pd-footer__primary">
|
||||
<button type="button" class="btn-primary" :disabled="adding" @click="addToOrder">
|
||||
<IconCart :size="18" color="#ffffff" />
|
||||
{{ adding ? 'در حال افزودن...' : 'افزودن به سفارش' }}
|
||||
</button>
|
||||
<p class="min-note">حداقل سفارش: {{ formatMeterage(minOrderMeters) }}</p>
|
||||
<p class="min-note">حداقل سفارش: {{ formatNumber(minRolls) }} طاقه</p>
|
||||
</div>
|
||||
<button type="button" class="btn-secondary" @click="router.push({ path: '/catalog-request', query: { productId: product.id } })">
|
||||
<IconCatalog :size="18" />
|
||||
درخواست کالیته
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@@ -315,7 +390,10 @@ function shareProduct() {
|
||||
|
||||
<style scoped>
|
||||
.product-detail {
|
||||
background: var(--color-bg);
|
||||
--pd-card-border: 1px solid #eeeef1;
|
||||
--pd-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.05);
|
||||
--pd-card-radius: 16px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
@@ -368,96 +446,165 @@ function shareProduct() {
|
||||
|
||||
.gallery__thumbs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px var(--page-padding);
|
||||
gap: 10px;
|
||||
margin: 12px var(--page-padding) 0;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
background: var(--color-surface);
|
||||
background: #fff;
|
||||
border: var(--pd-card-border);
|
||||
border-radius: var(--pd-card-radius);
|
||||
box-shadow: var(--pd-card-shadow);
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid transparent;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 14px;
|
||||
border: var(--pd-card-border);
|
||||
background: #fff;
|
||||
box-shadow: var(--pd-card-shadow);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.thumb__swatch {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.thumb--active {
|
||||
border-color: #111;
|
||||
padding: 3px;
|
||||
border: 2px solid #0a353c;
|
||||
}
|
||||
|
||||
.thumb--active .thumb__swatch {
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.pd-body {
|
||||
padding: 16px var(--page-padding) 24px;
|
||||
padding: 16px var(--page-padding) 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-row h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary);
|
||||
border-radius: 999px;
|
||||
padding: 2px 10px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 26px;
|
||||
padding: 0 16px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background: #96b49c;
|
||||
color: #fff;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.code {
|
||||
margin: -8px 0 0;
|
||||
margin: -10px 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.specs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
font-size: 0.8rem;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
padding: 14px 8px;
|
||||
background: #fff;
|
||||
border: var(--pd-card-border);
|
||||
border-radius: var(--pd-card-radius);
|
||||
box-shadow: var(--pd-card-shadow);
|
||||
}
|
||||
|
||||
.spec-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.spec-cell__label {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.75rem;
|
||||
.spec-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: #98a2ad;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.spec-icon svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.spec-cell strong {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.spec-cell span {
|
||||
color: #98a2ad;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.specs-more {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
color: #8b939c;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
align-self: flex-start;
|
||||
align-self: center;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.specs-more__chevron {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.specs-more__chevron.is-open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.specs-extra {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
font-size: 0.85rem;
|
||||
background: #f6f7f8;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-size: 0.82rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
@@ -465,93 +612,134 @@ function shareProduct() {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.95rem;
|
||||
.specs-extra p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-label span {
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
.pd-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pd-section--boxed {
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border: var(--pd-card-border);
|
||||
border-radius: var(--pd-card-radius);
|
||||
box-shadow: var(--pd-card-shadow);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.section-head h2,
|
||||
.section-title {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-head span {
|
||||
color: #8b939c;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.colors {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
flex-wrap: nowrap;
|
||||
gap: 14px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 2px;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-dot--active {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0a353c;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: var(--color-bg);
|
||||
border-radius: 999px;
|
||||
padding: 8px 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.roll-field {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.roll-stepper {
|
||||
.tag,
|
||||
button.tag {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 8px 12px;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
padding: 0 16px;
|
||||
border: var(--pd-card-border);
|
||||
border-radius: var(--pd-card-radius);
|
||||
background: #fff;
|
||||
color: #6b7280;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--pd-card-shadow);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.step-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: #fff;
|
||||
font-size: 1.2rem;
|
||||
button.tag {
|
||||
cursor: default;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button.tag--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-meters,
|
||||
.action-msg {
|
||||
margin: 8px 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-muted);
|
||||
button.tag--link:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.action-msg {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
.roll-field {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
border: 1px solid #eeeef1;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 16px rgba(16, 24, 40, 0.05);
|
||||
padding: 14px 16px;
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pd-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
padding: 12px var(--page-padding) calc(12px + env(safe-area-inset-bottom, 0));
|
||||
background: var(--color-surface);
|
||||
@@ -566,6 +754,7 @@ function shareProduct() {
|
||||
.btn-secondary,
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
|
||||
@@ -17,16 +17,20 @@ const crm = useCrmStore()
|
||||
const favorites = useFavoritesStore()
|
||||
|
||||
const categoryId = computed(() => String(route.query.categoryId ?? ''))
|
||||
const catalogId = computed(() => String(route.query.catalogId ?? ''))
|
||||
const companyId = computed(() => String(route.query.companyId ?? ''))
|
||||
const season = computed(() => String(route.query.season ?? '') as SeasonKind | '')
|
||||
const q = computed(() => String(route.query.q ?? ''))
|
||||
const searchDraft = ref(String(route.query.q ?? ''))
|
||||
const products = ref<CatalogProductCard[]>([])
|
||||
const seasons = ref<SeasonCategory[]>([])
|
||||
const catalogTitle = ref('')
|
||||
const loading = ref(true)
|
||||
const error = ref<string | null>(null)
|
||||
const sortMode = ref<'newest' | 'name'>('newest')
|
||||
|
||||
const title = computed(() => {
|
||||
if (catalogId.value && catalogTitle.value) return catalogTitle.value
|
||||
if (categoryId.value) {
|
||||
const cat = crm.usageCategories.find((c) => c.id === categoryId.value)
|
||||
return cat?.title ?? 'محصولات'
|
||||
@@ -38,6 +42,17 @@ const title = computed(() => {
|
||||
return 'همه محصولات'
|
||||
})
|
||||
|
||||
const bannerSubtitle = computed(() => {
|
||||
if (catalogId.value) return 'انتخاب محصول از کالیته'
|
||||
if (categoryId.value === 'suit') return 'شیک، بادوام و رسمی'
|
||||
if (categoryId.value === 'trousers') return 'مناسب شلوار و مصارف روزانه'
|
||||
if (categoryId.value === 'shirt') return 'سبک و مناسب پیراهن'
|
||||
if (season.value) return 'فیلتر شده بر اساس فصل'
|
||||
return 'مشاهده و ثبت سفارش'
|
||||
})
|
||||
|
||||
const showSearch = computed(() => !categoryId.value && !catalogId.value)
|
||||
|
||||
const sortedProducts = computed(() => {
|
||||
const needle = q.value.trim().toLowerCase()
|
||||
let list = [...products.value]
|
||||
@@ -65,6 +80,8 @@ function applySearch(value: string) {
|
||||
path: '/products',
|
||||
query: {
|
||||
...(categoryId.value ? { categoryId: categoryId.value } : {}),
|
||||
...(catalogId.value ? { catalogId: catalogId.value } : {}),
|
||||
...(companyId.value ? { companyId: companyId.value } : {}),
|
||||
...(season.value ? { season: season.value } : {}),
|
||||
...(value.trim() ? { q: value.trim() } : {}),
|
||||
},
|
||||
@@ -82,7 +99,11 @@ async function load() {
|
||||
products.value = await crm.loadBrowseProducts({
|
||||
categoryId: categoryId.value || undefined,
|
||||
season: season.value || undefined,
|
||||
catalogId: catalogId.value || undefined,
|
||||
companyId: companyId.value || undefined,
|
||||
})
|
||||
const fromCatalog = products.value[0]
|
||||
catalogTitle.value = fromCatalog?.catalogName || fromCatalog?.catalogCode || ''
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'بارگذاری محصولات ناموفق بود.'
|
||||
products.value = []
|
||||
@@ -95,7 +116,7 @@ onMounted(async () => {
|
||||
await favorites.hydrate()
|
||||
await load()
|
||||
})
|
||||
watch([categoryId, season], load)
|
||||
watch([categoryId, season, catalogId, companyId], load)
|
||||
watch(q, (value) => {
|
||||
searchDraft.value = value
|
||||
})
|
||||
@@ -105,6 +126,8 @@ function setSeason(value: string) {
|
||||
path: '/products',
|
||||
query: {
|
||||
...(categoryId.value ? { categoryId: categoryId.value } : {}),
|
||||
...(catalogId.value ? { catalogId: catalogId.value } : {}),
|
||||
...(companyId.value ? { companyId: companyId.value } : {}),
|
||||
...(value ? { season: value } : {}),
|
||||
...(q.value ? { q: q.value } : {}),
|
||||
},
|
||||
@@ -136,6 +159,7 @@ function toggleFavorite(productId: string) {
|
||||
|
||||
<div class="page__scroll page__scroll--with-nav products-scroll">
|
||||
<SearchField
|
||||
v-if="showSearch"
|
||||
:model-value="searchDraft"
|
||||
placeholder="جستجو نام یا کد محصول..."
|
||||
@update:model-value="applySearch"
|
||||
@@ -147,7 +171,7 @@ function toggleFavorite(productId: string) {
|
||||
<div class="cat-banner__icon" aria-hidden="true" />
|
||||
<div>
|
||||
<h2>{{ title }}</h2>
|
||||
<p>شیک، بادوام و رسمی</p>
|
||||
<p>{{ bannerSubtitle }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -232,6 +256,7 @@ function toggleFavorite(productId: string) {
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
<p v-if="!sortedProducts.length" class="empty-list">محصولی در این دسته یافت نشد.</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -446,4 +471,10 @@ function toggleFavorite(productId: string) {
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
margin: 12px 0 0;
|
||||
text-align: center;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user