日报分享

package.json

@@ -19,6 +19,7 @@
     "coordtransform": "^2.1.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
+    "html2canvas": "^1.4.1",
     "vant": "^2.12.37",
     "vconsole": "^3.15.1",
     "vue": "^2.6.11",

src/components/share.vue

@@ -1,24 +1,59 @@
 <template>
   <div class="share">
-    <div class="header">
-      <div class="left-icon">
-        <img :src="require('@/assets/shareLeft.png')" />
+    <div class="share-content" ref="shareContent" v-show="false">
+      <div class="header">
+        <div class="left-icon">
+          <img :src="require('@/assets/shareLeft.png')" />
+        </div>
+        <div class="right-icon">
+          <img :src="require('@/assets/shareRight.png')" />
+        </div>
       </div>
-      <div class="right-icon">
-        <img :src="require('@/assets/shareRight.png')" />
+      <div class="title">
+        <div class="name">{{ reportTarget.nickName }}的日报</div>
+        <div class="date">
+          {{
+            reportTarget.commitTime ? formatChineseDate(reportTarget.commitTime.split(' ')[0]) : ''
+          }}
+        </div>
       </div>
-    </div>
-    <div class="title">
-      <div class="name">{{ reportTarget.nickName }}的日报</div>
-      <div class="date">
-        {{
-          reportTarget.commitTime ? formatChineseDate(reportTarget.commitTime.split(' ')[0]) : ''
-        }}
+      <div class="summaryDay">
+        <template v-for="(item, index) in reportTarget.reportContents"
+          v-if="reportTarget.reportContents && reportTarget.reportContents.length > 0">
+          <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.fileUrl" alt="" />
+            </template>
+          </template>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="QRcodes">
+          <template v-if="processFlag == 'development'">
+            <img :src="require('@/assets/testQRcode.png')" />
+          </template>
+          <template v-else>
+            <img :src="require('@/assets/QRcode.png')" />
+          </template>
+        </div>
+        <div class="right-text">
+          <div>长按识别二维码</div>
+          <div>查看详情&点评</div>
+        </div>
       </div>
     </div>
+    <div id="html2canvas" ref="html2canvas">
+      <img :src="canvasImageUrl" />
+    </div>
   </div>
 </template>
 <script>
+import html2canvas from html2canvas
 export default {
   name: 'share',
   props: {
@@ -30,44 +65,153 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      processFlag: '',
+      canvasImageUrl: "",
+    };
   },
   mounted() {
+    this.processFlag = process.env.NODE_ENV;
     console.log(this.reportTarget);
+    this.$nextTick(() => {
+      // 调用html转化canvas函数
+      this.htmlToCanvas();
+    });
   },
   methods: {
+    filterText(index) {
+      if (index == 0) {
+        return '明日工作计划';
+      } else {
+        return '今日机会与挑战总结';
+      }
+    },
     splitTime(date) {
       let time = date.split(' ');
       return time[0].replice('-', '/');
     },
+    htmlToCanvas() {
+      html2canvas(this.$refs.shareContent, {})
+        .then((canvas) => {
+          let imageUrl = canvas.toDataURL('image/png'); // 将canvas转成base64图片格式
+          this.canvasImageUrl = imageUrl;
+          // this.isDom = false;
+        });
+    }
   },
 };
 </script>
 <style lang="scss" scoped>
 .share {
   width: 100%;
-  height: auto;
-  background: url('../assets/shareBack.png') no-repeat;
-  background-size: 100% 100%;
-  position: absolute;
+  height: 100%;
+  position: fixed;
   top: 0;
   z-index: 9;
-  padding: vw(45);
+  overflow: hidden;
+
+  .share-content {
+    background: url(/mobile/static/img/shareBack.07ed8487.png) no-repeat center center;
+    background-size: cover;
+    background-attachment: local;
+    width: 100%;
+    height: 100%;
+    padding: vw(45);
+    overflow-y: auto;
+  }
+
   .header {
     display: flex;
     justify-content: space-between;
+
     .left-icon {
       width: vw(114);
       height: vw(71);
     }
+
     .right-icon {
       width: vw(230);
       height: vw(78);
     }
+
     img {
       width: 100%;
       height: 100%;
     }
   }
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    color: #ecd98a;
+    font-size: vw(36);
+    font-weight: bold;
+    margin-top: vw(81);
+  }
+
+  .summaryDay {
+    .text {
+      background: url('../assets/textBack.png') no-repeat;
+      width: vw(595);
+      height: vw(94);
+      background-size: contain;
+      color: #7d0207;
+      font-size: vw(36);
+      text-align: center;
+      line-height: vw(94);
+      margin: vw(45) 0;
+    }
+
+    .content {
+      font-size: vw(28);
+      font-weight: bold;
+      color: #e6cd78;
+      line-height: vw(63);
+    }
+
+    .content-photos {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      img {
+        width: vw(188);
+        height: vw(188);
+        margin-bottom: vw(40);
+      }
+    }
+  }
+
+  .footer {
+    display: flex;
+    // align-items: center;
+    justify-content: center;
+    margin-top: vw(100);
+    padding-bottom: vw(190);
+
+    .QRcodes {
+      width: vw(87);
+      height: vw(87);
+      margin-right: vw(12.5);
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .right-text {
+      margin-left: vw(12.5);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      div {
+        color: #ffffff;
+        font-size: vw(24);
+        font-weight: bold;
+      }
+    }
+  }
 }
 </style>

src/views/week/dailyApproval.vue

@@ -794,7 +794,7 @@ export default {
   border-radius: 2px;
 }
 .dailyApproval {
-  position: relative;
+  // position: relative;
   .shareBtn {
     width: 22px;
     height: 22px;