feat: add product page

pages/products/[id].vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ProductPage } from '~/src/pages/product'
+</script>
+
+<template>
+  <ProductPage />
+</template>

src/entities/product/index.ts

@@ -1 +1 @@
-export { ProductCard } from './ui'
+export { ProductCard, ProductImage } from './ui'

src/entities/product/ui/ProductCard.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ProductImage from './ProductImage.vue'
 import { InputNumber } from '~/src/shared/ui'
 import type { CrmProduct } from '~/src/shared/model'
 
@@ -10,6 +11,12 @@ const amount = ref(0)
 const currentUnitPrice = ref(0)
 const prevUnitPrice = ref()
 
+function onImageClick() {
+  navigateTo(
+    `/products/${props.product.id}`,
+  )
+}
+
 function updatePrices() {
   if (!props.product.variants?.length) {
     return
@@ -51,17 +58,9 @@ updatePrices()
 <template>
   <div class="w-64 flex flex-col border-1 rounded-[20px]">
     <div class="h-64 relative flex flex-col justify-between rounded-t-[20px]">
-      <img alt="product_img" :src="`https://cake-crm.3crabs.ru${product.images?.[0]}`" class="rounded-t-[20px]">
+      <ProductImage :path="product.images?.[0]" :labels="product.labels" class="rounded-t-[20px] cursor-pointer" @click="onImageClick">
-
-      <div class="flex gap-1 absolute top-3 left-3">
-        <UBadge v-for="(label, index) in product.labels" :key="index" :ui="{ rounded: 'rounded-full' }" size="md">
-          {{ label.name }}
-        </UBadge>
-      </div>
-
-      <div class="flex justify-end text-slate-500 text-sm absolute bottom-3 right-3">
         {{ currentUnitPrice }} ₽ / {{ product.unit }}
-      </div>
+      </ProductImage>
     </div>
 
     <div class="flex flex-col gap-3 p-5">

src/entities/product/ui/ProductImage.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { CrabscrmLabel } from '~/src/shared/model'
+
+defineProps<{
+  path?: string
+  labels?: CrabscrmLabel[]
+}>()
+</script>
+
+<template>
+  <div class="relative flex flex-col justify-between overflow-hidden">
+    <img alt="product_img" :src="`https://cake-crm.3crabs.ru${path}`">
+
+    <div class="flex gap-1 absolute top-3 left-3">
+      <UBadge v-for="(label, index) in labels" :key="index" :ui="{ rounded: 'rounded-full' }" size="md">
+        {{ label.name }}
+      </UBadge>
+    </div>
+
+    <div class="flex justify-end text-slate-500 text-sm absolute bottom-3 right-3">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/entities/product/ui/index.ts

@@ -1 +1,2 @@
 export { default as ProductCard } from './ProductCard.vue'
+export { default as ProductImage } from './ProductImage.vue'

src/pages/product/index.ts

@@ -0,0 +1 @@
+export { ProductPage } from './ui'

src/pages/product/ui/ProductPage.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ProductImage } from '~/src/entities/product'
+import { useCRMGetProduct } from '~/src/shared/api/crm/crm'
+
+const route = useRoute()
+
+const { data } = useCRMGetProduct(route.params.id as string)
+</script>
+
+<template>
+  <div class="flex gap-12">
+    <ProductImage :path="data?.data.product?.images?.[0]" class="w-128 h-128 rounded-[20px]" :labels="data?.data.product?.labels" />
+    <div class="flex flex-col gap-6">
+      <div class="font-bold text-4xl">
+        {{ data?.data.product?.name }}
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div>Надо заполнить на бэке - тяжело тестить</div>
+      </div>
+    </div>
+  </div>
+</template>

src/pages/product/ui/index.ts

@@ -0,0 +1 @@
+export { default as ProductPage } from './ProductPage.vue'