日报分享

src/components/share.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="share">
-    <div class="share-content" ref="shareContent">
+    <div class="share-content" ref="shareContent" v-if="!canvasImageUrl">
       <div class="header">
         <div class="left-icon">
           <img :src="require('@/assets/shareLeft.png')" />
@@ -31,7 +31,7 @@
         <div class="text">今日拜访照片</div>
         <div class="content-photos">
           <template v-for="item in photosData">
-            <template v-for="item1 in item.photos">
+            <template v-for="item1 in item.photos" v-if="item1.base64Url">
               <img
                 :src="'data:image/jpg;base64,' + item1.base64Url"
                 crossorigin="anonymous"
@@ -62,17 +62,12 @@
         </div>
       </div>
     </div>
-    <div
-      class="html2canvasBox"
-      style="
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      ">
-      <div id="html2canvas" ref="html2canvas" style="width: 90%; height: 90%">
-        <img :src="canvasImageUrl" width="100%" />
+    <div class="html2canvasBox">
+      <div class="closeShare" @click="closeShare"><van-icon name="close" /></div>
+      <div id="html2canvas" ref="html2canvas">
+        <div class="scroll-container">
+          <img :src="canvasImageUrl" width="100%" />
+        </div>
       </div>
     </div>
   </div>
@@ -101,7 +96,9 @@ export default {
       photosData: [],
     };
   },
-  created() {},
+  created() {
+    this.canvasImageUrl = '';
+  },
   mounted() {
     this.toastLoading(0, '生成中...', true);
     // 二维码
@@ -139,18 +136,8 @@ export default {
     //   });
     // console.log(photos);
 
-    // 上拉边界下拉出现白色空白
-    let node = document.getElementsByClassName('share')[0];
-    node.addEventListener(
-      'touchmove',
-      (e) => {
-        if (e._isScroller) return;
-        e.preventDefault();
-      },
-      {
-        passive: false,
-      }
-    );
+    // 优化touch事件处理
+    this.setupTouchHandlers();
   },
   methods: {
     //异步执行
@@ -196,11 +183,48 @@ export default {
         useCORS: true,
         allowTaint: false,
         backgroundColor: null,
+        logging: false, // 关闭日志提升性能
+        onclone: (clonedDoc) => {
+          // 确保克隆的DOM保持原始样式
+          clonedDoc.getElementById('html2canvas').style.overflow = 'auto';
+        },
       })
         .then((canvas) => {
           this.toastLoading().clear();
           let imageUrl = canvas.toDataURL('image/png');
           this.canvasImageUrl = imageUrl;
+
+          // 图片加载完成后设置滚动容器高度
+          const img = new Image();
+          img.onload = () => {
+            const scrollContainer = this.$refs.html2canvas.querySelector('.scroll-container');
+            // 根据图片实际高度设置容器高度（增加20px缓冲）
+            // 根据设备像素比调整图片高度
+            // 使用实际渲染高度而非原始图片高度
+            const imgHeight = img.offsetHeight + 20;
+            // 设置容器最小高度保证内容显示，同时允许自动扩展
+            scrollContainer.style.minHeight = `${imgHeight}px`;
+            // 保持父容器为可见滚动
+            scrollContainer.parentElement.style.overflow = 'visible';
+            // 强制浏览器重排
+            scrollContainer.style.display = 'none';
+            scrollContainer.offsetHeight; // 触发重排
+            scrollContainer.style.display = 'block';
+
+            // 添加移动端滚动优化
+            requestAnimationFrame(() => {
+              scrollContainer.style.overflow = 'auto';
+              scrollContainer.style.overflowScrolling = 'touch';
+              scrollContainer.style.webkitOverflowScrolling = 'touch';
+              scrollContainer.style.overscrollBehavior = 'contain';
+              scrollContainer.style.touchAction = 'pan-y';
+            });
+
+            // 重新绑定触摸事件
+            this.setupTouchHandlers();
+          };
+          img.src = imageUrl;
+
           this.$emit('setShareImg', true);
         })
         .catch((error) => {
@@ -222,6 +246,10 @@ export default {
         height: 50,
       });
     },
+    closeShare() {
+      this.canvasImageUrl = '';
+      this.$emit('setShareImg', false);
+    },
   },
 };
 </script>
@@ -229,7 +257,7 @@ export default {
 .share {
   width: 100%;
   height: 100%;
-  // overflow: hidden;
+  overflow: hidden;
   // position: fixed;
   // top: 0;
   // z-index: -1;
@@ -360,20 +388,44 @@ export default {
   .html2canvasBox {
     width: 100%;
     height: 100%;
-    margin: 0 auto;
-    position: absolute;
+    min-height: 100vh;
+    overflow: hidden !important;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow-y: auto;
+    flex-direction: column;
+    .closeShare {
+      position: absolute;
+      z-index: 1;
+      right: 10px;
+      top: 10px;
+      color: #fff;
+      .van-icon {
+        font-size: 20px;
+      }
+    }
   }
   #html2canvas {
-    // overflow: hidden;
-    width: 90%;
+    width: 100%;
     height: 100%;
-    img {
+    position: static; /* 改为静态定位 */
+
+    .scroll-container {
       width: 100%;
       height: 100%;
+      flex: 1;
+      overflow-y: auto !important;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+      touch-action: pan-y;
+      // padding: 20px 0;
+      box-sizing: border-box;
+      /* 修复iOS弹性滚动 */
+      overflow-scrolling: touch;
+      max-height: 100vh; /* 添加最大高度限制 */
+      position: relative; /* 修复定位上下文 */
+      img {
+        width: 100%;
+        display: block;
+      }
     }
   }
 }

src/views/week/dailyApproval.vue

@@ -5,7 +5,7 @@
       <div class="navBarTOP">
         <van-nav-bar class="navBar" title="日报审批" left-arrow @click-left="onClickLeft">
           <template #right>
-            <div class="shareBtn" @click="isShare = true">
+            <div class="shareBtn" @click="setShareFlag = true">
               <van-icon name="share" />
             </div>
           </template>
@@ -479,7 +479,7 @@
       <br />
     </template>
     <share
-      v-if="isShare"
+      v-if="setShareFlag"
       :reportTarget="reportTarget"
       :reportId="$route.query.reportId"
       @setShareImg="setShareImg"></share>
@@ -568,7 +568,7 @@ export default {
       GZQuota: false,
       YFQuota: false,
       titlejz: '',
-      isShare: false,
+      // isShare: false,
       setShareFlag: false,
       //
     };
@@ -576,6 +576,7 @@ export default {
   created() {
     this.powerGrade = localStorage.getItem('powerGrade');
     this.getDetailById();
+    this.setShareFlag = false;
   },
   watch: {
     $route(to, from) {
@@ -824,7 +825,6 @@ export default {
   background: #fff;
   width: 100%;
   height: 100%;
-  overflow: hidden;
   .shareBtn {
     width: 22px;
     height: 22px;