fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify order and client detail layouts

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 10:47:12 +07:00
parent ec9103a80d
commit 453092c289
4 changed files with 104 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/pages/client-orders/[id].vue
View File

@@ -231,43 +231,47 @@ watch(
:editable="true"
:unit-price-drafts="itemPriceDrafts"
:disabled="!canEditOffer"
:framed="false"
@update:unit-price="({ itemId, value }) => { itemPriceDrafts[itemId] = value; }"
/>
</div>
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Доставка</h2>
<div class="mt-4 space-y-3">
<div class="manager-mini-card text-sm text-[#123824]">
Адрес: {{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}
<div class="mt-4 space-y-4 text-sm text-[#123824]">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Адрес</p>
<p class="text-base font-semibold">{{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}</p>
</div>
<div class="manager-mini-card space-y-3 text-sm text-[#123824]">
<p>{{ orderDeliveryStateText(draftDeliveryTerms) }}</p>
<label class="form-control">
<span class="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-[#6a8a76]">Комментарий по доставке</span>
<input
v-model="deliveryTermsDraft"
type="text"
placeholder="Например, доставка до склада 2-3 дня"
class="input input-bordered w-full rounded-2xl bg-white"
:disabled="!canEditOffer"
>
</label>
</div>
<div class="manager-mini-card space-y-3 text-sm text-[#123824]">
<p>{{ orderLogisticsStateText(draftDeliveryFee) }}</p>
<label class="form-control">
<span class="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-[#6a8a76]">Стоимость логистики</span>
<input
v-model="deliveryFeeDraft"
type="number"
min="0"
step="0.01"
placeholder="Например, 3000"
class="input input-bordered w-full rounded-2xl bg-white"
:disabled="!canEditOffer"
>
</label>
<div class="grid gap-4 border-t border-[#deebe4] pt-4 md:grid-cols-2">
<div class="space-y-3">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Комментарий по доставке</p>
<p>{{ orderDeliveryStateText(draftDeliveryTerms) }}</p>
<label class="form-control">
<input
v-model="deliveryTermsDraft"
type="text"
placeholder="Например, доставка до склада 2-3 дня"
class="input input-bordered manager-field w-full rounded-2xl bg-white"
:disabled="!canEditOffer"
>
</label>
</div>
<div class="space-y-3">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Стоимость логистики</p>
<p>{{ orderLogisticsStateText(draftDeliveryFee) }}</p>
<label class="form-control">
<input
v-model="deliveryFeeDraft"
type="number"
min="0"
step="0.01"
placeholder="Например, 3000"
class="input input-bordered manager-field w-full rounded-2xl bg-white"
:disabled="!canEditOffer"
>
</label>
</div>
</div>
</div>

74
app/pages/clients/[id].vue
View File

@@ -148,28 +148,60 @@ async function rejectRequest() {
</div>
<template v-else>
<div class="surface-card rounded-[36px] p-6">
<div class="flex flex-col items-center gap-4 text-center">
<img
v-if="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
:src="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
:alt="currentUser.fullName"
class="h-28 w-28 rounded-[36px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
>
<div
v-else
class="flex h-28 w-28 items-center justify-center rounded-[36px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-4xl font-black text-[#123824]"
>
{{ userInitials(currentUser.fullName) }}
</div>
<div class="manager-hero">
<p class="manager-eyebrow">Клиент</p>
<h1 class="manager-title">{{ currentUser.fullName }}</h1>
<p class="manager-copy">
{{ currentUser.email }}
<template v-if="currentUser.companyName"> · {{ currentUser.companyName }}</template>
</p>
</div>
<div class="space-y-2">
<p class="manager-eyebrow">Пользователь</p>
<h1 class="text-[clamp(1.8rem,3vw,2.8rem)] font-black leading-none tracking-[-0.04em] text-[#123824]">
{{ currentUser.fullName }}
</h1>
<p class="text-sm text-[#466653]">{{ currentUser.email }}</p>
<p v-if="currentUser.companyName" class="text-sm text-[#466653]">{{ currentUser.companyName }}</p>
<div class="grid gap-4 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)]">
<div class="surface-card rounded-[32px] p-6">
<div class="flex flex-col items-center gap-5 text-center">
<img
v-if="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
:src="messengerConnectionAvatarSrc(currentUser.telegramConnection)"
:alt="currentUser.fullName"
class="h-28 w-28 rounded-[36px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
>
<div
v-else
class="flex h-28 w-28 items-center justify-center rounded-[36px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-4xl font-black text-[#123824]"
>
{{ userInitials(currentUser.fullName) }}
</div>
<div class="w-full space-y-4 text-left">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Email</p>
<p class="text-sm font-semibold text-[#123824]">{{ currentUser.email }}</p>
</div>
<div class="space-y-1 border-t border-[#deebe4] pt-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Компания</p>
<p class="text-sm text-[#123824]">{{ currentUser.companyName || 'Не указана' }}</p>
</div>
<div class="space-y-1 border-t border-[#deebe4] pt-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">ИНН</p>
<p class="text-sm text-[#123824]">{{ currentUser.inn || 'Не указан' }}</p>
</div>
</div>
</div>
</div>
<div class="surface-card rounded-3xl p-5">
<div class="grid gap-4 md:grid-cols-2">
<div class="rounded-[24px] bg-[#f6fbf8] p-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Заказов</p>
<p class="mt-2 text-3xl font-black leading-none text-[#123824]">{{ currentUser.orderCount }}</p>
</div>
<div class="rounded-[24px] bg-[#f6fbf8] p-4">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Telegram</p>
<p class="mt-2 text-sm text-[#123824]">
{{ currentUser.telegramConnection?.username ? `@${currentUser.telegramConnection.username}` : 'Не подключен' }}
</p>
</div>
</div>
</div>
</div>

22
app/pages/orders/[id].vue
View File

@@ -56,20 +56,26 @@ const currentOrderCode = computed(() => formatOrderCode(currentOrder.value?.code
class="mt-4"
:items="currentOrder.items"
:calculation-payload="currentOrder.calculationPayload"
:framed="false"
/>
</div>
<div class="surface-card rounded-3xl p-5">
<h2 class="text-xl font-bold text-[#123824]">Доставка</h2>
<div class="mt-4 space-y-3">
<div class="manager-mini-card text-sm text-[#123824]">
Адрес: {{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}
<div class="mt-4 space-y-4 text-sm text-[#123824]">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Адрес</p>
<p class="text-base font-semibold">{{ currentOrder.deliveryAddress || 'Адрес пока не указан' }}</p>
</div>
<div class="manager-mini-card text-sm text-[#123824]">
{{ orderDeliveryStateText(currentOrder.deliveryTerms) }}
</div>
<div class="manager-mini-card text-sm text-[#123824]">
{{ orderLogisticsStateText(currentOrder.deliveryFee) }}
<div class="grid gap-4 border-t border-[#deebe4] pt-4 md:grid-cols-2">
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Комментарий по доставке</p>
<p>{{ orderDeliveryStateText(currentOrder.deliveryTerms) }}</p>
</div>
<div class="space-y-1">
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Логистика</p>
<p>{{ orderLogisticsStateText(currentOrder.deliveryFee) }}</p>
</div>
</div>
</div>
</div>