vue app

sourcecode/h5app/vue/src/App.vue

@@ -1,11 +1,15 @@
 <template>
   <div id="app">
     <router-view />
+    <tab-bar v-if="$route.meta.navShow"/>
   </div>
 </template>
 
 <script>
-
+    import TabBar from "./components/TabBar";
+    export default {
+        components: {TabBar}
+    }
 </script>
 
 <style>
@@ -23,7 +27,7 @@
   height: 100px;
   display: flex;
   align-items: center;
-  padding: 0px 10px;
+  padding: 0 10px;
 }
 
 .add_photo {

sourcecode/h5app/vue/src/components/TabBar.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <van-tabbar v-model="active">
-            <van-tabbar-item>
+            <van-tabbar-item to="/index">
                 <span>首页</span>
                 <img
                         slot="icon"
@@ -10,7 +10,12 @@
                         style="width: 30px; height: 30px"
                 >
             </van-tabbar-item>
-            <van-tabbar-item>
+            <van-tabbar-item to="/presentRegister">
+                <img src="../assets/add_button.png"
+                     class="add_button"
+                />
+            </van-tabbar-item>
+            <van-tabbar-item to="/me">
                 <span>我的</span>
                 <img
                         slot="icon"
@@ -20,14 +25,12 @@
                 >
             </van-tabbar-item>
         </van-tabbar>
-        <div>
-
         </div>
-    </div>
 </template>
 
 <script>
     import { Tabbar, TabbarItem } from 'vant';
+
     export default {
         name: "TabBar",
         components: {
@@ -35,7 +38,7 @@
         },
         data() {
             return {
-                active: 0,
+                active: this.activeI,
                 icon: {
                     index_normal: require('../assets/index_icon_active.png'),
                     index_active: require('../assets/index_icon_active.png'),
@@ -48,5 +51,11 @@
 </script>
 
 <style scoped>
-
+.add_button {
+    position: relative;
+    margin-bottom: 45px;
+    width: 50px;
+    height: 50px;
+    z-index: 1;
+}
 </style>

sourcecode/h5app/vue/src/router.js

@@ -6,13 +6,15 @@ Vue.use(Router);
 const routes = [
     {
         path: '*',
-        redirect: '/login'
+        redirect: '/login',
+        navShow: false
     },
     {
         name: 'login',
         component: () => import('./views/login'),
         meta: {
-            title: '登录'
+            title: '登录',
+            navShow: false
         }
     },
     {
@@ -26,14 +28,24 @@ const routes = [
         name: 'presentRegister',
         component: () => import('./views/PresentRegister'),
         meta: {
-            title: '礼物登记'
+            title: '礼物登记',
+            navShow: false
         }
     },
     {
         name: 'index',
         component: () => import('./views/index'),
         meta: {
-            title: '首页'
+            title: '首页',
+            navShow: true
+        }
+    },
+    {
+        name: 'me',
+        component: () => import('./views/me'),
+        meta: {
+            title: '我的',
+            navShow: true
         }
     }
 ];

sourcecode/h5app/vue/src/views/index.vue

@@ -1,6 +1,5 @@
 <template>
     <div>
-        <h1>首页</h1>
         <div style="position: relative;">
             <img :src="indexTop" style="max-height: 200px; position: relative;"/>
         </div>
@@ -11,7 +10,7 @@
         <div>
             <index-present/>
         </div>
-        <tab-bar/>
+        <!--<tab-bar/>-->
     </div>
 </template>
 

sourcecode/h5app/vue/src/views/login.vue

@@ -42,7 +42,6 @@
                 // 检查输入
                 // 检查手机号有无验证
                 // this.$router.push('index');
-                console.log(this.GLOBAL);
                 this.$router.push('verify');
             }
         }