日报分享

src/components/share.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="share" :style="{ 'z-index': zIndex }">
     <!-- canvasImageUrl canvase 渲染成功后删除原始元素，避免当前页面元素太多出现卡顿 -->
-    <div class="share-content" ref="shareContent" v-if="!canvasImageUrl">
+    <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')" />
@@ -113,18 +114,20 @@
     </div>
     <div
       class="share-mask"
-      style="background: #fff; position: fixed; top: 0; width: 100%; height: 100%"></div>
+      style="background: #000; position: fixed; top: 0; width: 100%; height: 100%"></div>
     <div class="html2canvasBox">
-      <div class="shareHeader">
-        <div class="shareTips">
-          长按图片可下载、收藏、转发
-          <!-- <img :src="require('@/assets/shareTips.png')" alt="" /> -->
-        </div>
-        <div class="closeShare" @click="closeShare"><van-icon name="close" /></div>
-      </div>
       <div id="html2canvas" ref="html2canvas">
         <div class="scroll-container">
-          <img :src="canvasImageUrl" width="100%" />
+          <div style="position: relative">
+            <div class="shareHeader">
+              <div class="shareTips">
+                长按图片可下载、收藏、转发
+                <!-- <img :src="require('@/assets/shareTips.png')" alt="" /> -->
+              </div>
+              <div class="closeShare" @click="closeShare"><van-icon name="close" /></div>
+            </div>
+            <img :src="canvasImageUrl" width="100%" class="canvasImage" />
+          </div>
         </div>
       </div>
     </div>
@@ -175,6 +178,7 @@ export default {
       zIndex: -1,
       qrcode: null,
       vueQrText: '',
+      heightFlag: 'start', //图片高度不足，居中显示
     };
   },
   created() {
@@ -184,7 +188,7 @@ export default {
     this.toastLoading(0, '生成中...', true);
   },
   methods: {
-    // 二维码生成成功回调
+    // 初始化会先执行二维码生成，成功后回调
     QRCallback() {
       // 二维码
       if (this.urlList.length) {
@@ -273,32 +277,40 @@ export default {
           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';
+          const img = new Image();
+          img.onload = () => {
+            const canvasImage = this.$refs.html2canvas.querySelector('.canvasImage');
+            const scrollContainer = this.$refs.html2canvas.querySelector('.scroll-container');
+            console.log(scrollContainer.style);
+            if (canvasImage.height < window.innerHeight) {
+              scrollContainer.style.alignItems = 'center';
+            } else {
+              scrollContainer.style.alignItems = 'start';
+            }
+            this.$forceUpdate();
+            // // 根据图片实际高度设置容器高度（增加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';
-          //   });
-          // };
-          // img.src = imageUrl;
+            // // 添加移动端滚动优化
+            // requestAnimationFrame(() => {
+            //   scrollContainer.style.overflow = 'auto';
+            //   scrollContainer.style.overflowScrolling = 'touch';
+            //   scrollContainer.style.webkitOverflowScrolling = 'touch';
+            //   scrollContainer.style.overscrollBehavior = 'contain';
+            //   scrollContainer.style.touchAction = 'pan-y';
+            // });
+          };
+          img.src = imageUrl;
           this.zIndex = 9;
           this.$emit('setShareImg', true);
           this.$emit('setDailyDetailsBox', false);
@@ -333,14 +345,14 @@ export default {
   top: 0;
 
   .share-content {
-    background: url('../assets/shareBack.webp') no-repeat center center;
-    background-size: cover;
-    background-attachment: local;
+    background: url('../assets/shareBack.webp') no-repeat center;
+    background-size: 100% 100%;
+    // background-attachment: local;
     width: 100%;
-    min-height: 100%;
+    // min-height: 100%;
     padding: vw(30);
     position: absolute;
-    padding-bottom: vw(190);
+    // padding-bottom: vw(30);
     top: 0;
     z-index: -10;
   }
@@ -513,42 +525,6 @@ export default {
     overflow: hidden !important;
     display: flex;
     flex-direction: column;
-    .shareHeader {
-      position: absolute;
-      z-index: 1;
-      top: 10px;
-      width: 100%;
-      display: flex;
-      align-items: center;
-      padding: 0 vw(30);
-      .closeShare {
-        // position: absolute;
-        // z-index: 1;
-        // right: 10px;
-        // top: 10px;
-        color: #fff;
-        .van-icon {
-          font-size: vw(40);
-        }
-      }
-      .shareTips {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #f8f8fa;
-        width: 90%;
-        // flex: 1;
-        margin-right: 10px;
-        background: rgba(157, 157, 188, 0.8);
-        height: vw(60);
-        font-weight: 600;
-        font-size: vw(26);
-        img {
-          width: 100%;
-          // height: vw(60);
-        }
-      }
-    }
   }
   #html2canvas {
     width: 100%;
@@ -569,10 +545,48 @@ export default {
       overflow-scrolling: touch;
       max-height: 100vh; /* 添加最大高度限制 */
       position: relative; /* 修复定位上下文 */
+      display: flex;
+      // align-items: start;
       img {
         width: 100%;
         display: block;
       }
+      .shareHeader {
+        position: absolute;
+        z-index: 1;
+        top: 10px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 0 vw(30);
+        .closeShare {
+          // position: absolute;
+          // z-index: 1;
+          // right: 10px;
+          // top: 10px;
+          color: #fff;
+          .van-icon {
+            font-size: vw(40);
+          }
+        }
+        .shareTips {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #f8f8fa;
+          width: 90%;
+          // flex: 1;
+          margin-right: 10px;
+          background: rgba(157, 157, 188, 0.8);
+          height: vw(60);
+          font-weight: 600;
+          font-size: vw(26);
+          img {
+            width: 100%;
+            // height: vw(60);
+          }
+        }
+      }
     }
   }
 }

src/views/week/daily.vue

@@ -840,7 +840,7 @@ export default {
       });
     },
     onClickLeft() {
-      this.$router.go(-1);
+      this.$router.push('/home');
     },
   },
 };