FE_middlePlatform_server/src/views/Login.vue

<template>
    <div class="login-wrap">
        <div class="header">
            <div class="logo">
                <img src="../assets/img/logo.png">
            </div>
        </div>

        <div class="ms-login">
            <div class="ms-title">
                <p class="title">账号登录</p>
                <el-form :model="param" :rules="rules" ref="login" label-width="0px" style="margin-top: 40px">
                    <el-form-item prop="account">
                        <el-input @blur="blur" v-model="param.account" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            type="password"
                            placeholder="请输入密码"
                            v-model="param.password"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input
                            placeholder="请输入验证码"
                            v-model="param.code"
                            @keyup.enter.native="submitForm()"
                        >
                        </el-input>
                        <img style="cursor: pointer;" @click="blur" :src="verificationIMG" class="verification" alt="">
                    </el-form-item>
                    
                    <div style="width:100%;display:flex;justify-content: flex-end;">
                        <el-button type="text" class="forget">忘记密码?</el-button>
                    </div>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm()">马上登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <v-footer class="footer" ref="footer"></v-footer>
    </div>
</template>

<script>
import vFooter from '../components/Footer'
export default {
    data: function() {
        return {
            param: {
                account: '0621Stu',
                password: '111aaa',
                code:'',
                platform:3,
                random:''
            },
            rules: {
                account: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
            },
            activeName: 'first',
            verificationIMG:''
        };
    },
    components: {
        vFooter
    },
    created(){

        this.blur()
    },
    methods: {
        submitForm() {

            this.$refs.login.validate(valid => {
                if (valid) {
                    this.$post(this.api.logins,this.param).then(res => {
                        this.$message.success(res.message);
                        sessionStorage.setItem('token',res.data.token)
                        this.$router.push({
                            path:'/customer'
                        });
                        localStorage.setItem('ms_username', this.param.username);
                        // 作用未知，暂时注释
                        // let user = res.message.retvalue
                        // this.$store.commit("userLoginData", { userLogin_id : user.userId,userName: user.userName,roleId: user.roleId});
                    }).catch(res => {
                        this.$message.error(res.message)
                    });
                } else {
                    this.$message.error('请输入账号/密码/验证码');
                    return false;
                }
            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        blur(){
            if(!this.param.account){
                return this.verificationIMG = ''
            }
            this.param.random = Math.floor(Math.random()*999999999)
            this.verificationIMG = this.api.verification+'?random='+`${this.param.random}`
        }
    },
};
</script>

<style scoped lang="scss">
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/login-bg.png);
    background-size: 100%;
}
.ms-title {
    width: 548px;
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%,0);
}
.ms-login {
    position: relative;
    width: 1200px;
    height: 82%;
    margin: 60px auto 20px;
    background-image: url(../assets/img/login-input.png);
    box-shadow:0px 0px 79px 0px rgba(11,15,65,0.36);
    overflow: hidden;
}
.title{
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 88px;
    margin-bottom: 50px;
    font-weight: bold;
    background:linear-gradient(90deg,rgba(94,206,253,1),rgba(91,67,231,1));
    box-shadow:0px 7px 27px 0px rgba(50,129,255,0.51);
    border-radius:10px;
}
.login-tips {
    text-align: center;
    color: #999;
    font-weight:bold;
}
.forget{
    margin-bottom: 28px;
    text-align: right;
    color: #999;
    font-weight:bold;
    &:hover{
        color: #0092FF;
    }
}
.thirdParty{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 33px;
}

/* 头部 */
.header{
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
}
.logo{
    width: 171px;
    height: 40px;
    margin-left: 20px;
}
img{
    width: 100%;
    height: 100%;
}
.header_title{
    width: 33%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_title a{
    cursor: pointer;
}
.header_title a:hover{
    color: blueviolet;
}
.nul{
    width:80px;
    margin-right: 30px;
}
.verification{
    position: absolute;
    top: 1px;
    right: 1px;
    width: 160px;
    height: 78px;
}
</style>