mohadese namavar
101 lines
2.9 KiB
Vue
101 lines
2.9 KiB
Vue
<template>
|
|
<div class="order-item">
|
|
<div>
|
|
<ul>
|
|
<li v-for="(value, key) in items" :key="key">
|
|
<label>{{ $t(key) }}:</label>
|
|
<span>{{ value }}</span>
|
|
</li>
|
|
</ul>
|
|
<router-link :to="`/panel/factors?id=${id}`">
|
|
<Button :label="$t('showFactor')" size="small" />
|
|
</router-link>
|
|
</div>
|
|
<Swiper :slides-per-view="'auto'" :space-between="16">
|
|
<SwiperSlide v-for="(item, i) in products" :key="i">
|
|
<ProductCard :data="item.product" type="minimal" />
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps(['data'])
|
|
const { _id: id, totalAmount, status, orderDate, products } = props.data
|
|
|
|
const numberFormat = (number) =>
|
|
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
|
|
|
|
const { t } = useI18n()
|
|
const items = reactive({
|
|
documentNumber: id,
|
|
amount: numberFormat(totalAmount) + ' ' + t('priceUnit'),
|
|
orderStatus: t('orderStatuses.' + status.toLowerCase()),
|
|
orderDate: new Date(orderDate).toLocaleString('fa-IR')
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.order-item {
|
|
@apply w-[21.4rem] h-[29.1rem] lg:w-full lg:h-[19.3rem] overflow-hidden;
|
|
@apply flex flex-col-reverse lg:flex-row bg-white border-2 border-[#E5E5E5];
|
|
@apply rounded-[0.6rem] max-lg:rounded-t-xl;
|
|
|
|
&>div:first-of-type {
|
|
@apply w-full h-[15.1rem] lg:w-[29.6rem] lg:h-full max-lg:border-t-2 border-[#E5E5E5];
|
|
@apply flex flex-col justify-between whitespace-nowrap;
|
|
@apply gap-[1.9rem] p-6 lg:gap-10 lg:p-8;
|
|
|
|
ul {
|
|
@apply flex flex-col gap-4;
|
|
|
|
li {
|
|
@apply flex gap-3 items-center font-vazir text-xs lg:text-lg;
|
|
|
|
label {
|
|
@apply text-zinc-500;
|
|
}
|
|
|
|
span {
|
|
@apply text-zinc-800 font-medium;
|
|
}
|
|
|
|
&:last-child span {
|
|
@apply ltr;
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply w-full h-10 lg:w-[9.3rem] rounded-lg #{!important};
|
|
|
|
.p-button-panel {
|
|
@apply font-medium font-vazir text-xs lg:text-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper {
|
|
@apply w-full max-w-[67.6rem] h-56 lg:h-full relative ltr px-[0.9rem];
|
|
|
|
.swiper-wrapper {
|
|
@apply items-center z-0;
|
|
|
|
.swiper-slide {
|
|
@apply h-max w-max;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
@apply shadow-[-5px_0px_23px_0px_#00000040];
|
|
@apply content-['_'] absolute inset-y-0 w-6 -right-8 lg:-right-6 opacity-50 z-10;
|
|
}
|
|
|
|
&::after {
|
|
@apply shadow-[5px_0px_23px_0px_#00000040];
|
|
@apply content-['_'] absolute inset-y-0 w-6 -left-8 lg:-left-6 opacity-50 z-10;
|
|
}
|
|
}
|
|
}
|
|
</style>
|