feat: new price count

src/entities/product/index.ts

@@ -1,3 +1,3 @@
-export { ProductCard, ProductImage } from './ui'
+export { ProductCard, ProductImage, ProductPrice } from './ui'
 
 export * as productModel from './model'

src/entities/product/model/use-product-price.ts

@@ -1,65 +1,69 @@
-import { watchOnce } from '@vueuse/shared'
+import { useStorage } from '@vueuse/core'
 import type { CrmVariant } from '~/src/shared/model'
+import { useCRMGetCart } from '~/src/shared/api/crm/crm'
 
-export function useProductPrice() {
+export function useProductPrice(variants: CrmVariant[], id: string) {
   const amount = ref(0)
   const currentUnitPrice = ref(0)
   const prevUnitPrice = ref()
-  const variants = ref<CrmVariant[]>([])
+  const { mutateAsync, data } = useCRMGetCart()
+
+  const addedItems = useStorage<{
+    id: string
+    count: number
+  }[]>('added-items', [])
 
   const currentPriceForAll = computed(() => currentUnitPrice.value * amount.value)
 
   const prevUnitPriceForAll = computed(() => prevUnitPrice.value * amount.value)
 
-  watch(amount, () => {
-    updatePrices()
-  })
-
-  watchOnce(variants, () => {
-    updatePrices()
-  })
-
-  function updatePrices() {
-    if (!variants.value.length) {
-      return
-    }
-
-    for (let i = 0; i < variants.value.length; i++) {
-      const variant = variants.value[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(variants.value[i - 1].price) / 100
-        }
-        else {
-          prevUnitPrice.value = undefined
-        }
-
-        return
-      }
-    }
+  const setInitCurrentPrice = () => {
+    currentUnitPrice.value = Number(variants[0].price) / 100
   }
 
+  watch(amount, async (value, oldValue) => {
+    await mutateAsync({
+      data: [
+        {
+          count: String(value),
+          productId: id,
+        },
+      ],
+    })
+
+    const newCurrent = Number(data.value?.data.amount) / 100 || 0
+    const newPrev = Number(data.value?.data.amountOld) / 100 || 0
+
+    currentUnitPrice.value = newCurrent
+
+    if (newCurrent !== newPrev) {
+      prevUnitPrice.value = newPrev
+    }
+    else {
+      prevUnitPrice.value = undefined
+    }
+
+    if (oldValue === 0 && value > 0) {
+      addedItems.value.push({
+        id,
+        count: value,
+      })
+    }
+
+    if (oldValue > 0 && value === 0) {
+      addedItems.value = addedItems.value.filter(item => item.id !== id)
+
+      setInitCurrentPrice()
+    }
+  })
+
+  setInitCurrentPrice()
+
   return {
     amount,
     currentUnitPrice,
     prevUnitPrice,
     currentPriceForAll,
     prevUnitPriceForAll,
-    variants,
   }
 }

src/entities/product/ui/ProductCard.vue

@@ -8,11 +8,7 @@ const props = defineProps<{
   product: CrmProduct
 }>()
 
-const { amount, currentUnitPrice, prevUnitPriceForAll, prevUnitPrice, variants } = useProductPrice()
-
-if (props.product.variants) {
-  variants.value = props.product.variants
-}
+const { amount, currentUnitPrice, prevUnitPriceForAll, prevUnitPrice } = useProductPrice(props.product.variants || [], props.product.id!)
 
 function onImageClick() {
   navigateTo(
@@ -33,7 +29,7 @@ function onImageClick() {
       <div>{{ product.name }}</div>
       <div class="flex items-center gap-3">
         <div class="text-2xl font-bold" :class="{ 'text-pink-800': prevUnitPrice }">
-          {{ currentUnitPrice * (amount || 1) }} ₽
+          {{ currentUnitPrice }} ₽
         </div>
         <div v-if="prevUnitPrice" class="line-through text-slate-400">
           {{ prevUnitPriceForAll }} ₽

src/entities/product/ui/ProductPrice.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useProductPrice } from '../model'
+import { InputNumber } from '~/src/shared/ui'
+import type { CrmVariant } from '~/src/shared/model'
+
+const props = defineProps<{
+  variants: CrmVariant[]
+  productId: string
+}>()
+
+const { amount, currentUnitPrice, prevUnitPrice, prevUnitPriceForAll } = useProductPrice(props.variants, props.productId)
+</script>
+
+<template>
+  <div class="bg-gray-50 rounded-2xl border border-slate-200 flex gap-5 justify-between p-5 items-center">
+    <div class="flex flex-col gap-1 flex-1">
+      <div class="text-2xl font-bold" :class="{ 'text-pink-800': prevUnitPrice }">
+        {{ currentUnitPrice }} ₽
+      </div>
+      <div v-if="prevUnitPrice" class="line-through text-slate-400">
+        {{ prevUnitPriceForAll }} ₽
+      </div>
+    </div>
+    <div class="flex-1">
+      <UButton v-if="!amount" class="w-full justify-center" size="xl" @click="amount = 1">
+        В корзину
+      </UButton>
+      <InputNumber v-else v-model="amount" />
+    </div>
+  </div>
+</template>

src/entities/product/ui/index.ts

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

src/pages/product/ui/ProductPage.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
-import { watchOnce } from '@vueuse/shared'
-import { ProductImage, productModel } from '~/src/entities/product'
+import { ProductImage, ProductPrice } from '~/src/entities/product'
 import { useCRMGetProduct } from '~/src/shared/api/crm/crm'
 import { Header } from '~/src/widgets/header'
-import { InputNumber, StandardLayout } from '~/src/shared/ui'
+import { StandardLayout } from '~/src/shared/ui'
 import { Footer } from '~/src/widgets/footer'
 
 const route = useRoute()
 
 const { data } = useCRMGetProduct(route.params.id as string)
-
-const { amount, currentUnitPrice, prevUnitPrice, prevUnitPriceForAll, variants } = productModel.useProductPrice()
-
-watchOnce(() => data.value?.data.product?.variants, (value) => {
-  if (value) {
-    variants.value = value
-  }
-})
 </script>
 
 <template>
@@ -38,22 +29,11 @@ watchOnce(() => data.value?.data.product?.variants, (value) => {
           </div>
         </div>
 
-        <div v-if="data?.data.product" class="bg-gray-50 rounded-2xl border border-slate-200 flex gap-5 justify-between p-5 items-center">
-          <div class="flex flex-col gap-1 flex-1">
-            <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">
-              {{ prevUnitPriceForAll }} ₽
-            </div>
-          </div>
-          <div class="flex-1">
-            <UButton v-if="!amount" class="w-full justify-center" size="xl" @click="amount = 1">
-              В корзину
-            </UButton>
-            <InputNumber v-else v-model="amount" />
-          </div>
-        </div>
+        <ProductPrice
+          v-if="data?.data.product?.id && data.data.product.variants"
+          :product-id="data.data.product.id"
+          :variants="data.data.product.variants"
+        />
       </div>
     </div>
     <template #footer>