feat: 增加活动结束提示弹窗

app/controller/activity.ts

@@ -6,7 +6,10 @@ export default class ActivityController extends Controller {
     const apollo = ctx.app.config.apollo || {};
     let body = '';
     // 获取服务器端当前时间，用于与页面有效期做对比
-    const serverTimeStamp = new Date().getTime();
+    const currentTime = new Date().getTime();
+    const offsetTime = new Date(currentTime).getTimezoneOffset();
+    const serverTimeStamp = currentTime - offsetTime;
+    
     if (process.env.NODE_ENV === 'development') {
         body = await ctx.renderToHtml('activity.js', { url: ctx.url, apollo, serverTimeStamp });
     } else {

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

@@ -158,7 +158,6 @@ export default {
     },
     initShareInfo() {
       if (EASY_ENV_IS_NODE) return;
-      console.log(this.pageInfo, 'this.pageInfo')
       let shareCoverImage = '';
       try {
         shareCoverImage = this.pageInfo.page.props.shareCoverImage;

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

+<template>
+  <cr-popup v-model="show" round>
+    <div class="content">
+      <img src="https://img.lkbang.net/activityInvalid.18ea3ddc.png" alt="">
+      <p class="title">活动已结束</p>
+      <p class="subtitle">请关注更多精彩活动</p>
+      <cr-button type="primary" shape="circle" @click="toOtherActivity">去看看其他活动</cr-button>
+    </div>
+    <!-- <cr-icon type="close" size="34px" color="#FFF" @click="close" /> -->
+  </cr-popup>
+</template>
+<script>
+export default {
+  name: 'InvalidNotice',
+  props: {
+    value: Boolean,
+  },
+  data() {
+    return {
+      show: false,
+    }
+  },
+  methods: {
+    toOtherActivity() {
+      this.$emit('toOtherActivity')
+    }
+  },
+  watch: {
+    value(val) {
+      this.show = val;
+    }
+  },
+}
+</script>
+<style lang="less" scoped>
+@deep: ~'>>>';
+.content{
+  width: 311px;
+  height: 360px;
+  background: #fff;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 0;
+  img{
+    display: block;
+    width: 162px;
+  }
+  .title{
+    font-size: 17px;
+    margin-top: 20px;
+    color:#333;
+  }
+  .subtitle{
+    margin: 12px auto 26px;
+    font-size: 12px;
+    color:#999;
+  }
+  button{
+    width: 236px;
+  }
+}
+.cr-popup {
+  background-color: transparent;
+  border-radius: 0;
+}
+.cr-icon {
+  display: block;
+  margin: 20px auto 0;
+}
+</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 BackTop from '../../component/BackTop/index.vue';
+import InvalidNotice from '../../component/invalidNotice/index.vue';
 import EmptyState from '../../component/EmptyState/index.vue';
 import PageBottomTip from '../../component/PageBottomTip/index.vue';
 import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
@@ -20,7 +21,7 @@ import Bridge from '@qg/js-bridge';
 import MpBridge from '@qg/citrus-ui/src/helper/service/mp';
 import navigatorApi from '@/api/navigator.api';
 import editorApi from '@/api/editor.api';
-@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, EmptyState }, name: 'Activity'})
+@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, InvalidNotice, EmptyState }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyleMixin, SaMixin, DisableTouchMixin) {
 
   @Getter('pageData') pageData;
@@ -37,7 +38,7 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
 
   @Provide() editor = this;
   isEditor: boolean = false;
-  pageExpire: boolean = false;
+  pageInvalid: boolean = false;
   bottomInfo: object = {
     x: 0,
     y: 0,
@@ -152,13 +153,48 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
     this.comparePageTime(); // 验证活动是否在设定的有效期范围内
   }
   comparePageTime() {
-    console.log(this.serverTimestamp);
-    // this.pageExpire
-    console.log(this.pageInfo);
     const { validStartTime, validEndTime, redirectUrl } = this.pageInfo;
     if (validStartTime && validEndTime) {
       // todo 当设置了页面的有效时间起止，用当前服务器返回的时间作对比，判断页面是否在有效期内
-      // if (this.serverTimeStamp < this.)
+      const startTime = new Date(validStartTime).getTime();
+      const endTime = new Date(validEndTime).getTime();
+      if (this.serverTimestamp < startTime || this.serverTimestamp > endTime) {
+        this.pageInvalid = true;
+      }
+    }
+  }
+  toOtherActivity() {
+    const { redirectUrl } = this.pageInfo;
+    let nativeBridge;
+    let mpBridge;
+    if (isApp) {
+      nativeBridge = new Bridge();
+      nativeBridge.openNewUrl({
+        data: {
+          // 需要打开的新链接
+          newUrl: redirectUrl ? redirectUrl : home.app,
+        },
+      });
+    } else if (isWxMp) {
+      mpBridge = new MpBridge();
+      const jumpConfig: any = {
+        // 需要打开的新链接
+        newUrl: redirectUrl ? redirectUrl : home.wxmp,
+      };
+      if (!redirectUrl) { jumpConfig.type = 'switchTab'; }
+      mpBridge.openNewUrl(jumpConfig);
+    } else {
+      if (!redirectUrl) { return; }
+      let url = redirectUrl;
+      const token = localStorage.get('vccToken') || '';
+      const { vccChannel, fromHost } = this.$route.query;
+      if (!isApp && !isWxMp) {
+        if (vccChannel) { url = this.addOrEditUrlParams(url, 'vccChannel', vccChannel); }
+        if (fromHost) { url = this.addOrEditUrlParams(url, 'fromHost', fromHost); }
+      }
+      if (token) { url = this.addOrEditUrlParams(url, 'vccToken', token); }
+      window.location.href = url;
+      return;
     }
   }
   async getNavigatorConfig(navId, index) {
@@ -441,7 +477,3 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
       //   if (fromHost) { url = this.addOrEditUrlParams(url, 'fromHost', fromHost); }
       //   window.location.href = url;
       // }
-    }
-
-  }
-}

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

 <template>
   <div class="pageContent">
-    <!-- {{pageInfo}} -->
     <div class="activity" :class="{hasBottomNav: navigatorConfig}" :style="transformStyle(pageData.commonStyle)">
       <template v-if="!noPageData && tenantIdCorrect">
         <div class="layout">
@@ -24,6 +23,7 @@
           </div>
         </div>
         <back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" />
+        <invalid-notice v-model="pageInvalid" @toOtherActivity="toOtherActivity"/>
       </template>
       <empty-state v-else />
     </div>

app/web/service/qg.service.ts

@@ -14,6 +14,7 @@ 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 Popup from '@qg/cherry-ui/src/popup';
 import Icon from '@qg/cherry-ui/src/icon';
 import Empty from '@qg/cherry-ui/src/empty';
 import NoticeBar from '@qg/cherry-ui/src/notice-bar';
@@ -34,7 +35,7 @@ Vue.use(Tag);
 Vue.use(Popover);
 Vue.use(Icon);
 Vue.use(Empty);
-
+Vue.use(Popup);
 Vue.use(citrusUi);
 
 Vue.prototype.$notify = Notify;