代码整理

src/components/groupShare.vue

@@ -67,12 +67,14 @@ export default {
       }
       this.$store.dispatch('change_loading', true);
       this.type = type;
+
+      // 如果shareInfo为data数据则直接创建海报
       if (typeof shareInfo === 'object') {
         this.sharePicData = shareInfo;
         this.handleShareInfo(shareInfo);
         return;
       }
-      // 如果shareInfo为data数据则直接创建海报
+
       this.getGroupShareInfo(shareInfo);
     });
   },

src/components/sharePic.vue

@@ -11,13 +11,7 @@
             style="width: 94px;height: 94px;margin: 0 21px;"
             :class="{ leader: index == 0, normal: index != 0 }"
           >
-            <img
-              class="avator"
-              style="width: 94px;
-                      height: 94px;"
-              :src="item"
-              alt=""
-            />
+            <img class="avator" style="width: 94px; height: 94px;" :src="item" alt="" />
             <template v-if="index == 0">
               <div
                 class="leaderName"
@@ -92,11 +86,7 @@
         </div>
       </div>
     </div>
-    <div
-      class="skuImg"
-      style="width: 984px;
-            height: 984px;"
-    >
+    <div class="skuImg" style="width: 984px;height: 984px;">
       <!-- 商品图 -->
       <img :src="sharePicData.skuImg" alt="" />
       <div class="skuInfo" style="height: 134px;">
@@ -154,6 +144,7 @@ export default {
     };
   },
   methods: {
+    // 参团人数小于7时，头像全部显示；大于时展示6个头像...
     handleAvator(sharePicData) {
       const openGroupCnt = sharePicData.openGroupCnt || 7;
       let peoplePhotoList = sharePicData.peoplePhotoList || [];
@@ -176,29 +167,33 @@ export default {
       }
       return n;
     },
-    async createAndUploadPic(sharePicData) {
-      this.$store.dispatch('change_loading_pic', true);
-      this.sharePicData = sharePicData;
-      const endTimeYMD = sharePicData.endTime ? sharePicData.endTime.split(' ')[0] : '';
-      const endTimeHMS = sharePicData.endTime ? sharePicData.endTime.split(' ')[1] : '';
-      if (endTimeYMD) {
-        this.endTime = `${new Date(endTimeYMD).getMonth() + 1}月${new Date(
-          endTimeYMD
-        ).getDate()}日 ${endTimeHMS}`;
-      }
-      this.handleAvator(sharePicData);
-      const _this = this;
-      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(sharePicData);
-      this.qrcodeUrl = qrcodeUrl;
-      const [res] = await qiNiuApi.getQiniuToken();
-      const token = res.token;
-      let skuName = '';
+    async prepare(rawData) {
+      this.sharePicData = rawData;
+
+      this.handleAvator(rawData);
+
       // 将每个字符套入行内标签，用于解决canvas fillText的不换行问题
-      const originSkuName = sharePicData.skuName || '';
+      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);
+
+      await this.prepare(sharePicData);
+
       this.$nextTick(() => {
         html2canvas(this.$refs.sharePic, {
           width: 1080,
@@ -206,30 +201,36 @@ export default {
           useCORS: true,
           scale: 1,
           allowTaint: false
-        }).then(function(canvas) {
-          canvas.name = `${_this.randomString}`.jpeg;
-          canvas.toBlob(
-            blob => {
-              const observable = upload(blob, null, token);
-              const observer = {
-                error(err) {
-                  console.log(err);
-                  _this.$store.dispatch('change_loading_pic', false);
-                },
-                complete({ hash }) {
-                  const fileLink = config.qiniuHost + hash;
-                  console.log('pic create success', fileLink);
-                  _this.$emit('outputPicUrl', fileLink);
-                  _this.$store.dispatch('change_loading_pic', false);
-                }
-              };
-              observable.subscribe(observer);
-            },
-            'image/jpeg',
-            0.85
-          );
+        }).then(canvas => {
+          canvas.name = `${this.randomString()}.jpeg`;
+          canvas.toBlob(blob => this.uploadPic(blob), 'image/jpeg', 0.85);
         });
       });
+    },
+    // 上传海报到七牛，成功后触发outputPicUr事件，参数是七牛文件地址
+    async uploadPic(blob) {
+      console.log('海报生成成功');
+      const [res] = await qiNiuApi.getQiniuToken();
+      const token = (res && res.token) || '';
+      if (!token) {
+        this.uploadErrorHandler(new Error('七牛token无效'));
+        return;
+      }
+
+      upload(blob, null, token).subscribe({
+        complete: this.uploadSuccess,
+        error: this.uploadError
+      });
+    },
+    uploadSuccess({ hash }) {
+      const fileLink = config.qiniuHost + hash;
+      console.log('海报上传成功', fileLink);
+      this.$store.dispatch('change_loading_pic', false);
+      this.$emit('outputPicUrl', fileLink);
+    },
+    uploadError(err) {
+      console.error('海报上传失败', err);
+      this.$store.dispatch('change_loading_pic', false);
     }
   }
 };