From 0c9660562a03191d44fc779a889d3da0dc624b6d Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 25 七月 2025 10:47:19 +0800
Subject: [PATCH] 修改弹窗ui和客户反馈
---
laboratory/src/components/SignatureCanvas.vue | 73 ++++++++++++++++++++++++++----------
1 files changed, 53 insertions(+), 20 deletions(-)
diff --git a/laboratory/src/components/SignatureCanvas.vue b/laboratory/src/components/SignatureCanvas.vue
index f856bc8..72f569b 100644
--- a/laboratory/src/components/SignatureCanvas.vue
+++ b/laboratory/src/components/SignatureCanvas.vue
@@ -6,7 +6,7 @@
:close-on-click-modal="false"
custom-class="signature-dialog"
append-to-body
- @close="$emit('update:visible', false)"
+ @close="$emit('close', false)"
>
<div class="signature-container">
<div class="signature-content">
@@ -32,6 +32,8 @@
</template>
<script>
+import { customUploadRequest, getFullUrl } from '@/utils/utils'
+import {editSignPicture} from './service'
export default {
name: 'SignatureCanvas',
props: {
@@ -163,30 +165,61 @@
this.drawDashedBorder()
},
+ // 新增：base64转blob
+ dataURLtoBlob(dataurl) {
+ const arr = dataurl.split(',');
+ const mime = arr[0].match(/:(.*?);/)[1];
+ const bstr = atob(arr[1]);
+ let n = bstr.length;
+ const u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = bstr.charCodeAt(n);
+ }
+ return new Blob([u8arr], { type: mime });
+ },
+
+ // 修改：确认签名时上传图片
confirmSignature() {
- const canvas = this.$refs.signatureCanvas
- const ctx = this.context
-
+ const canvas = this.$refs.signatureCanvas;
+ const ctx = this.context;
// 保存当前画布内容
- const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 先填充背景色
- ctx.fillStyle = 'rgba(239, 248, 250, 1)'
- ctx.fillRect(0, 0, canvas.width, canvas.height)
-
+ ctx.fillStyle = 'rgba(239, 248, 250, 1)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
// 创建一个临时画布来保存签名内容
- const tempCanvas = document.createElement('canvas')
- tempCanvas.width = canvas.width
- tempCanvas.height = canvas.height
- const tempCtx = tempCanvas.getContext('2d')
- tempCtx.putImageData(imageData, 0, 0)
-
+ const tempCanvas = document.createElement('canvas');
+ tempCanvas.width = canvas.width;
+ tempCanvas.height = canvas.height;
+ const tempCtx = tempCanvas.getContext('2d');
+ tempCtx.putImageData(imageData, 0, 0);
// 将签名内容绘制到主画布上
- ctx.drawImage(tempCanvas, 0, 0)
-
- // 导出图片
- const signatureImage = canvas.toDataURL('image/png')
- this.$emit('confirm', signatureImage)
+ ctx.drawImage(tempCanvas, 0, 0);
+ // 导出图片为base64
+ const base64Data = canvas.toDataURL('image/png');
+ // base64转blob
+ const blob = this.dataURLtoBlob(base64Data);
+ // 新增：生成带时间戳的文件名
+ const timestamp = Date.now();
+ const fileName = `signature_${timestamp}.png`;
+ const file = new File([blob], fileName, { type: blob.type });
+ // 上传
+ customUploadRequest({
+ file,
+ onSuccess: (res) => {
+ // 假设返回的图片路径为 res.url
+ const url = res.msg || res.data || res
+ editSignPicture({signPicture:res.msg}).then(res=>{
+ if(res.code==200){
+ this.$message.success('签名成功');
+ this.$emit('confirm', url);
+ }
+ })
+ },
+ onError: (err) => {
+ // this.$message && this.$message.error ? this.$message.error('上传签名失败') : alert('上传签名失败');
+ }
+ });
}
},
beforeDestroy() {
--
Gitblit v1.7.1