mohadese namavar
68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
|
<div class="seller-sales">
|
|
<h2>{{ $t(title + 'Sales') }}</h2>
|
|
<ul>
|
|
<li v-for="(item, i) in items[title]" :key="i">
|
|
<p>
|
|
{{ numberFormat(item.value) }} <span>{{ suffix[title] }}</span>
|
|
</p>
|
|
<span>{{ item.label }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps(['title'])
|
|
|
|
const {
|
|
salesCurrentWeek = 0, salesAgoWeek = 0, salseAgoMonth = 0,
|
|
oneDayAgo = 0, oneWeekAgo = 0, oneMonthAgo = 0
|
|
} = inject('data')
|
|
|
|
const items = reactive({
|
|
status: [
|
|
{ label: 'فروش هفته جاری', value: salesCurrentWeek },
|
|
{ label: 'فروش هفته گذشته', value: salesAgoWeek },
|
|
{ label: 'فروش ماه گذشته', value: salseAgoMonth },
|
|
],
|
|
number: [
|
|
{ label: 'تعداد کالای فروش رفته هفته جاری', value: oneDayAgo },
|
|
{ label: 'تعداد کالای فروش رفته هفته گذشته', value: oneWeekAgo },
|
|
{ label: 'تعداد کالای فروش رفته ماه گذشته', value: oneMonthAgo },
|
|
]
|
|
})
|
|
|
|
const suffix = reactive({ status: 'ریال', number: 'عدد' })
|
|
|
|
const numberFormat = (number) =>
|
|
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.seller-sales {
|
|
@apply w-full md:w-[21.4rem] lg:w-[28.1rem] flex flex-col pt-[1.1rem] gap-[1.1rem] lg:pt-5 lg:gap-5 rounded-[0.6rem] border-2 border-neutral-200;
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-sm lg:text-lg font-medium font-vazir pr-[1.1rem] lg:pr-5;
|
|
}
|
|
|
|
ul {
|
|
@apply w-full flex flex-col gap-6 lg:gap-[1.9rem] p-[1.1rem] lg:pt-6 border-t border-[#E5E5E5];
|
|
|
|
li {
|
|
@apply flex flex-col text-[#333333] [&>p]:first:text-[#47B556] font-medium font-vazir;
|
|
|
|
p {
|
|
@apply text-lg lg:text-2xl;
|
|
}
|
|
|
|
|
|
span {
|
|
@apply text-xs lg:text-base;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |