feat:调整小程序分享后置

src/components/groupShare.vue

@@ -14,8 +14,6 @@ import groupBuyApi from '@/api/groupBuy';
 import sharePic from './sharePic';
 import MpBridge from '@/service/mp';
 import Bridge from '@qg/js-bridge';
-// import { mapState } from 'vuex';
-// import { registeredEvents } from '@/service/sa.service';
 import { EventBus } from '@/service/utils.service';
 import { isApp, isWxMp } from '@/service/validation.service';
 import qs from 'qs';
@@ -31,9 +29,6 @@ export default {
   data() {
     return {
       showShare: false,
-
-      showFlag: false,
-      shareOptions: null,
       nativeBridge: null,
       types: [
         { value: 'weixin', disabled: false },
@@ -41,15 +36,15 @@ export default {
       ],
 
       sharePicData: {},
-
       shareInfo: {},
       type: 0,
-      typeStatus: {
-        0: '入口活动页面',
-        1: '拼团列表页面',
-        2: '详情页面分享',
-        3: '支付成功分享'
-      }
+      dataType: false
+      // typeStatus: {
+      //   0: '入口活动页面',
+      //   1: '拼团列表页面',
+      //   2: '详情页面分享',
+      //   3: '支付成功分享'
+      // }
     };
   },
   created() {
@@ -65,21 +60,23 @@ export default {
         this.tipDialogMessage();
         return;
       }
+      this.dataType = typeof shareInfo === 'object';
       this.$store.dispatch('change_loading', true);
       this.type = type;
-
+      this.sharePicData = shareInfo;
       // 如果shareInfo为data数据则直接创建海报
-      if (typeof shareInfo === 'object') {
-        this.sharePicData = shareInfo;
-        this.handleShareInfo(shareInfo);
-        return;
+      if (isApp) {
+        this.createAppShareInfo(shareInfo);
+      }
+      if (isWxMp) {
+        this.shareOpenWechat();
+        this.$store.dispatch('change_loading', false);
       }
-
-      this.getGroupShareInfo(shareInfo);
     });
   },
   methods: {
-    async outputPicUrl(posterUrl) {
+    outputPicUrl(posterUrl) {
+      // 海报创建成功
       this.sharePicData.posterUrl = posterUrl;
       this.getShareData();
       // 弹出分享框
@@ -88,56 +85,119 @@ export default {
         this.appShareEventChange();
       }
       if (isWxMp) {
-        this.shareOpenWechat();
+        // 如果是小程序则直接跳转海报保存页面
+        this.openTenetPosterUrl();
       }
       this.$store.dispatch('change_loading', false);
     },
-    handleShareInfo(shareInfo) {
-      // 处理是否已经有 海报地址，如果有，小程序弹出地步框，App直接弹出分享
-      if (shareInfo.posterUrl) {
-        this.getShareData();
-        if (isWxMp) {
-          // 弹出弹出框
-          this.shareOpenWechat();
-        }
-        if (isApp) {
-          // 直接调用app分享方法
-          this.appShareEventChange();
+    // 创建app前置分享
+    createAppShareInfo(params) {
+      if (this.dataType) {
+        // 有海报数据时
+        if (params.posterUrl) {
+          this.getShareData(); // 创建分享数据
+          this.appShareEventChange(); // 调用app分享
+        } else {
+          this.$refs.sharePic.createAndUploadPic(params);
         }
         this.$store.dispatch('change_loading', false);
         return;
-        // 如果传递的数据有海报则不处理
       }
-      // 否则直接创建海报
-      this.$refs.sharePic.createAndUploadPic(this.sharePicData);
+      // 通过orderNo创建分享数据
+      this.getGroupShareInfo(params);
+      this.$store.dispatch('change_loading', false);
     },
-    async getGroupShareInfo(orderNo) {
+    async getGroupShareInfo(orderNo, isNotPic) {
       try {
         const [res] = await groupBuyApi.getGroupShareInfo(orderNo);
         this.$store.dispatch('change_loading', true);
         this.sharePicData = res;
-        this.$refs.sharePic.createAndUploadPic(this.sharePicData);
+        !isNotPic && this.$refs.sharePic.createAndUploadPic(res);
+        isWxMp && this.sendSaTrackEvent(res, !isNotPic ? 'pic' : 'weixin');
+        this.$store.dispatch('change_loading', false);
       } catch (err) {
         this.$store.dispatch('change_loading', false);
         console.log(err);
       }
     },
-    async getShareData() {
-      let sharePicData = this.filterShareInfo();
+
+    handleShareInfo(shareInfo) {
+      this.getShareData(); // 获取分享数据
+      // 如果是小程序则首先弹出分享框
+      if (isWxMp) {
+        this.shareOpenWechat();
+      }
+
+      if (isApp) {
+        if (shareInfo.posterUrl) {
+          // 如果是App并且有海报地址直接调用app分享方法
+          this.appShareEventChange();
+        } else {
+          // 否则创建海报
+          this.$refs.sharePic.createAndUploadPic(this.sharePicData);
+        }
+      }
+      this.$store.dispatch('change_loading', false);
+    },
+    // 点击微信弹出框按钮
+    bundleShareClickItem(ev) {
+      let params = this.sharePicData;
+      this.dataType = typeof params === 'object' ? true : false;
+      if (this.dataType) {
+        // 发宋埋点
+        this.sendSaTrackEvent(params, ev);
+        // 获取分享数据
+        this.getShareData();
+        if (ev === 'weixin') {
+          // 弹窗提示需要右上角点击分享
+          this.shareDialogConfirm();
+          this.emitRunPostMessage();
+        }
+        if (ev === 'pic') {
+          if (params.posterUrl) {
+            this.openTenetPosterUrl();
+            return;
+          }
+          this.$refs.sharePic.createAndUploadPic(params);
+        }
+        return;
+      }
+      this.bundleClickOrderNo(params, ev);
+    },
+    sendSaTrackEvent(params, ev) {
+      saTrackEvent('H5_GroupZeroYuanPurchaseActivityPageSharePopupWindowBtnClick', {
+        sku_no: params.skuNo || '',
+        buttons_name: ev,
+        activity_id: params.activityId || '',
+        page_title: params.skuName || '',
+        group_id: params.groupBuyGroupId || ''
+      });
+    },
+
+    async bundleClickOrderNo(params, ev) {
+      if (ev === 'weixin') {
+        // 只获取分享数据
+        // 弹窗提示需要右上角点击分享
+        await this.getGroupShareInfo(params, true);
+        this.getShareData();
+        this.shareDialogConfirm();
+        this.emitRunPostMessage();
+      }
+      if (ev === 'pic') {
+        this.getGroupShareInfo(params);
+      }
+    },
+    getShareData() {
+      // 创建分享数据
+      const sharePicData = this.filterShareInfo();
+      const tagName = this.type ? '[0元购] ' : '';
       this.shareInfo = {
-        title: sharePicData.skuName,
+        title: `${tagName}${sharePicData.skuName}`,
         desc: sharePicData.desc || '',
         link: sharePicData.linkPath, // 页面地址
         imgUrl: sharePicData.skuImg, // 图片地
         posterUrl: sharePicData.posterUrl
       };
-      // this.shareInfo = {
-      //   title: '超值0元购',
-      //   desc: '拼团成功全额退款免费送回家',
-      //   link: 'http://192.168.29.73:8080/groupBuy/list?activityId=82&vccToken={token}', // 页面地址
-      //   imgUrl: 'https://appsync.lkbang.net/FrAnqyCCc2lLl13p_bW0hDCNvmqP', // 图片地
-      //   posterUrl: 'https://kdspstatic.q-gp.com/sku_pic_3761633428276594.png'
-      // };
     },
     filterShareInfo() {
       const type = this.type;
@@ -188,28 +248,13 @@ export default {
       this.showShare = true;
     },
     shareCloseChange() {
+      this.sharePicData = {};
+      this.shareInfo = {};
+      this.type = 0;
+      this.dataType = false;
       this.showShare = false;
     },
-    bundleShareClickItem(ev) {
-      // 小程序的操作
-      if (ev === 'weixin') {
-        // 弹窗提示需要右上角
-        this.shareDialogConfirm();
-        this.emitRunPostMessage();
-      }
-      if (ev === 'pic') {
-        // 直接进行小程序海报页面跳转
-        this.openTenetPosterUrl();
-      }
-      let sharePicData = this.sharePicData;
-      saTrackEvent('H5_GroupZeroYuanPurchaseActivityPageSharePopupWindowBtnClick', {
-        sku_no: sharePicData.skuNo || '',
-        buttons_name: ev,
-        activity_id: sharePicData.activityId || '',
-        page_title: sharePicData.skuName || '',
-        group_id: sharePicData.groupBuyGroupId || ''
-      });
-    },
+
     emitRunPostMessage() {
       const shareDic = this.shareInfo;
       this.nativeBridge.run({