feat: share

src/components/groupShare.vue

@@ -59,10 +59,10 @@ export default {
   },
   mounted() {
     EventBus.$on('goods_share_info', ({ shareInfo, type }) => {
-      if (!isApp && !isWxMp) {
-        this.tipDialogMessage();
-        return;
-      }
+      // if (!isApp && !isWxMp) {
+      //   this.tipDialogMessage();
+      //   return;
+      // }
       this.type = type;
       if (typeof shareInfo === 'object') {
         this.sharePicData = shareInfo;
@@ -103,13 +103,13 @@ export default {
         // 如果传递的数据有海报则不处理
       }
       // 否则直接创建海报
-      this.$refs.sharePic.createAndUploadPic();
+      this.$refs.sharePic.createAndUploadPic(this.sharePicData);
     },
     async getGroupShareInfo(orderNo) {
       try {
         const [res] = await groupBuyApi.getGroupShareInfo(orderNo);
         this.sharePicData = res;
-        this.$refs.sharePic.createAndUploadPic();
+        this.$refs.sharePic.createAndUploadPic(this.sharePicData);
       } catch (err) {
         console.log(err);
       }

src/components/sharePic.vue

@@ -76,40 +76,28 @@ import groupBuyApi from '@/api/groupBuy';
 import { upload } from 'qiniu-js';
 import config from '@/config';
 export default {
-  props: {
-    sharePicData: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    }
-  },
   data() {
     return {
       qrcodeUrl: '',
       avatorList: [],
       openGroupCnt: 7,
-      maxCount: 0
+      maxCount: 0,
+      sharePicData: {}
     };
   },
-  watch: {
-    sharePicData() {
-      this.handleAvator();
-    }
-  },
   methods: {
-    handleAvator() {
-      const openGroupCnt = this.sharePicData.openGroupCnt || 7;
-      let peoplePhotoList = this.sharePicData.peoplePhotoList || [];
+    handleAvator(sharePicData) {
+      const openGroupCnt = sharePicData.openGroupCnt || 7;
+      let peoplePhotoList = sharePicData.peoplePhotoList || [];
       this.maxCount = openGroupCnt >= 6 ? 6 : openGroupCnt;
       this.openGroupCnt = openGroupCnt;
       this.avatorList = peoplePhotoList.slice(0, openGroupCnt);
     },
-    async createAndUploadPic() {
-      console.log(JSON.stringify(this.sharePicData));
-      this.handleAvator();
+    async createAndUploadPic(sharePicData) {
+      this.sharePicData = sharePicData;
+      this.handleAvator(sharePicData);
       const _this = this;
-      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(this.sharePicData);
+      const [qrcodeUrl] = await groupBuyApi.getQrcodeUrl(sharePicData);
       this.qrcodeUrl = qrcodeUrl;
       const [res] = await qiNiuApi.getQiniuToken();
       const token = res.token;

src/views/goodsDetail/index.vue

 <template>
   <div v-if="showPage" class="goods" style="height: 100%">
-    <div class="goods-share-button">
+    <div class="goods-share-button" @click="setShareData">
       <cr-image
         src="@/assets/images/share-icon.png"
         width=""
@@ -186,7 +186,6 @@
       :group-id="groupId"
       @buy="goVccOrDetail"
     />
-    <sharePic ref="sharePic" />
   </div>
 </template>
 <script>
@@ -201,12 +200,12 @@ import successInfo from '@/components/groupBuySuccessInfo';
 import rules from '@/components/rules';
 import groupDescInfo from './components/groupDescInfo';
 import { mapState } from 'vuex';
-import sharePic from '@/components/sharePic';
 import localStorage from '@/service/localStorage.service';
 // import goodsCheckMixin from '@/mixins/goodsCheck.mixin';
 import Bridge from '@qg/js-bridge';
 import MpBridge from '@/service/mp';
 import { isWxMp, isApp } from '@/service/validation.service';
+import { EventBus } from '@/service/utils.service';
 export default {
   // eslint-disable-next-line vue/name-property-casing
   name: 'goodDetail',
@@ -218,8 +217,7 @@ export default {
     avatorGroup,
     successInfo,
     rules,
-    groupDescInfo,
-    sharePic
+    groupDescInfo
   },
   filters: {
     Img2Thumb
@@ -295,6 +293,32 @@ export default {
     }, 5000);
   },
   methods: {
+    setShareData() {
+      const avatorList = [];
+      this.detailInfo.groupBuyInfo.groupBuyValidUserInfoList.map(v => {
+        avatorList.push(v.avatar);
+      });
+      const sharePicData = {
+        groupBuySuccessGuys: this.detailInfo?.groupBuyInfo.groupBuySuccessPersonCount,
+        salePrice: this.detailInfo.price, // y
+        groupBuyGroupId: this.groupId,
+        goodsSpecialId: this.detailParam.goodsSpecialId,
+        openGroupCnt: this.detailInfo?.groupBuyInfo.groupBuyLimitUserCount,
+        templateId: this.detailParam.templateId,
+        templateDetailId: this.detailParam.templateDetailId,
+        needGuys: this.detailInfo?.groupBuyInfo.groupBuyNeedUserCount,
+        skuName: this.detailInfo.goodsName, // y
+        activityId: this.detailParam.activityId,
+        skuImg: this.detailInfo.thumbImageUrl, // y,
+        activityPrice: this.detailInfo.activityPrice, // y
+        skuNo: this.detailParam.skuNo,
+        peoplePhotoList: avatorList
+      };
+      EventBus.$emit('goods_share_info', {
+        shareInfo: sharePicData,
+        type: 2
+      });
+    },
     getToken() {
       window.xyqbNativeEvent = function(res) {
         const json = typeof res === 'string' ? JSON.parse(res) : res;

src/views/goodsDetail/smallPic.vue

@@ -89,7 +89,6 @@
       </div>
     </div>
     <bottom-nav v-if="showButtonNav" :status="2" :disabled="false" @share="setShareData" />
-    <sharePic ref="sharePic" :share-pic-data="sharePicData" @outputPicUrl="outputPicUrl" />
   </div>
 </template>
 <script>
@@ -101,7 +100,8 @@ import successInfo from '@/components/groupBuySuccessInfo';
 import rules from '@/components/rules';
 import groupDescInfo from './components/groupDescInfo';
 import localStorage from '@/service/localStorage.service';
-import sharePic from '@/components/sharePic';
+import { EventBus } from '@/service/utils.service';
+// import sharePic from '@/components/sharePic';
 import config from '@/config';
 export default {
   // eslint-disable-next-line vue/name-property-casing
@@ -112,8 +112,8 @@ export default {
     avatorGroup,
     successInfo,
     rules,
-    groupDescInfo,
-    sharePic
+    groupDescInfo
+    // sharePic
   },
   data() {
     return {
@@ -121,7 +121,6 @@ export default {
       showInfo: false,
       countDownText: '',
       stockPercentage: 0,
-      sharePicData: {}, // 生成海报图所需要的链接
       shareInfo: {}, // 调用分享需要的参数
       picUrl: '', // 海报url
       // 以下是原有的data
@@ -137,19 +136,6 @@ export default {
       showButtonNav: false // 是否显示底部按钮
     };
   },
-  computed: {
-    goodsShareInfo() {
-      return this.$store.state.pay.goodsShareInfo;
-    }
-  },
-  watch: {
-    goodsShareInfo: {
-      immediate: false,
-      handler(val) {
-        this.onShareEventChange(val);
-      }
-    }
-  },
   created() {
     console.log(config.localHost);
     this.detailParam = { ...this.$route.query };
@@ -175,43 +161,12 @@ export default {
     }, 5000);
   },
   methods: {
-    async onShareEventChange({ ev, nativeBridge }) {
-      if (ev === 'pic') {
-        // 处理图片url
-        nativeBridge.openNewUrl({
-          newUrl: `/pages/goodshare/index?url=${encodeURIComponent(JSON.stringify(this.picUrl))}`
-        });
-        this.$store.dispatch('goods_share_close');
-      }
-      if (ev === 'weixin') {
-        nativeBridge.run({
-          event: 'showShareView',
-          data: this.shareInfo
-        });
-      }
-    },
-    outputPicUrl(res) {
-      const fullPath = this.$route.fullPath.replace('skuInfoSmallPic?', 'skuInfo?');
-      const link =
-        fullPath.indexOf('groupBuyGroupId=') > -1
-          ? fullPath
-          : fullPath + `&groupBuyGroupId=${this.groupId}`;
-      this.picUrl = res || '';
-      this.shareInfo = {
-        title: this.detailInfo.goodsName,
-        desc: '',
-        link: config.localHost + link || '', // 页面地址
-        imgUrl: this.detailInfo.thumbImageUrl, // 图片地
-        posterUrl: res || ''
-      };
-      this.$store.dispatch('goods_share_open', this.shareInfo);
-    },
     setShareData() {
       const avatorList = [];
       this.detailInfo.groupBuyInfo.groupBuyValidUserInfoList.map(v => {
         avatorList.push(v.avatar);
       });
-      this.sharePicData = {
+      const sharePicData = {
         groupBuySuccessGuys: this.detailInfo?.groupBuyInfo.groupBuySuccessPersonCount,
         salePrice: this.detailInfo.price, // y
         groupBuyGroupId: this.groupId,
@@ -227,8 +182,9 @@ export default {
         skuNo: this.detailParam.skuNo,
         peoplePhotoList: avatorList
       };
-      this.$nextTick(() => {
-        this.$refs.sharePic.createAndUploadPic();
+      EventBus.$emit('goods_share_info', {
+        shareInfo: sharePicData,
+        type: 2
       });
     },
     changeButtonVisible(res) {

src/views/pay/payResult.vue

@@ -64,7 +64,6 @@
       </div>
     </div>
     <!-- <Goods /> -->
-    <sharePic ref="sharePic" :share-pic-data="sharePicData" @outputPicUrl="outputPicUrl" />
   </div>
 </template>
 <script>
@@ -75,14 +74,10 @@ 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';
-import sharePic from '@/components/sharePic';
-import qs from 'qs';
-import config from '@/config';
 export default {
   components: {
     // Goods,
-    CouponCard,
-    sharePic
+    CouponCard
   },
   extends: goUrlExtends,
   data() {
@@ -96,23 +91,9 @@ export default {
       payStatusName: '',
       payMethodName: '',
       payType: '',
-      sharePicData: {},
       picUrl: ''
     };
   },
-  computed: {
-    goodsShareInfo() {
-      return this.$store.state.pay.goodsShareInfo;
-    }
-  },
-  watch: {
-    goodsShareInfo: {
-      immediate: false,
-      handler(val) {
-        this.onShareEventChange(val);
-      }
-    }
-  },
   created() {
     const { orderNo, reason, amount, freeAmount, payType } = this.$route.query;
     const { success } = this.$route.meta;
@@ -126,54 +107,15 @@ export default {
     this.payStatusName = success ? '支付成功' : '支付失败';
     this.getCouponList();
   },
-  beforeDestroy() {
-    EventBus.$off('shareClickItem');
-  },
   methods: {
-    async onShareEventChange({ ev, nativeBridge }) {
-      if (ev === 'pic') {
-        // 处理图片url
-        nativeBridge.openNewUrl({
-          newUrl: `/pages/goodshare/index?url=${encodeURIComponent(JSON.stringify(this.picUrl))}`
-        });
-        this.$store.dispatch('goods_share_close');
-      }
-      if (ev === 'weixin') {
-        nativeBridge.run({
-          event: 'showShareView',
-          data: this.shareInfo
-        });
-      }
-    },
-    outputPicUrl(res) {
-      this.picUrl = res;
-      const linkPath = qs.stringify({
-        h: 0,
-        skuNo: this.sharePicData.skuNo,
-        groupBuyGroupId: this.sharePicData.groupBuyGroupId,
-        goodsSpecialId: this.sharePicData.goodsSpecialId,
-        activityId: this.sharePicData.activityId,
-        templateId: this.sharePicData.templateId,
-        templateDetailId: this.sharePicData.templateDetailId
-      });
-      let detailUrl = `${config.localHost}/groupBuy/skuInfo?${linkPath}`;
-      this.shareInfo = {
-        title: this.sharePicData.skuName,
-        desc: '',
-        link: detailUrl || '', // 页面地址
-        imgUrl: this.sharePicData.skuImg, // 图片地
-        posterUrl: res || ''
-      };
-      this.$store.dispatch('goods_share_open', this.shareInfo);
-    },
     async setShareData() {
       const [res, error] = await groupBuyApi.getGroupShareInfo(this.orderNo);
       if (error) {
         return this.$toast('获取分享数据失败');
       }
-      this.sharePicData = res;
-      this.$nextTick(() => {
-        this.$refs.sharePic.createAndUploadPic();
+      EventBus.$emit('goods_share_info', {
+        shareInfo: res,
+        type: 3
       });
     },
     goPage(type) {