1

src/views/Account/Login.vue

+<template>
+  <div class="login-container">
+      <header class="login-head">飞稻</header>
+      <div>
+        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" label-position="left" class="login-form">
+            <el-form-item label="手机号/电子邮件" prop="username">
+                <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="pass">
+                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
+        </el-form>
+      </div>
+  </div>
+</template>
+
+<script>
+import { loginApi } from '@/libs/request/api.js';
+export default {
+    data() {
+        var validateUserName = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入手机号/电子邮件'));
+            } else {
+                callback();
+            }
+        };
+        var validatePass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入密码'));
+            } else {
+                callback();
+            }
+        };
+        return {
+            ruleForm: {
+                username: '',
+                pass: '',
+            },
+            rules: {
+                username: [
+                    { validator: validateUserName, trigger: 'blur' }
+                ],
+                pass: [
+                    { validator: validatePass, trigger: 'blur' }
+                ],
+            }
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+            if (valid) {
+                loginApi({ username:this.ruleForm.username, password: this.ruleForm.pass }).then((res=>{
+                    localStorage.setItem('feidao_creation_token',1);
+                    this.$router.push({name:'Home'});
+                })).catch((err)=>{});
+            } else {
+                console.log('error submit!!');
+                return false;
+            }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    .login-container {
+        padding: 50px 5%;
+        height: 100vh;
+    }
+    .login-head {
+        padding: 50px 0 30px;
+        font-size: 20px;
+        font-style: italic;
+        font-weight: bolder;
+    }
+    .login-form {
+        box-sizing: border-box;
+        margin: 0 auto;
+        border-radius: 10px;
+        border: 1px solid #ccc;
+        padding: 40px 40px 20px;
+        width: 40%;
+        min-width: 500px;
+        .el-form-item {
+            margin-bottom: 35px;
+        }
+    }
+</style>
\ No newline at end of file