feat(PageFooter): 抽离 PageFooter 组件

Author: lbwa

src/components/PageFooter/index.vue

@@ -0,0 +1,21 @@
+<template functional>
+  <p class="author__info">Copyright &copy; {{new Date().getFullYear()}} 版权所有 All rights reserved.</p>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang='scss' scoped>
+
+$gap: 60px;
+
+.author__info {
+  margin: 0;
+  text-align: center;
+  line-height: $gap;
+  font-size: 14px;
+  color: #999999;
+}
+</style>

src/layout/Material/index.vue

@@ -13,7 +13,7 @@
       </el-main>
 
       <el-footer class="layout__material__footer">
-        Copyright &copy; {{currentYear}}
+        <page-footer/>
       </el-footer>
     </el-container>
   </el-container>
@@ -22,17 +22,13 @@
 <script>
 import MaterialHeader from './Header'
 import MaterialAside from './Aside'
+import PageFooter from 'COMPONENTS/PageFooter'
 
 export default {
-  computed: {
-    currentYear () {
-      return new Date().getFullYear()
-    }
-  },
-
   components: {
     MaterialHeader,
-    MaterialAside
+    MaterialAside,
+    PageFooter
   }
 }
 </script>

src/assets/animation.gif src/pages/Login/img/animation.gifsrc/assets/animation.gif renamed to src/pages/Login/img/animation.gif

@@ -40,12 +40,13 @@
       </el-form-item>
     </el-form>
     <el-footer class="login__footer">
-      <p class="author__info">Copyright &copy; {{currentYear}}</p>
+      <page-footer/>
     </el-footer>
   </section>
 </template>
 
 <script>
+import PageFooter from 'COMPONENTS/PageFooter'
 import rules from './rules'
 
 export default {
@@ -60,24 +61,28 @@ export default {
     }
   },
 
-  computed: {
-    currentYear () {
-      return new Date().getFullYear()
-    }
-  },
-
   methods: {
     onSubmit () {
-      this.toggleLoading(true)
-      this.$refs.login.validate(isValid => {
-        if (!isValid) return
+      this.switchLoading(true)
+      this.$refs.login.validate()
+        .then(valid => ({
+          ...this.userInfo,
+          vm: this
+        }))
         // This action has included routes replacement
-        this.$store.dispatch('login/userLogin', { ...this.userInfo, vm: this })
-      })
+        // dispatch() will return a Promise instance
+        .then(payload => this.$store.dispatch('login/userLogin', payload))
+        .then(() => this.$router.replace('/'))
+        .catch(e => console.error('[Login form]: validate failed !'))
+        .finally(() => this.switchLoading(false))
     },
-    toggleLoading (state) {
+    switchLoading (state) {
       this.isLoading = state
     }
+  },
+
+  components: {
+    PageFooter
   }
 }
 </script>
@@ -88,9 +93,9 @@ export default {
 }
 
 .login {
-  background-image: url('~ASSETS/animation.gif');
+  background-image: url('~./img/animation.gif');
   background-repeat: no-repeat;
-  background-position: center bottom;
+  background-position: center center;
 
   &__form {
     display: flex;