fix: product description
This commit is contained in:
@@ -1,304 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useProductStore, type Product } from '@/stores/product'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import type { TableColumn } from '@nuxt/ui'
|
||||
import { h } from 'vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const productStore = useProductStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
// Get product from route params
|
||||
const productId = computed(() => Number(route.params.id))
|
||||
const product = computed(() => productStore.currentProduct)
|
||||
|
||||
// Fetch product on mount
|
||||
onMounted(() => {
|
||||
if (productId.value) {
|
||||
productStore.fetchProductById(productId.value)
|
||||
}
|
||||
})
|
||||
|
||||
// Clear product when leaving
|
||||
onUnmounted(() => {
|
||||
productStore.clearCurrentProduct()
|
||||
})
|
||||
|
||||
// Active tab for the four buttons
|
||||
const activeTab = ref<'description' | 'howToUse' | 'productDetails' | 'documents'>('description')
|
||||
|
||||
// Mock variants (in real app, this would come from API)
|
||||
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:bg-gray-700 text-black dark:text-white rounded-lg hover:bg-gray-300 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-white 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:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
← {{ t('products.back_to_list') }}
|
||||
</button>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="productStore.loading" class="mb-4 p-3 bg-blue-100 text-blue-700 rounded">
|
||||
{{ t('products.loading') }}...
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-if="productStore.error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
|
||||
{{ productStore.error }}
|
||||
</div>
|
||||
|
||||
<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 && !productStore.loading">
|
||||
<!-- 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:bg-gray-700 text-black dark:text-white hover:bg-gray-300 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:bg-gray-700 text-black dark:text-white hover:bg-gray-300 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:bg-gray-700 text-black dark:text-white hover:bg-gray-300 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:bg-gray-700 text-black dark:text-white hover:bg-gray-300 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 && !productStore.loading && !productStore.error" class="text-center py-10">
|
||||
<p class="text-gray-500 dark:text-gray-400">{{ t('products.product_not_found') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container my-10">
|
||||
<div id="textDescriptionRef" ref="textDescriptionRef" v-html="productStore.productDescription.description"></div>
|
||||
<button @click="create">create</button>
|
||||
<button @click="save">Save</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useProductStore } from '@/stores/product'
|
||||
|
||||
|
||||
const productStore = useProductStore()
|
||||
const textDescriptionRef = ref<HTMLElement | null>(null)
|
||||
|
||||
await productStore.getProductDescription()
|
||||
|
||||
const save = () => {
|
||||
const myDiv = document.getElementById("textDescriptionRef");
|
||||
Array.from(myDiv.children).forEach(item => {
|
||||
item.setAttribute('contenteditable', 'false')
|
||||
})
|
||||
}
|
||||
|
||||
const create = () => {
|
||||
const myDiv = document.getElementById("textDescriptionRef");
|
||||
Array.from(myDiv.children).forEach(item => {
|
||||
item.setAttribute('contenteditable', 'true')
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.images {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 70px;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user