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/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 || [];
       }