feat:分享--登录校验

src/App.vue

@@ -9,6 +9,7 @@
       <cr-loading class="loading" size="24px">加载中...</cr-loading>
     </div>
     <net-error />
+    <goods-share ref="gdShare" />
   </div>
 </template>
 <script>
@@ -17,11 +18,14 @@ import NetError from '@/components/NetError';
 import { isApp, isWxMp, isWechat } from '@/service/validation.service';
 import store from '@/store';
 import Weapp from '@/components/weapp';
+import goodsShare from '@/components/groupShare';
+
 export default {
   name: 'App',
   components: {
     NetError,
-    Weapp
+    Weapp,
+    goodsShare
   },
   data() {
     return {};

src/api/groupBuy.js

@@ -22,16 +22,19 @@ export default {
   getTemplateList(activityId) {
     return http.get(
       `http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/template-list`,
-      { params: { activityId } }
+      {
+        // return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/template-list`, {
+        params: { activityId }
+      }
     );
   },
   // 入口活动列表
   getGoodsList(params) {
     return http.get(
       `http://yapi.quantgroups.com/mock/351/api/kdsp/activity/activity-goods-special/goods-list`,
-      { params },
       {
-        hideLoading: true
+        // return http.get(`${talosHost}/api/kdsp/activity/activity-goods-special/goods-list`, {
+        params
       }
     );
   },

src/components/groupShare.vue

@@ -9,17 +9,17 @@
   </div>
 </template>
 <script>
-import { isWxMp, isApp } from '@/service/validation.service';
-import Bridge from '@qg/js-bridge';
 import MpBridge from '@/service/mp';
+import { mapState } from 'vuex';
 export default {
   name: 'GroupShare',
   components: {},
   props: {},
   data() {
     return {
+      showFlag: false,
+      shareOptions: null,
       nativeBridge: null,
-      showShare: false,
       types: [
         { value: 'weixin', disabled: false },
         { value: 'pic', disabled: false }
@@ -27,66 +27,53 @@ export default {
     };
   },
   computed: {
-    notBwoser() {
-      return !isWxMp && !isApp;
+    ...mapState({
+      shareInfo: state => state.pay.shareInfo
+    }),
+    showShare: {
+      get() {
+        return this.$store.state.pay.showShare;
+      },
+      set() {
+        this.$store.dispatch('goods_share_close');
+      }
     }
   },
   watch: {},
   created() {
-    if (isApp) this.nativeBridge = new Bridge();
-    else if (isWxMp) this.nativeBridge = new MpBridge();
+    // 如果是小程序直接调用postMessage像小程序派发事件监听
+    this.nativeBridge = new MpBridge();
   },
   methods: {
-    async open() {
-      try {
-        let options = await this.getShareData();
-
-        // 判断是否时小程序平台
-        if (!isWxMp) {
-          this.showShare = true;
-        }
-        // 判断是否是App
-        if (!isApp) {
-          this.shareAppChange(options);
-        }
-      } catch (err) {
-        console.log(err);
-        this.$toast('调用分享失败!');
-      }
-    },
-
-    async getShareData() {
-      return Promise.resolve({
-        title: '随便砍砍就能拿，价格你来定',
-        desc: '我正在免费拿商品，请你帮帮我',
-        link: `${window.location.origin}/activity/zeroBuy`, // 页面地址
-        imgUrl: 'https://appsync.lkbang.net/shareIcon.png' // 图片地
-      });
-      // await
-    },
-
-    shareCloseChange() {
-      this.$emit('hideShare', false);
-    },
+    shareCloseChange() {},
     bundleShareClickItem(ev) {
-      console.log(ev);
-      console.log(this.nativeBridge);
-    },
-    shareAppChange({ title, desc, link, imgUrl }) {
-      const data = {
-        event: 'showShareView',
-        data: {
-          platform: ['weChat', 'timeLine', 'QQ', 'QQZone', 'CopyLink'], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
-          shareDic: {
-            title,
-            desc,
-            link, // 页面地址
-            imgUrl // 图片地址
+      if (ev === 'pic') {
+        this.nativeBridge.openNewUrl({
+          newUrl: `/pages/goodshare/index?ev=${ev}`
+        });
+      }
+      if (ev === 'weixin') {
+        this.nativeBridge.run({
+          event: 'showShareView',
+          data: {
+            shareDic: this.shareInfo
           }
+        });
+        this.shareDialogConfirm();
+      }
+    },
+    shareDialogConfirm() {
+      this.$dialog({
+        message: '请在微信小程序中参与此活动哦~',
+        showCancelButton: false,
+        confirmButtonText: '我知道了哦～',
+        onConfirm: () => {
+          // todo 跳转到小程序
+          this.$toast('确定');
         }
-      };
-      this.nativeBridge.showShareView(data);
+      });
     }
+    // shareAppChange() {}
   }
 };
 </script>

src/mixins/goodsCheck.mixin.js

+import Bridge from '@qg/js-bridge';
+import MpBridge from '@/service/mp';
+import { isWxMp, isApp } from '@/service/validation.service';
+import localStorage from '@/service/localStorage.service';
+export default {
+  data() {
+    return {
+      nativeBridge: null
+    };
+  },
+  methods: {
+    getToken() {
+      const that = this;
+      window.xyqbNativeEvent = function(res) {
+        const json = typeof res === 'string' ? JSON.parse(res) : res;
+        if (json.event === 'getTokenSuccess') {
+          const appData = json.data || {};
+          if (appData && appData.token) {
+            localStorage.get('vccToken', appData.token);
+            that.$nextTick(() => {
+              window.location.reload();
+            });
+          }
+        }
+      };
+      this.nativeBridge.getToken();
+    },
+    checkLogin() {
+      const vccToken = localStorage.get('vccToken');
+      alert(vccToken);
+      const needLogin = vccToken ? false : true;
+      // alert(vccToken);
+      // alert(needLogin);
+      if (needLogin) {
+        if (isApp) this.nativeBridge = new Bridge();
+        else if (isWxMp) this.nativeBridge = new MpBridge();
+        this.$dialog({
+          message: '参与拼团活动需要您先进行登录哦~',
+          title: '',
+          showCancelButton: false,
+          confirmButtonText: '登录',
+          onConfirm: () => {
+            if (isWxMp) {
+              this.nativeBridge.getToken();
+            } else if (isApp) {
+              // native调用getToken
+              this.getToken();
+            } else {
+              this.$dialog({
+                message: '请在App或小程序中参与活动~',
+                title: '',
+                showCancelButton: false,
+                confirmButtonText: '我知道了'
+              });
+            }
+          }
+        });
+      }
+      return needLogin;
+    }
+  }
+};

src/service/utils.service.js

 import { isAndroid, isIOS } from './validation.service';
+import Bridge from '@qg/js-bridge';
 import Vue from 'vue';
 
 export const EventBus = new Vue();
@@ -335,3 +336,19 @@ export function getQueryString(name) {
   if (r != null) return unescape(r[2]);
   return null;
 }
+
+export function appShareEventChange({ title, desc, link, imgUrl }) {
+  const data = {
+    event: 'showShareView',
+    data: {
+      platform: ['weChat', 'timeLine', 'QQ', 'QQZone', 'CopyLink'], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
+      shareDic: {
+        title,
+        desc,
+        link, // 页面地址
+        imgUrl // 图片地址
+      }
+    }
+  };
+  Bridge.showShareView(data);
+}

src/store/module.js

 import * as types from './type';
 import groupBuy from '@/api/groupBuy';
+import { isWxMp, isApp } from '@/service/validation.service';
+import { appShareEventChange } from '@/service/utils.service';
 const state = {
   header: true,
   title: '支付中心',
@@ -7,7 +9,9 @@ const state = {
   meta: {},
   keepAliveMap: [],
   isPrimordialBrowser: false, // 是否是原生浏览器
-  isWeixinBrowser: false // 是否是微信浏览器
+  isWeixinBrowser: false, // 是否是微信浏览器
+  showShare: false, // 是否打开底部分享showShare
+  shareInfo: {} // 分享信息
 };
 
 // getters
@@ -35,6 +39,12 @@ const actions = {
   },
   change_is_weixin_browser({ commit }, bool) {
     commit(types.CHANGE_IS_WEIXIN_BROWSER, bool);
+  },
+  goods_share_open({ commit }, options) {
+    commit(types.GOODS_SHARE_OPEN, options);
+  },
+  goods_share_close({ commit }) {
+    commit(types.GOODS_SHARE_CLOSE);
   }
 };
 
@@ -98,6 +108,18 @@ const mutations = {
         }
       });
     }
+  },
+  [types.GOODS_SHARE_OPEN](state, options) {
+    if (isWxMp) {
+      state.shareInfo = options;
+      state.showShare = true;
+    }
+    if (isApp) {
+      appShareEventChange(options);
+    }
+  },
+  [types.GOODS_SHARE_CLOSE](state) {
+    state.showShare = false;
   }
 };
 

src/store/type.js

@@ -7,3 +7,5 @@ export const CHANGE_IS_WEIXIN_BROWSER = 'CHANGE_IS_WEIXIN_BROWSER';
 export const ADD_KEEP_ALIVE = 'ADD_KEEP_ALIVE';
 export const DEL_KEEP_ALIVE = 'DEL_KEEP_ALIVE';
 export const CLEAR_KEEP_ALIVE = 'CLEAR_KEEP_ALIVE';
+export const GOODS_SHARE_OPEN = 'GOODS_SHARE_OPEN';
+export const GOODS_SHARE_CLOSE = 'GOODS_SHARE_CLOSE';

src/views/goodsList/index.less

@@ -2,7 +2,7 @@
   font-size: @font-size-14;
   position: relative;
   &-top {
-    height: 380px;
+    height: 375px;
   }
   &-puzzle {
     position: absolute;

src/views/goodsList/index.vue

 <template>
   <!-- 配置活动背景色 -->
   <div class="group" :style="{ backgroundColor: topicCfg.bgcolor }">
-    <div v-if="!isShowShare" class="group-puzzle" @click="openShareEvent">我的拼团</div>
+    <div v-if="!isShowShare" class="group-puzzle" @click="goToMyorder">我的拼团</div>
     <!-- 配置头部动态信息 start -->
     <div class="group-top">
       <!-- 动态活动背景图 -->
@@ -59,14 +59,11 @@
       </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';
 import countDown from '@/components/countDown';
 import swipeCustomerInfo from '@/components/swipeCustomerInfo';
 import gpImagePath from '@/assets/images/groupBuy/bg-top.png';
@@ -75,14 +72,13 @@ 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';
 let topicIndex;
 export default {
-  // beforeRouteEnter(to, from, next) {
-  //   next(vm => {});
-  // },
   // eslint-disable-next-line vue/name-property-casing
   name: 'groupBuyList',
-  components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper, goodsShare },
+  components: { countDown, swipeCustomerInfo, goodsCard, groupSwiper },
+  mixins: [goodsCheckMixin],
   data() {
     return {
       showShare: false,
@@ -125,12 +121,8 @@ export default {
     };
   },
   computed: {
-    ...mapState({
-      isPrimordialBrowser: state => state.pay.isPrimordialBrowser,
-      isWeixinBrowser: state => state.pay.isWeixinBrowser
-    }),
     isShowShare() {
-      return this.isPrimordialBrowser || this.isWeixinBrowser;
+      return this.$store.state.pay.isPrimordialBrowser;
     },
 
     // 更具goodsSpecialId 获取查询活动模板列表-对应数据项
@@ -146,8 +138,9 @@ export default {
     }
   },
   created() {
-    console.log(this.isShowShare);
-    this.hasLogin = !!localStorage.get('vccToken');
+    // console.log(this.isShowShare);
+    // console.log(this.activityId);
+    // this.hasLogin = !!localStorage.get('vccToken');
   },
   mounted() {
     // todo 曝光埋点
@@ -177,8 +170,26 @@ export default {
     }
   },
   methods: {
-    openShareEvent() {
-      this.$refs.gdShare.open();
+    async goToMyorder() {
+      const isLogin = this.checkLogin();
+      console.log(isLogin);
+      // const isLogin = await this.checkLogin();
+      // console.log(isLogin);
+      // if (isApp) this.nativeBridge = new Bridge();
+      // else if (isWxMp) this.nativeBridge = new MpBridge();
+    },
+    async openShareEvent() {
+      let options = await this.getShareData();
+      this.$store.dispatch('goods_share_open', options);
+    },
+    async getShareData() {
+      return Promise.resolve({
+        title: '随便砍砍就能拿，价格你来定',
+        desc: '我正在免费拿商品，请你帮帮我',
+        link: `${window.location.origin}/activity/zeroBuy`, // 页面地址
+        imgUrl: 'https://appsync.lkbang.net/shareIcon.png' // 图片地
+      });
+      // await
     },
     avatorTimeSyncChange() {
       setInterval(() => {
@@ -284,6 +295,7 @@ async function getActivityList(urlQuery, next) {
       vm.activityId = activityId;
       vm.topicList = list;
       vm.topicIndex = activityIndex;
+      localStorage.set('activityId', activityId);
       // const { hasStop } = vm.topicCfg;
       // if (hasStop || !list.length) {
       //   vm.showOverTip = true;