mohadese-nm
85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
<template>
|
|
<div class="total-invoice-fixed">
|
|
<Button :label="$t('submitAndViewPreFactor')" @click="submitOrder()" />
|
|
<div>
|
|
<label>{{ $t('totalFactor') }}</label>
|
|
<span>{{ numberFormat(items.totalFactor) }} {{ $t('priceUnit') }}</span>
|
|
</div>
|
|
<Button icon="isax isax-trash" severity="danger" text rounded @click="remove()" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from '../../initialize/cart-total-invoice'
|
|
const { isMobile } = useDevice();
|
|
const { breakpoint: device = isMobile ? "mobile" : "desktop" } = useViewport();
|
|
const { dialog } = inject('service')
|
|
|
|
const data = inject('data')
|
|
|
|
const items = computed(() => init(data.value))
|
|
|
|
const loading = ref(false)
|
|
const position = computed(() => {
|
|
if(device == "desktop") return "center"
|
|
if(device == "mobile") return "bottom"
|
|
})
|
|
|
|
const submitOrder = async () => {
|
|
loading.value = true
|
|
const { status, data } = await useFetch('/api/orders', {
|
|
headers: { Authorization: useCookie('token') }, method: 'post'
|
|
})
|
|
loading.value = false
|
|
|
|
if (status.value == 'success') {
|
|
dialog.open(resolveComponent('CartDialogPreFactor'), {
|
|
props: { modal: true, position: 'bottom' },
|
|
data
|
|
})
|
|
}
|
|
}
|
|
|
|
const remove = () => {
|
|
dialog.show()
|
|
}
|
|
|
|
const numberFormat = (number) =>
|
|
new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.total-invoice-fixed {
|
|
@apply fixed inset-x-0 bottom-16 h-[4.6rem] z-[11] bg-white flex justify-between items-center;
|
|
@apply shadow-[0px_-3px_5px_#0000000a] border-t border-[#F1F2F4] px-6 lg:hidden;
|
|
|
|
&>button:first-of-type {
|
|
@apply h-10 w-[10.7rem] #{!important};
|
|
|
|
.p-button-label {
|
|
@apply text-xs font-iran-sans font-bold;
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
@apply flex flex-col gap-2 justify-between items-end font-vazir;
|
|
|
|
label {
|
|
@apply text-[#7F7F7F] text-xs;
|
|
}
|
|
|
|
span {
|
|
@apply text-[#333333] text-sm font-bold;
|
|
}
|
|
}
|
|
|
|
&>button:last-of-type {
|
|
@apply fixed lg:hidden w-[3.8rem] h-[3.8rem] right-6 bottom-36 z-10 bg-white #{!important};
|
|
@apply shadow-[0px_0px_10px_#00000014];
|
|
|
|
.p-button-icon {
|
|
@apply text-[2em] text-[#AD3434];
|
|
}
|
|
}
|
|
}
|
|
</style> |