mohadese-nm
114 lines
2.5 KiB
Vue
114 lines
2.5 KiB
Vue
<template>
|
|
<div id="pre-factor">
|
|
<div>
|
|
<h2>
|
|
<i class="isax isax-receipt-2"></i>
|
|
<span>{{ $t("submitPreFactor") }}</span>
|
|
</h2>
|
|
<p>{{ $t("submitPreFactorDesc") }}</p>
|
|
</div>
|
|
<PanelSalesFactor :data="factorData" />
|
|
<ul>
|
|
<li v-for="(btn, key) in btns" :key="key">
|
|
<Button v-bind="btn.props" @click="click(key)" />
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from "../../../initialize/pre-factor.js";
|
|
import html2pdf from "html2pdf.js";
|
|
const { btns } = init();
|
|
const dialog = inject("dialogRef");
|
|
const factorData = dialog.value.data;
|
|
const router = useRouter();
|
|
const store = useCartStore();
|
|
|
|
const click = async (key) => {
|
|
if (key == "send") {
|
|
await store.createPayment(factorData._id);
|
|
// navigateTo(data.value.url, { external: true });
|
|
// store.paymentUrl = ''
|
|
}
|
|
if (key == "save" || key == "print") {
|
|
// Select the element you want to print
|
|
const element = document.getElementById("pre-factor");
|
|
|
|
// Configure options for html2pdf
|
|
const options = {
|
|
margin: 1,
|
|
filename: "preFactor.pdf",
|
|
image: { type: "jpeg", quality: 0.98 },
|
|
html2canvas: { scale: 1 },
|
|
jsPDF: { unit: "in", format: "a3", orientation: "landscape" },
|
|
};
|
|
|
|
// Generate the PDF
|
|
html2pdf().set(options).from(element).save();
|
|
}
|
|
|
|
dialog.value.close();
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#pre-factor {
|
|
@apply flex flex-col gap-8 rounded-2xl w-screen lg:w-[79vw] h-auto py-2 bg-white overflow-y-hidden;
|
|
|
|
& > div:nth-of-type(1) {
|
|
@apply flex flex-col items-center;
|
|
|
|
h2 {
|
|
@apply flex items-center gap-4 text-[#333333];
|
|
|
|
i {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
span {
|
|
@apply text-xl font-bold font-vazir;
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply w-[23rem] px-1 sm:w-[30.2rem] mt-[1.1rem] text-center text-[#4C4C4C] text-base sm:text-lg font-vazir;
|
|
}
|
|
}
|
|
|
|
& > ul {
|
|
@apply w-full flex flex-wrap gap-4 px-8;
|
|
|
|
li {
|
|
button {
|
|
@apply w-[12.3rem] h-12 #{!important};
|
|
|
|
.p-button-label {
|
|
@apply h-[1.6rem] text-sm lg:text-lg font-medium font-iran-sans;
|
|
}
|
|
|
|
.p-button-icon {
|
|
@apply text-2xl text-[#7F7F7F];
|
|
}
|
|
|
|
&.p-button-secondary {
|
|
@apply border-[#7F7F7F] justify-center;
|
|
|
|
.p-button-label {
|
|
@apply grow-0 text-[#7F7F7F];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
body:has(.pre-factor) {
|
|
.sales-factor {
|
|
h2 {
|
|
@apply hidden #{!important};
|
|
}
|
|
}
|
|
}
|
|
</style>
|