fix: style
This commit is contained in:
308
bo/src/views/customer/ProductDetailView.vue
Normal file
308
bo/src/views/customer/ProductDetailView.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { TableColumn } from '@nuxt/ui'
|
||||
import { h } from 'vue'
|
||||
|
||||
interface Product {
|
||||
id: number
|
||||
image: string
|
||||
name: string
|
||||
code: string
|
||||
inStock: boolean
|
||||
priceFrom: number
|
||||
priceTo: number
|
||||
count: number
|
||||
description: string
|
||||
howToUse: string
|
||||
productDetails: string
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
// Mock product data (same as ProductsView)
|
||||
const products = ref<Product[]>([
|
||||
{ id: 1, image: 'https://picsum.photos/seed/product1/400/400', name: 'Laptop Pro 15', code: 'LP-001', inStock: true, priceFrom: 999, priceTo: 1299, count: 15, description: 'High-performance laptop for professionals', howToUse: 'Open the lid and press the power button', productDetails: '15-inch display, 16GB RAM, 512GB SSD' },
|
||||
{ id: 2, image: 'https://picsum.photos/seed/product2/400/400', name: 'Wireless Mouse', code: 'WM-002', inStock: true, priceFrom: 29, priceTo: 49, count: 150, description: 'Ergonomic wireless mouse with precision tracking', howToUse: 'Connect via Bluetooth or USB receiver', productDetails: '3000 DPI, 2.4GHz wireless, 12-month battery' },
|
||||
{ id: 3, image: 'https://picsum.photos/seed/product3/400/400', name: 'Mechanical Keyboard', code: 'MK-003', inStock: true, priceFrom: 89, priceTo: 159, count: 45, description: 'Premium mechanical keyboard with RGB lighting', howToUse: 'Connect via USB-C cable', productDetails: 'Cherry MX switches, RGB backlight, anti-ghosting' },
|
||||
{ id: 4, image: 'https://picsum.photos/seed/product4/400/400', name: 'USB-C Hub', code: 'UH-004', inStock: false, priceFrom: 39, priceTo: 59, count: 0, description: 'Multi-port USB-C hub for connectivity', howToUse: 'Connect to laptop USB-C port', productDetails: 'HDMI 4K, 3x USB-A, SD card reader, PD 100W' },
|
||||
{ id: 5, image: 'https://picsum.photos/seed/product5/400/400', name: 'Monitor 27 inch', code: 'MN-005', inStock: true, priceFrom: 299, priceTo: 449, count: 23, description: '27-inch 4K IPS monitor with HDR support', howToUse: 'Connect via HDMI or DisplayPort', productDetails: '3840x2160, 60Hz, HDR400, built-in speakers' },
|
||||
{ id: 6, image: 'https://picsum.photos/seed/product6/400/400', name: 'Webcam HD', code: 'WC-006', inStock: true, priceFrom: 59, priceTo: 89, count: 67, description: 'Full HD webcam for video conferencing', howToUse: 'Mount on monitor or use tripod stand', productDetails: '1080p 30fps, autofocus, noise-canceling mic' },
|
||||
{ id: 7, image: 'https://picsum.photos/seed/product7/400/400', name: 'Headphones Wireless', code: 'HW-007', inStock: true, priceFrom: 149, priceTo: 249, count: 89, description: 'Premium wireless headphones with ANC', howToUse: 'Pair via Bluetooth or use included cable', productDetails: '30-hour battery, ANC, 40mm drivers' },
|
||||
{ id: 8, image: 'https://picsum.photos/seed/product8/400/400', name: 'External SSD 1TB', code: 'ES-008', inStock: true, priceFrom: 109, priceTo: 149, count: 120, description: 'Portable external SSD with fast speeds', howToUse: 'Connect via USB-C cable', productDetails: '1TB, 1050MB/s read, compact design' },
|
||||
{ id: 9, image: 'https://picsum.photos/seed/product9/400/400', name: 'Desk Lamp LED', code: 'DL-009', inStock: false, priceFrom: 35, priceTo: 55, count: 0, description: 'Adjustable LED desk lamp with multiple brightness levels', howToUse: 'Plug in and touch controls', productDetails: '5 brightness levels, color temperature control, USB port' },
|
||||
{ id: 10, image: 'https://picsum.photos/seed/product10/400/400', name: 'Cable Organizer', code: 'CO-010', inStock: true, priceFrom: 15, priceTo: 25, count: 200, description: 'Desk cable management solution', howToUse: 'Stick to desk or use clamps', productDetails: '10 slots, adhesive backing,白色' },
|
||||
])
|
||||
|
||||
// Get product from route params
|
||||
const productId = computed(() => Number(route.params.id))
|
||||
const product = computed(() => products.value.find(p => p.id === productId.value))
|
||||
|
||||
// Active tab for the four buttons
|
||||
const activeTab = ref<'description' | 'howToUse' | 'productDetails' | 'documents'>('description')
|
||||
|
||||
// Mock variants (same structure as products but with variants)
|
||||
const variants = computed(() => {
|
||||
if (!product.value) return []
|
||||
// Create mock variants based on the product
|
||||
return [
|
||||
{ ...product.value, id: product.value.id * 10 + 1, name: `${product.value.name} - Standard`, priceFrom: product.value.priceFrom, priceTo: product.value.priceFrom + 50, count: product.value.count },
|
||||
{ ...product.value, id: product.value.id * 10 + 2, name: `${product.value.name} - Premium`, priceFrom: product.value.priceFrom + 100, priceTo: product.value.priceTo, count: Math.floor(product.value.count / 2) },
|
||||
{ ...product.value, id: product.value.id * 10 + 3, name: `${product.value.name} - Bundle`, priceFrom: product.value.priceTo + 50, priceTo: product.value.priceTo + 150, count: Math.floor(product.value.count / 3) },
|
||||
]
|
||||
})
|
||||
|
||||
// Pagination for variants table
|
||||
const page = ref(1)
|
||||
const pageSize = 5
|
||||
|
||||
const totalItems = computed(() => variants.value.length)
|
||||
|
||||
const paginatedVariants = computed(() => {
|
||||
const start = (page.value - 1) * pageSize
|
||||
const end = start + pageSize
|
||||
return variants.value.slice(start, end)
|
||||
})
|
||||
|
||||
// Table columns for variants
|
||||
const columns = computed<TableColumn<any>[]>(() => [
|
||||
{
|
||||
accessorKey: 'image',
|
||||
header: () => h('div', { class: 'text-center' }, t('products.image')),
|
||||
cell: ({ row }) => h('img', {
|
||||
src: row.getValue('image'),
|
||||
alt: 'Product',
|
||||
class: 'w-12 h-12 object-cover rounded'
|
||||
})
|
||||
},
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: t('products.product_name'),
|
||||
},
|
||||
{
|
||||
accessorKey: 'code',
|
||||
header: t('products.product_code'),
|
||||
},
|
||||
{
|
||||
accessorKey: 'inStock',
|
||||
header: t('products.in_stock'),
|
||||
cell: ({ row }) => {
|
||||
const inStock = row.getValue('inStock')
|
||||
return h('span', {
|
||||
class: inStock ? 'text-green-600 font-medium' : 'text-red-600 font-medium'
|
||||
}, inStock ? t('products.yes') : t('products.no'))
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'price',
|
||||
header: t('products.price'),
|
||||
cell: ({ row }) => {
|
||||
const priceFromVal = row.original.priceFrom
|
||||
const priceToVal = row.original.priceTo
|
||||
return `$${priceFromVal} - $${priceToVal}`
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'count',
|
||||
header: t('products.count'),
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: '',
|
||||
cell: ({ row }) => h('div', { class: 'flex gap-2' }, [
|
||||
h('button', {
|
||||
class: 'px-3 py-1.5 text-sm font-medium bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors',
|
||||
onClick: () => addToCart(row.original)
|
||||
}, t('products.add_to_cart')),
|
||||
h('button', {
|
||||
class: 'px-3 py-1.5 text-sm font-medium bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white rounded-lg hover:bg-(--gray) dark:hover:bg-gray-600 transition-colors',
|
||||
onClick: () => incrementCount(row.original)
|
||||
}, '+')
|
||||
])
|
||||
}
|
||||
])
|
||||
|
||||
// Actions
|
||||
function addToCart(product: Product) {
|
||||
console.log('Add to cart:', product)
|
||||
}
|
||||
|
||||
function incrementCount(product: Product) {
|
||||
product.count++
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push({ name: 'products' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="p-6 bg-(--main-light) dark:bg-(--black) min-h-screen font-sans">
|
||||
<!-- Back Button -->
|
||||
<button
|
||||
@click="goBack"
|
||||
class="mb-4 px-4 py-2 text-sm font-medium text-black dark:text-white bg-gray-200 dark:dark:hover:bg-(--gray-dark) rounded-lg hover:bg-(--gray) dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
← {{ t('products.back_to_list') }}
|
||||
</button>
|
||||
|
||||
<div v-if="!authStore.isAuthenticated" class="mb-4 p-3 bg-yellow-100 text-yellow-700 rounded">
|
||||
{{ t('products.login_to_view') }}
|
||||
</div>
|
||||
|
||||
<div v-if="authStore.isAuthenticated && product">
|
||||
<!-- Product Header: Image and Title -->
|
||||
<div class="flex flex-col md:flex-row gap-8 mb-6">
|
||||
<!-- Product Image -->
|
||||
<div class="w-full md:w-1/3">
|
||||
<img
|
||||
:src="product.image"
|
||||
:alt="product.name"
|
||||
class="w-full h-auto rounded-lg shadow-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Product Info -->
|
||||
<div class="w-full md:w-2/3 flex flex-col justify-center">
|
||||
<h1 class="text-3xl font-bold mb-4 text-black dark:text-white">{{ product.name }}</h1>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-4">{{ product.description }}</p>
|
||||
|
||||
<!-- Product Code -->
|
||||
<div class="mb-4">
|
||||
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('products.product_code') }}: </span>
|
||||
<span class="text-lg font-semibold text-black dark:text-white">{{ product.code }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Price -->
|
||||
<div class="mb-4">
|
||||
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('products.price') }}: </span>
|
||||
<span class="text-2xl font-bold text-primary">${{ product.priceFrom }} - ${{ product.priceTo }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Stock Status -->
|
||||
<div class="mb-4">
|
||||
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('products.in_stock') }}: </span>
|
||||
<span :class="product.inStock ? 'text-green-600 font-medium' : 'text-red-600 font-medium'">
|
||||
{{ product.inStock ? t('products.yes') : t('products.no') }}
|
||||
</span>
|
||||
<span v-if="product.inStock" class="ml-2 text-gray-500">({{ product.count }} {{ t('products.available') }})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- First Divider -->
|
||||
<hr class="border-gray-300 dark:border-gray-600 my-6" />
|
||||
|
||||
<!-- Four Buttons -->
|
||||
<div class="flex flex-wrap gap-2 mb-6">
|
||||
<button
|
||||
@click="activeTab = 'description'"
|
||||
:class="[
|
||||
'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
activeTab === 'description'
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
|
||||
]"
|
||||
>
|
||||
{{ t('products.description') }}
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'howToUse'"
|
||||
:class="[
|
||||
'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
activeTab === 'howToUse'
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
|
||||
]"
|
||||
>
|
||||
{{ t('products.how_to_use') }}
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'productDetails'"
|
||||
:class="[
|
||||
'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
activeTab === 'productDetails'
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
|
||||
]"
|
||||
>
|
||||
{{ t('products.product_details') }}
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'documents'"
|
||||
:class="[
|
||||
'px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
activeTab === 'documents'
|
||||
? 'bg-primary text-white'
|
||||
: 'bg-gray-200 dark:dark:hover:bg-(--gray-dark) text-black dark:text-white hover:bg-(--gray) dark:hover:bg-gray-600'
|
||||
]"
|
||||
>
|
||||
{{ t('products.documents') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div v-if="activeTab === 'description'" class="text-black dark:text-white">
|
||||
<h3 class="text-lg font-semibold mb-2">{{ t('products.description') }}</h3>
|
||||
<p>{{ product.description }}</p>
|
||||
</div>
|
||||
<div v-else-if="activeTab === 'howToUse'" class="text-black dark:text-white">
|
||||
<h3 class="text-lg font-semibold mb-2">{{ t('products.how_to_use') }}</h3>
|
||||
<p>{{ product.howToUse }}</p>
|
||||
</div>
|
||||
<div v-else-if="activeTab === 'productDetails'" class="text-black dark:text-white">
|
||||
<h3 class="text-lg font-semibold mb-2">{{ t('products.product_details') }}</h3>
|
||||
<p>{{ product.productDetails }}</p>
|
||||
</div>
|
||||
<div v-else-if="activeTab === 'documents'" class="text-black dark:text-white">
|
||||
<h3 class="text-lg font-semibold mb-2">{{ t('products.documents') }}</h3>
|
||||
<ul class="list-disc list-inside">
|
||||
<li><a href="#" class="text-primary hover:underline">User Manual.pdf</a></li>
|
||||
<li><a href="#" class="text-primary hover:underline">Technical Specifications.pdf</a></li>
|
||||
<li><a href="#" class="text-primary hover:underline">Warranty Information.pdf</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Divider -->
|
||||
<hr class="border-gray-300 dark:border-gray-600 my-6" />
|
||||
|
||||
<!-- Product Variants Section -->
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold mb-4 text-black dark:text-white">{{ t('products.product_variants') }}</h2>
|
||||
|
||||
<!-- Variants Table -->
|
||||
<div class="border border-(--border-light) dark:border-(--border-dark) rounded overflow-hidden">
|
||||
<UTable
|
||||
:data="paginatedVariants"
|
||||
:columns="columns"
|
||||
class="dark:text-white! text-dark"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pt-4 flex justify-center items-center dark:text-white! text-dark">
|
||||
<UPagination
|
||||
v-model:page="page"
|
||||
:page-count="pageSize"
|
||||
:total="totalItems"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="authStore.isAuthenticated && !product" class="text-center py-10">
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ t('products.product_not_found') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user