feat[preview]: 适配签名组件

- 适配签名组件 PreviewSign

src/views/Design/components/Questions/SignQuestion.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef, toRefs } from 'vue';
-const props = defineProps<{
-  element: any;
-  active: boolean;
-  index: number;
-}>();
-
-const { element, active } = toRefs(props);
+import { computed, onMounted, ref, useTemplateRef } from 'vue';
+import CommonApi from '@/api/common.js';
+// question 属性
+const element = defineModel<question>('element', { default: {} });
+// 属性框是否激活
+const active = defineModel<boolean>('active', { default: false });
+// 题目索引
+const index = defineModel<number>('index', { default: 0 });
+// 答案
+const answer = defineModel<string>('answer', { default: '' });
+// 错误信息
+const errorMessage = defineModel<string>('errorMessage', { default: '' });
 
 const signatureCanvas = useTemplateRef('signatureCanvas');
 
@@ -54,10 +58,7 @@ const togglePen = () => {
   isEraser.value = !isEraser.value;
   setPenStyle();
 };
-const errorMessage = defineModel('errorMessage', {
-  type: String,
-  default: ''
-});
+
 onMounted(() => {
   if (!signatureCanvas.value) return;
   // 将 canvas 宽度和窗口的宽度保持一致
@@ -146,10 +147,24 @@ const clearCanvas = () => {
 
 /**
  * 保存画布
+ * @param type {'dataUrl' | 'blob'} 保存类型
+ * @return {string | Blob | undefined | null}
  */
-const saveCanvas = () => {
+const saveCanvas = (type: 'dataUrl' | 'blob'): string | Blob | undefined | null => {
+  let img: string | Blob | undefined | null = undefined;
   if (!ctx || !signatureCanvas.value) return;
-  return signatureCanvas.value.toDataURL('image/png');
+  if (type === 'blob') {
+    signatureCanvas.value.toBlob(
+      (blob) => {
+        img = blob;
+      },
+      'image/png',
+      { quality: 0.9 }
+    );
+    return img;
+  }
+
+  if (type === 'dataUrl') return signatureCanvas.value.toDataURL('image/png');
 };
 
 /**
@@ -168,10 +183,19 @@ const emit = defineEmits(['update:element']);
 const emitValue = () => {
   emit('update:element', element.value);
 };
+
+/**
+ * 上传文件
+ */
+async function handleUploadImg() {
+  const file = new File([saveCanvas('blob')!], 'sign.png', { type: 'image/png' });
+  const { url } = await CommonApi.cosUpload(file);
+  // 传递答案
+  answer.value = url;
+}
 </script>
 
 <template>
-  <!--  <van-cell>-->
   <van-field
     :label="element.stem"
     :required="element.config.is_required === 1"
@@ -211,13 +235,12 @@ const emitValue = () => {
             :class="isEraser ? 'mobilefont-huabi' : 'mobilefont-rubber'"
             @click="togglePen"
           ></span>
-          <span class="icon mobilefont mobilefont-shangchuan" @click="saveCanvas"></span>
+          <span class="icon mobilefont mobilefont-shangchuan" @click="handleUploadImg"></span>
         </div>
         <div v-else class="sign-tips">请在空白区域书写您的签名</div>
       </div>
     </template>
   </van-field>
-  <!--  </van-cell>-->
 </template>
 
 <style lang="scss" scoped>