日报分享

src/components/share copy.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')" />
@@ -9,6 +9,21 @@
           <img :src="require('@/assets/shareRight.png')" />
         </div>
       </div>
+      <!-- 点评 -->
+      <template v-for="item in reportTarget.reportRemarks">
+        <div class="comment summaryDay">
+          <div class="title-box">
+            <div class="title">
+              <div class="name">{{ item.nickName }}点评</div>
+              <div class="date">
+                {{ item.createTime ? formatChineseDate(item.createTime.split(' ')[0]) : '' }}
+              </div>
+            </div>
+          </div>
+          <div class="commentMessage">{{ item.remarkContent }}</div>
+        </div>
+      </template>
+      <!-- 内容 -->
       <div class="summaryDay">
         <div class="title-box">
           <div class="title">
@@ -25,43 +40,57 @@
         <template
           v-for="(item, index) in reportTarget.reportContents"
           v-if="reportTarget.reportContents && reportTarget.reportContents.length > 0">
-          <div :class="['text', 'text' + index]">{{ filterText(index) }}</div>
+          <div :class="['text']">{{ filterText(index) }}</div>
           <div class="content">{{ item.dayContent }}</div>
         </template>
         <div class="text">今日拜访照片</div>
         <div class="content-photos">
-          <!-- <template v-for="item in reportTarget.photos">
-              <template v-for="item1 in item.photos">
-                <img :src="item1.baseUrl" crossorigin="anonymous" referrerpolicy="no-referrer" alt=""
-                  style="display: block; width: 188px; height: 188px; object-fit: cover" v-if="item1.baseUrl" />
-              </template>photosData
-            </template> -->
           <template v-for="item in photosData">
+            <template v-for="item1 in item.photos" v-if="item1.base64Url">
+              <img
+                :src="'data:image/jpg;base64,' + item1.base64Url"
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+                alt=""
+                style="display: block" />
+            </template>
+          </template>
+          <!-- <template v-for="item in photosData">
             <img
-              :src="item"
+              :src="'data:image/jpg;base64,' + item"
               crossorigin="anonymous"
               referrerpolicy="no-referrer"
               alt=""
               style="display: block" />
-          </template>
+          </template> -->
         </div>
       </div>
       <div class="footerShare">
-        <div class="QRcodes" ref="QRcodes"></div>
+        <div class="QRcodes" ref="QRcodes">
+          <div class="logo">
+            <img :src="require('@/assets/logo1.png')" />
+          </div>
+        </div>
         <div class="right-text">
           <div>长按识别二维码</div>
           <div>查看详情&点评</div>
         </div>
       </div>
     </div>
-    <div id="html2canvas" ref="html2canvas">
-      <img :src="canvasImageUrl" />
+    <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>
 </template>
 <script>
 import html2canvas from 'html2canvas';
 import QRCode from 'qrcodejs2';
+import { getReportImg } from '@/api/index';
 export default {
   name: 'share',
   props: {
@@ -83,35 +112,20 @@ export default {
     };
   },
   created() {
-    // this.toastLoading(0, '生成中...', true);
-    // 使用Promise.all确保所有图片加载完成
-    const photos = this.reportTarget.photos;
-    const photoPromises = [];
-
-    // 收集所有图片转换的Promise
-    photos.forEach((item) => {
-      item.photos.forEach((photo) => {
-        photoPromises.push(this.imageUrlToBase64(photo.fileUrl));
-      });
-    });
-
-    // 等待所有图片加载完成
-    Promise.all(photoPromises)
-      .then((photosArr) => {
-        this.photosData = photosArr;
-        this.$nextTick(async () => {
-          //   await this.htmlToCanvas();
-        });
-      })
-      .catch((error) => {
-        console.error('图片加载失败:', error);
-        this.$toast('图片加载失败，请检查网络');
-      });
-    console.log(photos);
+    this.canvasImageUrl = '';
   },
   mounted() {
+    this.toastLoading(0, '生成中...', true);
     // 二维码
     this.creatQrCode();
+    getReportImg({ reportId: this.reportId }).then((res) => {
+      if (res.data) {
+        this.photosData = res.data;
+        this.$nextTick(async () => {
+          await this.htmlToCanvas();
+        });
+      }
+    });
   },
   methods: {
     //异步执行
@@ -119,20 +133,15 @@ export default {
       return new Promise((resolve, reject) => {
         //一定要设置为let，不然图片不显示
         let image = new Image();
-
         //解决跨域问题
         image.setAttribute('crossOrigin', 'anonymous');
-
         image.src = imageUrl;
-
-        //image.onload为异步加载
         image.onload = () => {
           var canvas = document.createElement('canvas');
           canvas.width = image.width;
           canvas.height = image.height;
           var context = canvas.getContext('2d');
           context.drawImage(image, 0, 0, image.width, image.height);
-
           var quality = 1;
           //这里的dataurl就是base64类型
           let dataURL = canvas.toDataURL('image/png', quality); //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
@@ -155,15 +164,48 @@ export default {
       html2canvas(this.$refs.shareContent, {
         scale: window.devicePixelRatio || 1,
         useCORS: true,
-        logging: true,
         allowTaint: false,
         backgroundColor: null,
-        imageTimeout: 30000,
+        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';
+            });
+          };
+          img.src = imageUrl;
+
+          this.$emit('setShareImg', true);
         })
         .catch((error) => {
           this.toastLoading().clear();
@@ -172,16 +214,19 @@ export default {
         });
     },
     creatQrCode() {
-      let devText = 'https://suishenbangtest.nipponpaint.com.cn/homeIndex';
-      let proText = 'https://suishenbang.nipponpaint.com.cn/homeIndex';
-      let text = process.env.NODE_ENV == 'development' ? devText : proText;
+      // let proText = 'https://suishenbang.nipponpaint.com.cn';
       var qrcode = new QRCode(this.$refs.QRcodes, {
-        text: text + '?reportId=' + this.reportId || '', // 需要转换为二维码的内容
+        text: process.env.VUE_APP_SSB_LINK + '/homeIndex?reportId=' + this.reportId || '', // 需要转换为二维码的内容
         colorDark: '#000000',
         colorLight: '#ffffff',
         correctLevel: QRCode.CorrectLevel.H,
+        width: 70,
+        height: 70,
       });
-      let logo = '../assets/logo1.png';
+    },
+    closeShare() {
+      this.canvasImageUrl = '';
+      this.$emit('setShareImg', false);
     },
   },
 };
@@ -191,22 +236,18 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  position: absolute;
-  top: 0;
-  z-index: 111;
+  background: #fff;
 
   .share-content {
     background: url('../assets/shareBack.png') no-repeat center center;
     background-size: cover;
     background-attachment: local;
     width: 100%;
-    // height: 100%;
     padding: vw(30);
     position: absolute;
-    // z-index: -1;
     padding-bottom: vw(190);
     top: 0;
-    z-index: 111111;
+    z-index: -10;
   }
 
   .header {
@@ -229,24 +270,34 @@ export default {
     }
   }
   .title-box {
+    position: relative;
+    width: 100%;
+    height: auto;
     display: flex;
     justify-content: center;
     align-items: center;
-    position: absolute;
     top: -6px;
-    left: 50%;
-    margin-left: vw(-169);
     .title {
+      // width: vw(262);
+      // height: vw(115);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       color: #600d0e;
-      font-size: vw(36);
       font-weight: bold;
-      // margin-top: vw(81);
-      //   width: vw(338);
-      //   height: vw(115);
       text-align: center;
-      background: url('../assets/titleBack.png') no-repeat;
-      background-size: 100% 100%;
+      // background: url('../assets/titleBack.png') no-repeat;
+      // background-size: 100% 100%;
       padding: vw(20) vw(30);
+      background-color: #ecdd9a;
+      border-radius: 6px 6px 25px 25px;
+      .name {
+        font-size: vw(36);
+      }
+      .date {
+        font-size: vw(28);
+      }
     }
   }
 
@@ -257,6 +308,7 @@ export default {
     position: relative;
     margin-top: vw(55);
     border-radius: 0 0 vw(35) vw(35);
+    padding-top: 0;
     .text {
       background: url('../assets/textBack.png') no-repeat;
       width: 100%;
@@ -271,9 +323,6 @@ export default {
       margin: vw(35) 0;
       font-weight: bold;
     }
-    .text0 {
-      margin-top: vw(152);
-    }
 
     .content {
       font-size: vw(28);
@@ -297,6 +346,22 @@ export default {
       }
     }
   }
+  .comment {
+    .title {
+      // background: url('../assets/comment.png') no-repeat;
+      // background-size: 100% 100%;
+      background-color: #032371;
+      border-radius: 6px 6px 25px 25px;
+      color: #e6cd78;
+    }
+    .commentMessage {
+      padding: vw(60) 0;
+      font-family: PingFang-SC-Medium;
+      font-size: vw(28);
+      font-weight: bold;
+      color: #ffffff;
+    }
+  }
 
   .footerShare {
     display: flex;
@@ -317,17 +382,48 @@ export default {
       }
     }
   }
-
+  .html2canvasBox {
+    width: 100%;
+    height: 100%;
+    min-height: auto;
+    min-height: 100vh;
+    overflow: hidden !important;
+    display: flex;
+    flex-direction: column;
+    .closeShare {
+      position: absolute;
+      z-index: 1;
+      right: 10px;
+      top: 10px;
+      color: #fff;
+      .van-icon {
+        font-size: 20px;
+      }
+    }
+  }
   #html2canvas {
     width: 100%;
     height: 100%;
-    position: fixed;
-    top: 0;
-    z-index: 9;
-    overflow-y: auto;
+    position: static; /* 改为静态定位 */
 
-    img {
+    .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;
+      }
     }
   }
 }
@@ -335,9 +431,21 @@ export default {
 <style lang="scss">
 .share {
   .QRcodes {
-    width: vw(87);
-    height: vw(87);
+    width: vw(140);
+    height: vw(140);
     margin-right: vw(12.5);
+    position: relative;
+    .logo {
+      position: absolute;
+      top: vw(70);
+      left: vw(70);
+      margin: vw(-20) 0 0 vw(-20);
+      z-index: 3;
+      img {
+        width: vw(40);
+        height: vw(40);
+      }
+    }
 
     img {
       width: 100%;

src/components/share.vue

@@ -220,8 +220,8 @@ export default {
         colorDark: '#000000',
         colorLight: '#ffffff',
         correctLevel: QRCode.CorrectLevel.H,
-        width: 50,
-        height: 50,
+        width: 70,
+        height: 70,
       });
     },
     closeShare() {
@@ -236,6 +236,7 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background: #fff;
 
   .share-content {
     background: url('../assets/shareBack.png') no-repeat center center;
@@ -246,7 +247,7 @@ export default {
     position: absolute;
     padding-bottom: vw(190);
     top: 0;
-    z-index: -1;
+    z-index: -10;
   }
 
   .header {
@@ -286,9 +287,11 @@ export default {
       color: #600d0e;
       font-weight: bold;
       text-align: center;
-      background: url('../assets/titleBack.png') no-repeat;
-      background-size: 100% 100%;
+      // background: url('../assets/titleBack.png') no-repeat;
+      // background-size: 100% 100%;
       padding: vw(20) vw(30);
+      background-color: #ecdd9a;
+      border-radius: 6px 6px 25px 25px;
       .name {
         font-size: vw(36);
       }
@@ -345,8 +348,10 @@ export default {
   }
   .comment {
     .title {
-      background: url('../assets/comment.png') no-repeat;
-      background-size: 100% 100%;
+      // background: url('../assets/comment.png') no-repeat;
+      // background-size: 100% 100%;
+      background-color: #032371;
+      border-radius: 6px 6px 25px 25px;
       color: #e6cd78;
     }
     .commentMessage {
@@ -380,6 +385,7 @@ export default {
   .html2canvasBox {
     width: 100%;
     height: 100%;
+    min-height: auto;
     min-height: 100vh;
     overflow: hidden !important;
     display: flex;
@@ -425,14 +431,14 @@ export default {
 <style lang="scss">
 .share {
   .QRcodes {
-    width: vw(100);
-    height: vw(100);
+    width: vw(140);
+    height: vw(140);
     margin-right: vw(12.5);
     position: relative;
     .logo {
       position: absolute;
-      top: vw(50);
-      left: vw(50);
+      top: vw(70);
+      left: vw(70);
       margin: vw(-20) 0 0 vw(-20);
       z-index: 3;
       img {

src/views/week/dailyHistoricalDetails.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="setShareFlag = true">
+            <div class="shareBtn" @click="setShareFlag = true" v-if="source != 'share'">
               <van-icon name="share" />
             </div>
           </template>
@@ -612,6 +612,7 @@ export default {
       YFQuota: false, //应用服务
       saptitle: '业绩目标SAP(千元)',
       setShareFlag: false,
+      source: '',
       //
     };
   },
@@ -635,6 +636,7 @@ export default {
     },
   },
   activated() {
+    this.source = this.$route.query.source;
     this.num = 0;
     this.userTodayPlanNum();
     this.setShareFlag = false;
@@ -793,54 +795,70 @@ export default {
         message: '加载中...',
         forbidClick: true,
       });
-      getDetailById({ reportId: this.$route.query.reportId }).then((res) => {
-        loading1.clear();
-        this.GZQuota = false;
-        this.JZQuota = false;
-        this.YFQuota = res.data.postType == 'YF' ? true : false;
-        if (res.data.postType == 'JZ') {
-          this.JZQuota = true;
-        } else if (res.data.postType == 'GZ') {
-          this.GZQuota = true;
-          this.saptitle = '公裝业绩SAP(千元)';
-        } else {
-          this.saptitle = '业绩目标SAP(千元)';
-        }
-        this.title =
-          res.data.deptName + '-' + res.data.postName + '-' + res.data.nickName + '的日报';
-        this.ptitle = res.data.pdeptName + '-' + res.data.ppostName + '-' + res.data.pnickName;
-        this.reportTargetAll = res.data.reportTargetAll;
-        this.reportTarget = res.data;
-        this.type = res.data.userType;
-        if (res.data.status == 3) {
-          this.successContent = res.data.successContent;
-        } else {
-          this.successContent = res.data.failContent;
-        }
-        if (res.data.reportContents.length > 0) {
-          this.Content = res.data.reportContents[0].dayContent;
-          if (res.data.reportContents.length > 1) {
-            this.Content2 = res.data.reportContents[1].dayContent;
+      getDetailById({ reportId: this.$route.query.reportId })
+        .then((res) => {
+          loading1.clear();
+          this.GZQuota = false;
+          this.JZQuota = false;
+          this.YFQuota = res.data.postType == 'YF' ? true : false;
+          if (res.data.postType == 'JZ') {
+            this.JZQuota = true;
+          } else if (res.data.postType == 'GZ') {
+            this.GZQuota = true;
+            this.saptitle = '公裝业绩SAP(千元)';
+          } else {
+            this.saptitle = '业绩目标SAP(千元)';
+          }
+          this.title =
+            res.data.deptName + '-' + res.data.postName + '-' + res.data.nickName + '的日报';
+          this.ptitle = res.data.pdeptName + '-' + res.data.ppostName + '-' + res.data.pnickName;
+          this.reportTargetAll = res.data.reportTargetAll;
+          this.reportTarget = res.data;
+          this.type = res.data.userType;
+          if (res.data.status == 3) {
+            this.successContent = res.data.successContent;
+          } else {
+            this.successContent = res.data.failContent;
+          }
+          if (res.data.reportContents.length > 0) {
+            this.Content = res.data.reportContents[0].dayContent;
+            if (res.data.reportContents.length > 1) {
+              this.Content2 = res.data.reportContents[1].dayContent;
+            } else {
+              this.Content2 = '';
+            }
+            if (res.data.reportContents.length > 2) {
+              this.projectFollowNum = res.data.reportContents[2].projectFollowNum;
+              this.tucReportingSuccessNum = res.data.reportContents[3].tucReportingSuccessNum;
+            }
           } else {
+            this.Content = '';
             this.Content2 = '';
           }
-          if (res.data.reportContents.length > 2) {
-            this.projectFollowNum = res.data.reportContents[2].projectFollowNum;
-            this.tucReportingSuccessNum = res.data.reportContents[3].tucReportingSuccessNum;
+          this.reportContents = res.data.reportContents;
+          var imgList = [];
+          if (res.data.photos != null) {
+            for (var k = 0; k < res.data.photos.length; k++) {
+              imgList.push(res.data.photos[k].fileUrl + '');
+            }
           }
-        } else {
-          this.Content = '';
-          this.Content2 = '';
-        }
-        this.reportContents = res.data.reportContents;
-        var imgList = [];
-        if (res.data.photos != null) {
-          for (var k = 0; k < res.data.photos.length; k++) {
-            imgList.push(res.data.photos[k].fileUrl + '');
+          this.imgList = imgList;
+        })
+        .catch((err) => {
+          if (err.code == 500 && this.source == 'share') {
+            this.$dialog
+              .confirm({
+                title: '系统提示',
+                message: '没有权限',
+                showCancelButton: false,
+              })
+              .then(() => {
+                this.$router.push({
+                  path: '/home',
+                });
+              });
           }
-        }
-        this.imgList = imgList;
-      });
+        });
     },
     userTodayPlanNum() {
       userTodayPlanNum().then((res) => {
@@ -855,7 +873,13 @@ export default {
       });
     },
     onClickLeft() {
-      this.$router.go(-1);
+      if (this.source == 'share') {
+        this.$router.push({
+          path: '/subordinateHistoricalDaily',
+        });
+      } else {
+        this.$router.go(-1);
+      }
     },
   },
 };