diff --git a/src/views/wallet/wallet-recharge-invoice/print-dialog.vue b/src/views/wallet/wallet-recharge-invoice/print-dialog.vue index 706789e..5a3208e 100644 --- a/src/views/wallet/wallet-recharge-invoice/print-dialog.vue +++ b/src/views/wallet/wallet-recharge-invoice/print-dialog.vue @@ -62,7 +62,7 @@ -
- +
+
@@ -141,7 +150,7 @@ const receiptRef = ref(null) const deptOrUserInput = ref(null) const timer = ref(null) const isStamping = ref(false) -const printButtonDisabled = ref(false) +const isShowStamp = ref(false) const receiptData = ref({ itemJson: "", // 款项json code: "", // 发票代码(七位数) @@ -155,7 +164,7 @@ const receiptData = ref({ picUrl: "", // 发票图片地址 }) const applyId = ref() -const saveProgress = ref(0) +const saveProgress = ref(10) const receiptDataItems = computed(() => { try { const itemJson = JSON.parse(receiptData.value.itemJson) @@ -170,9 +179,9 @@ const receiptDataItems = computed(() => { const totalPrice = computed(() => displayPrice(receiptData.value.totalPrice)) const openDialog = (data: ReceiptData, id: any) => { - if (!data.picUrl) { - printButtonDisabled.value = true - } + isShowStamp.value = false + if (data.picUrl) isShowStamp.value = true + visible.value = true receiptData.value = data applyId.value = id @@ -194,57 +203,73 @@ const genImageUpload = async (): Promise => { canvasWidth: 661.5, canvasHeight: 359.1, backgroundColor: "#ffffff", - pixelRatio: 10, + pixelRatio: 6, }) if (blob) { - const formData = new FormData() - formData.append("file", blob, "receipt.png") - const { code, data } = await request({ - url: "/admin/sys-file/upload", - method: "post", - headers: { - "Content-Type": "multipart/form-data", - }, - data: formData, - onUploadProgress: (progressEvent: any) => { - if (progressEvent.lengthComputable) { - saveProgress.value = Math.min(Math.round((progressEvent.loaded * 100) / progressEvent.total), 99) - } - }, - }) - if (code == 0) return data.url - useMessage().error(data.msg || "上传失败") + try { + loading.value = true + const formData = new FormData() + formData.append("file", blob, "receipt.png") + const { code, data } = await request({ + url: "/admin/sys-file/upload", + method: "post", + headers: { + "Content-Type": "multipart/form-data", + }, + data: formData, + onUploadProgress: (progressEvent: any) => { + if (progressEvent.lengthComputable) { + saveProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total) + } + }, + }) + if (code == 0) return data.url + useMessage().error(data.msg || "上传失败") + } catch (error) { + useMessage().error(error as string) + } finally { + loading.value = false + saveProgress.value = 10 + } } } } +// 盖章并上传发票图片并保存 +const stampReceipt = () => { + loading.value = true + isShowStamp.value = true + isStamping.value = true + + setTimeout(async () => { + const url = await genImageUpload() + if (url) { + receiptData.value.picUrl = url + await saveReceipt() + } + }, 1010) +} + // 保存发票 const saveReceipt = async () => { try { loading.value = true - isStamping.value = false - const url = await genImageUpload() - if (url) { - const { code, data } = await bindInvoice({ - ...receiptData.value, - picUrl: url, - deptOrUser: receiptData.value.deptOrUser, - applyId: applyId.value, - }) - saveProgress.value = 100 - if (code == 0) { - isStamping.value = true - printButtonDisabled.value = false - emit("refresh") - return useMessage().success("保存成功") - } - useMessage().error(data.msg || "保存失败") + const { code, data } = await bindInvoice({ + ...receiptData.value, + deptOrUser: receiptData.value.deptOrUser, + applyId: applyId.value, + }) + if (code == 0) { + emit("refresh") + // visible.value = false + return useMessage().success("保存成功") } + useMessage().error(data.msg || "保存失败") } catch (err) { useMessage().error(err as string) } finally { loading.value = false - saveProgress.value = 0 + isStamping.value = false } } @@ -286,11 +311,11 @@ defineExpose({ } @keyframes stamp-in { 0% { - transform: translateY(80px) scale(2.5) rotate(0); + transform: translateY(-100px) scale(2) rotate(0); opacity: 0.2; } 60% { - transform: translateY(10px) scale(2) rotate(0); + transform: translateY(-10px) scale(1.5) rotate(0); opacity: 1; } 100% {