添加客户管理页面

src/page/index/top/index.vue

@@ -9,35 +9,52 @@
         <i class="icon-navicon" @click="setCollapse" />
       </div>
     </div>
-    <div class="top-bar__title" style="display: flex;align-items: center;">
-       <top-menu />
-      <div @click="goChange" style="line-height: 64px;cursor: pointer; display: flex;align-items: center;height:64px;">
+    <div class="top-bar__title" style="display: flex; align-items: center">
+      <top-menu />
+      <div
+        @click="goChange"
+        style="
+          line-height: 64px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          height: 64px;
+        "
+      >
         <div class="daili2">
           <img class="daili2img" src="/img/qh2.png" alt="" />
         </div>
-        <div class="daili ">
-            {{
-              orgType == 0
-                ? "系统后台"
-                : orgType == 1
-                ? "代理商后台"
-                : orgType == 2
-                ? "公司后台"
-                : "楼盘后台"
-            }}
-          </div>
+        <div class="daili">
+          {{
+            orgType == 0
+              ? "系统后台"
+              : orgType == 1
+              ? "代理商后台"
+              : orgType == 2
+              ? "公司后台"
+              : "楼盘后台"
+          }}
+        </div>
       </div>
-      <div v-if="companyName" @click="goBack" style="line-height: 64px;cursor: pointer; display: flex;align-items: center;height:64px;margin-left: 20px;">
+      <div
+        v-if="companyName"
+        @click="goBack"
+        style="
+          line-height: 64px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          height: 64px;
+          margin-left: 20px;
+        "
+      >
         <div class="daili2">
           <img class="daili2img" src="/img/qh1.png" alt="" />
         </div>
-        <div class="daili ">
-            {{
-             companyName
-            }}
-          </div>
+        <div class="daili">
+          {{ companyName }}
+        </div>
       </div>
-
     </div>
     <div class="top-bar__right">
       <el-tooltip
@@ -70,6 +87,25 @@
           <top-lock />
         </div>
       </el-tooltip>
+
+      <el-popover placement="bottom" width="350" trigger="click">
+        <el-table :data="gridData" @row-click="msgTap">
+          <el-table-column
+            width="324"
+            property="date"
+            :show-header="false"
+          >
+          <template slot-scope="scope">
+            <div class="date">
+              <span>{{ scope.row.dates }}</span>
+              <span>{{ scope.row.date }}</span>
+            </div>
+          </template>
+          </el-table-column>
+        </el-table>
+        <i slot="reference" class="el-icon-bell" style="font-size: 18px;color: #fff;"></i>
+      </el-popover>
+
       <el-tooltip
         v-if="showTheme"
         effect="dark"
@@ -99,10 +135,8 @@
         content="用户头像"
         placement="bottom"
       >
-        <!-- <img id="thumbnail" class="top-bar__img" /> -->
       </el-tooltip>
-
-      <el-dropdown style="cursor: pointer;">
+      <el-dropdown style="cursor: pointer">
         <span class="el-dropdown-link">
           {{ userInfo.username }}
           <i class="el-icon-arrow-down el-icon--right" />
@@ -124,7 +158,6 @@
       </el-dropdown>
       <top-setting ref="seting" />
     </div>
-
   </div>
 </template>
 <script>
@@ -155,6 +188,40 @@ export default {
       companyName: localStorage.getItem("topName"),
       orgType: localStorage.getItem("orgType"),
       info: {},
+      gridData: [
+        {
+          date: '121',
+          dates: '阿达萨达撒',
+        },
+        {
+          dates: '阿达萨达撒',
+          date: '122'
+        },
+        {
+          dates: '阿达萨达撒',
+          date: '132'
+        },
+        {
+          dates: '阿达萨达撒',
+          date: '125'
+        },
+        {
+          dates: '阿达萨达撒',
+          date: '126'
+        },
+        {
+          dates: '阿达萨达撒',
+          date: '172'
+        },
+        {
+          dates: '阿达萨达撒',
+          date: '182'
+        },
+        {
+          dates: '阿达萨达撒',
+          date: '120'
+        },
+      ]
     };
   },
   computed: {
@@ -187,6 +254,14 @@ export default {
     this.info = getStore({ name: "userInfo" });
   },
   methods: {
+
+
+    // 弹窗消息点击触发事件
+    msgTap(e) {
+      console.log(e, 'asdjilksajl')
+      this.$router.push('/message')
+    },
+
     handleScreen() {
       fullscreenToggel();
     },
@@ -213,7 +288,7 @@ export default {
         // localStorage.setItem("orgCode", "");
         // localStorage.setItem("houseId", "");
         // localStorage.setItem("agentId", "");
-        return
+        return;
       }
       // 当他为其他时 先获取是否只有一个选项，然后在来进行判断
       if (idx == 1) {
@@ -287,8 +362,8 @@ export default {
             // 公司后台
             this.$router.push({ path: "/chose", query: { flag: 1 } });
           } else {
-            this.$message.warning('您没有多余的代理商')
-            return
+            this.$message.warning("您没有多余的代理商");
+            return;
             this.$router.push({ path: "/wel" });
             localStorage.setItem("topName", res.data.records[0].agentName);
             localStorage.setItem("agentId", res.data.records[0].id);
@@ -315,8 +390,8 @@ export default {
             // 公司后台
             this.$router.push({ path: "/chose", query: { flag: 2 } });
           } else {
-             this.$message.warning('您没有多余的公司')
-             return
+            this.$message.warning("您没有多余的公司");
+            return;
             // this.$router.push({ path: "/wel" });
             localStorage.setItem("topName", res.data.records[0].name);
             localStorage.setItem("orgCode", res.data.records[0].orgCode);
@@ -355,8 +430,8 @@ export default {
             // 公司后台
             this.$router.push({ path: "/chose", query: { flag: 3 } });
           } else {
-            this.$message.warning('您没有多余的楼盘')
-            return
+            this.$message.warning("您没有多余的楼盘");
+            return;
             // this.$router.push({ path: "/wel" });
             localStorage.setItem("topName", res.data.records[0].propertyName);
             localStorage.setItem("orgCode", res.data.records[0].orgCode);
@@ -382,8 +457,8 @@ export default {
               // 公司后台
               this.$router.push({ path: "/chose", query: { flag: 3 } });
             } else {
-              this.$message.warning('您没有多余的楼盘')
-              return
+              this.$message.warning("您没有多余的楼盘");
+              return;
               // this.$router.push({ path: "/wel" });
               localStorage.setItem("topName", res.data.records[0].propertyName);
               localStorage.setItem("orgCode", res.data.records[0].orgCode);
@@ -420,10 +495,10 @@ export default {
   font-size: 15px;
   margin-left: 4px;
 }
-.daili2{
- height: 100%;
- line-height: 58px;
-  .daili2img{
+.daili2 {
+  height: 100%;
+  line-height: 58px;
+  .daili2img {
     width: 15px;
     height: 14px;
   }
@@ -435,4 +510,9 @@ export default {
   color: white;
   margin-left: 10px;
 }
+
+.date {
+  display: flex;
+  flex-direction: column;
+}
 </style>

src/router/page/index.js

@@ -21,116 +21,116 @@ export default [{
       import(/* webpackChunkName: "views" */ '@/page/wel')
   }]
 },
-  {
-    path: '/lock',
-    name: '锁屏页',
-    component: () =>
-      import(/* webpackChunkName: "page" */ '@/page/lock/index'),
-    meta: {
-      keepAlive: true,
-      isTab: false,
-      isAuth: false
-    }
-  },
-  {
-    path: '/404',
-    component: () =>
-      import(/* webpackChunkName: "page" */ '@/components/error-page/404'),
-    name: '404',
-    meta: {
-      keepAlive: true,
-      isTab: false,
-      isAuth: true
-    }
+{
+  path: '/lock',
+  name: '锁屏页',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/page/lock/index'),
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: false
+  }
+},
+{
+  path: '/404',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/components/error-page/404'),
+  name: '404',
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: true
+  }
 
-  },
-  {
-    path: '/403',
-    component: () =>
-      import(/* webpackChunkName: "page" */ '@/components/error-page/403'),
-    name: '403',
-    meta: {
-      keepAlive: true,
-      isTab: false,
-      isAuth: false
-    }
-  },
-  {
-    // 选择角色
-    path: '/check',
-    component: () =>
-      import(/* webpackChunkName: "page" */ '@/page/check/index'),
-    name: '角色选择',
-    meta: {
-      keepAlive: true,
-      isTab: false,
-      isAuth: false
-    }
-  },
-  {
-    // 选择角色
-    path: '/chose',
-    component: () =>
-      import(/* webpackChunkName: "page" */ '@/page/check/chose'),
-    name: '选择',
-    meta: {
-      keepAlive: true,
-      isTab: false,
-      isAuth: false
-    }
-  },
-  // {
-  //   // 楼盘选择
-  //   path: '/building/chose',
-  //   component: () =>
-  //     import(/* webpackChunkName: "page" */ '@/views/building/chose'),
-  //   name: '楼盘选择',
-  //   meta: {
-  //     keepAlive: true,
-  //     isTab: false,
-  //     isAuth: false
-  //   }
-  // },
-  {
-    path: '/500',
-    component: () =>
-      import(/* webpackChunkName: "page" */ '@/components/error-page/500'),
-    name: '500',
-    meta: {
-      keepAlive: true,
-      isTab: false,
-      isAuth: false
-    }
-  },
-  {
-    path: '/',
-    name: '主页',
-    redirect: '/check'
-  },
-  {
-    path: '/myiframe',
-    component: Layout,
-    redirect: '/myiframe',
-    children: [{
-      path: ':routerPath',
-      name: 'iframe',
-      component: () =>
-        import(/* webpackChunkName: "page" */ '@/components/iframe/main'),
-      props: true
-    }]
-  },
-  {
-    path: '*',
-    redirect: '/404'
-  },
-  {
-    path: '/authredirect',
-    name: '授权页',
+},
+{
+  path: '/403',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/components/error-page/403'),
+  name: '403',
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: false
+  }
+},
+{
+  // 选择角色
+  path: '/check',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/page/check/index'),
+  name: '角色选择',
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: false
+  }
+},
+{
+  // 选择角色
+  path: '/chose',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/page/check/chose'),
+  name: '选择',
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: false
+  }
+},
+// {
+//   // 楼盘选择
+//   path: '/building/chose',
+//   component: () =>
+//     import(/* webpackChunkName: "page" */ '@/views/building/chose'),
+//   name: '楼盘选择',
+//   meta: {
+//     keepAlive: true,
+//     isTab: false,
+//     isAuth: false
+//   }
+// },
+{
+  path: '/500',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/components/error-page/500'),
+  name: '500',
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: false
+  }
+},
+{
+  path: '/',
+  name: '主页',
+  redirect: '/check'
+},
+{
+  path: '/myiframe',
+  component: Layout,
+  redirect: '/myiframe',
+  children: [{
+    path: ':routerPath',
+    name: 'iframe',
     component: () =>
-      import(/* webpackChunkName: "page" */ '@/page/login/authredirect'),
-    meta: {
-      keepAlive: true,
-      isTab: false,
-      isAuth: false
-    }
+      import(/* webpackChunkName: "page" */ '@/components/iframe/main'),
+    props: true
   }]
+},
+{
+  path: '*',
+  redirect: '/404'
+},
+{
+  path: '/authredirect',
+  name: '授权页',
+  component: () =>
+    import(/* webpackChunkName: "page" */ '@/page/login/authredirect'),
+  meta: {
+    keepAlive: true,
+    isTab: false,
+    isAuth: false
+  }
+}]

src/router/views/index.js

@@ -32,6 +32,18 @@ export default [{
     name: '接待详情',
   },
 
+
+  {
+    path: '/message',
+    component: () => import(/* webpackChunkName: "views" */ '@/views/msg/index'),
+    name: '公告列表',
+  },
+  
+  {
+    path: '/message/detail',
+    component:  () => import(/* webpackChunkName: "views" */ '@/views/msg/detail'),
+    name: '公告详情',
+  }
 ]
 }, {
   path: '/activti',
@@ -42,4 +54,5 @@ export default [{
     component: () =>
       import(/* webpackChunkName: "views" */ '@/views/activiti/detail')
   }]
-}]
+}
+]

src/views/msg/detail.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="app-container calendar-list-container">
+    <basic-container>
+      <template> <div v-html="detail"></div> </template>
+    </basic-container>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        detail: '详情内容<br/>文章内容巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉'
+    };
+  },
+};
+</script>
+
+
+<style lang="scss" scoped></style>

src/views/msg/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="app-container calendar-list-container">
+    <basic-container>
+      <template>
+        <!-- 内容盒子 -->
+        <div class="table-box">
+          <el-table :data="tableData" style="width: 100%" :show-header="false" @row-click="toDetail">
+            <el-table-column>
+              <template slot-scope="scope">
+                <div class="line-box">
+                  <div class="title point">{{ scope.row.address }}</div>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date" width="300"> </el-table-column>
+          </el-table>
+        </div>
+
+        <div class="btmpagiation">
+          <div class="block">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-sizes="[10, 20, 30, 40]"
+              :page-size="10"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="100"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </template>
+    </basic-container>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+          tag: "家",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1517 弄",
+          zip: 200333,
+          tag: "公司",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1519 弄",
+          zip: 200333,
+          tag: "家",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1516 弄",
+          zip: 200333,
+          tag: "公司",
+        },
+      ],
+    };
+  },
+  methods: {
+    // 跳转详情页面
+    toDetail(item) {
+      console.log(item, "123");
+      this.$router.push('/message/detail')
+    },
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+};
+</script>
+
+
+<style lang="scss" scoped>
+.btmpagiation {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.line-box {
+    // padding: 0 0 0 10px;
+  .title {
+    display: flex;
+    align-items: center;
+  }
+
+  .point {
+    &::before {
+      content: "";
+      display: block;
+      margin: 0 10px 0 0;
+      width: 7px;
+      height: 7px;
+      background: rgb(253, 1, 1);
+      border-radius: 50%;
+    }
+  }
+}
+</style>