完成登录界面

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
   extends: ["plugin:vue/essential", "@vue/prettier"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
   },
   parserOptions: {
     parser: "babel-eslint"

http-test/online-exam.http

@@ -7,8 +7,8 @@ Content-Type: application/json;charset=UTF-8
 "accountType":"STUDENT_CODE"}
 
 
-@token = a19d4ae9e8c04b4cba197c1f966525ff
-@key = U__109_55481
+@token = 0290ade4db874d388339aa236e7b676a
+@key = U_S_109_53286
 
 ###
 GET https://ecs-dev.qmth.com.cn:8878/api/exam_record/checkExam

package-lock.json

@@ -2081,6 +2081,14 @@
       "integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.2.tgz",
+      "integrity": "sha1-t3WXIm6WJC+NUxwNRq4pX2JCK6Q=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -2119,6 +2127,15 @@
       "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==",
       "dev": true
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "^1.3.0",
+        "is-buffer": "^1.1.5"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -2511,7 +2528,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -2689,6 +2705,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
@@ -3892,8 +3913,7 @@
     "core-js": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
-      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
-      "dev": true
+      "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -4392,7 +4412,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
       "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -4834,6 +4853,14 @@
       "integrity": "sha1-dDi3b5K0G5GfP73TUPvQdX2s3fc=",
       "dev": true
     },
+    "element-resize-detector": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.1.14.tgz",
+      "integrity": "sha1-rwZKCmGKggrVcKlcXuxbd74BKME=",
+      "requires": {
+        "batch-processor": "^1.0.0"
+      }
+    },
     "elliptic": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz",
@@ -5951,7 +5978,6 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz",
       "integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
-      "dev": true,
       "requires": {
         "debug": "^3.1.0"
       }
@@ -7668,8 +7694,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -8100,6 +8125,37 @@
         "handlebars": "^4.0.3"
       }
     },
+    "iview": {
+      "version": "2.14.3",
+      "resolved": "https://registry.npmjs.org/iview/-/iview-2.14.3.tgz",
+      "integrity": "sha512-jK5CBNuNBKUZWooCVlipBIUkNnGeZHRtypeuMo9VhQmJ9cCXmuI6BalrtxBFkBCnuUXRdFD34/kSevF9Cc2kpg==",
+      "requires": {
+        "async-validator": "^1.8.2",
+        "deepmerge": "^2.1.0",
+        "element-resize-detector": "^1.1.14",
+        "js-calendar": "^1.2.3",
+        "lodash.throttle": "^4.1.1",
+        "popper.js": "^1.14.1",
+        "tinycolor2": "^1.4.1",
+        "v-click-outside-x": "^3.0.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.1.1.tgz",
+          "integrity": "sha512-urQxA1smbLZ2cBbXbaYObM1dJ82aJ2H57A1C/Kklfh/ZN1bgH4G/n5KWhdNfOK11W98gqZfyYj7W4frJJRwA2w=="
+        }
+      }
+    },
+    "iview-loader": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/iview-loader/-/iview-loader-1.2.1.tgz",
+      "integrity": "sha512-9Hoy5kskgfgsz8mnGTQ9U/53vDuRQkKP//cPZMs1fPjOHKES8zDPVwMQrZDUTjnnIasIOwHduq/qmrHQ9YX7fA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0"
+      }
+    },
     "javascript-stringify": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-1.6.0.tgz",
@@ -9765,6 +9821,11 @@
         "nopt": "~3.0.1"
       }
     },
+    "js-calendar": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",
+      "integrity": "sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw=="
+    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
@@ -10175,6 +10236,11 @@
         "lodash._reinterpolate": "~3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
@@ -10587,8 +10653,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -11394,6 +11459,11 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
+      "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU="
+    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -13912,8 +13982,7 @@
     "regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "regenerator-transform": {
       "version": "0.12.4",
@@ -15803,6 +15872,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -16361,6 +16435,11 @@
       "integrity": "sha512-ijO9N2xY/YaOqQ5yz5c4sy2ZjWmA6AR6zASb/gdpeKZ8+948CxwfMW9RrKVk5may6ev8c0/Xguu32e2Llelpqw==",
       "dev": true
     },
+    "v-click-outside-x": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-3.0.3.tgz",
+      "integrity": "sha512-3nPkT+rOsLyy1qkDRp3nAY0a9gXlhKlCaqs5dGAZa5oUe3h5+VOUmkKh9zyGiakQ2kDZriqOUx3YNaUjJVVsjg=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",

package.json

@@ -27,9 +27,10 @@
     "@vue/test-utils": "^1.0.0-beta.16",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.0.1",
+    "iview-loader": "^1.2.1",
     "vue-template-compiler": "^2.5.16"
   },
   "browserslist": [
     "chrome >= 58"
   ]
-}
+}

src/App.vue

@@ -1,31 +1,20 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </div>
 </template>
 
 <style>
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 20px;
+  color: #999999;
 }
 </style>

src/features/login/Login.vue

@@ -1,65 +1,60 @@
 <template>
   <div class="home">
-    <div class="login-bg"></div>
-  <Row>
-    <Col :xs="{ span: 24}" :md ="{ span: 8, offset: 14}" :lg="{ span: 8, offset: 14}" >
-        <RadioGroup v-model="button2" type="button" size="large" style="width:100%;border-bottom:0px;height:40px">
-            <Radio label="学号登录" long style="width:50%;height:40px"></Radio>
-            <Radio label="身份证号登录" long disabled style="width:50%;height:40px"></Radio>
-      
-        </RadioGroup>
-      <Card style="width:100%;border-top:0px"> 
-        <div style='margin-bottom:20px;margin-top:32px;font-family: FZLTZCHK--GBK1-0;font-size: 20px;font-weight: normal;	font-stretch:normal;line-height:24px;letter-spacing: 0px;color: #444444;'>
-          <font size="5" >远程教育网络考试</font>
+
+    <div class="header">
+      <div class="school-logo">school logo</div>
+      <a class="close">关闭</a>
+    </div>
+
+    <div class="center">
+
+      <div class="content">
+        <div style="display:flex;">
+          <a :class="['qm-big-text', 'login-type', loginType === 'STUDENT_CODE' && 'active-type']" @click="loginType='STUDENT_CODE'" style="border-top-left-radius: 6px">学号登录</a>
+          <a :class="['qm-big-text', 'login-type', loginType !== 'STUDENT_CODE' && 'active-type']" @click="loginType='STUDENT_IDENTITY_NUMBER'" style="border-top-right-radius: 6px">身份证号登录</a>
+        </div>
+
+        <div class="qm-title-text" style="margin: 40px 0 20px 0">
+          远程教育网络考试
         </div>
-        <Row>
-            <Col>        
-                <Form ref="loginForm" :model="loginForm" :rules="loginFormRule">
-                  <FormItem prop="accountValue" style='margin-bottom:35px;height:42px'>
-                      <Input type="text" size="large" v-model="loginForm.accountValue" placeholder="登录账号">
-                          <Icon type="ios-person-outline" slot="prepend"></Icon>
-                      </Input>
-                  </FormItem>
-                  <FormItem prop="password" style='margin-bottom:35px;height:42px'>
-                      <Input type="password" size="large" v-model="loginForm.password" placeholder="密码">
-                          <Icon type="ios-locked-outline" slot="prepend"></Icon>
-                      </Input>
-                  </FormItem> 
-                  <FormItem>
-                      <Row>
-                        <Col span="18" offset ="3" v-if="errorInfo!==''">
-                             <Alert type="error" show-icon>{{errorInfo}}</Alert>
-                        </Col>
-                        <Col span="24">
-                              <Button type="success" size="large" style="height:50px" long  @click="login('loginForm')">登录</Button>
-                        </Col>
-                        <!--
-                        <Col span="12" style="padding-left: 5px;">
-                              <Button type="ghost" size="large" @click="close('loginForm')">关闭</Button>
-                        </Col>
-                         -->
-                      </Row>
-                  </FormItem>
-              </Form>
-            
-            </Col>
-
-
-        </Row>
-      </Card>
-    </Col>
-  </Row>
-</div>
+
+        <div style="margin: 0 40px 40px 40px">
+          <i-form ref="loginForm" :model="loginForm" :rules="loginFormRule">
+            <i-form-item prop="accountValue" style='margin-bottom:35px;height:42px'>
+              <i-input type="text" size="large" v-model="loginForm.accountValue" placeholder="登录账号">
+                <i-icon type="person" slot="prepend"></i-icon>
+              </i-input>
+            </i-form-item>
+            <i-form-item prop="password" style='margin-bottom:35px;height:42px'>
+              <i-input type="password" size="large" v-model="loginForm.password" placeholder="密码" @on-enter="login('loginForm')">
+                <i-icon type="locked" slot="prepend"></i-icon>
+              </i-input>
+            </i-form-item>
+            <i-form-item>
+              <div v-if="errorInfo !== ''">
+                <i-alert type="error" show-icon>{{errorInfo}}</i-alert>
+              </div>
+              <i-button size="large" class="qm-primary-button" long @click="login('loginForm')">登录</i-button>
+            </i-form-item>
+          </i-form>
+        </div>
+      </div>
+    </div>
+
+    <div class="footer"></div>
+
+  </div>
 </template>
+
 <script>
 export default {
   data() {
     return {
+      loginType: "STUDENT_CODE",
       errorInfo: "",
       loginForm: {
         accountValue: "",
-        password: "",
-        accountType: "STUDENT_CODE"
+        password: ""
       },
       loginFormRule: {
         accountValue: [
@@ -79,15 +74,26 @@ export default {
       }
     };
   },
+  created() {
+    window.localStorage.removeItem("token");
+    window.localStorage.removeItem("key");
+  },
   methods: {
     async login(name) {
+      const valid = await this.$refs[name].validate();
+      if (valid) {
+        console.log("form validated. start login...");
+      } else {
+        return;
+      }
       this.loginForm["domain"] = this.$route.query.domain || "";
       let repPara = this.loginForm;
-      const response = await this.$http.post(
-        "/api/ecs_core/auth/login",
-        repPara
-      );
-      let data = response.data || response.response.data;
+      const response = await this.$http.post("/api/ecs_core/auth/login", {
+        ...repPara,
+        accountType: this.loginType,
+        domain: process.env.VUE_APP_LOGIN_DOMAIN
+      });
+      let data = response.data;
       if (data.token) {
         this.errorInfo = "";
         //缓存用户信息
@@ -95,40 +101,64 @@ export default {
         window.localStorage.setItem("key", data.key);
       } else {
         this.errorInfo = data.desc;
-        window.localStorage.removeItem("token");
-        window.localStorage.removeItem("key");
       }
-
-      console.log(response);
-      this.$refs[name].validate(valid => {
-        if (valid) {
-        } else {
-          this.$Message.error("Fail!");
-        }
-      });
-    },
-    close(name) {
-      this.$refs[name].validate(valid => {
-        if (valid) {
-          this.$Message.success("Success!");
-        } else {
-          this.$Message.error("Fail!");
-        }
-      });
     }
   }
 };
 </script>
-<style>
-.login-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+
+<style scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.header {
+  min-height: 120px;
+}
+
+.center {
   background-image: url("./bg.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  width: 100vw;
+  min-height: 600px;
+}
+
+.content {
+  margin-top: 100px;
+  margin-left: 60%;
+  width: 300px;
+  border-radius: 6px;
+  background-color: white;
+  display: grid;
+  grid-template-areas: "";
+}
+
+.login-type {
+  flex: 1;
+  line-height: 40px;
+  background-color: #eeeeee;
+}
+
+.active-type {
+  background-color: #ffffff;
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: #eeeeee;
+  color: #999999;
+  width: 80px;
+  height: 40px;
+  line-height: 40px;
+}
+
+.close:hover {
+  color: #444444;
 }
-</style>
+</style>

src/main.js

@@ -6,15 +6,15 @@ import "./registerServiceWorker";
 
 import iView from "iview";
 import "iview/dist/styles/iview.css";
+import "./styles/global.css";
 
 import axiosPlugin from "./utils/axios";
 
 Vue.use(iView);
+Vue.use(axiosPlugin);
 
 Vue.config.productionTip = false;
 
-Vue.use(axiosPlugin);
-
 new Vue({
   router,
   store,

src/router.js

@@ -1,7 +1,6 @@
 import Vue from "vue";
 import Router from "vue-router";
 import Home from "./views/Home.vue";
-import About from "./views/About.vue";
 
 import NotFoundComponent from "./views/NotFoundComponent.vue";
 import OnlineExamHome from "./features/OnlineExam/OnlineExamHome.vue";
@@ -16,11 +15,6 @@ let router = new Router({
       name: "home",
       component: Home
     },
-    {
-      path: "/about",
-      name: "about",
-      component: About
-    },
     {
       path: "/login",
       name: "login",
@@ -39,7 +33,6 @@ let router = new Router({
 });
 
 router.beforeEach((to, from, next) => {
-  debugger;
   if (to.path === "/login") {
     next();
   } else {

src/styles/global.css

@@ -0,0 +1,60 @@
+.qm-primary-text {
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 22px;
+  letter-spacing: 0px;
+  color: #999999;
+}
+
+.qm-primary-strong-text {
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 14px;
+  letter-spacing: 0px;
+  color: #444444;
+}
+
+.qm-secondary-text {
+  font-size: 12px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: #999999;
+}
+
+.qm-big-text {
+  font-size: 16px;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: 22px;
+  letter-spacing: 0px;
+  color: #999999;
+}
+
+.qm-title-text {
+  font-size: 18px;
+  font-weight: bold;
+  font-stretch: normal;
+  line-height: 24px;
+  letter-spacing: 0px;
+  color: #444444;
+}
+
+.qm-tip-text {
+  color: #cccccc;
+}
+
+.qm-primary-button {
+  /* font-size: 36px; */
+  height: 36px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #13bb8a;
+  border-radius: 6px;
+  padding: 0 50px;
+  line-height: 36px;
+  overflow: hidden;
+}

src/utils/axios.js

@@ -1,28 +1,23 @@
 import Vue from "vue";
 import Axios from "axios";
+import { Message } from "iview";
 import router from "../router";
 //axios配置 start
 
 //请求拦截
-let $Message;
 Axios.interceptors.request.use(
   config => {
-    // if (window.localStorage.getItem("token")) {
-    //   Axios.defaults.headers.common["token"] = response.data.token;
-    //   Axios.defaults.headers.common["key"] = response.data.key;
-    // } else {
-    //   if (config.url != "/api/ecs_core/auth/login") {
-    //     router.push({
-    //       name: 'login'
-    //     })
-    //   }
-    // }
+    if (window.localStorage.getItem("token")) {
+      Axios.defaults.headers.common["token"] = window.localStorage.getItem(
+        "token"
+      );
+      Axios.defaults.headers.common["key"] = window.localStorage.getItem("key");
+    }
 
-    $Message = config.message;
     return config;
   },
   error => {
-    $Message.error({
+    Message.error({
       content: error,
       duration: 10,
       closable: true
@@ -39,81 +34,37 @@ Axios.interceptors.response.use(
   error => {
     // 这里是返回状态码不为200时候的错误处理
     let status = error.response.status;
+
+    if (status != 200) {
+      const data = error.response.data;
+      if (data && data.desc) {
+        Message.error({
+          content: data.desc,
+          duration: 6,
+          closable: true
+        });
+      }
+    }
     // 登录失效 跳转登录页面
-    if (status == 403 || status == 401) {}
-    return Promise.resolve(error);
+    if (status == 403 || status == 401) {
+      router.push({
+        name: "login"
+      });
+    }
+    return Promise.reject(error);
   }
 );
 
 Axios.defaults.withCredentials = true; //允许跨域携带cookie
-Axios.defaults.timeout = 100000; //超时时间
+Axios.defaults.timeout = 10000; //超时时间
 Axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; //标识这是一个 ajax 请求
 
-/*
-  url    
-  params JSON对象
-  type   json || form
-  method get || post
-*/
-let ajax = (url, params, type = "json", method = "get", thisObj) => {
-  let getData = method === "get" ? params : {};
-  let postData = method === "post" ? params : {};
-  let headers =
-    type == "form" ? {
-      "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
-    } : {
-      Accept: "application/json",
-      "Content-Type": "application/json; charset=UTF-8"
-    };
-
-  return new Promise(function (resolve, reject) {
-    Axios({
-        method: method,
-        url: url,
-        params: getData,
-        data: postData,
-        headers: headers,
-        withCredentials: true,
-        message: thisObj.$Message
-      })
-      .then(res => {
-        let status = res.status;
-        if (status >= 200 && status < 300) {
-          resolve(res.data.data || res.data);
-        } else {
-          $Message.error({
-            content: "服务异常：" + res.message,
-            duration: 10,
-            closable: true
-          });
-        }
-      })
-      .catch(response => {
-        $Message.error({
-          content: "服务异常(catch)：" + response.message,
-          duration: 10,
-          closable: true
-        });
-      });
-  });
-};
-
 Vue.prototype.$http = Axios;
 
-// get请求
-Vue.prototype.$get = function (url, params) {
-  return ajax(url, params, "", "get", this);
-};
-
-// post请求
-Vue.prototype.$post = function (url, params, type) {
-  return ajax(url, params, type, "post", this);
-};
-
 export default {
-  install: function (Vue, Option) {
+  install: function(Vue) {
     Object.defineProperty(Vue.prototype, "$http", {
       value: Axios
     });
   }
-};
+};

vue.config.js

@@ -48,5 +48,17 @@ for (const s of stu) {
 module.exports = {
   devServer: {
     proxy
+  },
+  chainWebpack: config => {
+    // iview Loader
+    config.module
+      .rule("vue")
+      .test(/\.vue$/)
+      .use("iview-loader")
+      .loader("iview-loader")
+      .options({
+        prefix: true
+      })
+      .end();
   }
 };