Compare commits

..

No commits in common. "085253d77d5ce5ffc14664fbea59a0ea6810f3df" and "3e6fe8dada9ff42efe4daa6000c2427c135d0541" have entirely different histories.

15 changed files with 57 additions and 179 deletions

View File

@ -8,8 +8,5 @@ export default defineNuxtConfig({
},
},
modules: ['@nuxt/ui', '@unocss/nuxt', '@nuxt/eslint'],
colorMode: {
preference: 'light',
},
compatibilityDate: '2024-07-30',
})

View File

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

View File

@ -1,13 +0,0 @@
<script setup lang="ts">
navigateTo({
path: '/catalog',
})
</script>
<template>
<div />
</template>
<style scoped>
</style>

View File

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

View File

@ -1 +0,0 @@
export { useProductPrice } from './use-product-price'

View File

@ -1,75 +0,0 @@
import { useStorage } from '@vueuse/core'
import type { CrmVariant } from '~/src/shared/model'
import { useCRMGetCart } from '~/src/shared/api/crm/crm'
export function useProductPrice(variants: CrmVariant[], id: string) {
const amount = ref(0)
const currentUnitPrice = ref(0)
const prevUnitPrice = ref()
const { mutateAsync, data } = useCRMGetCart()
const addedItems = useStorage<{
id: string
count: number
}[]>('added-items', [])
const storageProduct = computed(() => addedItems.value.find(item => item.id === id))
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 (value === 0) {
addedItems.value = addedItems.value.filter(item => item.id !== id)
setInitCurrentPrice()
return
}
if (storageProduct.value) {
storageProduct.value.count = value
return
}
addedItems.value.push({
id,
count: value,
})
})
if (storageProduct.value) {
amount.value = storageProduct.value.count
}
else {
setInitCurrentPrice()
}
return {
amount,
currentUnitPrice,
prevUnitPrice,
}
}

View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { useProductPrice } from '../model'
import ProductImage from './ProductImage.vue'
import { InputNumber } from '~/src/shared/ui'
import type { CrmProduct } from '~/src/shared/model'
@ -8,13 +7,52 @@ const props = defineProps<{
product: CrmProduct
}>()
const { amount, currentUnitPrice, prevUnitPrice } = useProductPrice(props.product.variants || [], props.product.id!)
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
}
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>
@ -29,10 +67,10 @@ 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 }}
{{ currentUnitPrice * (amount || 1) }}
</div>
<div v-if="prevUnitPrice" class="line-through text-slate-400">
{{ prevUnitPrice }}
{{ prevUnitPrice * amount }}
</div>
</div>
@ -40,7 +78,7 @@ function onImageClick() {
<UButton v-if="!amount" class="w-full justify-center" size="xl" @click="amount = 1">
В корзину
</UButton>
<InputNumber v-else v-model="amount" />
<InputNumber v-else v-model="amount" @update:model-value="updatePrices" />
</div>
</div>
</div>

View File

@ -9,7 +9,7 @@ defineProps<{
<template>
<div class="relative flex flex-col justify-between overflow-hidden">
<img class="w-full h-full" alt="product_img" :src="`https://cake-api.3crabs.ru${path}`">
<img alt="product_img" :src="`https://cake-api.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">

View File

@ -1,31 +0,0 @@
<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 } = 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">
{{ prevUnitPrice }}
</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>

View File

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

View File

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

View File

@ -1,28 +0,0 @@
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
const addedItems = useStorage<{
id: string
count: number
}[]>('added-items', [])
const addedItemsAmount = computed(() => addedItems.value.length)
</script>
<template>
<UButton
variant="soft"
size="xl"
class="border text-black border-pink-500"
icon="heroicons-shopping-cart"
:trailing-icon="addedItemsAmount ? 'badge' : undefined"
>
Корзина
<template #trailing>
<UBadge
v-if="addedItemsAmount"
size="xs" :label="addedItemsAmount"
/>
</template>
</UButton>
</template>

View File

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

View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ProductImage, ProductPrice } from '~/src/entities/product'
import { ProductImage } from '~/src/entities/product'
import { useCRMGetProduct } from '~/src/shared/api/crm/crm'
import { Header } from '~/src/widgets/header'
import { StandardLayout } from '~/src/shared/ui'
@ -16,24 +16,15 @@ const { data } = useCRMGetProduct(route.params.id as string)
<Header />
</template>
<div class="flex gap-12">
<ProductImage :path="data?.data.product?.images?.[0]" class="w-125 h-125 rounded-[20px]" :labels="data?.data.product?.labels" />
<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 v-for="characteristic in data?.data.product?.characteristics" :key="characteristic.name" class="flex gap-2 items-end">
<span class="font-bold">{{ characteristic.name }}:</span>
<span class="text-sm font-medium">{{ characteristic.value }}</span>
</div>
<div>Надо заполнить на бэке - тяжело тестить</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>

View File

@ -1,6 +1,4 @@
<script setup lang="ts">
import { CartButton } from '~/src/features/cart'
function goToCatalogPage() {
navigateTo({
path: '/catalog',
@ -19,7 +17,14 @@ function goToCatalogPage() {
Каталог
</UButton>
<UInputMenu placeholder="Поиск по каталогу" size="xl" class="w-full" leading-icon="heroicons-magnifying-glass" />
<CartButton />
<UButton variant="soft" size="xl" class="border text-black border-pink-500" icon="heroicons-shopping-cart" trailing-icon="badge">
Корзина
<template #trailing>
<UBadge
size="xs" label="2"
/>
</template>
</UButton>
</div>
</div>
</template>