67 lines
2.8 KiB
Vue
67 lines
2.8 KiB
Vue
<!--
|
|
Ported from legacy henza_pwa/src/components/product/productVerticalFull.vue.
|
|
See useProduct.ts for the honest gaps vs. legacy.
|
|
-->
|
|
<template>
|
|
<div @click="openDrawer" class="block w-full rounded-[10px] p-[8px] bg-light cursor-pointer relative mb-4" v-bind="$attrs">
|
|
<img v-lazy="image" class="w-[277px] h-[277px] m-auto" />
|
|
<span
|
|
class="absolute top-[15.5px] right-[14px] text-danger text-[12px] px-[8px] py-[4px] rounded-[5px] border-[1px] border-danger"
|
|
v-if="hasDiscountWage"
|
|
>تخفیف</span
|
|
>
|
|
<div class="bg-white rounded-[5px] p-[16px] mt-[8px] relative">
|
|
<div class="flex w-full gap-4">
|
|
<h5 class="font-bold text-[17px] text-black mb-[16px] flex-1 truncate">{{ title }}</h5>
|
|
|
|
<Icon
|
|
v-if="favorites.isFavorite(id)"
|
|
icon="vuesax-linear:heart-fill"
|
|
class="cursor-pointer text-secondary"
|
|
@click.stop="favorites.toggle(id)"
|
|
size="25"
|
|
/>
|
|
<Icon v-else icon="vuesax-linear:heart" class="cursor-pointer text-secondary" @click.stop="favorites.toggle(id)" size="25" />
|
|
</div>
|
|
<div class="flex">
|
|
<div class="font-bold text-[15px] pl-2 text-secondary border-solid border-grey" :class="showDiscountWage ? 'border-l' : ''">{{ min_gram }} گرم</div>
|
|
<span
|
|
v-if="showDiscountWage"
|
|
:class="{ 'font-bold text-[15px] text-secondary mr-2 text-align-start': true, 'line-through decoration-inherit ml-4': hasDiscountWage }"
|
|
>{{ wage?.toFixed(2) }}% اجرت</span
|
|
>
|
|
</div>
|
|
<div v-if="has_warranty" class="flex mt-2">
|
|
<Icon icon="vuesax-linear:shield_dollar" color="#B49474" />
|
|
<div class="self-center text-[#B49474] text-xl mr-2">تضمین بهترین قیمت</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Drawer v-model:visible="visible" placement="bottom" :closable="false" class="rtl" height="100vh" :bodyStyle="{ padding: 0, position: 'relative' }">
|
|
<SingleProduct :id="id" @closeDrawer="visible = false" />
|
|
</Drawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { Drawer } from 'ant-design-vue'
|
|
import Icon from '../icon/Icon.vue'
|
|
import SingleProduct from './SingleProduct.vue'
|
|
import { useProduct } from '../../composables/useProduct'
|
|
import { useFavoritesStore } from '../../stores/favoritesStore'
|
|
import { isUserLoggedIn } from '../../utils/checkAccess'
|
|
import type { ProductSummary } from '../../api/client'
|
|
|
|
const props = withDefaults(defineProps<{ value: ProductSummary }>(), {})
|
|
const favorites = useFavoritesStore()
|
|
|
|
const { image, id, title, min_gram, wage, hasDiscountWage, has_warranty } = useProduct(props.value)
|
|
|
|
const visible = ref(false)
|
|
const openDrawer = () => {
|
|
visible.value = true
|
|
}
|
|
const showDiscountWage = computed(() => false && hasDiscountWage.value && isUserLoggedIn())
|
|
</script>
|