更新

package.json

@@ -11,13 +11,14 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "element-ui": "^2.13.2",
+    "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.15",
     "moment": "^2.26.0",
     "naf-core": "^0.1.2",
-    "vant": "^2.8.2",
+    "vant": "^2.8.4",
     "vue": "^2.6.11",
-    "vue-meta": "^2.3.3",
-    "vue-router": "^3.1.6",
+    "vue-meta": "^2.3.4",
+    "vue-router": "^3.3.2",
     "vuex": "^3.1.3"
   },
   "devDependencies": {

src/router/index.js

@@ -1,15 +1,16 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import store from '@/store/index';
 
 Vue.use(VueRouter);
 
 const routes = [
-  // 直播大厅
+  // 首页
   {
     path: '/',
     name: '',
-    meta: { title: '直播大厅', isleftarrow: false },
-    component: () => import('../views/index.vue'),
+    meta: { title: '首页', isleftarrow: false },
+    component: () => import('../views/home/index.vue'),
   },
   // 科技超市
   {
@@ -58,7 +59,27 @@ const routes = [
 ];
 
 const router = new VueRouter({
+  mode: 'history',
+  base: process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_ROUTER,
   routes,
 });
+router.beforeEach((to, form, next) => {
+  if (to.name === 'pcenter_center') {
+    store.commit('setUser');
+    if (to.name === 'login') {
+      next();
+      return;
+    }
+    let user = store.state.user;
+    if (user) {
+      next();
+    }
+    //下面是没登录的情况,需要跳转页面到用户未登录页
+    else next({ name: 'login' });
+  } else {
+    store.commit('setUser');
+    next();
+  }
+});
 
 export default router;

src/views/home/index.vue

@@ -0,0 +1,68 @@
+<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">
+          <clickBtn></clickBtn>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import clickBtn from './parts/clickBtn.vue';
+export default {
+  name: 'index',
+  props: {},
+  components: {
+    NavBar,
+    clickBtn,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      user: {
+        role: '1',
+      },
+    };
+  },
+  created() {},
+  methods: {},
+  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;
+}
+</style>

src/views/home/parts/clickBtn.vue

@@ -0,0 +1,73 @@
+<template>
+  <div id="clickBtn">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="12">
+          <p><i class="el-icon-edit"></i></p>
+          <el-button type="primary">直播大厅</el-button>
+        </el-col>
+        <el-col :span="12">
+          <p><i class="el-icon-edit"></i></p>
+          <el-button type="primary">科技超市</el-button>
+        </el-col>
+        <el-col :span="12" v-if="this.user.role == '2' || this.user.role == '3' || this.user.role == '6' || this.user.role == '7'">
+          <p><i class="el-icon-edit"></i></p>
+          <el-button type="primary">我的发布</el-button>
+        </el-col>
+        <el-col :span="12" v-if="this.user.role == '2' || this.user.role == '3' || this.user.role == '6' || this.user.role == '7'">
+          <p><i class="el-icon-edit"></i></p>
+          <el-button type="primary">事项管理</el-button>
+        </el-col>
+        <el-col :span="12" v-if="this.user.role == '2' || this.user.role == '3' || this.user.role == '6' || this.user.role == '7'">
+          <p><i class="el-icon-edit"></i></p>
+          <el-button type="primary">展会管理</el-button>
+        </el-col>
+        <el-col :span="12" v-if="this.user.role == '2' || this.user.role == '3' || this.user.role == '6' || this.user.role == '7'">
+          <p><i class="el-icon-edit"></i></p>
+          <el-button type="primary">个人中心</el-button>
+        </el-col>
+        <span v-else-if="this.user.role == '1' || this.user.role == '4'">
+          <el-col :span="12" v-for="(item, index) in menuList" :key="index">
+            <p><i class="el-icon-edit"></i></p>
+            <el-button type="primary">{{ item.title }}</el-button>
+          </el-col>
+        </span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: authUser } = createNamespacedHelpers('authUser');
+
+export default {
+  name: 'clickBtn',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      user: {
+        role: '1',
+      },
+      menuList: [],
+    };
+  },
+  created() {
+    this.searchInfo();
+    console.log(this.user);
+  },
+  methods: {
+    ...authUser(['fetch']),
+    async searchInfo() {
+      let res = await this.fetch();
+      console.log(res);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/index.vue

@@ -1,89 +0,0 @@
-<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">
-          <upload :limit="1" :data="img_path" type="img_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <footInfo></footInfo>
-        </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import NavBar from '@/layout/common/topInfo.vue';
-import footInfo from '@/layout/common/footInfo.vue';
-import upload from '@/components/upload.vue';
-export default {
-  name: 'index',
-  props: {},
-  components: {
-    NavBar,
-    footInfo,
-    upload,
-  },
-  data: () => ({
-    // 头部标题
-    title: '',
-    // meta为true
-    isleftarrow: '',
-    // 返回
-    navShow: true,
-    img_path: require('@/assets/logo.png'),
-  }),
-  created() {},
-  computed: {},
-  methods: {
-    uploadSuccess({ type, data }) {
-      console.log(type, data);
-      // if (type !== 'img_path') {
-      //   let arr = _.get(this.uploads, type);
-      //   if (arr !== undefined) {
-      //     this.uploads[type].push({ name: data.name, uri: data.uri });
-      //   } else {
-      //     let newArr = [{ name: data.name, uri: data.uri }];
-      //     this.$set(this.uploads, `${type}`, newArr);
-      //   }
-      // } else {
-      //   this.picLoading = false;
-      //   this.$set(this.info, `${type}`, data.uri);
-      //   this.$nextTick(() => {
-      //     this.picLoading = true;
-      //   });
-      // }
-    },
-  },
-  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>