commit

src/views/detail/signature.vue

@@ -5,19 +5,26 @@
       <!-- <span class="close" @click="onClose">×</span> -->
     </div>
     <div class="content">
-      <div class="info">
-        <p> 尊敬的<span class="blue">{{info.name}}</span>： </p>
+      <div class="info" style="padding: 0" v-if="customerAddress.isSignFor == 1" ref="pictureRef">
+        <img :src="signatureImg.url" alt="" />
+      </div>
+      <div v-else class="info" ref="pictureRef">
+        <p>
+          尊敬的<span class="blue">{{ info.name }}</span
+          >：
+        </p>
         <p>
           您送修的
-          <span class="blue">产品{{info.device}}</span>
+          <span class="blue">产品{{ info.device }}</span>
           已维修完毕。如已收货，请在下方进行签收，感谢您的配合！
         </p>
-        <div class="SignFor" v-if="customerAddress.isSignFor == 1">
+        <div class="time" v-if="customerAddress.isSignFor == -1">签字时间：{{ dayjs().format('YYYY-MM-DD HH:mm ss') }}</div>
+        <div class="SignFor" v-if="customerAddress.isSignFor == -1">
           <div>确认签收：</div>
-          <img :src="signatureImg.url" alt="">
+          <img :src="signatureImg.url" alt="" />
         </div>
       </div>
-      <div class="sign-area" v-if="customerAddress.isSignFor != 1">
+      <div class="sign-area" v-if="customerAddress.isSignFor == 0">
         <div class="sign-title">请在下方签名</div>
         <div class="sign-tip">签名需清晰可辨识</div>
         <div class="sign-box" @click="startSign">
@@ -26,7 +33,7 @@
             <van-icon name="edit" />
             点击此处开始签名
           </div>
-          <img v-else :src="signatureImg.url" alt="">
+          <img v-else :src="signatureImg.url" alt="" />
         </div>
         <div class="sign-actions">
           <button class="reset-btn" @click="clearSign">重新签名</button>
@@ -35,19 +42,21 @@
     </div>
     <div class="footer" v-if="customerAddress.isSignFor != 1">
       <!-- <van-button class="close-btn" @click="onClose">关闭</van-button> -->
-      <van-button type="primary" class="confirm-btn" @click="onConfirm">确认签名</van-button>
+      <van-button type="primary" class="confirm-btn" @click="subData">确认签名</van-button>
     </div>
-    <SignatureModal ref="signatureModalRef" @submit="handleImg"/>
+    <SignatureModal ref="signatureModalRef" @submit="handleImg" />
   </div>
 </template>
 
 <script setup>
-  import { ref, onMounted, unref, computed } from 'vue';
-  import { signFor } from '/@/api/feedback'
+  import { ref, onMounted, unref, computed, nextTick } from 'vue';
+  import { signFor } from '/@/api/feedback';
   import { showLoadingToast, showToast } from 'vant';
   import { useRouter } from 'vue-router';
   import { useUserStore } from '/@/store/modules/user';
+  import html2canvas from 'html2canvas';
   import { repairList, repairDetails } from '/@/api';
+  import dayjs from 'dayjs';
   import axios from 'axios';
   import SignatureModal from './popup/SignatureModal.vue';
   const userStore = useUserStore();
@@ -61,15 +70,16 @@
   const wxOpenId = computed(() => {
     return userStore.getWxOpenId;
   });
-  const customerAddress = ref({})
+  const customerAddress = ref({});
+  const pictureRef = ref();
   const signatureImg = ref({
     file: '',
-    url: ''
+    url: '',
   });
   const info = ref({
     name: '',
     device: '',
-  })
+  });
   onMounted(() => {
     getData();
   });
@@ -85,46 +95,71 @@
   function startSign() {
     // 触发canvas签名
     console.log('signatureModalRef', signatureModalRef.value);
-     signatureModalRef.value.openSignature();
+    signatureModalRef.value.openSignature();
   }
   function handleImg(val) {
     // 触发canvas签名
     signatureImg.value = {
       file: val,
-      url: URL.createObjectURL(val)
+      url: URL.createObjectURL(val),
     };
-    isEmpty.value = false
+    isEmpty.value = false;
     console.log('signatureModalRef', val, signatureImg.value);
     //  signatureModalRef.value.openSignature();
   }
-
+  function download() {
+    showLoadingToast({
+      message: 'loading...',
+      forbidClick: true,
+    });
+    html2canvas(pictureRef.value, { backgroundColor: null, scale: 1, scrollY: 10, scrollX: 0, useCORS: true })
+      .then((canvas) => {
+        canvas.toBlob((blob) => {
+          //以时间戳作为文件名 实时区分不同文件 按需求自己定义就好
+          let filename = `${new Date().getTime()}.jpg`;
+          //转换canvas图片数据格式为formData
+          let file2 = new File([blob], filename, { type: 'image/jpg' });
+          onConfirm(file2);
+        });
+      })
+      .catch((error) => {
+        alert('下载失败');
+        console.log(new Error(error));
+      });
+  }
   function onClose() {
     // 关闭弹窗逻辑
     router.replace('/home');
   }
   function clearSign() {
-    isEmpty.value = true
+    isEmpty.value = true;
     signatureImg.value = {
       file: '',
-      url: ''
+      url: '',
     };
     signatureModalRef.value.openSignature();
     // 关闭弹窗逻辑
   }
-  
-  async function onConfirm() {
+  async function subData() {
+    if (isEmpty.value) {
+      alert('请先签名');
+      return;
+    }
+    customerAddress.value.isSignFor = -1;
+    await nextTick();
+    setTimeout(() => {
+      download();
+    }, 100);
+  }
+  async function onConfirm(file) {
     if (isEmpty.value) {
       alert('请先签名');
       return;
     }
-    let formData = new FormData();
-    showLoadingToast({
-      message: 'loading...',
-      forbidClick: true,
-    });
     // 调用append()方法添加数据
-    formData.append('file', signatureImg.value.file);
-    let {data} = await axios({
+    let formData = new FormData();
+    formData.append('file', file);
+    let { data } = await axios({
       url: '/service/manage/common/upload/files',
       method: 'POST',
       data: formData,
@@ -134,8 +169,8 @@
     });
     await signFor({
       repairId: id,
-      trackingImg: [data.data]
-    })
+      trackingImg: [data.data],
+    });
     showToast('操作成功');
     getData();
     // setTimeout(() => {
@@ -175,8 +210,7 @@
     flex: 1;
     padding: 1.5rem;
   }
-  .sign-area{
-    
+  .sign-area {
     background: #fff;
     border-radius: 10px;
     padding: 1rem;
@@ -188,16 +222,21 @@
     margin-bottom: 1.5rem;
     font-size: 14px;
     color: #333;
-    .SignFor{
+    .SignFor {
       width: 100%;
       display: flex;
       justify-content: end;
-      padding: 50px 0;
-      img{
+      padding: 0px 50px 0px 0px;
+      // align-items: center;
+      img {
         width: calc(60% - 100px);
         height: auto;
       }
     }
+    .time {
+      padding: 50px 0 5px 0;
+      text-align: right;
+    }
   }
   .blue {
     color: #1677ff;
@@ -221,12 +260,12 @@
     height: 120px;
     background: #fafbfc;
     margin-bottom: 0.5rem;
-    img{
+    img {
       width: 100%;
-    height: 100%;
-    object-fit: scale-down;
-    position: absolute;
-    top: 0;
+      height: 100%;
+      object-fit: scale-down;
+      position: absolute;
+      top: 0;
     }
   }
   .sign-canvas {