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

Simplify order and cart cards

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 11:12:10 +07:00
parent 2b6ef46e65
commit 4a6871ecac
7 changed files with 28 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/components/orders/OrderItemsTable.vue
View File

@@ -31,31 +31,16 @@ const emit = defineEmits<{
remove: [itemId: string];
}>();
const coverPresets = [
['#d9f5e6', '#9ce8c1', '#6fd09d'],
['#eaf9ef', '#b3e8cb', '#76c89f'],
['#e8f5ec', '#b2e0c6', '#7dd0a9'],
];
const coverPresets = ['#edf3ef', '#f1f4ee', '#edf2f4'];
function createProductCover(name: string, seedKey: string) {
const seed = `${name}${seedKey}`.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
const [start, middle, finish] = coverPresets[seed % coverPresets.length];
const background = coverPresets[seed % coverPresets.length];
const firstLetter = name.trim().charAt(0).toUpperCase() || 'P';
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
<defs>
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="${start}" />
<stop offset="55%" stop-color="${middle}" />
<stop offset="100%" stop-color="${finish}" />
</linearGradient>
</defs>
<rect width="120" height="120" fill="url(#g)" rx="28" />
<g opacity="0.15">
<circle cx="96" cy="22" r="28" fill="#0f7a49" />
<circle cx="18" cy="106" r="30" fill="#0f7a49" />
</g>
<rect width="120" height="120" fill="${background}" rx="28" />
<text x="50%" y="57%" text-anchor="middle" fill="#11412c" font-family="Manrope, sans-serif" font-size="44" font-weight="700">${firstLetter}</text>
</svg>
`.trim();
@@ -168,7 +153,7 @@ function itemParameters(item: OrderItemView) {
<template>
<div :class="isFramed ? 'surface-card rounded-3xl p-5' : ''">
<div class="hidden border-b border-[#deebe4] pb-3 md:grid md:grid-cols-[minmax(0,1.8fr)_140px_160px_140px] md:gap-4">
<div class="hidden pb-1 md:grid md:grid-cols-[minmax(0,1.8fr)_140px_160px_140px] md:gap-4">
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Позиция</p>
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Цена</p>
<p class="text-xs font-semibold uppercase tracking-[0.18em] text-[#6a8a76]">Количество</p>
@@ -179,13 +164,13 @@ function itemParameters(item: OrderItemView) {
<li
v-for="item in items"
:key="item.id"
class="rounded-[28px] border border-[#dceae2] bg-[linear-gradient(180deg,#ffffff_0%,#f8fcf9_100%)] p-4 md:grid md:grid-cols-[minmax(0,1.8fr)_140px_160px_140px] md:gap-4 md:p-5"
class="surface-card rounded-[28px] p-4 md:grid md:grid-cols-[minmax(0,1.8fr)_140px_160px_140px] md:gap-4 md:p-5"
>
<div class="flex min-w-0 gap-4">
<img
:src="createProductCover(item.productName, item.id)"
:alt="item.productName"
class="h-20 w-20 shrink-0 rounded-[24px] object-cover"
class="h-20 w-20 shrink-0 rounded-[24px] bg-[#edf3ef] object-cover"
>
<div class="min-w-0 space-y-2">
@@ -198,7 +183,7 @@ function itemParameters(item: OrderItemView) {
<span
v-for="parameter in itemParameters(item)"
:key="parameter.label"
class="rounded-full bg-[#edf7f1] px-3 py-1 text-xs font-semibold text-[#355947]"
class="rounded-full bg-[#f3f5f4] px-3 py-1 text-xs font-semibold text-[#355947]"
>
{{ parameter.label }}: {{ parameter.value }}
</span>
@@ -215,7 +200,7 @@ function itemParameters(item: OrderItemView) {
min="0"
step="0.01"
placeholder="Например, 125.50"
class="w-full rounded-2xl border border-[#d7e9de] bg-white px-4 py-3 text-sm text-[#123824] outline-none transition focus:border-[#139957] focus:shadow-[0_0_0_3px_rgba(19,153,87,0.12)] disabled:cursor-not-allowed disabled:bg-[#f4f8f5]"
class="w-full rounded-2xl bg-[#f3f5f4] px-4 py-3 text-sm text-[#123824] outline-none transition focus:shadow-[0_0_0_3px_rgba(19,153,87,0.12)] disabled:cursor-not-allowed disabled:bg-[#f4f8f5]"
:disabled="disabled"
@input="updateUnitPrice(item.id, $event)"
>
@@ -229,7 +214,7 @@ function itemParameters(item: OrderItemView) {
<div v-if="isCartMode" class="flex flex-wrap items-center gap-2">
<button
type="button"
class="flex h-9 w-9 items-center justify-center rounded-full border border-[#d7e9de] bg-white text-lg font-semibold text-[#123824] transition hover:border-[#139957] hover:text-[#139957]"
class="flex h-9 w-9 items-center justify-center rounded-full bg-[#f3f5f4] text-lg font-semibold text-[#123824] transition hover:bg-[#e8efea] hover:text-[#139957]"
@click="decrementItem(item.id)"
>
-
@@ -237,7 +222,7 @@ function itemParameters(item: OrderItemView) {
<span class="min-w-8 text-center text-sm font-semibold text-[#123824]">{{ item.quantity }}</span>
<button
type="button"
class="flex h-9 w-9 items-center justify-center rounded-full border border-[#d7e9de] bg-white text-lg font-semibold text-[#123824] transition hover:border-[#139957] hover:text-[#139957]"
class="flex h-9 w-9 items-center justify-center rounded-full bg-[#f3f5f4] text-lg font-semibold text-[#123824] transition hover:bg-[#e8efea] hover:text-[#139957]"
@click="incrementItem(item.id)"
>
+