marzban-dev
80 lines
2.9 KiB
Vue
80 lines
2.9 KiB
Vue
<script lang="ts" setup>
|
|
// types
|
|
|
|
type Props = {
|
|
isSelected: boolean;
|
|
variantDetail: ProductVariant;
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="[
|
|
isSelected ? 'border-blue-500' : 'border-slate-300',
|
|
variantDetail.in_stock > 0 ? 'cursor-pointer' : '!border-slate-100',
|
|
]"
|
|
class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4"
|
|
>
|
|
<div>
|
|
<div
|
|
:class="[
|
|
isSelected
|
|
? 'ring-blue-500 bg-blue-500'
|
|
: 'ring-slate-300 bg-slate-300',
|
|
variantDetail.in_stock > 0
|
|
? ''
|
|
: '!ring-slate-100 !bg-slate-300-100',
|
|
]"
|
|
class="size-3 mt-2 ring-2 ring-offset-2 rounded-full"
|
|
></div>
|
|
</div>
|
|
<div class="w-full">
|
|
<div class="w-full flex justify-between items-center gap-2">
|
|
<span class="text-md sm:text-xl font-medium">
|
|
{{ variantDetail.price }}
|
|
</span>
|
|
<div
|
|
v-if="variantDetail.discount > 0"
|
|
:class="
|
|
variantDetail.in_stock > 0
|
|
? 'bg-blue-500'
|
|
: 'bg-slate-400/60'
|
|
"
|
|
class="text-white mb-1 px-3 py-1 text-xs rounded-full w-fit flex items-center justify-center gap-1"
|
|
>
|
|
<template v-if="variantDetail.in_stock > 0">
|
|
<Icon name="bi:percent" class="size-3.5" />
|
|
<span class="mt-px">
|
|
{{ variantDetail.discount }}
|
|
</span>
|
|
</template>
|
|
|
|
<span v-else class="mt-px"> اتمام موجودی </span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-full flex items-center flex-wrap gap-3 max-w-[400px] mt-4"
|
|
>
|
|
<!-- <div-->
|
|
<!-- class="flex items-center gap-2 text-sm rounded-full border border-slate-400 px-4 h-[40px]"-->
|
|
<!-- >-->
|
|
<!-- <span>رنگ</span>-->
|
|
<!-- <ColorCircle class="size-[22px]" :style="{backgroundColor:variantDetail.color}" />-->
|
|
<!-- </div>-->
|
|
|
|
<div
|
|
v-for="attribute in variantDetail.product_attributes"
|
|
class="flex items-center gap-2 text-xs sm:text-sm rounded-full border border-slate-400 px-3 sm:px-4 h-[35px] sm:h-[40px]"
|
|
>
|
|
<span>{{ attribute.attribute_type.name }}</span>
|
|
<span>{{ attribute.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|