ytj

package.json

@@ -37,7 +37,8 @@
       "eslint:recommended"
     ],
     "rules": {
-      "no-console": "off"
+      "no-console": "off",
+      "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
     },
     "parserOptions": {
       "parser": "babel-eslint"

src/assets/main.css

@@ -71,3 +71,45 @@ input[type='checkbox'] {
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
 }
+*[class*='text-overflowEllipsis-line'] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.text-overflowEllipsis-line2 {
+  -webkit-line-clamp: 2;
+}
+.text-overflowEllipsis-line3 {
+  -webkit-line-clamp: 3;
+}
+.text-overflowEllipsis-line4 {
+  -webkit-line-clamp: 4;
+}
+*[class*='overflow-scroll-y'] {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+*[class*='overflow-scroll-x'] {
+  overflow-y: hidden;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.overflow-scroll-y-3d,
+.overflow-scroll-x-3d {
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+.overflow-scroll-x::-webkit-scrollbar,
+.overflow-scroll-x-3d::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+  display: none;
+}
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+}

src/pages/login/login.vue

@@ -3,19 +3,27 @@
     <img :src="bg" alt="">
     <div class="login-box">
       <div class="title">微信信息管理平台</div>
-      <div class="user">
+      <div class="input">
         <i class="iconfont icon-yonghu1"></i>
-        <input type="text" >
+        <input type="text" v-model="UserName">
       </div>
-      <div class="password"></div>
-      <div>记住用户名和密码</div>
-      <div class="submit">登陆</div>
+      <div class="input">
+        <i class="iconfont icon-mima"></i>
+        <input type="password" v-model="PassWord">
+      </div>
+      <div class="remember">
+        <span>记住用户名密码</span>
+        <input type="checkbox" v-model="Remember">
+      </div>
+      <div class="submit" @click="submit()">登陆</div>
     </div>
   </div>
 </template>
 
 <script>
 import bg from '@/assets/login.jpg'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapLoginState, mapActions: mapLoginActions } = createNamespacedHelpers('login')
 export default {
   data () {
     return {
@@ -24,6 +32,57 @@ export default {
   },
   created () {
     // this.$Message.info('This is a info tip')
+    this.Remember = localStorage.getItem('remember')
+    if (!this.Remember) {
+      this.UserName = ''
+      this.PassWord = ''
+    } else {
+      this.UserName = localStorage.getItem('userName')
+      this.PassWord = localStorage.getItem('passWord')
+    }
+  },
+  computed: {
+    ...mapLoginState({
+      remember: item => item.remember,
+      userName: item => item.userName,
+      passWord: item => item.passWord
+    }),
+    Remember: {
+      get () {
+        return this.remember
+      },
+      set (val) {
+        this.setRemember(val)
+      }
+    },
+    UserName: {
+      get () {
+        return this.userName
+      },
+      set (val) {
+        this.setUserName(val)
+      }
+    },
+    PassWord: {
+      get () {
+        return this.passWord
+      },
+      set (val) {
+        this.setPassWord(val)
+      }
+    }
+  },
+  methods: {
+    ...mapLoginActions(['setRemember', 'setUserName', 'setPassWord', 'login']),
+    submit () {
+      this.$router.push({ name: 'index' })
+      this.login({ userName: this.UserName, passWord: this.PassWord }).then(() => {
+        if (!this.Remember) {
+          this.UserName = ''
+          this.PassWord = ''
+        }
+      })
+    }
   }
 }
 </script>
@@ -37,6 +96,7 @@ export default {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    filter: brightness(70%);
   }
   .login-box {
     position: absolute;
@@ -45,11 +105,61 @@ export default {
     transform: translate(-50%, -50%);
     width: 450px;
     height: 300px;
-    .title{
-      font-size: 24px;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+    .title {
+      font-size: 28px;
       color: white;
-      letter-spacing: 4px;
+      letter-spacing: 6px;
+      text-align: center;
+      padding-bottom: 33px;
+    }
+    .input {
+      background-color: #fff;
+      border-radius: 8px;
+      width: 70%;
+      height: 30px;
+      padding: 4px;
+      display: flex;
+      overflow: hidden;
+      margin-bottom: 20px;
+      i {
+        font-size: 18px;
+        color: #999999;
+        padding: 0 5px;
+        border-right: 1px solid #999999;
+        &::before {
+          top: -2px;
+          position: relative;
+        }
+      }
+      input {
+        flex: 1;
+        padding-left: 5px;
+      }
+    }
+    .remember {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 70%;
+      padding-bottom: 20px;
+      span {
+        padding-right: 10px;
+        color: #fff;
+        font-size: 10px;
+      }
+    }
+    .submit {
+      width: 200px;
+      height: 35px;
       text-align: center;
+      line-height: 35px;
+      background-color: #00bbbd;
+      color: #fff;
+      border-radius: 12px;
     }
   }
 }

src/pages/index/index.vue → src/pages/main/index/index.vue

@@ -1,3 +1,3 @@
 <template>
-  <div>aaaaa</div>
+  <div>bbbb</div>
 </template>

src/pages/main/main.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="mainPage">
+    <header class="top">
+      <div>头部</div>
+    </header>
+    <main>
+      <nav>
+        <Menu>
+          <div v-for="(item,index) in menus" :key="index">
+            <Submenu v-if="item.children" :name='item.id'>
+              <template slot="title">
+                {{item.label}}
+              </template>
+              <div v-for="(subItem,subIndex) in item.children" :key="subIndex">
+                <Submenu v-if="subItem.children" :name='subItem.id'>
+                  <template slot="title">
+                    {{subItem.label}}
+                  </template>
+                  <MenuItem v-for="(subItems,subIndexs) in subItem.children" :key="subIndexs" :name="subItems.id" :to='{name: subItems.Url}' >{{subItems.label}}</MenuItem>
+                </Submenu>
+                <MenuItem v-else :name="subItem.id" :to='{name: subItem.Url}' >{{subItem.label}}</MenuItem>
+              </div>
+            </Submenu>
+            <MenuItem v-else :name="item.id" :to='{name: item.Url}' >{{item.label}}</MenuItem>
+          </div>
+        </Menu>
+      </nav>
+      <div class="content">
+        <router-view/>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import menu from './menu.json'
+export default {
+  data () {
+    return {
+      menu,
+      menus: []
+    }
+  },
+  created () {
+    this.menus = this.packChildren(this.menu.result.menus)
+    console.log(this.menus)
+  },
+  methods: {
+    packChildren (data) {
+      let cp = data.slice()
+      const res = []
+
+      cp.map(x => {
+        x.id = x.MenuId
+        x.label = x.MenuName
+        return x
+      })
+
+      data.forEach((it, inx) => {
+        let found = false
+        for (let i = 0; i < cp.length; i += 1) {
+          if (cp[i].MenuId === it.FatherId) {
+            found = true
+            if (it.IsShow === 1) {
+              cp[i].children = [...(cp[i].children || []), cp[inx]]
+            }
+            break
+          }
+        }
+
+        if (!found && cp[inx].IsShow === 1) {
+          res.push(cp[inx])
+        }
+      })
+
+      return res
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mainPage {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #eee;
+}
+.top {
+  width: 100%;
+  height: 65px;
+  line-height: 65px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  > div {
+    width: 95%;
+    margin: 0 auto;
+  }
+}
+main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-top: 80px;
+  nav {
+    width: 240px;
+    height: 100%;
+    background-color: #fff;
+    // border-right: 1px solid #dcdee2;
+  }
+  .content {
+    flex: 1;
+    padding: 10px 30px;
+    background-color: #fff;
+  }
+}
+</style>

src/pages/staticRouter.js

@@ -1,11 +1,19 @@
-import index from '@/pages/index/index.vue'
+import main from '@/pages/main/main.vue' // 主体框架
+import index from '@/pages/main/index/index.vue' // 首页
 
 export default {
   router: [
     {
-      path: '/index',
-      name: 'index',
-      component: index
+      path: '/main',
+      name: 'main',
+      component: main,
+      children: [
+        {
+          path:'/',
+          name:'index',
+          component: index,
+        }
+      ]
     }
   ],
 }

src/store/index.js

@@ -14,6 +14,7 @@ const store = new Vuex.Store({
 Vuex.Store.prototype.$api = api
 Vuex.Store.prototype.$ajax = Ajax
 export const modules = {
+  login: () => require('./login').default,
 }
 
 Object.keys(modules).forEach((modKey) => {

src/store/login.js

@@ -0,0 +1,54 @@
+import ajax from '../util/ajax'
+import api from '../util/api'
+
+export default {
+  namespaced: true,
+  state: {
+    remember: null,
+    userName: '',
+    passWord: ''
+  },
+  mutations: {
+    updateRemember (state, data) {
+      state.remember = data
+    },
+    updateUserName (state, data) {
+      state.userName = data
+    },
+    updatePassWord (state, data) {
+      state.passWord = data
+    }
+  },
+  actions: {
+    login (context, data) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.common.login,
+          data: {
+            ...data,
+          }
+        }).then(res => {
+          // context.commit('updateList', res)
+          resolve(res)
+        }).catch(reject)
+      })
+    },
+    setRemember ({ commit }, data) {
+      localStorage.setItem('remember', data)
+      if (data === 'true') {
+        data = true
+      } else if (data === 'false') {
+        data = false
+      }
+      commit('updateRemember', data)
+    },
+    setUserName ({ commit }, data) {
+      localStorage.setItem('userName', data)
+      commit('updateUserName', data)
+    },
+    setPassWord ({ commit }, data) {
+      localStorage.setItem('passWord', data)
+      commit('updatePassWord', data)
+    },
+  }
+}

src/store/main.js

@@ -0,0 +1,42 @@
+import ajax from '../util/ajax'
+import api from '../util/api'
+
+export default {
+  namespaced: true,
+  state: {
+    menu: [],
+  },
+  mutations: {
+    updateMenu (state, data) {
+      state.menu = data || []
+    }
+  },
+  actions: {
+    login (context, data) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.common.login,
+          data: {
+            ...data,
+          }
+        }).then(res => {
+          // context.commit('updateList', res)
+          resolve(res)
+        }).catch(reject)
+      })
+    },
+    setMenu (context, data) {
+      return new Promise((resolve, reject) => {
+        ajax({
+          ...api.common.login,
+          data: {
+            ...data,
+          }
+        }).then(res => {
+          // context.commit('updateList', res)
+          resolve(res)
+        }).catch(reject)
+      })
+    }
+  }
+}

src/util/api.js

@@ -3,6 +3,11 @@
 // const guest = '/guest/:org'
 
 const $api = {
-  
+  common: {
+    login: {
+      url: '',
+      method: 'post'
+    }
+  }
 }
 export default $api