更新

src/layout/common/footInfo.vue

@@ -3,7 +3,11 @@
     <el-row>
       <el-col :span="24" class="footInfo">
         <van-tabbar route>
-          <van-tabbar-item to="/">
+          <van-tabbar-item to="/home/index">
+            <!-- <van-image width="60" height="60" :src="index" /> -->
+            <p class="text">首页</p>
+          </van-tabbar-item>
+          <van-tabbar-item to="/live/index">
             <!-- <van-image width="60" height="60" :src="index" /> -->
             <p class="text">直播大厅</p>
           </van-tabbar-item>

src/router/index.js

@@ -5,9 +5,16 @@ import store from '@/store/index';
 Vue.use(VueRouter);
 
 const routes = [
+  // 登录-测试
+  {
+    path: '/login',
+    name: 'login',
+    meta: { title: '登录', isleftarrow: false },
+    component: () => import('../views/login.vue'),
+  },
   // 首页
   {
-    path: '/',
+    path: '/home/index',
     name: '',
     meta: { title: '首页', isleftarrow: false },
     component: () => import('../views/home/index.vue'),

src/views/home/index.vue

@@ -20,8 +20,6 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
-const { mapActions: wxchattest } = createNamespacedHelpers('wxchattest');
-
 export default {
   name: 'index',
   props: {},
@@ -37,23 +35,12 @@ export default {
       isleftarrow: '',
       // 返回
       navShow: true,
-      user: {
-        role: '1',
-      },
     };
   },
-  created() {
-    this.toLogin();
-  },
-  methods: {
-    ...wxchattest(['login']),
-    async toLogin() {
-      let res = await this.login({ redirect_uri: 'http://localhost:8002/home/index', type: '0', openid: '00' });
-      console.log(res);
-    },
-  },
+  created() {},
+  methods: {},
   computed: {
-    // ...mapState(['user']),
+    ...mapState(['user']),
   },
   mounted() {
     this.title = this.$route.meta.title;

src/views/live/index.vue

@@ -6,7 +6,10 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          直播
+          直播大厅
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
         </el-col>
       </el-col>
     </el-row>
@@ -16,11 +19,13 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
 export default {
   name: 'index',
   props: {},
   components: {
     NavBar,
+    footInfo,
   },
   data: function() {
     return {
@@ -60,4 +65,8 @@ export default {
 .main {
   min-height: 570px;
 }
+.foot {
+  position: absolute;
+  bottom: 0;
+}
 </style>

src/views/login.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          登录
+          <el-link :underline="false" href="/home/index">首页</el-link>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+const { mapActions: wxchattest } = createNamespacedHelpers('wxchattest');
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+    };
+  },
+  created() {
+    this.toLogin();
+  },
+  methods: {
+    ...wxchattest(['login']),
+    async toLogin() {
+      let res = await this.login({ redirect_uri: 'http://localhost:8002/login', type: '0', openid: '00' });
+      console.log(res);
+    },
+  },
+  computed: {
+    // ...mapState(['user']),
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>