2

src/components/TabBar.vue

@@ -30,7 +30,7 @@ export default {
           name:'0',
           imgUrl: require("@/assets/tabBar/new.png"),
           imgUrlActive: require("@/assets/tabBar/new-active.png"),
-          path: "/MessageCenter",
+          path: "/message-center",
           text: "消息中心"
         },
         {
@@ -38,7 +38,7 @@ export default {
           name:'1',
           imgUrl: require("@/assets/tabBar/workbench.png"),
           imgUrlActive: require("@/assets/tabBar/workbench-active.png"),
-          path: "/SaveWorkbench",
+          path: "/save-workbench",
           text: "安全工作台"
         },
         {
@@ -46,7 +46,7 @@ export default {
           name:'2',
           imgUrl: require("@/assets/tabBar/my.png"),
           imgUrlActive: require("@/assets/tabBar/my-active.png"),
-          path: "/My",
+          path: "/my",
           text: "我的地盘"
         }
       ]

src/router/index.js

@@ -23,14 +23,6 @@ import AddressEdit from '../views/AddressEdit.vue'
 import Login from '../views/Login.vue'
 import About from '../views/About.vue'
 import CreateOrder from '../views/CreateOrder.vue'
-// 登录页
-import Login2 from '../views/Login2.vue'
-// 消息中心
-import MessageCenter from '../views/MessageCenter/MessageCenter.vue'
-// 安全工作台
-import SaveWorkbench from '../views/SaveWorkbench.vue'
-// 我的地盘
-import My from '../views/My.vue'
 
 Vue.use(VueRouter)
 
@@ -226,8 +218,8 @@ const routes = [
   },
   // 登录页
   {
-    path: '/Login2',
-    name: 'Login2',
+    path: '/login2',
+    name: 'login2',
     meta: {
       index: 1
     },
@@ -235,36 +227,36 @@ const routes = [
   },
   // 消息中心
    {
-    path: '/MessageCenter',
-    name: 'MessageCenter',
+    path: '/message-center',
+    name: 'message-center',
     meta: {
       index: 1
     },
-    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/MessageCenter/MessageCenter.vue'),
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/messageCenter'),
   },
   // 安全工作台页面
   {
-    path: '/SaveWorkbench',
-    name: 'SaveWorkbench',
+    path: '/save-workbench',
+    name: 'save-workbench',
     meta: {
       index: 1
     },
-    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/SaveWorkbench.vue'),
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/saveWorkbench'),
   },
   // 我的地盘页面
   {
-    path: '/My',
-    name: 'My',
+    path: '/my',
+    name: 'my',
     meta: {
       index: 1
     },
-    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/My.vue'),
+    component: () => import(/* webpackChunkName: "SaveWorkbench" */ '../views/my'),
   },
 
 ]
 
 const router = new VueRouter({
-  mode: 'hash',
+  mode: 'history',
   base: process.env.BASE_URL,
   routes
 })

src/views/MessageCenter/MessageCenter.vue → src/views/messageCenter/index.vue

@@ -20,8 +20,12 @@
         <van-tab title="消息信息" name="消息信息" badge="5">
           <message-news></message-news>
         </van-tab>
-        <van-tab title="待办事项" name="待办事项" badge="2">待办事项</van-tab>
-        <van-tab title="通知公告" name="通知公告" badge="6">通知公告</van-tab>
+        <van-tab title="待办事项" name="待办事项" badge="">
+          <wait-event></wait-event>
+        </van-tab>
+        <van-tab title="通知公告" name="通知公告" badge="">
+          <notice-info></notice-info>
+        </van-tab>
       </van-tabs>
     </div>
 
@@ -31,11 +35,15 @@
 </template>
 
 <script>
-import MessageNews from "./MessageNews.vue";
+import messageNews from "./messageNews";
+import waitEvent from "./waitEvent";
+import noticeInfo from "./noticeInfo";
 import tabBar from "@/components/TabBar";
 export default {
   components: {
-    MessageNews,
+    messageNews,
+    waitEvent,
+    noticeInfo,
     tabBar
   },
   data() {

src/views/messageCenter/noticeInfo/index.vue

+<template>
+  <div>
+    <div class="message-wrap">
+      <!-- 标签 -->
+      <div class="category-wrap">
+        <!-- <span class="my-tag-style active">全部</span>
+        <span class="my-tag-style">已读</span>
+        <span class="my-tag-style">未读</span> -->
+        <span
+          class="my-tag-style"
+          :class="index == activeIndex ? 'active' : ''"
+          v-for="(item, index) in messageCategory"
+          :key="item.key"
+          @click="selectCategory(index, item.category)"
+          >{{ item.category }}</span
+        >
+      </div>
+
+      <!-- 搜索 -->
+      <div class="search-wrap">
+        <van-search v-model="searchVal" placeholder="搜索" @search="onSearch" />
+      </div>
+
+      <!-- 内容列表 -->
+      <div class="con-list">
+        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          > -->
+            <!-- <van-cell-group inset>
+              <div class="messgae-title">隐患确认信息</div>
+              <div class="message-content">
+                张大海已确认一般隐患B类，右万宝宝负责整改。
+              </div>
+            </van-cell-group> -->
+          <!-- </van-list>
+        </van-pull-refresh> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from "vant";
+export default {
+  data() {
+    return {
+      messageCategory: [
+        {
+          key: "0",
+          category: "全部"
+        },
+        {
+          key: "1",
+          category: "已读"
+        },
+        {
+          key: "2",
+          category: "未读"
+        }
+      ],
+      activeIndex: 0,
+      searchVal: "",
+      // refreshing: false, // 下拉刷新开关
+      // loading: false, // 列表滚动到底部会触发load事件
+      // finished: false // 列表数据全部加载完成
+    };
+  },
+  mounted() {},
+  methods: {
+    // 点击类别
+    selectCategory(index, data) {
+      this.activeIndex = index;
+      console.log(data);
+    },
+
+    // 搜索事件
+    onSearch(val) {
+      if (val !== "") {
+        console.log(val);
+      }
+    },
+
+    //  // 下拉刷新事件
+    // onRefresh() {
+    //   // 清空列表数据
+    //   this.finished = false;
+
+    //   // 重新加载数据
+    //   // 将 loading 设置为 true，表示处于加载状态
+    //   this.loading = true;
+    //   this.onLoad();
+    // },
+
+    // // 列表初始化函数
+    // onLoad() {
+    //   setTimeout(() => {
+    //     if (this.refreshing) {
+    //       this.refreshing = false;
+    //     }
+
+    //     // 加载完成后将loading改成 false
+    //     this.loading = false;
+    //     // 为什么会连续触发 load 事件？  先加上这句 this.finished = true; 以后再删
+    //     // this.finished = true;
+
+    //     // 如果列表数据全部加载完成 则将finished改为true
+    //     // if (this.list.length >= 40) {
+    //     //   this.finished = true;
+    //     // }
+    //   }, 5000);
+    // }
+  }
+};
+</script>
+<style lang="less" scoped>
+/* @import url(); 引入css类 */
+.message-wrap {
+  padding: 10px 10px 0;
+  background-color: #f0f1f5;
+  // 标签
+  .category-wrap {
+    .my-tag-style {
+      width: 75px;
+      height: 21px;
+      font-size: 13px;
+      border: 1px solid #1989fa;
+      border-radius: 4px;
+      color: #1989fa;
+      display: inline-block;
+      text-align: center;
+      line-height: 21px;
+      margin-right: 10px;
+    }
+    .active {
+      color: white;
+      background-color: #1989fa;
+    }
+  }
+  // 搜索
+  .search-wrap {
+    margin: 10px 0;
+    .van-search {
+      border-radius: 5px;
+      padding: 5px 12px;
+    }
+    .van-search__content {
+      background-color: #ffffff;
+    }
+  }
+  //  内容
+  .con-list {
+    .van-cell-group--inset {
+      margin: 0;
+      margin-bottom: 10px;
+      padding: 10px;
+      font-size: 13px;
+      .messgae-title {
+      }
+      .message-content {
+        margin-top: 10px;
+      }
+    }
+  }
+}
+</style>

src/views/messageCenter/waitEvent/index.vue

+<template>
+  <div>
+    <div class="message-wrap">
+      <!-- 标签 -->
+      <div class="category-wrap">
+        <!-- <span class="my-tag-style active">全部</span>
+        <span class="my-tag-style">已读</span>
+        <span class="my-tag-style">未读</span> -->
+        <span
+          class="my-tag-style"
+          :class="index == activeIndex ? 'active' : ''"
+          v-for="(item, index) in messageCategory"
+          :key="item.key"
+          @click="selectCategory(index, item.category)"
+          >{{ item.category }}</span
+        >
+      </div>
+
+      <!-- 搜索 -->
+      <div class="search-wrap">
+        <van-search v-model="searchVal" placeholder="搜索" @search="onSearch" />
+      </div>
+
+      <!-- 内容列表 -->
+      <div class="con-list">
+        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          > -->
+            <!-- <van-cell-group inset>
+              <div class="messgae-title">隐患确认信息</div>
+              <div class="message-content">
+                张大海已确认一般隐患B类，右万宝宝负责整改。
+              </div>
+            </van-cell-group> -->
+          <!-- </van-list>
+        </van-pull-refresh> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from "vant";
+export default {
+  data() {
+    return {
+      messageCategory: [
+        {
+          key: "0",
+          category: "全部"
+        },
+        {
+          key: "1",
+          category: "已读"
+        },
+        {
+          key: "2",
+          category: "未读"
+        }
+      ],
+      activeIndex: 0,
+      searchVal: "",
+      // refreshing: false, // 下拉刷新开关
+      // loading: false, // 列表滚动到底部会触发load事件
+      // finished: false // 列表数据全部加载完成
+    };
+  },
+  mounted() {},
+  methods: {
+    // 点击类别
+    selectCategory(index, data) {
+      this.activeIndex = index;
+      console.log(data);
+    },
+
+    // 搜索事件
+    onSearch(val) {
+      if (val !== "") {
+        console.log(val);
+      }
+    },
+
+    //  // 下拉刷新事件
+    // onRefresh() {
+    //   // 清空列表数据
+    //   this.finished = false;
+
+    //   // 重新加载数据
+    //   // 将 loading 设置为 true，表示处于加载状态
+    //   this.loading = true;
+    //   this.onLoad();
+    // },
+
+    // // 列表初始化函数
+    // onLoad() {
+    //   setTimeout(() => {
+    //     if (this.refreshing) {
+    //       this.refreshing = false;
+    //     }
+
+    //     // 加载完成后将loading改成 false
+    //     this.loading = false;
+    //     // 为什么会连续触发 load 事件？  先加上这句 this.finished = true; 以后再删
+    //     // this.finished = true;
+
+    //     // 如果列表数据全部加载完成 则将finished改为true
+    //     // if (this.list.length >= 40) {
+    //     //   this.finished = true;
+    //     // }
+    //   }, 5000);
+    // }
+  }
+};
+</script>
+<style lang="less" scoped>
+/* @import url(); 引入css类 */
+.message-wrap {
+  padding: 10px 10px 0;
+  background-color: #f0f1f5;
+  // 标签
+  .category-wrap {
+    .my-tag-style {
+      width: 75px;
+      height: 21px;
+      font-size: 13px;
+      border: 1px solid #1989fa;
+      border-radius: 4px;
+      color: #1989fa;
+      display: inline-block;
+      text-align: center;
+      line-height: 21px;
+      margin-right: 10px;
+    }
+    .active {
+      color: white;
+      background-color: #1989fa;
+    }
+  }
+  // 搜索
+  .search-wrap {
+    margin: 10px 0;
+    .van-search {
+      border-radius: 5px;
+      padding: 5px 12px;
+    }
+    .van-search__content {
+      background-color: #ffffff;
+    }
+  }
+  //  内容
+  .con-list {
+    .van-cell-group--inset {
+      margin: 0;
+      margin-bottom: 10px;
+      padding: 10px;
+      font-size: 13px;
+      .messgae-title {
+      }
+      .message-content {
+        margin-top: 10px;
+      }
+    }
+  }
+}
+</style>

src/views/My.vue → src/views/my/index.vue

@@ -51,7 +51,7 @@
 
       <!-- 退出系统 -->
       <footer class="sign-out">
-        <van-button type="info" block @click="logout">退出系统</van-button>
+        <van-button type="info" block @click="logout">退出系统123</van-button>
       </footer>
     </div>