feat(backtop):返回顶部支持分享

app/controller/activity.ts

@@ -2,20 +2,20 @@ import { Controller, Context } from 'egg';
 export default class ActivityController extends Controller {
 
   public async home(ctx: Context) {
-    const redisKey = `quantum-blocks:page:${ctx.params.id}`;
-    let body = await ctx.service.redis.get(redisKey);
-    if (body) {
-      ctx.logger.info('请求redis成功 key: %j', redisKey);
-    }
-    if (!body) {
-      let apollo = {};
-      if (process.env.NODE_ENV === 'production' && process.env.EGG_SERVER_ENV === 'sit') {
-        apollo = ctx.app.config.apollo || {};
-      }
-      body = await ctx.renderView('activity.js', { url: ctx.url, apollo });
-      await ctx.service.redis.set(redisKey, body);
-    }
-    ctx.body = body;
-    // ctx.body = await ctx.renderView('activity.js', { url: ctx.url });
+    // const redisKey = `quantum-blocks:page:${ctx.params.id}`;
+    // let body = await ctx.service.redis.get(redisKey);
+    // if (body) {
+    //   ctx.logger.info('请求redis成功 key: %j', redisKey);
+    // }
+    // if (!body) {
+    //   let apollo = {};
+    //   if (process.env.NODE_ENV === 'production' && process.env.EGG_SERVER_ENV === 'sit') {
+    //     apollo = ctx.app.config.apollo || {};
+    //   }
+    //   body = await ctx.renderView('activity.js', { url: ctx.url, apollo });
+    //   await ctx.service.redis.set(redisKey, body);
+    // }
+    // ctx.body = body;
+    ctx.body = await ctx.renderView('activity.js', { url: ctx.url });
   }
 }
\ No newline at end of file

app/web/page/activity/component/BackTop/index.vue

+<template>
+  <div>
+    <cr-back-top :show-back-top="showBackTop && pageData.props.showBackTop" :list="backTopList" @click="handleBackTopClick" ref="crBackTop" />
+    <cr-popover
+      class="wxmp-tip"
+      :value="showMpTip"
+      placement="bottom-end"
+    >
+      <div class="wxmp-tip__content" ref="content">
+        点击“<cr-icon type="weapp-nav" />”分享当前页面
+      </div>
+      <template #reference>提示</template>
+    </cr-popover>
+  </div>
+
+</template>
+<script>
+import Bridge from '@qg/js-bridge';
+import { mapGetters } from 'vuex';
+import { isApp, isWxMp } from '@/service/utils.service';
+const SHARE_CONFIG = {
+  name: 'share',
+  txt: '',
+  icon: 'share',
+  url: '',
+};
+export default {
+  name: 'BackTop',
+  props: {
+    showBackTop: Boolean
+  },
+  computed: {
+    ...mapGetters(['pageData']),
+    ...mapGetters(['pageInfo']),
+    backTopList() {
+      if (this.pageData && this.pageData.props && this.pageData.props.btAttachVal) {
+        const { btAttachVal, showShare } = this.pageData.props;
+        showShare && btAttachVal.push(SHARE_CONFIG);
+        return btAttachVal;
+      }
+      return [];
+    }
+  },
+  data() {
+    return {
+      renderTpl: false,
+      showMpTip: false,
+      tipTimer: null,
+      jsBridge: null,
+      wx: null,
+    };
+  },
+  created() {
+    if (!EASY_ENV_IS_NODE) {
+      this.renderTpl = true;
+      this.jsBridge = new Bridge();
+      this.wx = require('weixin-js-sdk');
+    }
+  },
+  methods: {
+    handleBackTopClick(e) {
+      // ! 此处以1.3为准，但需要对齐分享功能
+      if (e && e.name === 'share') {
+        if (this.tipTimer) {
+          clearTimeout(this.tipTimer);
+        }
+        this.tipTimer = setTimeout(() => {
+          this.share();
+        }, 600);
+      }
+    },
+    share() {
+      if (EASY_ENV_IS_NODE) return;
+      const { coverImage, pageName, pageDescribe } = this.pageInfo;
+      const data = {
+        event: "showShareView",
+        data: {
+          platform: ["weChat", "timeLine", "QQ", "QQZone", "CopyLink"], //依次分别是微信、朋友圈、QQ好友、QQ空间、复制链接
+          shareDic: {
+            title: pageName || '羊小咩',
+            desc: pageDescribe || '羊小咩',
+            link: window.location.origin + window.location.pathname, // 页面地址
+            imgUrl: coverImage // 图片地址
+          }
+        }
+      };
+      if (isApp) {
+        this.appShare(data);
+      } else if (isWxMp) {
+        this.mpShare(data);
+      }
+    },
+    appShare(data) {
+      this.jsBridge.showShareView(data);
+    },
+    mpShare(data) {
+      this.wx.miniProgram.postMessage(data);
+      this.showMpTip = true;
+      setTimeout(() => {
+        this.showMpTip = false;
+      }, 10000);
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+@deep: ~'>>>';
+.wxmp-tip {
+  position: fixed !important;
+  top: -32px;
+  right: 10%;
+  z-index: 99;
+  @{deep} .cr-popover {
+    background-color: #fff;
+    color: #333;
+    box-shadow: 0 2px 12px 0 rgba(100, 101, 102, 28%);
+    &__reference {
+      font-size: 0;
+    }
+    &__angle::before {
+      border-color: transparent transparent rgb(255 255 255);
+    }
+  }
+  &__content {
+    width: 160px;
+    .cr-icon--weapp-nav {
+      vertical-align: sub;
+      margin: 0 5px;
+    }
+  }
+}
+</style>
\ No newline at end of file

app/web/page/activity/view/activity/index.ts

@@ -2,6 +2,7 @@ import { Vue, Component, Watch, Provide, Mixins } from 'vue-property-decorator';
 import { Getter, State, Mutation } from 'vuex-class';
 import FreedomContainer from '../../component/FreedomContainer/index.vue';
 import PageBottomTip from '../../component/PageBottomTip/index.vue';
+import BackTop from '../../component/BackTop/index.vue';
 import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
@@ -10,7 +11,7 @@ import { getStyle, debounce, isApp } from '@/service/utils.service';
 import { EventBus } from '@qg/citrus-ui/src/helper/service/eventBus';
 import { setAppTitleColor } from '@/service/color.service';
 import localStorage from '@/service/localStorage.service';
-@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip }, name: 'Activity'})
+@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   @Getter('pageData') pageData;
   @State(state => state.activity.pageInfo.pageName) pageName;
@@ -30,7 +31,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   };
   isLayoutComReady = false;
   showBackTop = false;
-
   targetEle: HTMLElement | null = null;
   loading: boolean = true;
   modfiTabsStyleDebounce = debounce(this.modfiTabsStyle, 300);
@@ -39,10 +39,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
     return this.pageData && this.pageData.elements.map(v => v.point) || [];
   }
 
-  get backTopList() {
-    return isApp && this.pageData && this.pageData.props.btAttachVal ? this.pageData.props.btAttachVal : [];
-  }
-
   @Watch('pageData', { deep: true })
   onPageDataChange(val) {
     const lastGridItem = val.elements[val.elements.length - 1];
@@ -87,7 +83,9 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
 
   mounted() {
     this.targetEle = document.querySelector('body');
+    if (EASY_ENV_IS_BROWSER) {
       this.showBackTop = true;
+    }
     this.pageVisibilityChange();
     if (EASY_ENV_IS_BROWSER) {
       EventBus.$on('NATIVE_EVENT_LOGIN', json => {
@@ -127,7 +125,6 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   dot(title) {
     console.log(title, '点击了');
   }
-
   layoutReadyEvent(newLayout) {
     this.$nextTick(() => {
       console.log('layoutReadyEvent');

app/web/page/activity/view/activity/index.vue

@@ -39,11 +39,12 @@
         <page-bottom-tip />
       </grid-item>
   	</grid-layout>
-    <cr-back-top v-if="showBackTop && pageData.props.showBackTop" :list="backTopList" />
+    <back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" />
   </div>
 </template>
 <script lang="ts" src="./index.ts"></script>
 <style lang="less" scoped>
+  @deep: ~'>>>';
   .activity {
     width: 100%;
     min-height: 100%;
@@ -77,4 +78,29 @@
     overflow: visible !important;
     transform: none !important;
   }
+  .wxmp-tip {
+    position: fixed !important;
+    top: -32px;
+    right: 10%;
+    z-index: 99;
+    @{deep} .cr-popover {
+      background-color: #fff;
+      color: #333;
+      box-shadow: 0 2px 12px 0 rgba(100, 101, 102, 28%);
+      &__reference {
+        font-size: 0;
+      }
+      &__angle::before {
+        border-color: transparent transparent rgb(255 255 255);
+      }
+    }
+    &__content {
+      width: 160px;
+      .cr-icon--weapp-nav {
+        vertical-align: sub;
+        margin: 0 5px;
+      }
+    }
+  }
+
 </style>

app/web/service/qg.service.ts

@@ -42,9 +42,13 @@ import citrusUi from '@qg/citrus-ui';
 import Loading from '@qg/cherry-ui/src/loading';
 import Text from '@qg/cherry-ui/src/text';
 import Tag from '@qg/cherry-ui/src/tag';
+import Popover from '@qg/cherry-ui/src/popover';
+import Icon from '@qg/cherry-ui/src/icon';
 
 Vue.use(Button);
 Vue.use(Image);
+Vue.use(Popover);
+Vue.use(Icon);
 // Vue.use(Cell);
 // Vue.use(CellGroup);
 // Vue.use(Row);

app/web/service/sa.service.ts

 import Vue from 'vue';
-import sa from 'sa-sdk-javascript';
 import config from '@/config';
 import Storage from '@/service/localStorage.service';
 import { getParameterByName, isWxMp, isApp } from '@/service/utils.service';
@@ -9,6 +8,7 @@ export function initSa(router) {
   const activityId = window.location.pathname.split('/')?.[2] || '';
   const vccChannel = getParameterByName('vccChannel') || getParameterByName('registerFrom');
   const sonVccChannel = getParameterByName('sonVccChannel');
+  const sa = require('sa-sdk-javascript');
   sa.init({
     server_url: config.shenceUrl,
     heatmap: {
@@ -38,11 +38,13 @@ export function initSa(router) {
 }
 
 export function registeredEvents(eventName, eventData) {
+  const sa = require('sa-sdk-javascript');
   sa.track(eventName, eventData);
 }
 // 用户登录神策埋点
 export function loginSa(uuid = Storage.get('uuid')) {
   if (!uuid) { return; }
   Storage.set('uuid', uuid);
+  const sa = require('sa-sdk-javascript');
   sa.login(uuid);
 }