feat: tab页面修改

app/web/api/navigator.api.ts

+import http from '../service/http.service';
+import config from '../config';
+
+export default {
+  getDetailById(params) {
+    return http.get(`${config.apiHost}/navigator/detail?navId=${params}`);
+  }
+};
\ No newline at end of file

app/web/config/nav.config.ts

+export const home = {
+  app: 'xyqb://homepage',
+  wxmp: '/pages/index/index',
+  h5: 'https://xincheng.q-gp.com/'
+};
+
+export const shopcart = {
+  app: 'xyqb://shoppingCartTab',
+  wxmp: '/pages/shopcart/index',
+  h5: 'https://xincheng.q-gp.com/shopCart'
+};
+
+export const user = {
+  app: 'xyqb://my',
+  wxmp: '/pages/user/user',
+  h5: 'https://xincheng.q-gp.com/user'
+};
\ No newline at end of file

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

@@ -159,7 +159,8 @@ export default {
     initShareInfo() {
       if (EASY_ENV_IS_NODE) return;
       const { coverImage, pageName, pageDescribe, shareCoverImage } = this.pageInfo;
-      const link = `${window.location.origin}${window.location.pathname}?vccToken={token}&tenantId=${localStorage.get('tenantId') || ''}`;
+      let link = `${window.location.origin}${window.location.pathname}?vccToken={token}&tenantId=${localStorage.get('tenantId') || ''}`;
+      
       this.link = link;
       const defaultTitle = +localStorage.get('tenantId') === 560761 ? '羊小咩' : '活动页';
       this.shareInfo = {

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

@@ -7,15 +7,17 @@ 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 BottomNavStyleMixin from '@/page/mixins/BottomNavStyle.mixin';
 import SaMixin from '@/page/mixins/sa.mixin';
 import { getStyle, debounce, isApp, isWxMp, getParameterByName } from '@/service/utils.service';
 import DisableTouchMixin from '@/page/mixins/disableTouch.mixin';
 import { setAppTitleColor } from '@/service/color.service';
 import { EventBus } from '@qg/citrus-ui/src/helper/service/eventBus';
 import localStorage from '@/service/localStorage.service';
-
+import { home, shopcart, user } from '@/config/nav.config';
+import { isWxMp, isApp } from '@/service/utils.service';
 @Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, EmptyState }, name: 'Activity'})
-export default class Activity extends Mixins(TransformStyleMixin, SaMixin, DisableTouchMixin) {
+export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyleMixin, SaMixin, DisableTouchMixin) {
 
   @Getter('pageData') pageData;
   @State(state => state.activity.pageInfo.pageName) pageName;
@@ -23,6 +25,8 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin, Disab
   @State(state => state.activity.pageInfo.appLoginState) appLoginState;
   @State(state => state.activity.pageInfo.tenantId) tenantId;
   @State(state => state.activity.gridLayout.rowHeight) rowHeight;
+  @State(state => state.activity.navigatorConfig) navigatorConfig;
+  @State(state => state.activity.navIndex) navIndex;
   @Mutation('SET_PAGE_ELEMENTS') setPageElement;
   @Mutation('UPDATE_APP_LOGIN_STATE') updateAppLoginState;
 
@@ -102,6 +106,9 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin, Disab
     }
   }
   mounted() {
+    // console.log(this.$route, 'navIndex');
+    // const { index } = this.$route.query();
+    // console.log(this.navigatorConfig, 999);
     if (!isApp && !isWxMp && !EASY_ENV_IS_NODE) {
       this.pageData.elements = this.pageData.elements.filter(v => v.name !== 'cs-search-bar');
     }
@@ -125,9 +132,17 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin, Disab
     }
     this.layoutReadyEvent();
   }
-  fetchApi(options) {
+  async fetchApi(options) {
     const { store, route } = options;
     const { pageId } = route.params;
+    const { navId, index } = route.query;
+    // editor.navIndex = index ? index : -1;
+    if (navId) {
+      await store.dispatch('getNavigationConfig', navId);
+    }
+    if (index) {
+      await store.dispatch('setNavIndex', index);
+    }
     return store.dispatch('getPageDate', { pageId });
   }
   updateShopCartCount() {
@@ -254,4 +269,16 @@ export default class Activity extends Mixins(TransformStyleMixin, SaMixin, Disab
       }
     }
   }
+  handleNavUrl(nav, isCurrent) {
+    console.log(nav);
+    if (isCurrent) { return; }
+    const { pageType } = nav;
+    if (pageType == 1) {
+      // 功能页面
+      return;
+    } else {
+      // 活动页面及导航页面
+    }
+
+  }
 }

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

 <template>
-  <div class="activity" :style="transformStyle(pageData.commonStyle)">
-    <template v-if="!noPageData && tenantIdCorrect">
-      <div class="layout">
-        <div :style="transformStyle(item.commonStyle, item.point, item.name)" v-for="(item, index) in pageData.elements"
-          :key="fixGridKey(item)"
-           :id="`item_${item.id}`"
-          @click="dot(item.title)"
-          @touchend="disTouch"
-        >
-          <component :data-index="index" :id="item.id" :containerIndex="index" :component-data="item" :childItem="item" :is="item.name" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
-        </div>
-        <div
-          v-if="pageData.props.showPageBottomTip"
-          :id="bottomInfo.i + pageData.elements.length"
-          :key="bottomInfo.i + pageData.elements.length"
-        >
-          <page-bottom-tip />
+  <div class="pageContent">
+    <div class="activity" :class="{hasBottomNav: navigatorConfig}" :style="transformStyle(pageData.commonStyle)">
+      <template v-if="!noPageData && tenantIdCorrect">
+        <div class="layout">
+          <div :style="transformStyle(item.commonStyle, item.point, item.name)" v-for="(item, index) in pageData.elements"
+            :key="fixGridKey(item)"
+            :id="`item_${item.id}`"
+            @click="dot(item.title)"
+            @touchend="disTouch"
+          >
+            <component :data-index="index" :id="item.id" :containerIndex="index" :component-data="item" :childItem="item" :is="item.name" :sa-info="getSaInfo(item)" v-bind="item.props"></component>
+          </div>
+          <div
+            v-if="pageData.props.showPageBottomTip"
+            :id="bottomInfo.i + pageData.elements.length"
+            :key="bottomInfo.i + pageData.elements.length"
+          >
+            <page-bottom-tip />
+          </div>
         </div>
+        <back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" />
+      </template>
+      <empty-state v-else />
+    </div>
+    <!-- 底部导航 -->
+    <div v-if="navigatorConfig" class="bottomNav" :style="computedNavContainerStyle(navigatorConfig)">
+      <div
+        class="navItem"
+        :class="{pic: item.type == 2, current: +navIndex === index}"
+        v-for="(item, index) in navigatorConfig.navigatorData"
+        :key="index"
+        @click="handleNavUrl(item, +navIndex === index)"
+      >
+        <img class="icon" :src="+navIndex === index ? item.selectIcon : item.icon" alt="">
+        <span v-if="item.type == 1 && item.name"  class="text" :style="computedNavTextStyle(item, +navIndex === index)">{{item.name}}</span>
       </div>
-      <back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" />
-    </template>
-  	<empty-state v-else />
+    </div>
   </div>
 </template>
 <script lang="ts" src="./index.ts"></script>
 <style lang="less" scoped>
   @deep: ~'>>>';
-
+  .pageContent{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .bottomNav{
+      width: 100%;
+      height: 55px;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 99;
+      padding: 0 10px;
+      display: flex;
+      justify-content: space-around;
+      .navItem{
+        width: 50px;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        &.pic{
+          .icon{
+            max-width: 40px;
+            max-height: 40px;
+          }
+        }
+        .icon{
+          max-width: 35px;
+          max-height: 35px;
+        }
+        .text{
+          margin-top: 2px;
+          text-align: center;
+          font-size: 12px;
+        }
+      }
+    }
+  }
   .activity {
     width: 100%;
     min-height: 100%;
     background-color: rgb(244, 244, 244);
+    &.hasBottomNav{
+      padding-bottom: calc(constant(safe-area-inset-bottom) + 55px);
+      padding-bottom: calc(env(safe-area-inset-bottom) + 55px);
+    }
     // box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
     // overflow-x: hidden;
     // overflow-y: scroll;

app/web/page/mixins/BottomNavStyle.mixin.ts

+// 用于处理底部导航样式
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({ name: 'BottomNavStyleMixin' })
+
+export default class BottomNavStyleMixin extends Vue {
+  isHexColor(str) {
+    const reg = /^(?:#[A-Fa-f0-9]{3}|#[A-Fa-f0-9]{6})$/;
+    return reg.test(str);
+  }
+  computedNavContainerStyle(navGlobalConfig = {}) {
+    const style = {};
+    // 如果同时设置了背景色和背景图，优先使用背景图
+    const { bgColor, bgImg } = navGlobalConfig;
+    if (bgImg) {
+      style.backgroundImage = `url(${bgImg})`;
+      style.backgroundRepeat = 'no-repeat';
+      style.backgroundSize = 'cover';
+    } else if (!bgImg && bgColor) {
+      // 没有背景图 使用背景色
+      style.backgroundColor = bgColor.indexOf('#') === 0 ? bgColor : `#${bgColor}`;
+    } else {
+      // 默认白色背景
+      style.backgroundColor = '#fff';
+    }
+    return style;
+  }
+  computedNavTextStyle(navConfig = {}, isCurrent = false) {
+    const style = {};
+    const { color, selectColor } = navConfig;
+    if (isCurrent) {
+      style.color = selectColor && this.isHexColor(selectColor) ? selectColor : '#fff';
+    } else {
+      style.color = color && this.isHexColor(color) ? color : '#fff';
+    }
+    return style;
+    // if (co)
+  }
+}

app/web/page/store/modules/activity/index.ts

 import api from '@/api/editor.api';
+import navigatorApi from '@/api/navigator.api';
 import { Module, GetterTree, ActionTree, MutationTree } from 'vuex';
 import Vue from 'vue';
-import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS, SET_ELEMENT_POINT, UPDATE_APP_LOGIN_STATE, SET_EMPTY_PAGE } from './type';
+import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS, SET_ELEMENT_POINT, UPDATE_APP_LOGIN_STATE, SET_EMPTY_PAGE, SET_PAGE_NAVIGATOR_DATA, SET_PAGE_NAVIGATOR_INDEX } from './type';
 
 import RootState from '../../state';
 import EditorState, { PageInfo, defaultState, Page, PageElement } from './state';
@@ -28,6 +29,13 @@ export default class EditorModule implements Module<EditorState, RootState> {
       } else {
         commit(SET_EMPTY_PAGE, true);
       }
+    },
+    async getNavigationConfig({ commit }, condition) {
+      const [res] = await navigatorApi.getDetailById(condition);
+      commit(SET_PAGE_NAVIGATOR_DATA, res);
+    },
+    async setNavIndex({commit}, data) {
+      commit(SET_PAGE_NAVIGATOR_INDEX, data);
     }
   };
 
@@ -60,6 +68,12 @@ export default class EditorModule implements Module<EditorState, RootState> {
       const element = elements.find(ele => ele.id === id);
       if (element && data) { element.point = data; }
     },
+    [SET_PAGE_NAVIGATOR_DATA](state, data) {
+      state.navigatorConfig = data;
+    },
+    [SET_PAGE_NAVIGATOR_INDEX](state, data) {
+      state.navIndex = data;
+    },
   };
 
   constructor(initState: EditorState = JSON.parse(JSON.stringify(defaultState))) {

app/web/page/store/modules/activity/state.ts

@@ -53,6 +53,8 @@ export interface PageInfo {
 }
 
 export const defaultState = {
+  navigatorConfig: null,
+  navIndex: '',
   noPageData: false,
   curChildIndex: null,
   pageInfo: {
@@ -100,4 +102,6 @@ export default interface EditorState {
   templateList: any[];
   rowHeight: number;
   gridLayout: GridLayout;
+  navigatorConfig: any;
+  navIndex: any;
 }
\ No newline at end of file

app/web/page/store/modules/activity/type.ts

@@ -16,3 +16,5 @@ export const SET_PAGE_ELEMENTS = 'SET_PAGE_ELEMENTS';
 export const SET_ELEMENT_POINT = 'SET_ELEMENT_POINT';
 export const SET_EMPTY_PAGE = 'SET_EMPTY_PAGE';
 export const UPDATE_APP_LOGIN_STATE = 'UPDATE_APP_LOGIN_STATE';
+export const SET_PAGE_NAVIGATOR_DATA = 'SET_PAGE_NAVIGATOR_DATA';
+export const SET_PAGE_NAVIGATOR_INDEX = 'SET_PAGE_NAVIGATOR_INDEX';

config/apollo.json

 {
   "api": {
-    "apiHost": "https://quantum-blocks-test1.liangkebang.net",
-    "h5Host": "https://quantum-h5-test1.liangkebang.net",
-    "opapiHost": "https://opapi-test1.liangkebang.net",
-    "passportHost": "https://passportapi-test1.liangkebang.net",
-    "talosHost": "https://talos-test1.liangkebang.net",
-    "kdspHost": "https://kdsp-api-test1.liangkebang.net",
+    "apiHost": "https://quantum-blocks-bfe.liangkebang.net",
+    "h5Host": "https://quantum-h5-bfe.liangkebang.net",
+    "opapiHost": "https://opapi-bfe.liangkebang.net",
+    "passportHost": "https://passportapi-bfe.liangkebang.net",
+    "talosHost": "https://talos-bfe.liangkebang.net",
+    "kdspHost": "https://kdsp-api-bfe.liangkebang.net",
     "loginUrl": "",
-    "h5ShopHost": "https://tenet-test1.liangkebang.net/#",
-    "mallHost": "https://mall-test1.liangkebang.net",
+    "h5ShopHost": "https://tenet-bfe.liangkebang.net/#",
+    "mallHost": "https://mall-bfe.liangkebang.net",
     "yxmTenantId": 560761,
     "appIdMap": {
       "560761": "wxe16bf9293671506c",
@@ -16,8 +16,8 @@
     }
   },
   "redis": {
-    "port": "32625",
-    "host": "172.17.5.3",
+    "port": "31226",
+    "host": "172.17.5.21",
     "password": "",
     "db": 0
   },

config/apollo.ssr.json

-{"apiHost":"https://quantum-blocks-test1.liangkebang.net","h5Host":"https://quantum-h5-test1.liangkebang.net","opapiHost":"https://opapi-test1.liangkebang.net","passportHost":"https://passportapi-test1.liangkebang.net","talosHost":"https://talos-test1.liangkebang.net","kdspHost":"https://kdsp-api-test1.liangkebang.net","loginUrl":"","h5ShopHost":"https://tenet-test1.liangkebang.net/#","mallHost":"https://mall-test1.liangkebang.net","yxmTenantId":560761,"appIdMap":{"560761":"wxe16bf9293671506c","560867":"wxccb8435d68e8c7d6"},"qiniuUpHost":"https://up-z0.qiniup.com","qiniuHost":"https://appsync.lkbang.net"}
+{"apiHost":"https://quantum-blocks-bfe.liangkebang.net","h5Host":"https://quantum-h5-bfe.liangkebang.net","opapiHost":"https://opapi-bfe.liangkebang.net","passportHost":"https://passportapi-bfe.liangkebang.net","talosHost":"https://talos-bfe.liangkebang.net","kdspHost":"https://kdsp-api-bfe.liangkebang.net","loginUrl":"","h5ShopHost":"https://tenet-bfe.liangkebang.net/#","mallHost":"https://mall-bfe.liangkebang.net","yxmTenantId":560761,"appIdMap":{"560761":"wxe16bf9293671506c","560867":"wxccb8435d68e8c7d6"},"qiniuUpHost":"https://up-z0.qiniup.com","qiniuHost":"https://appsync.lkbang.net"}
\ No newline at end of file

package.json

@@ -8,7 +8,7 @@
     "test": "cross-env NODE_ENV=production EGG_SERVER_ENV=sit egg-scripts start --port 80 --workers 1",
     "stop": "egg-scripts stop",
     "backend": "nohup egg-scripts start --port 7001 --workers 4",
-    "dev": "cross-env NODE_ENV=test APOLLO_CLUSTER=k8s NAMESPACE=test1 npm run apollo && egg-bin dev -r egg-ts-helper/register",
+    "dev": "cross-env NODE_ENV=test APOLLO_CLUSTER=k8s NAMESPACE=bfe npm run apollo && egg-bin dev -r egg-ts-helper/register",
     "debug": "egg-bin debug -r egg-ts-helper/register",
     "apollo": "node bin/apollo.js",
     "build": "cross-env NODE_ENV=production APOLLO_CLUSTER=3C npm run apollo && cross-env COS_ENV=production easy build --devtool",