feat:update shareGroup

src/api/groupBuy.js

@@ -52,5 +52,8 @@ export default {
     return http.get(`${talosHost}/api/kdsp/group-order/list`, {
       params
     });
+  },
+  getGroupShareInfo(orderNo) {
+    return http.get(`${talosHost}/api/kdsp/groupShareInfo?orderNo=${orderNo}`);
   }
 };

src/components/groupShare.vue

@@ -34,7 +34,6 @@ export default {
     }),
     showShare: {
       get() {
-        console.log(this.$store.state.pay);
         return this.$store.state.pay.showShare;
       },
       set() {
@@ -50,24 +49,11 @@ export default {
   methods: {
     shareCloseChange() {},
     bundleShareClickItem(ev) {
-      if (ev === 'wexin') {
+      if (ev === 'weixin') {
         this.shareDialogConfirm();
       }
-      EventBus.$emit('shareClickItem', ev);
-      // if (ev === 'pic') {
-      //   const { posterUrl } = this.shareInfo;
-      //   this.nativeBridge.openNewUrl({
-      //     newUrl: `/pages/goodshare/index?url=${encodeURIComponent(JSON.stringify(posterUrl))}`
-      //   });
-      // }
-      // if (ev === 'weixin') {
-      //   this.nativeBridge.run({
-      //     event: 'showShareView',
-      //     data: {
-      //       shareDic: this.shareInfo
-      //     }
-      //   });
-      // }
+      const nativeBridge = this.nativeBridge;
+      EventBus.$emit('shareClickItem', { ev, nativeBridge });
       registeredEvents('H5_GroupZeroYuanPurchaseActivityPageSharePopupWindowBtnClick', {
         sku_no: '',
         buttons_name: '', // 按钮名称

src/views/goodsList/index.vue

 <template>
   <!-- 配置活动背景色 -->
-  <div class="group" :style="{ backgroundColor: topicCfg.bgcolor }">
+  <div class="group" :style="{ backgroundColor: goodsTemp.bgcolor }">
     <div v-if="!isShowShare" class="group-puzzle" @click="goToMyorder">我的拼团</div>
     <!-- 配置头部动态信息 start -->
     <div class="group-top">
       <!-- 动态活动背景图 -->
-      <cr-image width="100%" height="100%" class="group-top-image" :src="topicCfg.img" />
+      <cr-image width="100%" height="100%" class="group-top-image" :src="goodsTemp.img" />
     </div>
     <!-- 配置头部动态信息 end -->
 
@@ -20,21 +20,21 @@
             <groupSwiper
               v-if="showLoops"
               ref="swipeRota"
-              :avator-data="topicCfg.groupBuyUserInfoList"
+              :avator-data="goodsTemp.groupBuyUserInfoList"
               @animation-event-start="animationEventStart"
               @animation-event-end="animationEventEnd"
             />
           </div>
         </div>
         <div class="group-portrait-num" @click="showSwipe = !showSwipe">
-          已有 {{ topicCfg.groupBuyUserCount }}人 参与拼单
+          已有 {{ goodsTemp.groupBuyUserCount }}人 参与拼单
         </div>
       </div>
       <div class="group-list">
         <div class="list-title">
           <b class="list-title-text">今日拼团</b>
           <div class="list-count">
-            <span class="list-count-label">{{ topicCfg.stateTxt }}：</span>
+            <span class="list-count-label">{{ goodsTemp.stateTxt }}：</span>
             <count-down :end-time="gpCountDown" @finish-time="finishTimeChange" />
           </div>
         </div>
@@ -51,7 +51,7 @@
             :key="index"
             :index="index"
             :goods-item="item"
-            :topic-cfg="topicCfg"
+            :topic-cfg="goodsTemp"
             @on-button-click="handleBtnClick"
           />
         </cr-list>
@@ -79,13 +79,12 @@ import countDown from '@/components/countDown';
 import swipeCustomerInfo from '@/components/swipeCustomerInfo';
 import goodsCard from './components/goodsCard';
 import groupSwiper from '@/components/groupSwiper';
-import { isNull } from '@/service/validation.service';
 import { handleRemainTime, handleDateFormat } from './components/utils';
 import localStorage from '@/service/localStorage.service';
 import goodsCheckMixin from '@/mixins/goodsCheck.mixin';
 import { setAppTitleColor, EventBus } from '@/service/utils.service';
 import { registeredEvents } from '@/service/sa.service';
-let topicIndex;
+console.log(EventBus);
 export default {
   // eslint-disable-next-line vue/name-property-casing
   name: 'groupBuyList',
@@ -104,8 +103,7 @@ export default {
       pageSize: 10, //	否
       activityId: '', //是
 
-      topicIndex: 0,
-      topicList: {},
+      goodsTemp: {},
 
       goodsList: [],
       loading: false,
@@ -117,23 +115,15 @@ export default {
       return this.$store.state.pay.isPrimordialBrowser;
     },
     isShowSwiper() {
-      const { hasStart, hasStop } = this.topicCfg;
-      return !hasStart && !hasStop;
+      const { hasStart, hasStop } = this.goodsTemp;
+      return (!hasStart && !hasStop) || (hasStart && hasStop);
     },
-    // 更具goodsSpecialId 获取查询活动模板列表-对应数据项
-    topicCfg() {
-      const { topicList } = this;
-      const info = topicList || {};
-      return info;
-    },
-
     gpCountDown() {
-      const { endTime, hasStart, hasStop } = this.topicCfg;
+      const { startTime, endTime, hasStart, hasStop } = this.goodsTemp;
       if (!hasStart && !hasStop) {
         // 活动未开始
-        return 0;
+        return +new Date(startTime || 0);
       }
-
       return +new Date(endTime || 0);
     }
   },
@@ -145,9 +135,6 @@ export default {
   },
   mounted() {
     this.showLoading = true;
-    EventBus.$on('shareClickItem', ev => {
-      console.log(ev);
-    });
   },
   beforeRouteEnter(to, from, next) {
     const { activityId } = to.query;
@@ -158,25 +145,22 @@ export default {
       });
       return;
     } else {
-      if (isNull(topicIndex)) {
       getActivityList(to.query, next);
-      } else {
-        next();
-      }
     }
   },
   deactivated() {
-    clearTimeout(this.$refs.swipeRota.timer);
+    clearTimeout((this.$refs.swipeRota && this.$refs.swipeRota.timer) || null);
     this.showLoops = false;
+    EventBus.$off();
   },
   activated() {
     this.showLoops = true;
     this.$nextTick(() => {
       this.$refs.swipeRota && this.$refs.swipeRota.onSlidePrevChange();
     });
-    // this.topicIndex = topicIndex;
-    // this.setTitleColor(this.topicCfg.bgcolor);
-    // store.commit('changeTitle', this.topicCfg.title || '活动页');
+    this.onShareEventChange();
+    // this.setTitleColor(this.goodsTemp.bgcolor);
+    // store.commit('changeTitle', this.goodsTemp.title || '活动页');
   },
   methods: {
     animationEventStart() {
@@ -186,16 +170,9 @@ export default {
       this.customers = avator;
       this.showSwipe = true;
     },
-    finishTimeChange() {
-      let info = this.topicList;
-      const { endTime, startTime } = info;
-      info.remainTime = handleRemainTime('', endTime)[0];
-      info.hasStop = info.remainTime < 1;
-      info.willTime = handleRemainTime('', startTime)[0];
-      info.hasStart = handleRemainTime(startTime, '')[0] > 0;
-      info = { ...info, ...handleDateFormat(startTime, endTime) };
-      info.stateTxt = !info.hasStart ? '即将开始' : info.hasStop ? '活动已结束' : '距结束';
-      this.topicList = info;
+    async finishTimeChange() {
+      const info = this.goodsTemp;
+      this.goodsTemp = await computedTemplate(info);
     },
     async goToMyorder() {
       const isLogin = this.checkLogin();
@@ -205,15 +182,36 @@ export default {
     },
     async openShareEvent() {
       const activity_id = this.activityId;
-      let options = await this.getShareData();
-      this.$store.dispatch('goods_share_open', options);
+      this.$store.dispatch('goods_share_open');
       registeredEvents('H5_GroupZeroYuanPurchaseActivityPageSharePopupBtnClick', {
         activity_id
       });
     },
+    onShareEventChange() {
+      EventBus.$on('shareClickItem', async function({ ev, nativeBridge }) {
+        let shareDic = await this.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 link = `${window.location.origin}/groupBuy/list`;
-      const { title, sharePosterTemplateUrl, img } = this.topicCfg;
+      const { title, sharePosterTemplateUrl, img } = this.goodsTemp;
       const link = window.location.href;
       return Promise.resolve({
         title,
@@ -228,7 +226,7 @@ export default {
     },
     handleBtnClick(item) {
       const { activityId } = this;
-      const { goodsSpecialId, templateId, templateDetailIds } = this.topicCfg;
+      const { goodsSpecialId, templateId, templateDetailIds } = this.goodsTemp;
       const { skuNo } = item;
       if (item.goodsCount !== 0) {
         this.$router.push({
@@ -240,14 +238,14 @@ export default {
       }
     },
     onLoad() {
-      if (this.topicCfg) {
+      if (this.goodsTemp) {
         this.getGoodsList();
       }
     },
 
     async getGoodsList() {
       const { pageSize, pageNo, activityId } = this;
-      const { goodsSpecialIds, templateDetailIds } = this.topicCfg;
+      const { goodsSpecialIds, templateDetailIds } = this.goodsTemp;
       this.loading = true;
       this.finished = false;
       try {
@@ -275,6 +273,17 @@ export default {
     }
   }
 };
+async function computedTemplate(info) {
+  const { endTime, startTime } = info;
+  info.remainTime = handleRemainTime('', endTime)[0];
+  info.hasStop = info.remainTime < 1;
+  info.willTime = handleRemainTime('', startTime)[0];
+  info.hasStart = handleRemainTime(startTime, '')[0] > 0;
+  info = { ...info, ...handleDateFormat(startTime, endTime) };
+  info.stateTxt = !info.hasStart ? '即将开始' : info.hasStop ? '活动已结束' : '距结束';
+  return info;
+}
+
 async function getActivityList(urlQuery, next) {
   const { activityId } = urlQuery;
   // eslint-disable-next-line prettier/prettier
@@ -288,34 +297,21 @@ async function getActivityList(urlQuery, next) {
   if (result?.templateInfo) {
     let t = result.templateInfo;
     // 即将开始
-    // t.startTime = '2021-09-24 00:00:00';
-    // t.endTime = '2021-09-25 00:00:00';
+    t.startTime = '2021-09-23 20:00:00';
+    t.endTime = '2021-09-23 20:02:00';
     // 正在活动中
-    t.startTime = '2021-09-23 00:00:00';
-    t.endTime = '2021-09-25 00:00:00';
-    // 活动已结束
+    // t.startTime = '2021-09-23 00:00:00';
+    // t.endTime = '2021-09-25 00:00:00';
+    // // 活动已结束
     // t.startTime = '2021-09-23 10:45:00';
-    // t.endTime = '2021-09-23 11:16:30';
-
-    const { endTime, startTime } = t;
-    t.remainTime = handleRemainTime('', endTime)[0];
-    t.hasStop = t.remainTime < 1;
-    t.willTime = handleRemainTime('', startTime)[0];
-    t.hasStart = handleRemainTime(startTime, '')[0] > 0;
-    t = { ...t, ...handleDateFormat(startTime, endTime) };
-    t.stateTxt = !t.hasStart ? '即将开始' : t.hasStop ? '活动已结束' : '距结束';
+    // t.endTime = '2021-09-23 19:17:20';
+    t = await computedTemplate(t);
     t.groupBuyUserInfoList = t.groupBuyUserInfoList.reverse();
-    const { title } = t;
-    store.commit('CHANGE_TITLE', title || '活动页');
+    store.commit('CHANGE_TITLE', t.title || '活动页');
     nextFns(vm => {
       vm.activityId = activityId;
-      vm.topicList = t;
-      // vm.topicIndex = activityIndex;
+      vm.goodsTemp = t;
       localStorage.set('activityId', activityId);
-      // const { hasStop } = vm.topicCfg;
-      // if (hasStop || !list.length) {
-      //   vm.showOverTip = true;
-      // }
       vm.getGoodsList();
       vm.reload = false;
     });

src/views/orderList/components/List.vue

@@ -89,7 +89,8 @@ import { isWxMp, isApp } from '@/service/validation.service';
 import Bridge from '@qg/js-bridge';
 import MpBridge from '@/service/mp';
 import { registeredEvents } from '@/service/sa.service';
-
+import { EventBus } from '@/service/utils.service';
+import groupBuyApi from '@/api/groupBuy';
 export default {
   name: 'OrderSkuList',
   components: {
@@ -106,6 +107,8 @@ export default {
   },
   data() {
     return {
+      shareInfo: null,
+
       nativeBridge: null,
       gpCountDown: new Date('2021-09-12 00:00:00').getTime(),
 
@@ -148,6 +151,9 @@ export default {
     if (isApp) this.nativeBridge = new Bridge();
     else if (isWxMp) this.nativeBridge = new MpBridge();
   },
+  mounted() {
+    this.onShareEventChange();
+  },
   methods: {
     goGroupDetails(skuInfo) {
       this.nativeBridge.openNewUrl({
@@ -157,33 +163,29 @@ export default {
     goGroupPayPages(skuInfo) {
       this.$router.push(`/pay?orderNo=${skuInfo.orderNo}`);
     },
-
+    async getGroupShareInfo(order) {
+      const res = await groupBuyApi.getGroupShareInfo(order);
+      console.log(res);
+    },
     async openShareEvent(skuInfo) {
-      let options = await this.getShareData(skuInfo);
-      this.$store.dispatch('goods_share_open', options);
+      // this.getGroupShareInfo('1440970158226214912');
+      this.shareInfo = skuInfo;
+      this.$store.dispatch('goods_share_open');
 
       registeredEvents('H5_MyPuzzlePageGroupOrderBtnClick', {
         sku_no: '',
         leader_user_id: ''
       });
     },
-    async getShareData(skuInfo) {
-      return Promise.resolve({
-        title: skuInfo.skuName,
-        desc: '我正在免费拿商品，请你帮帮我',
-        link: `${window.location.origin}/activity/zeroBuy`, // 页面地址
-        imgUrl: skuInfo.imageUrl // 图片地
-      });
-      // await
-    },
+
     toDetail(goodsItem) {
-      const { skuNo, skuList, activityInfoId, activityHundredGroupId } = goodsItem;
+      const { skuList, activityInfoId, activityHundredGroupId } = goodsItem;
       this.$router.push({
         path: '/groupBuy/skuInfoSmallPic',
         query: {
           h: 0,
-          skuNo,
-          activityHundredGroupId,
+          skuNo: skuList[0].skuNo,
+          groupBuyGroupId: activityHundredGroupId,
           goodsSpecialId: skuList[0].goodsSpecialId,
           activityId: activityInfoId,
           templateId: skuList[0].activityTemplateInfoId,
@@ -197,8 +199,37 @@ export default {
     onOptionClick(orderInfo, eventType) {
       this.$emit(EVENT_CLICK, { orderInfo, eventType });
     },
-    toHome() {
-      this.$router.replace({ path: '/home' });
+    async getShareData(shareInfo) {
+      return {
+        title: shareInfo.skuName,
+        link: `${window.location.origin}/activity/zeroBuy`, // 页面地址
+        imgUrl: shareInfo.skuImg // 图片地
+      };
+    },
+    onShareEventChange() {
+      EventBus.$on('shareClickItem', async function({ ev, nativeBridge }) {
+        if (ev === 'pic') {
+          // 分享海报跳转小程序海报分享页面
+          // nativeBridge.openNewUrl({
+          //   newUrl: `/pages/goodshare/index?url=${encodeURIComponent(
+          //     JSON.stringify(shareDic.posterUrl)
+          //   )}`
+          // });
+        }
+        if (ev === 'weixin') {
+          // const res = await groupBuyApi.getGroupShareInfo(this.shareInfo.order);
+          const [res] = await groupBuyApi.getGroupShareInfo('1440884214932389888');
+          console.log(res);
+          const shareDic = await this.getShareData(res);
+          // 分享朋友派发微信postMessage事件
+          nativeBridge.run({
+            event: 'showShareView',
+            data: {
+              shareDic
+            }
+          });
+        }
+      });
     }
   }
 };