smart-admin-h5

smart-admin-h5/src/views/main/main-mixin.js

@@ -0,0 +1,25 @@
+import cookie from '@/lib/cookie';
+import { userApi } from 'api/user';
+
+/**
+ * 此 mixin为登录以后的页面用的，因为所有的有效路由（排除登录、注册、404,500 这个几个特殊页面）都会走 other-main 或者 tabber-main两个父级组件。
+ * 所以对于一些session的信息获取只能放到这个两个main组件上，故此mixin只用于两个main组件，起到全局的作用
+ */
+export default {
+  created: function() {
+    const token = cookie.getToken();
+    // 如果登录过，获取token
+    if (token && !this.$store.state.user.isHaveGotSessionInfo) {
+      (async() => {
+        try {
+          console.debug(' request session info ');
+          const res = await userApi.getSession();
+          const loginInfo = res.data;
+          this.$store.commit('user/updateSession', loginInfo);
+        } catch (e) {
+          this.$smartSentry.captureException(e);
+        }
+      })();
+    }
+  }
+};

smart-admin-h5/src/views/main/other-main.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+
+    <!---------------- 頁面内容 begin ---------------->
+    <div class="main-content">
+      <keep-alive>
+        <router-view v-if="$route.meta.keepAlive" />
+      </keep-alive>
+      <router-view v-if="!$route.meta.keepAlive" />
+    </div>
+
+  </div>
+</template>
+
+<script type="text/javascript">
+import mainMixin from './main-mixin';
+
+export default {
+  name: 'OtherMain',
+  mixins: [mainMixin],
+  data() {
+    return {};
+  },
+  created() {
+  },
+  computed: {},
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+</style>

smart-admin-h5/src/views/main/tabbar-main.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+
+    <!---------------- 頁面内容 begin ---------------->
+    <div class="main-content">
+      <keep-alive>
+        <router-view v-if="$route.meta.keepAlive" />
+      </keep-alive>
+      <router-view v-if="!$route.meta.keepAlive" />
+    </div>
+    <!---------------- 頁面内容 end ---------------->
+
+    <!---------------- 底部 tabbar begin ---------------->
+    <div class="main-footer">
+      <van-tabbar
+        fixed
+        route
+        v-model="active"
+      >
+        <van-tabbar-item
+          v-for="(item, index) in tabbar"
+          :to="item.to"
+          :icon="item.icon"
+          :name="item.name"
+          :key="index">
+          {{ item.title }}
+        </van-tabbar-item>
+      </van-tabbar>
+    </div>
+    <!---------------- 底部 tabbar end ---------------->
+
+  </div>
+</template>
+
+<script type="text/javascript">
+import mainMixin from 'views/main/main-mixin';
+
+export default {
+  name: 'TabbarMain',
+  mixins: [mainMixin],
+  data() {
+    return {
+      active: 'ContactCompany',
+      tabbar: [
+        // {
+        //   name: 'Home',
+        //   title: '首页',
+        //   icon: 'wap-home-o',
+        //   to: '/home'
+        // },
+        // {
+        //   name: 'Business',
+        //   title: '业务中心',
+        //   icon: 'apps-o',
+        //   to: '/business'
+        // },
+        {
+          name: 'ContactCompany',
+          title: '往来机构',
+          icon: 'user-o',
+          badge: 0,
+          to: '/contact-company'
+        },
+        {
+          name: 'Mine',
+          title: '我的',
+          icon: 'user-o',
+          to: '/mine'
+        }
+      ]
+    };
+  },
+  created() {
+    // 通过路由跳转绑定Tabbar的选中
+    this.updateTabbarSelected(this.$route.name);
+  },
+  watch: {
+    // 监听路由变化,保证路由跳转Tabbar选中正常
+    $route: {
+      handler(val, oldval) {
+        // this.updateTabbarSelected(val.name)
+      }
+    },
+    deep: true
+  },
+  computed: {},
+  methods: {
+    updateTabbarSelected(item) {
+      console.log(item, 12222);
+      this.active = item;
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>