feat:合并分享

src/components/groupShare.vue

@@ -10,12 +10,15 @@
 </template>
 <script>
 import { isWxMp, isApp } from '@/service/validation.service';
+import Bridge from '@qg/js-bridge';
+import MpBridge from '@/service/mp';
 export default {
   name: 'GroupShare',
   components: {},
   props: {},
   data() {
     return {
+      nativeBridge: null,
       showShare: false,
       types: [
         { value: 'weixin', disabled: false },
@@ -29,32 +32,36 @@ export default {
     }
   },
   watch: {},
+  created() {
+    if (isApp) this.nativeBridge = new Bridge();
+    else if (isWxMp) this.nativeBridge = new MpBridge();
+  },
   methods: {
     async open() {
       try {
-        // if (this.notBwoser) {
-        //   this.$toast('非小程序和App设备!');
-        //   return;
-        // }
         let options = await this.getShareData();
-        console.log(options, isWxMp, isApp);
 
         // 判断是否时小程序平台
-        if (isWxMp) {
+        if (!isWxMp) {
           this.showShare = true;
         }
         // 判断是否是App
-        if (isApp) {
+        if (!isApp) {
           this.shareAppChange(options);
-          console.log('App');
         }
       } catch (err) {
+        console.log(err);
         this.$toast('调用分享失败!');
       }
     },
 
     async getShareData() {
-      return Promise.resolve(1);
+      return Promise.resolve({
+        title: '随便砍砍就能拿，价格你来定',
+        desc: '我正在免费拿商品，请你帮帮我',
+        link: `${window.location.origin}/activity/zeroBuy`, // 页面地址
+        imgUrl: 'https://appsync.lkbang.net/shareIcon.png' // 图片地
+      });
       // await
     },
 

src/views/goodsList/index.less

 .group {
   font-size: @font-size-14;
+  position: relative;
   &-top {
     height: 380px;
   }
-  &-share {
-    position: fixed;
+  &-puzzle {
+    position: absolute;
     right: 0;
     top: 10px;
     z-index: 1;
@@ -13,6 +14,28 @@
     border-radius: 16px 0 0 16px;
     padding: 6px 12px 6px 16px;
   }
+  &-share {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 44px;
+    height: 44px;
+    position: fixed;
+    right: 12px;
+    bottom: 60px;
+    z-index: 1;
+    background-color: #ffffff;
+    border: #ebebeb 1px solid;
+    border-radius: 50%;
+    &-icon {
+      width: 16px;
+      height: 16px;
+    }
+    &-text {
+      font-size: @font-size-12;
+    }
+  }
   &-bottom {
     padding-left: 12px;
     padding-right: 12px;

src/views/goodsList/index.vue

 <template>
   <!-- 配置活动背景色 -->
   <div class="group" :style="{ backgroundColor: topicCfg.bgcolor }">
-    <div class="group-share" @click="openShareEvent">我的拼团</div>
+    <div v-if="!isShowShare" class="group-puzzle" @click="openShareEvent">我的拼团</div>
     <!-- 配置头部动态信息 start -->
     <div class="group-top">
       <!-- 动态活动背景图 -->
@@ -53,10 +53,17 @@
       </div>
       <!-- 下方列表展示信息 end -->
     </div>
+    <dl v-if="!isShowShare" class="group-share" @click="openShareEvent">
+      <dt class="group-share-icon">
+        <cr-image src="@/assets/images/share.png" />
+      </dt>
+      <dd class="group-share-text">分享</dd>
+    </dl>
     <goods-share ref="gdShare" />
   </div>
 </template>
 <script>
+import { mapState } from 'vuex';
 import store from '@/store';
 import groupBuyApi from '@/api/groupBuy';
 import goodsShare from '@/components/groupShare';
@@ -118,6 +125,14 @@ export default {
     };
   },
   computed: {
+    ...mapState({
+      isPrimordialBrowser: state => state.pay.isPrimordialBrowser,
+      isWeixinBrowser: state => state.pay.isWeixinBrowser
+    }),
+    isShowShare() {
+      return this.isPrimordialBrowser || this.isWeixinBrowser;
+    },
+
     // 更具goodsSpecialId 获取查询活动模板列表-对应数据项
     topicCfg() {
       const { topicList, topicIndex } = this;
@@ -131,6 +146,7 @@ export default {
     }
   },
   created() {
+    console.log(this.isShowShare);
     this.hasLogin = !!localStorage.get('vccToken');
   },
   mounted() {