marzban-dev
68 lines
2.7 KiB
Vue
68 lines
2.7 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'"
|
|
class="transition-all min-w-[350px] w-full duration-100 p-4 rounded-150 border-[2px] flex gap-4 cursor-pointer"
|
|
>
|
|
<div>
|
|
<div
|
|
:class="isSelected ? 'ring-blue-500 bg-blue-500' : 'ring-slate-300 bg-slate-300'"
|
|
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!.discount > 0 ? variantDetail!.price_after_discount : variantDetail!.price }}
|
|
</span>
|
|
<div
|
|
v-if="variantDetail.in_stock > 0 && variantDetail.discount > 0"
|
|
class="text-white mb-1 px-3 py-1 bg-blue-500 text-xs rounded-full w-fit flex items-center justify-center gap-1"
|
|
>
|
|
<Icon
|
|
name="ci:bi-percent"
|
|
class="size-3.5"
|
|
/>
|
|
<span class="mt-px">
|
|
{{ variantDetail.discount }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="variantDetail.in_stock === 0"
|
|
class="text-slate-700 mb-1 px-3 py-1 bg-slate-200 text-xs rounded-full w-fit flex items-center justify-center gap-1"
|
|
>
|
|
اتمام موجودی
|
|
</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>
|