goc_daniel/b2b
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: create Account Page

Browse Source
This commit is contained in:
Valeriia Yakovenko
2026-03-23 16:14:43 +01:00
parent 508418523f
commit d0c1f49d3e
15 changed files with 461 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
bo/src/components/customer/PageCart.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="container mx-auto mt-15">
<h1 class="text-2xl font-bold text-black dark:text-white mb-8">{{ t('Shopping Cart') }}</h1>
<div class="flex flex-col lg:flex-row gap-8 mb-8">
<div class="container mx-auto mt-20 flex flex-col gap-5 md:gap-10">
<h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
<div class="flex flex-col lg:flex-row gap-5 md:gap-10">
<div class="flex-1">
<div
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
@@ -9,44 +9,29 @@
class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
{{ t('Selected Products') }}
</h2>
<div
class="hidden md:grid grid-cols-12 gap-4 p-4 bg-(--second-light) dark:bg-(--main-dark) text-sm font-medium text-gray-600 dark:text-gray-300 border-b border-(--border-light) dark:border-(--border-dark)">
<div class="col-span-4">{{ t('Product') }}</div>
<div class="col-span-2 text-right">{{ t('Price') }}</div>
<div class="col-span-3 text-center">{{ t('Quantity') }}</div>
<div class="col-span-2 text-right">{{ t('Total') }}</div>
<div class="col-span-1 text-center">{{ t('Actions') }}</div>
</div>
<div v-if="cartStore.items.length > 0">
<div v-for="item in cartStore.items" :key="item.id"
class="grid grid-cols-1 md:grid-cols-12 gap-4 p-4 border-b border-(--border-light) dark:border-(--border-dark) items-center">
<div class="col-span-4 flex items-center gap-4">
<div
class="w-16 h-16 bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
<img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
<UIcon v-else name="mdi:package-variant" class="text-2xl text-gray-400" />
</div>
<span class="text-black dark:text-white text-sm font-medium">{{ item.name }}</span>
class="grid grid-cols-5 items-center p-4 border-b border-(--border-light) dark:border-(--border-dark) w-[100%]">
<div
class="bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
<img v-if="item.image" :src="item.image" :alt="item.name" class="w-full h-full object-cover" />
<UIcon v-else name="mdi:package-variant" class="text-2xl text-gray-400" />
</div>
<div class="col-span-2 text-right">
<span class="md:hidden text-gray-500 dark:text-gray-400 text-sm">{{ t('Price') }}: </span>
<span class="text-black dark:text-white">${{ item.price.toFixed(2) }}</span>
</div>
<div class="col-span-3 flex items-center justify-center">
<p class="text-black dark:text-white text-sm font-medium">{{ item.name }}</p>
<p class="text-black dark:text-white">${{ item.price.toFixed(2) }}</p>
<p class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2)
}}</p>
<div class="flex items-center justify-end gap-10">
<UInputNumber v-model="item.quantity" :min="1"
@update:model-value="(val: number) => cartStore.updateQuantity(item.id, val)" />
</div>
<div class="col-span-2 text-right">
<span class="md:hidden text-gray-500 dark:text-gray-400 text-sm">{{ t('Total') }}: </span>
<span class="text-black dark:text-white font-medium">${{ (item.price * item.quantity).toFixed(2)
}}</span>
</div>
<div class="col-span-1 flex justify-center">
<button @click="removeItem(item.id)"
class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
:title="t('Remove')">
<UIcon name="material-symbols:delete" class="text-[20px]" />
</button>
<div class="flex justify-center">
<button @click="removeItem(item.id)"
class="p-2 text-red-500 bg-red-100 dark:bg-(--main-dark) rounded transition-colors"
:title="t('Remove')">
<UIcon name="material-symbols:delete" class="text-[20px]" />
</button>
</div>
</div>
</div>
</div>
@@ -99,7 +84,7 @@
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-10">
<div class="flex-1">
<div
class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) p-6">