From e6f1a53eb6e89e41a10c07a24299f01744a3bceb Mon Sep 17 00:00:00 2001
From: aiyadc <565548447@qq.com>
Date: Thu, 30 Apr 2020 18:16:57 +0800
Subject: [PATCH] =?UTF-8?q?"0430=20=E7=99=BB=E9=99=86=E9=A1=B5=E9=9D=A2"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 element-vue/src/components/login.vue | 162 +++++++++++++++++++++++++++
 element-vue/src/router.js            |   6 +-
 2 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 element-vue/src/components/login.vue

diff --git a/element-vue/src/components/login.vue b/element-vue/src/components/login.vue
new file mode 100644
index 0000000..53e55bb
--- /dev/null
+++ b/element-vue/src/components/login.vue
@@ -0,0 +1,162 @@
+<template>
+    <div id="demo1" >
+        <div id="login"  >
+        <el-card  class="card" style="background-color: lavender;">
+            <div slot="header" class="clearfix">
+                <h2 >登录</h2>
+            </div>
+            <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-position="left" label-width="70px" >
+                <el-form-item label="身份：" align="left" prop="identity" style="width: 100%">
+                    <el-select v-model="ruleForm.identity" placeholder="请选择您的身份" style="width:100% ">
+                        <el-option
+                                v-for="item in character"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="账号：" required prop="account">
+                    <el-input type="text" v-model="ruleForm.account" placeholder="请输入您的账号" prefix-icon="el-icon-user-solid" class="required"></el-input>
+                </el-form-item>
+               <el-form-item label="密码："  required prop="psw">
+                   <el-input type="password" v-model="ruleForm.psw" placeholder="请输入您的密码" prefix-icon="el-icon-s-goods"></el-input>
+               </el-form-item>
+                <el-link class="phoneMessage link">手机短信登陆</el-link>
+                <el-link class="forgetPsw link" @click="dialogVisible = true">忘记密码</el-link>
+                <el-divider></el-divider>
+            </el-form>
+            <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%">登录</el-button>
+
+        </el-card>
+        </div>
+
+        <div id="forgetPsw">
+            <el-dialog
+                    title="提示"
+                    :visible.sync="dialogVisible"
+                    width="30%">
+                <span>请联系超级管理员重置密码</span>
+                <span slot="footer" class="dialog-footer">
+    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+                </span>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {get, post} from "~/utils";
+
+    export default {
+        name: "login",
+        data(){
+            return{
+                ruleForm: {
+                            identity:'',
+                            account:'',
+                            psw:'',
+                    },
+                character:[{
+                    label:'超级管理员',
+                    value:'supAdmister'
+                },
+                    {
+                        label:'管理员',
+                        value:'admister'
+                    },
+                    {
+                        label:'老师',
+                        value:'teacher'
+                    }
+
+                ],
+                rules: {
+                    account: [{
+                        required: true, message: '请输入您的账号', trigger: 'blur'
+                    }],
+                    psw:[
+                        {
+                            required:true,message:'请输入您的密码',trigger: 'blur'
+                        }
+                    ],
+                    identity: [{
+                        required:true,message:'请选择您的身份',trigger: 'change'
+                    }]
+                },
+                dialogVisible:false
+            }
+        },
+        mounted() {
+            console.log('This is login')
+        },
+        methods: {
+            aaa:function(){
+                console.log('aaaa')
+            },
+            submitForm:function(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        console.log(this.ruleForm.identity)
+                        console.log(this.ruleForm.account)
+                        console.log(this.ruleForm.psw)
+                        get('login',{
+                            identity: this.ruleForm.identity,
+                            account: this.ruleForm.account,
+                            psw: this.ruleForm.psw
+                        })
+                        post('login',{
+                            identity: this.ruleForm.identity,
+                            account: this.ruleForm.account,
+                            psw: this.ruleForm.psw
+                        })
+                        // axios.post('/login', {
+                        //     identity: this.identity,
+                        //     account: this.account,
+                        //     psw: this.psw
+                        // })
+                        //     .then(function (response) {  //取出服务器响应回来的数据
+                        //         console.log(response);
+                        //         this.$router.push('/')
+                        //     })
+                    } else {
+                        console.log('error submit!!');
+                        return false;
+                    }
+                });
+            },
+        },
+        async mounted() {
+            const data = await post('weapp/login',{
+                code:"123456"
+            })
+            console.log(data)
+        }
+
+    }
+</script>
+
+<style scoped>
+    #demo1{
+          background-color: aquamarine;
+    }
+    #login{
+        width: 400px;
+        /*z-index:2*/
+    }
+    .card{
+        position: absolute;
+        top: 25%;
+        right: 10%;
+        width: 30%;
+    }
+
+    .forgetPsw{
+        position: relative;
+        left: 28%;
+    }
+    .phoneMessage{
+        position: relative;
+        left: 25%;
+    }
+</style>
diff --git a/element-vue/src/router.js b/element-vue/src/router.js
index eedb3d3..772f484 100644
--- a/element-vue/src/router.js
+++ b/element-vue/src/router.js
@@ -5,7 +5,7 @@ import VueRouter from "vue-router";
 import test from "~/pages/test";
 import teacher from "~/pages/teacher/index";
 import personal from "~/pages/teacher/personal";
-import personalMessage from "~/components/personalMessage";
+import login from "~/components/login";
 
 // 要告诉 vue 使用 vueRouter
 Vue.use(VueRouter);
@@ -32,6 +32,10 @@ const routes = [
                 component: personal
             }
         ]
+    },
+    {
+        path:"/login",
+        component:login
     }
 ]