feat: add server data for catalog

orval.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
       target: 'src/shared/api',
       schemas: 'src/shared/model',
       client: 'vue-query',
+      baseUrl: 'https://cake-crm.3crabs.ru',
       // mock: true,
     },
     input: './cakes.json',

src/entities/product/ui/ProductCard.vue

@@ -1,37 +1,85 @@
 <script setup lang="ts">
 import { InputNumber } from '~/src/shared/ui'
+import type { CrmProduct } from '~/src/shared/model'
 
-defineProps<{
+const props = defineProps<{
-  badges?: string[]
+  product: CrmProduct
 }>()
 
 const amount = ref(0)
+const currentUnitPrice = ref(0)
+const prevUnitPrice = ref()
+
+function updatePrices() {
+  if (!props.product.variants?.length) {
+    return
+  }
+
+  for (let i = 0; i < props.product.variants.length; i++) {
+    const variant = props.product.variants[i]
+
+    let max = Number.POSITIVE_INFINITY
+    let min = 0
+
+    variant.properties?.forEach((property) => {
+      if (property.name === 'min') {
+        min = Number(property.value)
+      }
+
+      if (property.name === 'max')
+        max = Number(property.value)
+    })
+
+    if (amount.value >= min && amount.value <= max) {
+      currentUnitPrice.value = Number(variant.price) / 100
+
+      if (i !== 0) {
+        prevUnitPrice.value = Number(props.product.variants[i - 1].price) / 100
+      }
+      else {
+        prevUnitPrice.value = undefined
+      }
+
+      return
+    }
+  }
+}
+
+updatePrices()
 </script>
 
 <template>
   <div class="w-64 flex flex-col border-1 rounded-[20px]">
-    <div class="p-3 h-64 bg-[#E9E9E9] flex flex-col justify-between rounded-t-[20px]">
+    <div class="h-64 relative flex flex-col justify-between rounded-t-[20px]">
-      <div class="flex gap-1">
+      <img alt="product_img" :src="`https://cake-crm.3crabs.ru${product.images?.[0]}`" class="rounded-t-[20px]">
-        <UBadge v-for="badge in badges" :key="badge" :ui="{ rounded: 'rounded-full' }" size="md">
+
-          {{ badge }}
+      <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">
+      <div class="flex justify-end text-slate-500 text-sm absolute bottom-3 right-3">
-        155 rub
+        {{ currentUnitPrice }} ₽ / {{ product.unit }}
       </div>
     </div>
 
     <div class="flex flex-col gap-3 p-5">
-      <div>Name</div>
+      <div>{{ product.name }}</div>
-      <div class="text-2xl font-bold">
+      <div class="flex items-center gap-3">
-        Price
+        <div class="text-2xl font-bold" :class="{ 'text-pink-800': prevUnitPrice }">
+          {{ currentUnitPrice * (amount || 1) }} ₽
         </div>
+        <div v-if="prevUnitPrice" class="line-through text-slate-400">
+          {{ prevUnitPrice * amount }} ₽
+        </div>
+      </div>
+
       <div class="w-full">
         <UButton v-if="!amount" class="w-full justify-center" size="xl" @click="amount = 1">
-          Buy
+          В корзину
         </UButton>
-        <InputNumber v-else v-model="amount" />
+        <InputNumber v-else v-model="amount" @update:model-value="updatePrices" />
       </div>
     </div>
   </div>

src/pages/catalog/ui/CatalogPage.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ProductCard } from '~/src/entities/product'
+import { useCRMGetPositions } from '~/src/shared/api/crm/crm'
+
+const { data: positions } = useCRMGetPositions('0')
 </script>
 
 <template>
   <div class="flex flex-col gap-8 pt-39 pr-31 pl-12 pb-34">
     <div class="grid grid-cols-4 gap-4">
-      <ProductCard v-for="i in 10" :key="i" class="basis-1/4" />
+      <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
     </div>
-    <UPagination size="xl" :model-value="1" :page-count="10" :total="30" :max="5" />
   </div>
 </template>

src/shared/api/crm/crm.ts

@@ -51,7 +51,7 @@ export const cRMGetCart = (
  ): Promise<AxiosResponse<CrmCartRsp>> => {
     crmOrderItem = unref(crmOrderItem);
     return axios.post(
-      `/cart`,
+      `https://cake-crm.3crabs.ru/cart`,
       crmOrderItem,options
     );
   }
@@ -99,13 +99,13 @@ const {mutation: mutationOptions, axios: axiosOptions} = options ?? {};
  ): Promise<AxiosResponse<CrmCatalogRsp>> => {
     
     return axios.get(
-      `/catalog`,options
+      `https://cake-crm.3crabs.ru/catalog`,options
     );
   }
 
 
 export const getCRMGetCatalogQueryKey = () => {
-    return ['catalog'] as const;
+    return ['https:','cake-crm.3crabs.ru','catalog'] as const;
     }
 
     
@@ -151,13 +151,13 @@ export const cRMGetImage = (
  ): Promise<AxiosResponse<ApiHttpBody>> => {
     name = unref(name);
     return axios.get(
-      `/images/${name}`,options
+      `https://cake-crm.3crabs.ru/images/${name}`,options
     );
   }
 
 
 export const getCRMGetImageQueryKey = (name: MaybeRef<string>,) => {
-    return ['images',name] as const;
+    return ['https:','cake-crm.3crabs.ru','images',name] as const;
     }
 
     
@@ -203,7 +203,7 @@ export const cRMOrder = (
  ): Promise<AxiosResponse<CrmOrderRsp>> => {
     crabscrmOrder = unref(crabscrmOrder);
     return axios.post(
-      `/orders`,
+      `https://cake-crm.3crabs.ru/orders`,
       crabscrmOrder,options
     );
   }
@@ -251,13 +251,13 @@ const {mutation: mutationOptions, axios: axiosOptions} = options ?? {};
  ): Promise<AxiosResponse<CrmPositionsRsp>> => {
     id = unref(id);
     return axios.get(
-      `/positions/${id}`,options
+      `https://cake-crm.3crabs.ru/positions/${id}`,options
     );
   }
 
 
 export const getCRMGetPositionsQueryKey = (id: MaybeRef<string>,) => {
-    return ['positions',id] as const;
+    return ['https:','cake-crm.3crabs.ru','positions',id] as const;
     }
 
     
@@ -303,13 +303,13 @@ export const cRMGetProduct = (
  ): Promise<AxiosResponse<CrmProductRsp>> => {
     id = unref(id);
     return axios.get(
-      `/products/${id}`,options
+      `https://cake-crm.3crabs.ru/products/${id}`,options
     );
   }
 
 
 export const getCRMGetProductQueryKey = (id: MaybeRef<string>,) => {
-    return ['products',id] as const;
+    return ['https:','cake-crm.3crabs.ru','products',id] as const;
     }
 
     
@@ -355,13 +355,13 @@ export const cRMGetBreadcrumbs = (
  ): Promise<AxiosResponse<CrmBreadcrumbsRsp>> => {
     id = unref(id);
     return axios.get(
-      `/products/${id}/breadcrumbs`,options
+      `https://cake-crm.3crabs.ru/products/${id}/breadcrumbs`,options
     );
   }
 
 
 export const getCRMGetBreadcrumbsQueryKey = (id: MaybeRef<string>,) => {
-    return ['products',id,'breadcrumbs'] as const;
+    return ['https:','cake-crm.3crabs.ru','products',id,'breadcrumbs'] as const;
     }
 
     
@@ -407,7 +407,7 @@ export const cRMSearch = (
  ): Promise<AxiosResponse<CrmPositionsRsp>> => {
     params = unref(params);
     return axios.get(
-      `/search`,{
+      `https://cake-crm.3crabs.ru/search`,{
     ...options,
         params: {...unref(params), ...options?.params},}
     );
@@ -415,7 +415,7 @@ export const cRMSearch = (
 
 
 export const getCRMSearchQueryKey = (params?: MaybeRef<CRMSearchParams>,) => {
-    return ['search', ...(params ? [params]: [])] as const;
+    return ['https:','cake-crm.3crabs.ru','search', ...(params ? [params]: [])] as const;
     }