vuejs-templates · yyd1142 · Dec 29, 2018 · Dec 29, 2018 · Dec 29, 2018 · Dec 29, 2018
diff --git a/template/element-variables.scss b/template/element-variables.scss
diff --git a/template/index.html b/template/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>{{ name }}</title>
+    <link rel="stylesheet" href="./static/iconfont/iconfont.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/template/package.json b/template/package.json
@@ -26,7 +26,13 @@
   },
   "dependencies": {
     "vue": "^2.5.2"{{#router}},
-    "vue-router": "^3.0.1"{{/router}}
+    "vue-router": "^3.0.1"{{/router}},
+    "axios": "^0.18.0",
+    "blueimp-md5": "^2.10.0",
+    "element-ui": "^2.4.11",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
+    "moment": "^2.23.0"
   },
   "devDependencies": {
     {{#lint}}
@@ -116,7 +122,8 @@
     "portfinder": "^1.0.13",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "element-theme-chalk": "^2.4.11"
   },
   "engines": {
     "node": ">= 6.0.0",

diff --git a/template/src/App.vue b/template/src/App.vue
@@ -1,34 +1,15 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    {{#router}}
-    <router-view/>
-    {{else}}
-    <HelloWorld/>
-    {{/router}}
+    <div v-if="!isLoginPage">
+      <Menu @onPress="handlePressMenu"></Menu>
+      <Header :title="headerTitle" :subtitle="headerSubTitle"></Header>
+    </div>
+    <div :class="isLoginPage ? '' : 'page-content'">
+      <router-view/>
+    </div>
   </div>
 </template>
 
-<script>
-{{#unless router}}
-import HelloWorld from './components/HelloWorld'
+<script src="./js/app.js"></script>
 
-{{/unless}}
-export default {
-  name: 'App'{{#router}}{{else}},
-  components: {
-    HelloWorld
-  }{{/router}}
-}
-</script>
-
-<style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<style lang="less" src="./styles/app.less"></style>
diff --git a/template/src/api/api.config.js b/template/src/api/api.config.js
@@ -0,0 +1,3 @@
+export default {
+    baseUrl: 'http://test.com',
+  }
diff --git a/template/src/api/index.js b/template/src/api/index.js
@@ -0,0 +1,5 @@
+import { httpPost, httpGet } from './network'
+
+export default {
+
+}
diff --git a/template/src/api/network.js b/template/src/api/network.js
@@ -0,0 +1,78 @@
+import axios from 'axios'
+import apiConfig from './api.config'
+
+const http = (path, method, domain) => {
+  return (params, data) => {
+    let newPath = path;
+    return new Promise((resolve, reject) => {
+      let regexp = /(\${[a-zA-Z0-9_]+})/g
+      if (path.search(regexp) != -1 && '_paths' in params) {
+        let _paths = params['_paths'];
+        let pathValues = path.match(regexp);
+        if (pathValues && pathValues.length > 0) {
+          for (let pValue of pathValues) {
+            let key = pValue.substr(2, pValue.length - 3);
+            if (key in _paths) {
+              newPath = newPath.replace(pValue, _paths[key]);
+            }
+          }
+        }
+      }
+      delete params['_paths'];
+      for (let key in Object.keys(params)) {
+        let value = params[key];
+        if (value == null || value == undefined) {
+          delete params[key];
+        }
+      }
+      axios({
+        method: method,
+        url: (domain ? domain : apiConfig.baseUrl) + newPath,
+        data: method === 'post' ? data : params,
+        params: params ? params : '',
+        timeout: 10000,
+      }).then((response) => {
+        if (response.status === 200) {
+          let result = response.data;
+          resolve(result);
+        } else {
+          console.error(`请求数据错误，[错误代码:${response.data.code}], ${response.data.msg}`);
+        }
+      }).catch((error) => {
+        let errorString = error.toString();
+        if (error.code == "ECONNABORTED") {
+          reject(`请求数据超时，请检查网络连接是否正常!`);
+        } else if (errorString.match('^Error: Network Error')) {
+          reject(`网络异常，请检查网络连接是否正常!`)
+        } else {
+          reject(`网络异常[${errorString}]，请检查网络是否正常!`);
+        }
+      })
+    })
+  }
+}
+
+
+export function httpPost(path, domain) {
+  return http(path, 'post', domain)
+}
+
+export function httpGet(path, domain) {
+  return (paths) => {
+    return axios({
+      method: 'get',
+      url: (domain ? domain : apiConfig.baseUrl) + '' + path + '' + paths,
+      timeout: 10000
+    }).then(response => {
+      let result = response.data;
+      if (response.status != 200) {
+        console.error(`请求数据错误，[错误代码:${response.data.code}], ${response.data.msg}`);
+        return null
+      }
+      return result
+    }).catch(error => {
+      console.error(`请求数据错误，[错误代码:${error}`);
+      return null
+    })
+  }
+}
diff --git a/template/src/components/Divider/index.js b/template/src/components/Divider/index.js
diff --git a/template/src/components/Divider/index.less b/template/src/components/Divider/index.less
@@ -0,0 +1,5 @@
+.sf-divider-wrap {
+    width: 100%;
+    height: 0.5px;
+    background-color: #ebebeb;
+}
diff --git a/template/src/components/Divider/index.vue b/template/src/components/Divider/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="sf-divider-wrap">    </div>
+</template>
+
+<script src="./index.js"></script>
+
+<style src="./index.less" lang="less"></style>
diff --git a/template/src/components/GeneralRulesItem/index.js b/template/src/components/GeneralRulesItem/index.js
@@ -0,0 +1,12 @@
+export default {
+    props: {
+        icon: String,
+        title: String,
+        label: String,
+        backgroundColor: String,
+    },
+    mounted() { },
+    methods: {
+
+    }
+};
diff --git a/template/src/components/GeneralRulesItem/index.less b/template/src/components/GeneralRulesItem/index.less
@@ -0,0 +1,42 @@
+@import "../../styles/config.less";
+@cellHeight: 120px;
+.GeneralRulesItem-wrap {
+    div {
+        .flexDisplay();
+    }
+    width: 100%;
+    .flexDisplay();
+    flex-direction: row;
+    background-color: #fff;
+    .icon-wrap {
+        height: @cellHeight;
+        width: @cellHeight + 30px;
+        justify-content: center;
+        align-items: center;
+        .iconfont {
+            color: #fff;
+            font-size: 40px;
+            width: 30px;
+            height: 30px;
+            .flexDisplay();
+            justify-content: center;
+            align-items: center;
+        }
+    }
+    .content {
+        height: @cellHeight;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        padding-left: 15px;
+        box-sizing: border-box;
+        .title {
+            color: #333;
+            font-size: 20px;
+        }
+        .label {
+            color: #999;
+            font-size: 14px;
+        }
+    }
+}
diff --git a/template/src/components/GeneralRulesItem/index.vue b/template/src/components/GeneralRulesItem/index.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="GeneralRulesItem-wrap">
+        <div class="icon-wrap" :style="{ backgroundColor: backgroundColor, }">
+            <i class="iconfont" :class="icon"></i>
+        </div>
+        <div class="content">
+            <div class="title" v-text="title"></div>
+            <div class="label" v-text="label"></div>
+        </div>
+    </div>
+</template>
+
+<script src="./index.js"></script>
+
+<style src="./index.less" lang="less"></style>
diff --git a/template/src/components/Header/index.js b/template/src/components/Header/index.js
@@ -0,0 +1,26 @@
+export default {
+    props: {
+        title: String,
+        subtitle: String,
+    },
+    mounted() { },
+    methods: {
+        handleCommand(command) {
+            if(command === 'SignOut') {
+                this.logout();
+            }
+        },
+        logout() {
+            this.$confirm("确定退出该帐号?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(() => {
+                localStorage.removeItem("USER_INFO");
+                setTimeout(() => {
+                    location.href = "/login";
+                }, 500);
+            }).catch(() => { });
+        }
+    }
+};
diff --git a/template/src/components/Header/index.less b/template/src/components/Header/index.less
@@ -0,0 +1,106 @@
+@import "../../styles/config.less";
+@cellHeight: 75px;
+@subCellHeight: 44px;
+.header-wrap {
+    width: 100%;
+    position: fixed;
+    z-index: 19;
+    top: 0;
+    height: @cellHeight;
+    background-color: #fff;
+    .box-shadow(#dddce0ab, -3px 2px 7px);
+    box-sizing: border-box;
+    padding-left: 280px;
+    .flexDisplay();
+    align-items: center;
+    justify-content: space-between;
+    .title-wrap {
+        .flexDisplay();
+        height: @subCellHeight;
+        align-items: center;
+        justify-content: space-between;
+        flex-direction: row;
+        color: #ebebeb;
+        .title {
+            font-size: 20px;
+            color: #333;
+            font-weight: bold;
+            padding-left: 30px;
+            cursor: pointer;
+        }
+        .subtitle {
+            font-size: 14px;
+            color: #999;
+        }
+    }
+    .content {
+        height: @subCellHeight;
+        padding: 0 30px 0 0;
+        .flexDisplay();
+        flex-direction: row;
+        .dropdown-wrap {
+            padding: 0 30px;
+            box-sizing: border-box;
+            .flexDisplay();
+            align-items: center;
+            justify-content: center;
+            height: @subCellHeight;
+            cursor: pointer;
+            .border-right();
+            .el-dropdown-link {
+                .flexDisplay();
+                color: #5d5d5d;
+            }
+            .el-dropdown {
+                .iconfont {
+                    color: #f84d6c;
+                    font-size: 16px;
+                    width: 16px;
+                    height: 19px;
+                    .flexDisplay();
+                    align-items: center;
+                    justify-content: center;
+                    margin-left: 8px;
+                }
+            }
+            .el-badge {
+                .iconfont {
+                    font-size: 20px;
+                    width: 20px;
+                    height: 20px;
+                    .flexDisplay();
+                    align-items: center;
+                    justify-content: center;
+                    color: #333;
+                    &.icon-mail {}
+                    &.icon-notification {}
+                }
+                &.mail {
+                    .el-badge__content {
+                        background-color: #f33473;
+                    }
+                }
+                &.notification {
+                    .el-badge__content {
+                        background-color: #9a8cef;
+                    }
+                }
+            }
+        }
+        .avatar-wrap {
+            .flexDisplay();
+            height: @subCellHeight;
+            width: @subCellHeight;
+            justify-content: center;
+            align-items: center;
+            margin-left: 30px;
+            img {
+                cursor: pointer;
+                height: @subCellHeight;
+                width: @subCellHeight;
+                border-radius: @subCellHeight;
+                border: 2px solid #ccc;
+            }
+        }
+    }
+}