fix: 海报空图以及intersection-poilly的问题

src/components/sharePic.vue

@@ -167,48 +167,69 @@ export default {
       }
       return n;
     },
-    async prepare(rawData) {
-      this.sharePicData = rawData;
+    // async prepare(rawData) {
+    //   this.sharePicData = rawData;
 
-      this.handleAvator(rawData);
+    //   this.handleAvator(rawData);
+
+    //   // 将每个字符套入行内标签，用于解决canvas fillText的不换行问题
+    //   let skuName = '';
+    //   const originSkuName = rawData.skuName || '';
+    //   for (let i = 0; i < originSkuName.length; i++) {
+    //     skuName += `<span>${originSkuName[i]}</span>`;
+    //   }
+    //   this.skuName = skuName;
+
+    //   const [endTimeYMD, endTimeHMS = ''] = (rawData.endTime && rawData.endTime.split(' ')) || [];
+    //   if (endTimeYMD) {
+    //     const day = new Date(endTimeYMD);
+    //     this.endTime = `${day.getMonth() + 1}月${day.getDate()}日 ${endTimeHMS}`;
+    //   }
+
+    //   const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(rawData);
+    //   this.qrcodeUrl = qrcodeUrl;
+    // },
+    async createAndUploadPic(sharePicData) {
+      this.$store.dispatch('change_loading_pic', true);
+
+      this.sharePicData = sharePicData;
+
+      this.handleAvator(sharePicData);
 
       // 将每个字符套入行内标签，用于解决canvas fillText的不换行问题
       let skuName = '';
-      const originSkuName = rawData.skuName || '';
+      const originSkuName = sharePicData.skuName || '';
       for (let i = 0; i < originSkuName.length; i++) {
         skuName += `<span>${originSkuName[i]}</span>`;
       }
       this.skuName = skuName;
 
-      const [endTimeYMD, endTimeHMS = ''] = (rawData.endTime && rawData.endTime.split(' ')) || [];
+      const [endTimeYMD, endTimeHMS = ''] =
+        (sharePicData.endTime && sharePicData.endTime.split(' ')) || [];
       if (endTimeYMD) {
         const day = new Date(endTimeYMD);
         this.endTime = `${day.getMonth() + 1}月${day.getDate()}日 ${endTimeHMS}`;
       }
 
-      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(rawData);
+      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(sharePicData);
       this.qrcodeUrl = qrcodeUrl;
-    },
-    async createAndUploadPic(sharePicData) {
-      this.$store.dispatch('change_loading_pic', true);
-
-      await this.prepare(sharePicData);
-
       this.$nextTick(() => {
-        html2canvas(this.$refs.sharePic, {
-          width: 1080,
-          height: 1920,
-          useCORS: true,
-          scale: 1,
-          allowTaint: false
-        })
-          .then(canvas => {
-            canvas.name = `${this.randomString()}.jpeg`;
-            canvas.toBlob(blob => this.uploadPic(blob), 'image/jpeg', 0.85);
+        setTimeout(() => {
+          html2canvas(this.$refs.sharePic, {
+            width: 1080,
+            height: 1920,
+            useCORS: true,
+            scale: 1,
+            allowTaint: false
           })
-          .catch(error => {
-            this.errorHandler(error);
-          });
+            .then(canvas => {
+              canvas.name = `${this.randomString()}.jpeg`;
+              canvas.toBlob(blob => this.uploadPic(blob), 'image/jpeg', 0.85);
+            })
+            .catch(error => {
+              this.errorHandler(error);
+            });
+        }, 300);
       });
     },
     // 上传海报到七牛，成功后触发outputPicUr事件，参数是七牛文件地址

src/main.js

@@ -12,6 +12,7 @@ import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
 import { release } from '../.sentryclirc';
 import lazyload from '@qg/cherry-ui/src/lazyload/index';
+import 'intersection-observer';
 if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
   Raven.config('//8d1b2a5f74bb42ad806e52a11b1173f2@sentry.q-gp.com/80', {
     release,

src/views/goodsDetail/components/groupDescInfo.vue

@@ -104,22 +104,27 @@ export default {
   mounted() {
     this.$nextTick(() => {
       if (this.$refs.buttonArea) {
-        this.observer = new IntersectionObserver(entries => {
-          entries.forEach(item => {
-            if (item.intersectionRatio == 0) {
-              this.$emit('changeButtonVisible', true);
-            } else {
-              this.$emit('changeButtonVisible', false);
-            }
+        if (IntersectionObserver) {
+          this.observer &&
+            this.observer.unobserve &&
+            this.observer.unobserve(this.$refs.buttonArea);
+          this.observer = new IntersectionObserver(entries => {
+            entries.forEach(item => {
+              if (item.intersectionRatio == 0) {
+                this.$emit('changeButtonVisible', true);
+              } else {
+                this.$emit('changeButtonVisible', false);
+              }
+            });
           });
-        });
+        }
         this.observer.USE_MUTATION_OBSERVER = false;
         this.observer.observe(this.$refs.buttonArea);
       }
     });
   },
   beforeDestroy() {
-    if (this.$refs.buttonArea) {
+    if (this.$refs.buttonArea && this.observer) {
       this.observer.unobserve(this.$refs.buttonArea);
     }
   },