fix: style
This commit is contained in:
@@ -9,21 +9,22 @@
|
||||
|
||||
<div v-if="cartStore.items.length > 0" class="divide-y divide-(--border-light) dark:divide-(--border-dark)">
|
||||
<div v-for="item in cartStore.items" :key="item.id" class="flex items-center justify-between p-4 gap-4">
|
||||
<div class="flex items-center gap-10 flex-1">
|
||||
<div class="grid grid-cols-5 w-[100%]">
|
||||
<div
|
||||
class="w-20 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-xl text-gray-400" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-black dark:text-white text-sm font-medium truncate">{{ item.name }}</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 text-sm">
|
||||
{{ t('Qty') }}: {{ item.quantity }} × ${{ item.price.toFixed(2) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right flex-shrink-0">
|
||||
<p class="text-black dark:text-white text-sm font-medium truncate">{{ item.product_number }}</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" class="text-gray-500 dark:text-gray-400 text-sm" />
|
||||
<button size="sm" color="destructive" variant="outline" @click="confirmDelete(address.id)"
|
||||
class="text-red-500 bg-red-100 dark:bg-red-900 dark:text-red-100 rounded transition-colors p-2">
|
||||
<UIcon name="material-symbols:delete" class="text-[16px]" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -161,14 +161,6 @@ function saveAddress() {
|
||||
}
|
||||
closeModal()
|
||||
}
|
||||
// const Lera = ref('')
|
||||
// function run (){
|
||||
// if(Lera.value==='lera'){
|
||||
// console.log('Leraa okokok')
|
||||
// }else{
|
||||
// console.log('LEra nonono')
|
||||
// }
|
||||
// }
|
||||
function confirmDelete(id: number) {
|
||||
addressToDelete.value = id
|
||||
showDeleteConfirm.value = true
|
||||
|
||||
@@ -8,6 +8,7 @@ export interface CartItem {
|
||||
image: string
|
||||
price: number
|
||||
quantity: number
|
||||
product_number:string
|
||||
}
|
||||
|
||||
export interface DeliveryMethod {
|
||||
@@ -32,9 +33,9 @@ export const useCartStore = defineStore('cart', () => {
|
||||
|
||||
function initMockData() {
|
||||
items.value = [
|
||||
{ id: 1, productId: 101, name: 'Premium Widget Pro', image: '/img/product-1.jpg', price: 129.99, quantity: 2 },
|
||||
{ id: 2, productId: 102, name: 'Ultra Gadget X', image: '/img/product-2.jpg', price: 89.50, quantity: 1 },
|
||||
{ id: 3, productId: 103, name: 'Mega Tool Set', image: '/img/product-3.jpg', price: 249.00, quantity: 3 }
|
||||
{ id: 1, productId: 101, name: 'Premium Widget Pro', product_number: 'NC209/7000', image: '/img/product-1.jpg', price: 129.99, quantity: 2 },
|
||||
{ id: 2, productId: 102, name: 'Ultra Gadget X', product_number: 'NC234/6453', image: '/img/product-2.jpg', price: 89.50, quantity: 1 },
|
||||
{ id: 3, productId: 103, name: 'Mega Tool Set', product_number: 'NC324/9030', image: '/img/product-3.jpg', price: 249.00, quantity: 3 }
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user