日报分享

src/components/share copy.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="share">
-    <div class="share-content" ref="shareContent" v-if="!canvasImageUrl">
+  <div class="share" :style="{ 'z-index': zIndex }">
+    <div class="share-content" ref="shareContent">
       <div class="header">
         <div class="left-icon">
           <img :src="require('@/assets/shareLeft.png')" />
@@ -11,7 +11,13 @@
       </div>
       <!-- 点评 -->
       <!-- <template v-for="item in reportTarget.reportRemarks"> -->
-      <div class="comment summaryDay" v-if="reportRemarksIndex != -1">
+      <div
+        class="comment summaryDay"
+        v-if="
+          reportRemarksIndex != -1 &&
+          reportTarget.reportRemarks &&
+          reportTarget.reportRemarks.length
+        ">
         <div class="title-box">
           <div class="title">
             <div class="name">
@@ -55,23 +61,21 @@
         </template> -->
         <div :class="['text']">今日机会与挑战总结</div>
         <div class="content">
-          {{ reportTarget.reportContents ? reportTarget.reportContents[0].dayContent : '' }}
+          {{ reportTarget.reportContents.length ? reportTarget.reportContents[0].dayContent : '' }}
         </div>
         <div :class="['text']">明日工作计划</div>
         <div class="content">
-          {{ reportTarget.reportContents ? reportTarget.reportContents[1].dayContent : '' }}
+          {{ reportTarget.reportContents.length ? reportTarget.reportContents[1].dayContent : '' }}
         </div>
         <div class="text">今日拜访照片</div>
         <div class="content-photos">
           <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>
+            <img
+              :src="'data:image/jpg;base64,' + item"
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+              alt=""
+              style="display: block" />
           </template>
           <!-- <template v-for="item in photosData">
             <img
@@ -90,13 +94,22 @@
           </div>
         </div>
         <div class="right-text">
-          <div>长按识别二维码</div>
-          <div>查看详情&点评</div>
+          <div>长按识别二维码查看详情&点评</div>
+          <div></div>
         </div>
       </div>
     </div>
+    <div
+      class="share-mask"
+      style="background: #fff; position: fixed; top: 0; width: 100%; height: 100%"></div>
     <div class="html2canvasBox">
-      <div class="closeShare" @click="closeShare"><van-icon name="close" /></div>
+      <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%" />
@@ -108,7 +121,7 @@
 <script>
 import html2canvas from 'html2canvas';
 import QRCode from 'qrcodejs2';
-import { getReportImg } from '@/api/index';
+import { imgToBase64 } from '@/api/index';
 export default {
   name: 'share',
   props: {
@@ -128,29 +141,49 @@ export default {
       type: Number,
       default: -1,
     },
+    // 图片转换列表
+    urlList: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
   },
   data() {
     return {
       canvasImageUrl: '',
       retryCount: 0,
       photosData: [],
+      zIndex: -1,
     };
   },
   created() {
+    this.zIndex = -1;
     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();
-        });
-      }
-    });
+    if (this.urlList.length) {
+      imgToBase64({ urlList: this.urlList }).then((res) => {
+        if (res.data && res.code == 200) {
+          this.photosData = res.data;
+          this.$nextTick(async () => {
+            await this.htmlToCanvas();
+          });
+        } else {
+          this.$toast(res.msg);
+          this.$nextTick(async () => {
+            await this.htmlToCanvas();
+          });
+        }
+      });
+    } else {
+      this.$nextTick(async () => {
+        await this.htmlToCanvas();
+      });
+    }
   },
   methods: {
     //异步执行
@@ -229,7 +262,7 @@ export default {
             });
           };
           img.src = imageUrl;
-
+          this.zIndex = 9;
           this.$emit('setShareImg', true);
         })
         .catch((error) => {
@@ -249,16 +282,29 @@ export default {
         colorDark: '#000000',
         colorLight: 'rgba(255,255,255,0)', // 完全透明背景
         correctLevel: QRCode.CorrectLevel.H,
-        width: 400 * window.devicePixelRatio, // 根据设备像素比放大
-        height: 400 * window.devicePixelRatio,
-        margin: 0, // 去除内置边距
+        width: 140, // 固定尺寸保证安卓一致性
+        height: 140,
+        margin: 2,
         render: 'canvas',
-        // 添加canvas样式配置
         onRenderingEnd: () => {
           const canvas = this.$refs.QRcodes.querySelector('canvas');
-          canvas.style.width = '300px';
-          canvas.style.height = '300px';
-          canvas.style.imageRendering = 'crisp-edges';
+          // 显式设置物理像素尺寸
+          const dpr = window.devicePixelRatio || 1;
+          canvas.width = 200 * dpr;
+          canvas.height = 200 * dpr;
+
+          // 设置CSS显示尺寸保持200x200
+          canvas.style.width = '200px';
+          canvas.style.height = '200px';
+
+          // 优化安卓设备显示
+          canvas.style.imageRendering = 'pixelated';
+          canvas.style.transform = 'translateZ(0)'; // 触发硬件加速
+          canvas.style.backgroundColor = '#fff';
+
+          // 调整画布缩放比例
+          const ctx = canvas.getContext('2d');
+          ctx.scale(dpr, dpr);
         },
       });
     },
@@ -275,6 +321,8 @@ export default {
   height: 100%;
   overflow: hidden;
   background: #fff;
+  position: fixed;
+  top: 0;
 
   .share-content {
     background: url('../assets/shareBack.png') no-repeat center center;
@@ -291,6 +339,7 @@ export default {
   .header {
     display: flex;
     justify-content: space-between;
+    padding-bottom: vw(40);
 
     .left-icon {
       width: vw(114);
@@ -406,19 +455,22 @@ export default {
 
   .footerShare {
     display: flex;
-    // align-items: center;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
     margin-top: vw(100);
 
     .right-text {
-      margin-left: vw(12.5);
+      // margin-left: vw(12.5);
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+      // flex-direction: column;
+      // justify-content: space-between;
+      align-items: center;
+      justify-content: center;
       padding: vw(10) 0;
       div {
         color: #ffffff;
-        font-size: vw(26);
+        font-size: vw(30);
         font-weight: bold;
       }
     }
@@ -431,14 +483,40 @@ export default {
     overflow: hidden !important;
     display: flex;
     flex-direction: column;
-    .closeShare {
+    .shareHeader {
       position: absolute;
       z-index: 1;
-      right: 10px;
       top: 10px;
-      color: #fff;
-      .van-icon {
-        font-size: 20px;
+      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);
+        }
       }
     }
   }
@@ -472,23 +550,27 @@ export default {
 <style lang="scss">
 .share {
   .QRcodes {
-    width: vw(200); // 匹配二维码实际尺寸
-    height: vw(200);
-    margin-right: vw(12.5);
+    width: 140px; /* 固定像素尺寸 */
+    height: 140px;
+    margin-right: 12px;
     position: relative;
     background: #ffffff;
-    padding: 2px;
     image-rendering: crisp-edges;
+    image-rendering: -webkit-optimize-contrast; /* 安卓浏览器兼容 */
+    // padding: 2px;
     .logo {
       position: absolute;
-      top: vw(100);
-      left: vw(100);
-      margin: vw(-17.5) 0 0 vw(-17.5);
-      z-index: 3;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
       img {
-        width: vw(35);
-        height: vw(35);
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: contain;
       }
+      z-index: 3;
     }
 
     img {

src/components/share.vue

@@ -273,10 +273,7 @@ export default {
     },
     creatQrCode() {
       // let proText = 'https://suishenbang.nipponpaint.com.cn';
-      let path =
-        process.env.VUE_APP_Target +
-          '/mobile/dailyHistoricalDetails&source=share&reportId=' +
-          this.reportId || '';
+      let path = '/dailyHistoricalDetails&source=share&reportId=' + this.reportId || '';
       var qrcode = new QRCode(this.$refs.QRcodes, {
         text: process.env.VUE_APP_SSB_LINK + '/homeIndex?path=' + path,
         colorDark: '#000000',