s.esmaeili
f441ca8289
Applies to both user-app and user-app-v2. Logic and structure are shared; each app keeps its own look. Appearance settings - New "تنظیمات ظاهری" page (/settings/appearance), opened from the dashboard and available without login. It offers a light/dark/system theme and a "fast & light" motion switch. - appearanceStore saves the choice to localStorage. A small inline boot script in index.html applies it before first paint so there is no white flash. The "system" option follows OS changes live. - New ToggleSwitch component. Dark mode - Theme LESS tokens now compile to CSS custom properties. Light/dark values come from a generated virtual:palette.css (themeConfig/ appearance.ts, with colors.json + new colors.dark.json). - New LESS alpha() plugin replaces fade() on theme tokens. - New semantic tokens: page, onInk, heroSurface, hairlineStrong, photoMat, photoStage. - The dark palette is layered (page < card < panel < border) so surfaces separate without shadows. - Hard-coded colors were replaced by tokens according to their role. - antd inputs/text get dark overrides; vant uses its own .van-theme-dark. - Light mode looks the same as before. Reduced motion - With html.motion-reduced, transitions are capped at 120ms, keyframe loops stop, and backdrop blurs and permanent will-change are dropped. - Spinners and the toast progress bar (which closes the toast) are exempt via .keep-motion. - Carousel autoplay, the v1 Lottie and the product morph honor the setting. Product detail - Opening a product is now a container-transform morph from the tapped card (ProductMorph). It replaces the bottom Drawer and uses composited transform/opacity only. - The detail view is seeded with the card's data, so it no longer opens blank and jumps. Filters and sheets - Filters are now a full-width bottom sheet. Selections stay a draft until applied, so the result list no longer re-renders while dragging the slider. - DropDown collapse animates grid-template-rows instead of a capped max-height. - v2 IslandSheet is restyled to the v2 design language (API unchanged). Fixes - filtersStore.reset() shallow-copied shared arrays, so clearing the filters never cleared the selected brands.
416 lines
11 KiB
Vue
416 lines
11 KiB
Vue
<!--
|
||
"سفارش مشتریان" — the sales expert's referred customers' orders.
|
||
|
||
Ported from legacy henza_pwa/src/views/user/src/components/ChildOrders.vue,
|
||
restyled into this app's design language (PageBar + SearchInput + cards, as
|
||
OrdersView uses). The LOGIC is the reference's and is identical in
|
||
user-app-v2; only the styling differs between the two apps.
|
||
|
||
Kept from the reference:
|
||
- the title "سفارشات مشتریان" (ChildOrders.vue:18)
|
||
- the search box over the list (:26)
|
||
- infinite paging: one page per scroll to the bottom (:327-338)
|
||
- per card: "سفارش : ORD-{id}", the item count, the total weight in grams,
|
||
the customer name, and the fixed status chip «تحویل مسئول فروش» — the
|
||
reference hardcodes that label (:48) because the endpoint only ever
|
||
returns orders at that status (`where('sts', 5)`, ApiMobileController:766)
|
||
- the card is tappable, as the reference's was (:29)
|
||
|
||
Deliberately NOT ported: the reference's edit-order drawer behind that tap
|
||
(toEditOrder -> PUT /order/child/{id}) recalculated an order's weights and
|
||
prices from values the CLIENT sent. Bringing that across during a delivery
|
||
would put a money path in the app with no server-side recomputation; the tap
|
||
opens a read-only summary instead. Recorded in D21/DELIVERY.md.
|
||
|
||
Scope is the server's: every row belongs to a customer this expert referred.
|
||
No id travels from the client.
|
||
-->
|
||
<template>
|
||
<div class="cho">
|
||
<PageBar title="سفارشات مشتریان" back-to="userPage::hasSubRoute">
|
||
<template #below>
|
||
<div class="cho__barExtra">
|
||
<SearchInput @search="readSearch" place-holder="جستجو" />
|
||
</div>
|
||
</template>
|
||
</PageBar>
|
||
|
||
<Spinner :spinning="loading && !rows.length" tip="درحال دریافت اطلاعات">
|
||
<PullRefresh v-model="refreshing" @refresh="onRefresh">
|
||
<container class="cho__body">
|
||
<template v-if="rows.length">
|
||
<div class="cho__list">
|
||
<article
|
||
v-for="item in rows"
|
||
:key="item.id"
|
||
class="cho__card"
|
||
@click="openDetail(item)"
|
||
>
|
||
<div class="cho__top">
|
||
<div class="cho__left">
|
||
<div class="cho__num">
|
||
<span class="cho__muted">سفارش :</span>
|
||
{{ item.orderNumber }}
|
||
</div>
|
||
<div class="cho__meta">
|
||
<span class="cho__strong">{{ item.items?.length ?? 0 }}</span>
|
||
<span class="cho__unit">آیتم</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cho__right">
|
||
<span class="cho__status">تحویل مسئول فروش</span>
|
||
<div class="cho__meta">
|
||
<span class="cho__strong">{{ grams(item.w) }}</span>
|
||
<span class="cho__unit">گرم</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cho__divider" />
|
||
|
||
<div class="cho__bottom">
|
||
<div class="cho__customer">
|
||
نام مشتری : {{ item.customer?.name ?? '—' }}
|
||
</div>
|
||
<Icon icon="vuesax-linear:arrow-left-1" size="20" />
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div v-if="loading" class="cho__more">در حال دریافت…</div>
|
||
</template>
|
||
|
||
<section v-else-if="!loading" class="cho__empty">
|
||
<Icon icon="vuesax-linear:box" size="26" />
|
||
<p>{{ search ? 'سفارشی با این مشخصات پیدا نشد.' : 'هنوز سفارشی ثبت نشده است.' }}</p>
|
||
</section>
|
||
|
||
<section v-if="failed" class="cho__empty">
|
||
<Icon icon="vuesax-linear:danger" size="26" />
|
||
<p>دریافت اطلاعات با خطا روبه‌رو شد.</p>
|
||
<button type="button" class="cho__retry" @click="reload">تلاش دوباره</button>
|
||
</section>
|
||
|
||
<!-- Sentinel for the infinite scroll, as the reference used (:216). -->
|
||
<div ref="sentinel" class="cho__sentinel" />
|
||
</container>
|
||
</PullRefresh>
|
||
</Spinner>
|
||
|
||
<Drawer
|
||
v-model:open="detailOpen"
|
||
placement="bottom"
|
||
height="auto"
|
||
:closable="false"
|
||
:body-style="{ padding: '0' }"
|
||
>
|
||
<div v-if="active" class="cho__detail">
|
||
<h2 class="cho__detailTitle">{{ active.orderNumber }}</h2>
|
||
<dl class="cho__rows">
|
||
<div class="cho__row">
|
||
<dt>نام مشتری</dt>
|
||
<dd>{{ active.customer?.name ?? '—' }}</dd>
|
||
</div>
|
||
<div class="cho__row">
|
||
<dt>شماره تماس</dt>
|
||
<dd dir="ltr">{{ active.customer?.mobile ?? '—' }}</dd>
|
||
</div>
|
||
<div class="cho__row">
|
||
<dt>وزن کل</dt>
|
||
<dd dir="ltr">{{ grams(active.w) }} گرم</dd>
|
||
</div>
|
||
<div class="cho__row">
|
||
<dt>تعداد آیتم‌ها</dt>
|
||
<dd>{{ active.items?.length ?? 0 }}</dd>
|
||
</div>
|
||
<div class="cho__row">
|
||
<dt>تاریخ ثبت</dt>
|
||
<dd>{{ jdate(active.createdAt) }}</dd>
|
||
</div>
|
||
<div class="cho__row">
|
||
<dt>وضعیت</dt>
|
||
<dd>تحویل مسئول فروش</dd>
|
||
</div>
|
||
</dl>
|
||
<button type="button" class="cho__close" @click="detailOpen = false">بستن</button>
|
||
</div>
|
||
</Drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||
import { Drawer } from 'ant-design-vue'
|
||
import { PullRefresh } from 'vant'
|
||
import Icon from '../../components/icon/Icon.vue'
|
||
import PageBar from '../../components/ui/PageBar.vue'
|
||
import Spinner from '../../components/Spinner.vue'
|
||
import SearchInput from '../../components/search/SearchInput.vue'
|
||
import { jdate } from '../../utils/filters'
|
||
import { api, type ExpertChildOrder } from '../../api/client'
|
||
|
||
const rows = ref<ExpertChildOrder[]>([])
|
||
const loading = ref(false)
|
||
const refreshing = ref(false)
|
||
const failed = ref(false)
|
||
const search = ref<string | null>(null)
|
||
const page = ref(1)
|
||
/** Cleared when a page comes back short, so scrolling stops asking. */
|
||
const hasMore = ref(true)
|
||
|
||
const detailOpen = ref(false)
|
||
const active = ref<ExpertChildOrder | null>(null)
|
||
|
||
/** Weights arrive as decimal strings; shown to 3 places, as the reference did. */
|
||
function grams(value: string | number | null | undefined): string {
|
||
const n = Number(value ?? 0)
|
||
return Number.isFinite(n) ? n.toFixed(3) : '0.000'
|
||
}
|
||
|
||
async function fetchPage() {
|
||
if (loading.value || !hasMore.value) return
|
||
loading.value = true
|
||
failed.value = false
|
||
try {
|
||
const data = await api.getExpertChildOrders(page.value, search.value)
|
||
const incoming = data.rows ?? []
|
||
rows.value = [...rows.value, ...incoming]
|
||
if (incoming.length < (data.limit ?? 20)) hasMore.value = false
|
||
else page.value += 1
|
||
} catch {
|
||
failed.value = true
|
||
hasMore.value = false
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function reset() {
|
||
rows.value = []
|
||
page.value = 1
|
||
hasMore.value = true
|
||
failed.value = false
|
||
}
|
||
|
||
async function reload() {
|
||
reset()
|
||
await fetchPage()
|
||
}
|
||
|
||
/** The reference re-ran the query on every search (ChildOrders.vue:327). */
|
||
async function readSearch(value: string | undefined) {
|
||
search.value = value?.trim() ? value.trim() : null
|
||
await reload()
|
||
}
|
||
|
||
async function onRefresh() {
|
||
await reload()
|
||
refreshing.value = false
|
||
}
|
||
|
||
function openDetail(item: ExpertChildOrder) {
|
||
active.value = item
|
||
detailOpen.value = true
|
||
}
|
||
|
||
// Infinite scroll, the reference's behaviour (useInfiniteScroll at :216/:330).
|
||
const sentinel = ref<HTMLElement | null>(null)
|
||
let observer: IntersectionObserver | null = null
|
||
|
||
onMounted(async () => {
|
||
await fetchPage()
|
||
if (typeof IntersectionObserver !== 'undefined') {
|
||
observer = new IntersectionObserver((entries) => {
|
||
if (entries.some((e) => e.isIntersecting)) void fetchPage()
|
||
})
|
||
if (sentinel.value) observer.observe(sentinel.value)
|
||
}
|
||
})
|
||
|
||
onBeforeUnmount(() => observer?.disconnect())
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.cho__barExtra {
|
||
padding: 0 16px 12px;
|
||
}
|
||
|
||
.cho__body {
|
||
padding-top: 132px;
|
||
padding-bottom: 90px;
|
||
}
|
||
|
||
.cho__list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-top: 16px;
|
||
gap: 11px;
|
||
}
|
||
|
||
.cho__card {
|
||
padding: 16px;
|
||
background: @canvas;
|
||
border: 1px solid @hairline;
|
||
border-radius: 18px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.cho__card:active {
|
||
transform: scale(0.99);
|
||
}
|
||
|
||
.cho__top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.cho__right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 8px;
|
||
}
|
||
|
||
.cho__num {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.cho__muted {
|
||
color: @inkMuted;
|
||
font-weight: 500;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.cho__meta {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4px;
|
||
}
|
||
|
||
.cho__strong {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.cho__unit {
|
||
font-size: 12px;
|
||
color: @inkMuted;
|
||
}
|
||
|
||
.cho__status {
|
||
padding: 5px 14px;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #06b6d4;
|
||
background: fade(#06b6d4, 12%);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cho__divider {
|
||
height: 1px;
|
||
background: @hairline;
|
||
margin: 12px 0;
|
||
}
|
||
|
||
.cho__bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.cho__customer {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: @inkMuted;
|
||
}
|
||
|
||
.cho__more,
|
||
.cho__sentinel {
|
||
padding: 12px 0;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: @inkMuted;
|
||
}
|
||
|
||
.cho__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: @inkMuted;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.cho__retry {
|
||
padding: 8px 18px;
|
||
border-radius: 999px;
|
||
border: 1px solid @hairline;
|
||
background: @canvas;
|
||
font-family: inherit;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.cho__detail {
|
||
padding: 20px 16px 24px;
|
||
}
|
||
|
||
.cho__detailTitle {
|
||
margin: 0 0 16px;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.cho__rows {
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.cho__row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 11px 14px;
|
||
background: @canvasSoft;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.cho__row dt {
|
||
font-size: 13px;
|
||
color: @inkMuted;
|
||
}
|
||
|
||
.cho__row dd {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cho__close {
|
||
margin-top: 18px;
|
||
width: 100%;
|
||
padding: 13px;
|
||
border: none;
|
||
border-radius: 14px;
|
||
background: @primary;
|
||
color: #fff;
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|