日报分享

src/api/index.js

@@ -970,3 +970,12 @@ export function addPhotoToDB(data) {
     data: data,
   });
 }
+
+// 根据日报id查询汇报当天拜访照片base64格式
+export function getReportImg(query) {
+  return request({
+    url: '/mobile/reportMobile/getReportImg',
+    method: 'get',
+    params: query,
+  });
+}

src/components/share.vue

@@ -30,7 +30,7 @@
         </template>
         <div class="text">今日拜访照片</div>
         <div class="content-photos">
-          <template v-for="item in reportTarget.photos">
+          <template v-for="item in photosData">
             <template v-for="item1 in item.photos">
               <img
                 :src="'data:image/jpg;base64,' + item1.base64Url"
@@ -42,7 +42,7 @@
           </template>
           <!-- <template v-for="item in photosData">
             <img
-              :src="item"
+              :src="'data:image/jpg;base64,' + item"
               crossorigin="anonymous"
               referrerpolicy="no-referrer"
               alt=""
@@ -70,6 +70,7 @@
 <script>
 import html2canvas from 'html2canvas';
 import QRCode from 'qrcodejs2';
+import { getReportImg } from '@/api/index';
 export default {
   name: 'share',
   props: {
@@ -94,6 +95,14 @@ export default {
   mounted() {
     // 二维码
     this.creatQrCode();
+    getReportImg({ reportId: this.reportId }).then((res) => {
+      if (res.data) {
+        this.photosData = res.data;
+        this.$nextTick(async () => {
+          await this.htmlToCanvas();
+        });
+      }
+    });
     // this.toastLoading(0, '生成中...', true);
     // 使用Promise.all确保所有图片加载完成
     // const photos = this.reportTarget.photos;
@@ -203,9 +212,6 @@ export default {
         width: 50,
         height: 50,
       });
-      this.$nextTick(async () => {
-        await this.htmlToCanvas();
-      });
     },
   },
 };
@@ -214,11 +220,11 @@ export default {
 .share {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  // overflow: hidden;
   position: absolute;
   top: 0;
-  z-index: -1;
-  // overflow-y: auto;
+  // z-index: -1;
+  overflow-y: auto;
 
   .share-content {
     background: url('../assets/shareBack.png') no-repeat center center;
@@ -349,7 +355,7 @@ export default {
     position: absolute;
     top: 0;
     z-index: 9;
-    // overflow-y: auto;
+    overflow-y: auto;
 
     img {
       width: 100%;