Merge branch 'feat/group-buy' of git.quantgroup.cn:ui/group-buy-ui into feat/group-buy

src/api/groupBuy.js

@@ -51,10 +51,7 @@ export default {
   },
   // 获取百人团订单
   getGroupOrderList(params) {
-    // return http.get(`http://yapi.quantgroups.com/mock/351/api/kdsp/group-order/list`, {
-    return http.get(`${talosHost}/api/kdsp/group-order/list`, {
-      params
-    });
+    return http.get(`${talosHost}/api/kdsp/group-order/list`, { params });
   },
   // 获取小程序码
   getQrcodeUrl(params) {

src/components/groupShare.vue

@@ -6,59 +6,187 @@
       @close="shareCloseChange"
       @click-share-item="bundleShareClickItem"
     />
+    <share-pic ref="sharePic" :share-pic-data="sharePicData" @outputPicUrl="outputPicUrl" />
   </div>
 </template>
 <script>
+import groupBuyApi from '@/api/groupBuy';
+import sharePic from './sharePic';
 import MpBridge from '@/service/mp';
-import { mapState } from 'vuex';
-import { saTrackEvent } from '@/service/sa.service';
+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';
+import config from '@/config';
 export default {
   name: 'GroupShare',
-  components: {},
+  components: {
+    sharePic
+  },
   props: {},
   data() {
     return {
+      showShare: false,
+
       showFlag: false,
       shareOptions: null,
       nativeBridge: null,
       types: [
         { value: 'weixin', disabled: false },
         { value: 'pic', disabled: false }
-      ]
+      ],
+
+      sharePicData: {},
+
+      shareInfo: {},
+
+      typeStatus: {
+        0: '入口活动页面',
+        1: '拼团列表页面',
+        2: '详情页面分享',
+        3: '支付成功分享'
+      }
     };
   },
-  computed: {
-    ...mapState({
-      shareInfo: state => state.pay.shareInfo
-    }),
-    showShare: {
-      get() {
-        return this.$store.state.pay.showShare;
-      },
-      set() {
-        this.$store.dispatch('goods_share_close');
-      }
+  created() {
+    if (isWxMp) {
+      this.nativeBridge = new MpBridge();
+      return;
     }
+    this.nativeBridge = new Bridge();
   },
-  watch: {},
-  created() {
-    // 如果是小程序直接调用postMessage像小程序派发事件监听
-    this.nativeBridge = new MpBridge();
+  mounted() {
+    EventBus.$on('goods_share_info', ({ shareInfo, type }) => {
+      if (!isApp && !isWxMp) {
+        this.tipDialogMessage();
+        return;
+      }
+      this.type = type;
+      if (typeof shareInfo === 'object') {
+        this.sharePicData = shareInfo;
+        this.handleShareInfo(shareInfo);
+        // 如果shareInfo为data数据则直接创建海报
+        return;
+      }
+      // 调用分享数据接口
+      this.getGroupShareInfo(shareInfo);
+    });
   },
   methods: {
-    shareCloseChange() {},
+    async outputPicUrl(posterUrl) {
+      this.sharePicData.posterUrl = posterUrl;
+      this.getShareData();
+      // 弹出分享框
+      if (isApp) {
+        // 如果是app环境直接调用app方法
+        this.appShareEventChange();
+      }
+      if (isWxMp) {
+        this.shareOpenWechat();
+      }
+    },
+    handleShareInfo(shareInfo) {
+      // 处理是否已经有 海报地址，如果有，小程序弹出地步框，App直接弹出分享
+      if (shareInfo.posterUrl) {
+        this.getShareData();
+        if (isWxMp) {
+          // 弹出弹出框
+          this.shareOpenWechat();
+        }
+        if (isApp) {
+          // 直接调用app分享方法
+          this.appShareEventChange();
+        }
+        return;
+        // 如果传递的数据有海报则不处理
+      }
+      // 否则直接创建海报
+      this.$refs.sharePic.createAndUploadPic();
+    },
+    async getGroupShareInfo(orderNo) {
+      try {
+        const [res] = await groupBuyApi.getGroupShareInfo(orderNo);
+        this.sharePicData = res;
+        this.$refs.sharePic.createAndUploadPic();
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async getShareData() {
+      let sharePicData = this.filterShareInfo();
+      this.shareInfo = {
+        title: sharePicData.skuName,
+        desc: sharePicData.desc || '',
+        link: sharePicData.linkPath, // 页面地址
+        imgUrl: sharePicData.skuImg, // 图片地
+        posterUrl: sharePicData.posterUrl
+      };
+    },
+    filterShareInfo() {
+      const type = this.type;
+      let shareInfo = this.sharePicData;
+      let linkPath = '';
+      switch (type) {
+        case 0:
+          linkPath = `${config.localHost}/groupBuy/list?h=0&activityId=${shareInfo.activityId}`;
+          break;
+        case 1:
+          linkPath = qs.stringify({
+            skuNo: shareInfo.skuNo,
+            groupBuyGroupId: shareInfo.groupBuyGroupId,
+            goodsSpecialId: shareInfo.goodsSpecialId,
+            activityId: shareInfo.activityId,
+            templateId: shareInfo.templateId,
+            templateDetailId: shareInfo.templateDetailId
+          });
+          linkPath = `${config.localHost}/groupBuy/skuInfo?h=0&${linkPath}`;
+          break;
+      }
+      shareInfo.linkPath = this.weixinHandleLink(linkPath);
+      return shareInfo;
+    },
+    weixinHandleLink(linkPath) {
+      if (isWxMp) {
+        return `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(linkPath))}`;
+      }
+      return linkPath;
+    },
+    shareOpenWechat() {
+      this.showShare = true;
+    },
+    shareCloseChange() {
+      this.showShare = false;
+    },
     bundleShareClickItem(ev) {
+      // 小程序的操作
       if (ev === 'weixin') {
+        // 弹窗提示需要右上角
         this.shareDialogConfirm();
+        this.emitRunPostMessage();
       }
-      const nativeBridge = this.nativeBridge;
-      this.$store.dispatch('goods_send_shareinfo', { ev, nativeBridge });
-      saTrackEvent('H5_GroupZeroYuanPurchaseActivityPageSharePopupWindowBtnClick', {
-        sku_no: '',
-        buttons_name: '', // 按钮名称
-        activity_id: '',
-        page_title: '',
-        leader_user_id: '' //团长user_id
+      if (ev === 'pic') {
+        // 直接进行小程序海报页面跳转
+        this.openTenetPosterUrl();
+      }
+    },
+    emitRunPostMessage() {
+      const shareDic = this.shareInfo;
+      console.log(shareDic);
+      this.nativeBridge.run({
+        event: 'showShareView',
+        data: {
+          shareDic
+        }
+      });
+    },
+    openTenetPosterUrl() {
+      // 打开小程序的海报下载页面
+      const { posterUrl } = this.shareInfo;
+      console.log(posterUrl);
+      this.nativeBridge.openNewUrl({
+        newUrl: `/pages/goodshare/index?url=${encodeURIComponent(JSON.stringify(posterUrl))}`
       });
     },
     shareDialogConfirm() {
@@ -69,8 +197,33 @@ export default {
         confirmButtonText: '我知道了哦～',
         onConfirm: () => {}
       });
+    },
+    appShareEventChange() {
+      const { title, desc, link, imgUrl, posterUrl } = this.shareInfo;
+      // 进行App分享
+      const data = {
+        event: 'showShareView',
+        data: {
+          platform: ['weChat', 'timeLine', 'QQ', 'CopyLink', 'GeneratePoster'], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
+          shareDic: {
+            title,
+            desc,
+            link, // 页面地址
+            imgUrl, // 图片地址
+            posterUrl
+          }
+        }
+      };
+      this.nativeBridge.showShareView(data);
+    },
+    tipDialogMessage() {
+      this.$dialog({
+        message: '请在App或小程序中进行分享~',
+        title: '',
+        showCancelButton: false,
+        confirmButtonText: '我知道了'
+      });
     }
-    // shareAppChange() {}
   }
 };
 </script>

src/store/module.js

@@ -102,6 +102,7 @@ const mutations = {
         onConfirm: () => {
           // todo 跳转到小程序
           let getScheme = async function() {
+            // 'https://group-buy-test1.liangkebang.net/groupBuy/list?h=0&activityId=39'//
             const [res] = await groupBuy.getScheme({
               miniUrl: 'pages/product/goodDetail',
               params: window.location.href

src/views/goodsList/index.vue

@@ -82,10 +82,9 @@ import groupSwiper from '@/components/groupSwiper';
 import { handleRemainTime, handleDateFormat } from './components/utils';
 import localStorage from '@/service/localStorage.service';
 import goodsCheckMixin from '@/mixins/goodsCheck.mixin';
-import { setAppTitleColor } from '@/service/utils.service';
-import { saTrackEvent } from '@/service/sa.service';
-import { isNull, isWxMp } from '@/service/validation.service';
-import config from '@/config';
+import { setAppTitleColor, EventBus } from '@/service/utils.service';
+// import { registeredEvents } from '@/service/sa.service';
+import { isNull } from '@/service/validation.service';
 let topicIndex;
 export default {
   // eslint-disable-next-line vue/name-property-casing
@@ -116,9 +115,7 @@ export default {
     isShowShare() {
       return this.$store.state.pay.isPrimordialBrowser;
     },
-    goodsShareInfo() {
-      return this.$store.state.pay.goodsShareInfo;
-    },
+
     isShowSwiper() {
       const { hasStart, hasStop } = this.goodsTemp;
       return (!hasStart && !hasStop) || (hasStart && hasStop);
@@ -132,14 +129,6 @@ export default {
       return +new Date(endTime || 0);
     }
   },
-  watch: {
-    goodsShareInfo: {
-      immediate: false,
-      handler(val) {
-        this.$route.name === 'groupBuyList' && this.onShareEventChange(val);
-      }
-    }
-  },
   created() {
     this.reload = true;
   },
@@ -193,34 +182,17 @@ export default {
       }
     },
     async openShareEvent() {
-      const activity_id = this.activityId;
       const shareInfo = await this.getShareData();
-      this.$store.dispatch('goods_share_open', shareInfo);
-      saTrackEvent('H5_GroupZeroYuanPurchaseActivityPageSharePopupBtnClick', {
-        activity_id
+      EventBus.$emit('goods_share_info', {
+        shareInfo,
+        type: 0
       });
+      // const activity_id = this.activityId;
+      // this.$store.dispatch('goods_share_open', shareInfo);
+      // registeredEvents('H5_GroupZeroYuanPurchaseActivityPageSharePopupBtnClick', {
+      //   activity_id
+      // });
     },
-    async onShareEventChange({ ev, nativeBridge }) {
-      const vm = this;
-      let shareDic = await vm.getShareData();
-      if (ev === 'pic') {
-        nativeBridge.openNewUrl({
-          newUrl: `/pages/goodshare/index?url=${encodeURIComponent(
-            JSON.stringify(shareDic.posterUrl)
-          )}`
-        });
-      }
-      if (ev === 'weixin') {
-        // 分享朋友派发微信postMessage事件
-        nativeBridge.run({
-          event: 'showShareView',
-          data: {
-            shareDic
-          }
-        });
-      }
-    },
-
     async getShareData() {
       const {
         sharePosterTemplateUrl,
@@ -229,17 +201,25 @@ export default {
         shareIconUrl,
         img
       } = this.goodsTemp;
-      let link = `${config.localHost}/groupBuy/list?h=0&activityId=${this.activityId}`;
-      if (isWxMp) {
-        link = `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(link))}`;
-      }
-      console.log(link);
+      // let link = `${config.localHost}/groupBuy/list?h=0&activityId=${this.activityId}`;
+      // if (isWxMp) {
+      //   link = `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(link))}`;
+      // }
+      // console.log(link);
+      // return Promise.resolve({
+      //   title: shareTitle,
+      //   desc: shareSubTitle,
+      //   link, // 页面地址
+      //   imgUrl: shareIconUrl || img, // 图片地
+      //   posterUrl: sharePosterTemplateUrl
+      // });
+      const { activityId } = this;
       return Promise.resolve({
-        title: shareTitle,
+        skuName: shareTitle,
         desc: shareSubTitle,
-        link, // 页面地址
-        imgUrl: shareIconUrl || img, // 图片地
-        posterUrl: sharePosterTemplateUrl
+        skuImg: shareIconUrl || img,
+        posterUrl: sharePosterTemplateUrl,
+        activityId
       });
     },
     setTitleColor(bgcolor = '#fff') {

src/views/orderList/components/List.vue

@@ -21,7 +21,10 @@
               <span class="Ol__head-count"
                 >拼团中，差<b class="Ol__head-red">{{ item.needGuys }}人</b>成团</span
               >
-              <count-down :end-time="+new Date(item.endTime.replace(/-|\./g, '/'))" />
+              <count-down
+                :end-time="+new Date(item.endTime.replace(/-|\./g, '/'))"
+                @finish-time="finishTimeChange"
+              />
             </template>
             <template v-else>
               <span :class="cardInfoMation[item.openGroupStatus].class">{{
@@ -160,6 +163,7 @@ export default {
     else if (isWxMp) this.nativeBridge = new MpBridge();
   },
   methods: {
+    finishTimeChange() {},
     goGroupBuyList(itemInfo) {
       this.$router.push({
         path: '/groupBuy/list',

src/views/orderList/index.vue

@@ -18,17 +18,12 @@
         />
       </cr-tab>
     </cr-tabs>
-    <share-pic ref="sharePic" :share-pic-data="sharePicData" @outputPicUrl="outputPicUrl" />
   </div>
 </template>
 <script>
 import groupBuyApi from '@/api/groupBuy';
 import List from './components/List';
-import { isApp, isWxMp } from '@/service/validation.service';
-import sharePic from '@/components/sharePic';
-import qs from 'qs';
-import MpBridge from '@/service/mp';
-import config from '@/config';
+import { EventBus } from '@/service/utils.service';
 const commonParams = {
   loading: false,
   finished: false,
@@ -39,13 +34,10 @@ const commonParams = {
 export default {
   name: 'OrderList',
   components: {
-    List,
-    sharePic
+    List
   },
   data() {
     return {
-      isApp,
-      nativeBridge: null,
       sharePicData: {},
       showCancelPopup: false,
       showExpressPopup: false,
@@ -68,87 +60,17 @@ export default {
           ...JSON.parse(JSON.stringify(commonParams))
         }
       ],
-      currentOrder: {},
-      expressActions: [],
-      orderStatusInfo: {}
+      currentOrder: {}
     };
   },
-  computed: {
-    goodsShareInfo() {
-      return this.$store.state.pay.goodsShareInfo;
-    }
-  },
-  watch: {
-    goodsShareInfo: {
-      immediate: false,
-      handler(val) {
-        this.onShareEventChange(val);
-      }
-    }
-  },
   mounted() {
     this.getstatusQuery();
     this.getList();
   },
-  created() {
-    this.nativeBridge = new MpBridge();
-  },
   methods: {
-    async outputPicUrl(posterUrl) {
-      if (isApp) {
-        // 如果是app环境直接调用app方法
-        const shareInfo = await this.getShareData({ ...this.sharePicData, posterUrl });
-        this.$store.dispatch('goods_share_open', shareInfo);
-      }
-      if (isWxMp) {
-        // 如果是小程序则默认跳转小程序的海报保存页面
-        this.nativeBridge.openNewUrl({
-          newUrl: `/pages/goodshare/index?url=${encodeURIComponent(JSON.stringify(posterUrl))}`
-        });
-      }
-    },
-    async getShareData(shareInfo) {
-      // 处理详情页面分享数据
-      const linkPath = qs.stringify({
-        skuNo: shareInfo.skuNo,
-        groupBuyGroupId: shareInfo.groupBuyGroupId,
-        goodsSpecialId: shareInfo.goodsSpecialId,
-        activityId: shareInfo.activityId,
-        templateId: shareInfo.templateId,
-        templateDetailId: shareInfo.templateDetailId
-      });
-      let detailUrl = `${config.localHost}/groupBuy/skuInfo?h=0&${linkPath}`;
-      if (isWxMp) {
-        detailUrl = `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(detailUrl))}`;
-      }
-      return Promise.resolve({
-        title: shareInfo.skuName,
-        desc: '',
-        link: detailUrl, // 页面地址
-        imgUrl: shareInfo.skuImg, // 图片地
-        posterUrl: shareInfo.posterUrl
-      });
-    },
-    async onShareEventChange({ ev, nativeBridge }) {
-      const shareDic = await this.getShareData(this.sharePicData);
-      if (ev === 'pic') {
-        // 分享海报跳转小程序海报分享页面
-        this.$refs.sharePic.createAndUploadPic();
-      }
-      if (ev === 'weixin') {
-        // 分享朋友派发微信postMessage事件
-        nativeBridge.run({
-          event: 'showShareView',
-          data: {
-            shareDic
-          }
-        });
-      }
-    },
     getstatusQuery() {
       const { status } = this.$route.params || {};
       status && (this.currentTab = Number(status));
-      console.log(this.currentTab);
     },
     handleTabChange(name) {
       this.currentTab = name;
@@ -157,27 +79,11 @@ export default {
     handleLoad() {
       this.getList();
     },
-    async openShareEvent(info) {
-      try {
-        const [res] = await groupBuyApi.getGroupShareInfo(info.orderNo);
-        this.sharePicData = res;
-        if (isWxMp) {
-          // 如果是微信弹出底部框
-          this.$store.dispatch('goods_share_open');
-        }
-        if (isApp) {
-          // 如果是app则先调用创建海报组件
-          this.$refs.sharePic.createAndUploadPic();
-        }
-      } catch (err) {
-        console.log(err);
-      }
-    },
     handleOptionClick(info) {
       this.currentOrder = info;
       switch (info.eventType) {
         case 'share':
-          this.openShareEvent(info);
+          EventBus.$emit('goods_share_info', { shareInfo: info.orderNo, type: 1 });
           break;
         default:
           this.currentOrder = {};