landing desktop

2026-06-12 20:16:14 +03:30
parent 820e80ac16
commit 5eec309b54
89 changed files with 4343 additions and 2309 deletions
@@ -0,0 +1,131 @@
+<template>
+  <aside
+    class="min-w-0 w-full max-w-full rounded-2xl border border-border bg-white p-4 shadow-[0_2px_12px_rgba(15,23,42,0.06)] dark:bg-surface sm:p-5"
+  >
+    <h2 class="mb-3 text-sm font-bold text-text sm:mb-4 sm:text-base">خلاصه سفارش</h2>
+
+    <div v-if="items.length" class="space-y-3 sm:space-y-4">
+      <p v-if="classTitle" class="text-xs font-medium text-brand-600">
+        کلاس {{ classTitle }}
+      </p>
+
+      <div
+        v-if="items.length === 1"
+        class="overflow-hidden rounded-xl border border-border lg:block"
+      >
+        <div
+          v-if="imageUrl"
+          class="hidden aspect-[16/10] bg-surface-2 bg-cover bg-center lg:block"
+          :style="{ backgroundImage: `url(${imageUrl})` }"
+        />
+        <div
+          v-else
+          class="hidden aspect-[16/10] items-center justify-center bg-brand-50 text-brand-600 dark:bg-brand-500/10 lg:flex"
+        >
+          <AppIcon name="spray" size="xl" />
+        </div>
+        <div class="p-3">
+          <p class="font-semibold text-text">{{ items[0].title }}</p>
+          <p v-if="items[0].durationLabel" class="mt-1 text-xs text-muted sm:text-sm">
+            مدت زمان: {{ items[0].durationLabel }}
+          </p>
+        </div>
+      </div>
+
+      <ul v-else class="space-y-1.5 sm:space-y-2">
+        <li
+          v-for="item in items"
+          :key="item.id"
+          class="rounded-xl border border-border px-3 py-2 sm:py-2.5"
+        >
+          <div class="flex items-start justify-between gap-2 sm:gap-3">
+            <div class="min-w-0 flex-1">
+              <p class="truncate text-sm font-semibold text-text">{{ item.title }}</p>
+              <p v-if="item.durationLabel" class="mt-0.5 text-xs text-muted">
+                {{ item.durationLabel }}
+              </p>
+            </div>
+            <p class="shrink-0 text-xs font-medium text-text sm:text-sm">
+              {{ formatPriceToman(item.price) }}
+            </p>
+          </div>
+        </li>
+      </ul>
+
+      <dl class="space-y-1.5 text-xs sm:space-y-2 sm:text-sm">
+        <div
+          v-if="items.length === 1"
+          class="flex items-center justify-between gap-2"
+        >
+          <dt class="text-muted">قیمت خدمت</dt>
+          <dd class="font-medium text-text">
+            {{ formatPriceToman(items[0].price) }} تومان
+          </dd>
+        </div>
+        <div
+          v-if="totalDurationMinutes"
+          class="flex items-center justify-between gap-2"
+          :class="{ 'border-t border-border pt-2': items.length === 1 }"
+        >
+          <dt class="text-muted">مدت کل</dt>
+          <dd class="font-medium text-text">{{ totalDurationMinutes }} دقیقه</dd>
+        </div>
+        <div class="flex items-center justify-between gap-2 border-t border-border pt-2">
+          <dt class="font-semibold text-text">جمع کل</dt>
+          <dd class="text-sm font-bold text-text sm:text-base">
+            {{ formatPriceToman(totalPrice) }} تومان
+          </dd>
+        </div>
+      </dl>
+
+      <div
+        v-if="earliestSlot"
+        class="rounded-xl border border-brand-500/30 bg-brand-50 p-3 dark:bg-brand-500/10 sm:p-4"
+      >
+        <div class="flex items-start gap-2">
+          <AppIcon name="zap" size="sm" class="mt-0.5 shrink-0 text-brand-600" />
+          <div class="min-w-0 flex-1">
+            <p class="text-xs font-medium text-brand-700 dark:text-brand-500">
+              زودترین زمان خالی
+            </p>
+            <p class="mt-0.5 truncate text-sm font-bold text-text">
+              {{ earliestSlot.dateLabel }}
+            </p>
+            <p class="text-xs text-muted sm:text-sm">{{ earliestSlot.timeLabel }}</p>
+          </div>
+        </div>
+        <AppButton class="mt-2.5 sm:mt-3" @click="emit('select-earliest')">
+          انتخاب این زمان
+        </AppButton>
+      </div>
+    </div>
+
+    <p v-else class="text-sm text-muted">ابتدا یک یا چند خدمت انتخاب کنید.</p>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import AppButton from '@/components/ui/AppButton.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import { formatPriceToman } from '@/utils/format';
+
+export type BookingSummaryItem = {
+  id: string;
+  title: string;
+  price: string;
+  durationLabel: string | null;
+};
+
+defineProps<{
+  items: BookingSummaryItem[];
+  classTitle?: string | null;
+  totalPrice: string;
+  totalDurationMinutes: number | null;
+  imageUrl: string | null;
+  earliestSlot: { dateLabel: string; timeLabel: string } | null;
+}>();
+
+const emit = defineEmits<{
+  'select-earliest': [];
+}>();
+</script>