Merge branch 'feature_20250331_日报分享' into uat(dev)

src/components/share copy.vue

@@ -10,19 +10,29 @@
         </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>
+      <!-- <template v-for="item in reportTarget.reportRemarks"> -->
+      <div class="comment summaryDay" v-if="reportRemarksIndex != -1">
+        <div class="title-box">
+          <div class="title">
+            <div class="name">
+              {{ reportTarget.reportRemarks[reportRemarksIndex].nickName }}点评
+            </div>
+            <div class="date">
+              {{
+                reportTarget.reportRemarks[reportRemarksIndex].createTime
+                  ? formatChineseDate(
+                      reportTarget.reportRemarks[reportRemarksIndex].createTime.split(' ')[0]
+                    )
+                  : ''
+              }}
             </div>
           </div>
-          <div class="commentMessage">{{ item.remarkContent }}</div>
         </div>
-      </template>
+        <div class="commentMessage">
+          {{ reportTarget.reportRemarks[reportRemarksIndex].remarkContent }}
+        </div>
+      </div>
+      <!-- </template> -->
       <!-- 内容 -->
       <div class="summaryDay">
         <div class="title-box">
@@ -77,7 +87,7 @@
         </div>
       </div>
     </div>
-    <div class="html2canvasBox">
+    <div class="html2canvasBox" v-if="false">
       <div class="closeShare" @click="closeShare"><van-icon name="close" /></div>
       <div id="html2canvas" ref="html2canvas">
         <div class="scroll-container">
@@ -94,15 +104,22 @@ import { getReportImg } from '@/api/index';
 export default {
   name: 'share',
   props: {
+    // 日报数据
     reportTarget: {
       type: Object,
       default() {
         return {};
       },
     },
+    //日报id
     reportId: {
       type: [String, Number],
     },
+    // 点评数据
+    reportRemarksIndex: {
+      type: Number,
+      default: -1,
+    },
   },
   data() {
     return {
@@ -115,14 +132,14 @@ export default {
     this.canvasImageUrl = '';
   },
   mounted() {
-    this.toastLoading(0, '生成中...', true);
+    // 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();
+          // await this.htmlToCanvas();
         });
       }
     });
@@ -215,8 +232,12 @@ export default {
     },
     creatQrCode() {
       // let proText = 'https://suishenbang.nipponpaint.com.cn';
+      let path =
+        process.env.VUE_APP_Target +
+          '/mobile/dailyHistoricalDetails?source=share&reportId=' +
+          this.reportId || '';
       var qrcode = new QRCode(this.$refs.QRcodes, {
-        text: process.env.VUE_APP_SSB_LINK + '/homeIndex?reportId=' + this.reportId || '', // 需要转换为二维码的内容
+        text: process.env.VUE_APP_SSB_LINK + '/homeIndex?path=' + path, // 需要转换为二维码的内容
         colorDark: '#000000',
         colorLight: '#ffffff',
         correctLevel: QRCode.CorrectLevel.H,
@@ -247,7 +268,7 @@ export default {
     position: absolute;
     padding-bottom: vw(190);
     top: 0;
-    z-index: -10;
+    // z-index: -10;
   }
 
   .header {
@@ -338,11 +359,14 @@ export default {
       //   justify-content: space-between;
 
       img {
-        width: vw(188);
+        width: 30%;
         height: vw(188);
         margin-bottom: 15px;
-        margin-right: 15px;
+        margin-right: 5%;
         background-color: rgba(255, 255, 255, 0.1);
+        &:nth-child(3n) {
+          margin-right: 0;
+        }
       }
     }
   }
@@ -374,10 +398,10 @@ export default {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-
+      padding: vw(10) 0;
       div {
         color: #ffffff;
-        font-size: vw(24);
+        font-size: vw(26);
         font-weight: bold;
       }
     }
@@ -435,15 +459,17 @@ export default {
     height: vw(140);
     margin-right: vw(12.5);
     position: relative;
+    // padding: 2px;
+    // background: #fff;
     .logo {
       position: absolute;
       top: vw(70);
       left: vw(70);
-      margin: vw(-20) 0 0 vw(-20);
+      margin: vw(-17.5) 0 0 vw(-17.5);
       z-index: 3;
       img {
-        width: vw(40);
-        height: vw(40);
+        width: vw(35);
+        height: vw(35);
       }
     }
 

src/components/share.vue

@@ -237,12 +237,21 @@ export default {
           '/mobile/dailyHistoricalDetails?source=share&reportId=' +
           this.reportId || '';
       var qrcode = new QRCode(this.$refs.QRcodes, {
-        text: process.env.VUE_APP_SSB_LINK + '/homeIndex?path=' + path, // 需要转换为二维码的内容
+        text: process.env.VUE_APP_SSB_LINK + '/homeIndex?path=' + path,
         colorDark: '#000000',
-        colorLight: '#ffffff',
+        colorLight: 'rgba(255,255,255,0)', // 完全透明背景
         correctLevel: QRCode.CorrectLevel.H,
-        width: 70,
-        height: 70,
+        width: 400 * window.devicePixelRatio, // 根据设备像素比放大
+        height: 400 * window.devicePixelRatio,
+        margin: 0, // 去除内置边距
+        render: 'canvas',
+        // 添加canvas样式配置
+        onRenderingEnd: () => {
+          const canvas = this.$refs.QRcodes.querySelector('canvas');
+          canvas.style.width = '300px';
+          canvas.style.height = '300px';
+          canvas.style.imageRendering = 'crisp-edges';
+        },
       });
     },
     closeShare() {
@@ -455,16 +464,17 @@ export default {
 <style lang="scss">
 .share {
   .QRcodes {
-    width: vw(140);
-    height: vw(140);
+    width: vw(200); // 匹配二维码实际尺寸
+    height: vw(200);
     margin-right: vw(12.5);
     position: relative;
+    background: #ffffff;
     padding: 2px;
-    background: #fff;
+    image-rendering: crisp-edges;
     .logo {
       position: absolute;
-      top: vw(70);
-      left: vw(70);
+      top: vw(100);
+      left: vw(100);
       margin: vw(-17.5) 0 0 vw(-17.5);
       z-index: 3;
       img {