feat: 生成pic组件

src/api/groupBuy.js

@@ -56,5 +56,8 @@ export default {
   // 获取小程序码
   getQrcodeUrl(params) {
     return http.get(`${talosHost}/api/kdsp/playBill/getMakePicData`, params);
+  },
+  getGroupShareInfo(orderNo) {
+    return http.get(`${talosHost}/api/kdsp/groupShareInfo?orderNo=${orderNo}`);
   }
 };

src/api/pay.api.js

@@ -85,10 +85,6 @@ const getCouponList = function(params) {
   return request.get(`${talosHost}/api/kdsp/appconfig/pay-succ-page/guide-stream`, { params });
 };
 
-const getOrderShareInfo = function(params) {
-  return request.get(`${talosHost}/api/kdsp/groupShareInfo`, { params });
-};
-
 export {
   pay,
   prepay,
@@ -102,6 +98,5 @@ export {
   kaGetNextUrl,
   getCouponList,
   queryPayStatus,
-  reissueContract,
-  getOrderShareInfo
+  reissueContract
 };

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,12 @@ 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;
+      console.log('派发事件！');
+      EventBus.$emit('shareClickItem', { ev, nativeBridge });
       registeredEvents('H5_GroupZeroYuanPurchaseActivityPageSharePopupWindowBtnClick', {
         sku_no: '',
         buttons_name: '', // 按钮名称

src/components/sharePic.vue

@@ -67,7 +67,7 @@
 <script>
 import html2canvas from 'html2canvas';
 import qiNiuApi from '@/api/qiniu.api';
-import getQrcodeUrl from '@/api/groupBuy';
+import groupBuyApi from '@/api/groupBuy';
 import { upload } from 'qiniu-js';
 import config from '@/config';
 export default {
@@ -85,18 +85,22 @@ export default {
     };
   },
   methods: {
-    async uploadPic() {
+    async createAndUploadPic() {
+      console.log(999);
       const _this = this;
-      const [qrcodeUrl] = await getQrcodeUrl(this.sharePicData);
+      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(this.sharePicData);
+      console.log(888);
       this.qrcodeUrl = qrcodeUrl;
       const [res] = await qiNiuApi.getQiniuToken();
       const token = res.token;
+      console.log(777);
       this.$nextTick(() => {
         html2canvas(this.$refs.sharePic, {
           width: 1080,
           height: 1920,
           useCORS: true,
-          scale: 1
+          scale: 1,
+          allowTaint: false
         }).then(function(canvas) {
           canvas.toBlob(
             blob => {
@@ -106,6 +110,7 @@ export default {
                   console.log(err);
                 },
                 complete({ hash }) {
+                  console.log('success', config.qiniuHost, hash);
                   const fileLink = config.qiniuHost + hash;
                   _this.$emit('outputPicUrl', fileLink);
                 }

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();
-      }
+      getActivityList(to.query, 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,7 @@ 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 groupBuyApi from '@/api/groupBuy';
 export default {
   name: 'OrderSkuList',
   components: {
@@ -106,6 +106,8 @@ export default {
   },
   data() {
     return {
+      shareInfo: null,
+
       nativeBridge: null,
       gpCountDown: new Date('2021-09-12 00:00:00').getTime(),
 
@@ -157,33 +159,30 @@ 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.$emit('option-click', { ...skuInfo, eventType: 'share' });
+      // 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,
@@ -196,9 +195,6 @@ export default {
     },
     onOptionClick(orderInfo, eventType) {
       this.$emit(EVENT_CLICK, { orderInfo, eventType });
-    },
-    toHome() {
-      this.$router.replace({ path: '/home' });
     }
   }
 };

src/views/orderList/index.vue

@@ -34,6 +34,8 @@ import groupBuyApi from '@/api/groupBuy';
 import List from './components/List';
 import { isApp } from '@/service/validation.service';
 import localStorage from '@/service/localStorage.service';
+import { EventBus } from '@/service/utils.service';
+import qs from 'qs';
 const commonParams = {
   loading: false,
   finished: false,
@@ -78,9 +80,56 @@ export default {
   mounted() {
     this.getstatusQuery();
     this.getList();
+    this.onShareEventChange();
     // this.$track.registeredEvents('H5_2B_MyOrderPageExposure');
   },
   methods: {
+    async getShareData(shareInfo) {
+      const linkPath = qs.stringify({
+        h: 0,
+        skuNo: shareInfo.skuNo,
+        groupBuyGroupId: shareInfo.activityHundredGroupId,
+        goodsSpecialId: shareInfo.specialId,
+        activityId: shareInfo.activityInfoId,
+        templateId: shareInfo.templateId,
+        templateDetailId: shareInfo.templateId
+      });
+      return Promise.resolve({
+        title: shareInfo.skuName,
+        link: `pages/webview/webview?url=${window.location.origin}?url=${encodeURIComponent(
+          JSON.stringify(linkPath)
+        )}`, // 页面地址
+        imgUrl: shareInfo.skuImg // 图片地
+      });
+    },
+    onShareEventChange() {
+      const vm = this;
+      console.log('update');
+      EventBus.$on('shareClickItem', async function({ ev, nativeBridge }) {
+        console.log(ev);
+        if (ev === 'pic') {
+          // 分享海报跳转小程序海报分享页面
+          // nativeBridge.openNewUrl({
+          //   newUrl: `/pages/goodshare/index?url=${encodeURIComponent(
+          //     JSON.stringify(shareDic.posterUrl)
+          //   )}`
+          // });
+        }
+        if (ev === 'weixin') {
+          console.log('监听事件');
+          // const res = await groupBuyApi.getGroupShareInfo(this.shareInfo.order);
+          const [res] = await groupBuyApi.getGroupShareInfo('1440884214932389888');
+          const shareDic = await vm.getShareData(res);
+          // 分享朋友派发微信postMessage事件
+          nativeBridge.run({
+            event: 'showShareView',
+            data: {
+              shareDic
+            }
+          });
+        }
+      });
+    },
     getstatusQuery() {
       const { status } = this.$route.params || {};
       status && (this.currentTab = Number(status));
@@ -93,34 +142,14 @@ export default {
     handleLoad() {
       this.getList();
     },
+    openShareEvent() {
+      this.$store.dispatch('goods_share_open');
+    },
     handleOptionClick(info) {
-      const { orderInfo } = info || {};
-      const { cashCouponCancelNote, showCashCouponCancelNote } = orderInfo || {};
-      this.currentOrder = orderInfo;
+      this.currentOrder = info;
       switch (info.eventType) {
-        case 'cancel':
-          this.orderCancelPopup();
-          break;
-        case 'pay':
-          this.toPay();
-          break;
-        case 'notify':
-          this.orderNotify();
-          break;
-        case 'again':
-          this.toGoods();
-          break;
-        case 'logistics':
-          this.expressActionsCheck();
-          break;
-        case 'confirm':
-          this.orderConfirmPopup();
-          break;
-        case 'toRefund':
-          this.orderRefundPopup(cashCouponCancelNote, showCashCouponCancelNote);
-          break;
-        case 'refund':
-          this.toRefund();
+        case 'share':
+          this.openShareEvent();
           break;
         default:
           this.currentOrder = {};

src/views/pay/payResult.vue

@@ -59,13 +59,14 @@
       </div>
     </div>
     <Goods />
-    <sharePic ref="sharePic" :share-pic-data="sharePicData" />
+    <sharePic ref="sharePic" :share-pic-data="sharePicData" @outputPicUrl="outputPicUrl" />
   </div>
 </template>
 <script>
 import { goUrlExtends } from './extends';
 import CouponCard from './components/CouponCard.vue';
-import { getCouponList, getOrderShareInfo } from '@/api/pay.api';
+import { getCouponList } from '@/api/pay.api';
+import groupBuyApi from '@/api/groupBuy';
 import Goods from '@/components/RecoGoods/RecoGoods.vue';
 import { isApp, isWxMp } from '@/service/validation.service';
 import { EventBus } from '@/service/utils.service';
@@ -102,16 +103,13 @@ export default {
     this.freeAmount = freeAmount || '';
     this.payStatus = success ? '订单支付成功' : '订单支付失败';
     this.payStatusName = success ? '支付成功' : '支付失败';
-    this.$track?.registeredEvents('h5_RechargeResultPageExposure', {
-      pay_status: this.payStatus
-    });
     this.getCouponList();
     this.setShareData();
   },
   mounted() {
-    EventBus.$on('shareClickItem', ev => {
+    EventBus.$on('shareClickItem', ({ ev }) => {
       if (ev === 'pic') {
-        this.getOrderShareInfo();
+        this.createPic();
       }
     });
   },
@@ -119,15 +117,18 @@ export default {
     EventBus.$off('shareClickItem');
   },
   methods: {
+    outputPicUrl(res) {
+      console.log(res);
+    },
     async setShareData() {
-      const [res] = await getOrderShareInfo({
+      const [res] = await groupBuyApi.getGroupShareInfo({
         orderNo: this.orderNo
       });
       this.sharePicData = res;
     },
-    getOrderShareInfo() {
-      console.log(typeof this.$refs.sharePic.uploadPic);
-      this.$refs.sharePic.uploadPic();
+    createPic() {
+      console.log(typeof this.$refs.sharePic.createAndUploadPic);
+      this.$refs.sharePic.createAndUploadPic();
     },
     share() {
       // 分享
@@ -166,7 +167,6 @@ export default {
     },
     async getCouponList() {
       const [data] = await getCouponList({ orderNo: this.orderNo, paySuccess: true });
-      console.log(data);
       if (data) {
         this.couponList = data.couponList || [];
       }