feat(bottomTip): 底部提示语

app/controller/activity.ts

@@ -3,18 +3,18 @@ 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 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);
-    }
+    //   if (process.env.NODE_ENV === 'production' && process.env.EGG_SERVER_ENV === 'sit') {
+    //     apollo = ctx.app.config.apollo || {};
+    //   }
+      let body = await ctx.renderView('activity.js', { url: ctx.url, apollo });
+      // await ctx.service.redis.set(redisKey, body);
+    // }
     ctx.body = body;
   }
 }
\ No newline at end of file

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

+<template>
+  <div class="Pb-container">
+    <span class="Pb-text" :style="style">{{ txt }}</span>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  name: 'PageBottomTip',
+    computed: {
+    ...mapGetters(['pageData']),
+    txt() {
+      return this.pageData.props.pageBottomTxt;
+    },
+    style() {
+      return {
+        color: this.pageData.props.pageBottomColor
+      };
+    }
+  }
+}
+</script>
+<style lang="less">
+  .Pb {
+    &-container {
+      height: 60px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &-text {
+      font-size: 14px;
+      color: #333;
+    }
+  }
+</style>
\ No newline at end of file

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

 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 GridLayout from '../../component/VueGridLayout/GridLayout.vue';
 import GridItem from '../../component/VueGridLayout/GridItem.vue';
 import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
 import SaMixin from '@/page/mixins/sa.mixin';
 import { getStyle, debounce } from '@/service/utils.service';
 
-@Component({ components: { FreedomContainer, GridLayout, GridItem }, name: 'Activity'})
+@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   @Getter('pageData') pageData;
   @State(state => state.activity.pageInfo.pageName) pageName;
@@ -15,7 +16,8 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   @Mutation('SET_PAGE_ELEMENTS') setPageElement;
 
   @Provide() editor = this;
-
+  
+  bottomInfo: object = {};
   isLayoutComReady = false;
   showBackTop = false;
   targetEle: HTMLElement | null = null;
@@ -25,6 +27,21 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin) {
   get layout() {
     return this.pageData && this.pageData.elements.map(v => v.point) || [];
   }
+  @Watch('layout')
+  onLayoutChange(val) {
+    const lastGridItemPoint = val[val.length - 1];
+    if (lastGridItemPoint.w) {
+      this.bottomInfo = {
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 60,
+        i: 'page-bottom-top'
+      };
+      if (lastGridItemPoint.w > this.bottomInfo.w) { this.bottomInfo.w = lastGridItemPoint.w; }
+      this.bottomInfo.y = this.bottomInfo.y + lastGridItemPoint.y + lastGridItemPoint.h;
+    }
+  }
 
   @Watch('pageName', { immediate: true })
   onPageNameChange(newVal) {

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

@@ -16,18 +16,34 @@
       @layout-updated="layoutUpdatedEvent"
   	>
   	  <grid-item :style="transformStyle(item.commonStyle)" v-for="(item, index) in pageData.elements"
-  	             :x="item.point.x"
-  	             :y="item.point.y"
-  	             :w="item.point.w"
-  	             :h="item.point.h"
-  	             :i="item.point.i"
-  	             :key="item.point.i"
-                 @click.native="dot(item.title)"  
-                 >
-  	      <component :data-index="index" :id="item.id" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
+        :x="item.point.x"
+        :y="item.point.y"
+        :w="item.point.w"
+        :h="item.point.h"
+        :i="item.point.i"
+        :key="item.point.i"
+        @click.native="dot(item.title)"  
+      >
+        <component :data-index="index" :id="item.id" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
   	  </grid-item>
+      <grid-item
+        v-if="pageData.props.showPageBottomTip"
+        :x="bottomInfo.x"
+        :y="bottomInfo.y"
+        :w="bottomInfo.w"
+        :h="bottomInfo.h"
+        :i="bottomInfo.i"
+        :static="true"
+        :key="bottomInfo.i + pageData.elements.length"
+      >
+        <page-bottom-tip />
+      </grid-item>
   	</grid-layout>
     <cr-back-top v-if="showBackTop && pageData.props.showBackTop" />
+    <div class="page-bottom">
+      <p><img src="" /></p>
+      <p>没有更多啦～</p>
+    </div>
   </div>
 </template>
 <script lang="ts" src="./index.ts"></script>