signal_web/src/views/Login.vue

<template>
    <div id="bg">
        <el-container>
            <el-header></el-header>
            <el-main>
                <h5 class="title">SignalDigger</h5>
                <span class="subtitle">专用场所无线信号安全监控系统</span>
                <el-card class="box-card">
                    <div class="center">
                        <el-form ref="form" :model="form" label-width="0px">
                            <el-form-item label="">
                                <el-input v-model="form.name" placeholder="用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input type="password" v-model="form.pwd" placeholder="密码"></el-input>
                            </el-form-item>
                            <el-form-item label="" v-loading="validImgState" element-loading-text="拼命加载中"
                                          element-loading-spinner="el-icon-loading"
                                          element-loading-background="rgba(0, 0, 0, 0.4)">
                                <el-input v-model="form.valid" placeholder="验证码"
                                          @keyup.enter.native="pwdLoginBtn"></el-input>
                                <img id="validImg" :src="valImgSrc" alt="" width="100px" height="30px"
                                     title="看不清？刷一下试试！" @click="changeValImg">
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" class="primaryBtn" @click="onSubmit">确认</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-main>
            <el-footer>
                <p>Copyright © 2020-{{thisYear}} 专用场所无线信号安全监控系统 版权所有</p>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    import {SignIn, GenVerifyPic} from '../api/getApiRes.js'

    let qs = require('qs');
    import Global from '../Global.js'

    export default {
        data() {
            return {
                thisYear: new Date().getFullYear(),
                form: {
                    name: '',
                    pwd: '',
                    valid: '',
                    picId: '',
                },
                overtime: '',
                validImgState: true,
                valImgSrc: '',
            }
        },
        mounted() {
            // 读取验证码
            this.CurentGenVerifyPic();
            this.overtime = new Date();
            // 如果是手动退出用户
            if (this.$route.query.status == 1) {
                // 刷新验证图
                this.changeValImg();
                // 重置倒计时
                this.overtime = new Date();
            }
        },
        methods: {
            CurentGenVerifyPic() {
                let that = this;
                let postdata;
                GenVerifyPic(postdata).then(res => {
                    let json = res;
                    if (json.Id) {
                        that.valImgSrc = json.Pic;
                        that.form.picId = json.Id;
                        this.validImgState = false;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            //            点击验证码切换
            changeValImg: function () {
                this.validImgState = true;
                this.CurentGenVerifyPic();
            },
            // 登陆
            onSubmit() {
                this.pwdLoginBtn()
            },
            // 清除登陆
            clearForm() {
                this.form.name = '';
                this.form.pwd = '';
                this.form.valid = '';
                this.changeValImg();
            },
            // 密码登陆
            pwdLoginBtn() {
                let that = this;
                let username = this.form.name;
                let userpwd = this.form.pwd;
                let uservalid = this.form.valid;
                // 重置验证码超时
                that.overtime = new Date();
                if (!globalValid(username, 2, 17, '用户名', that)) return;
                if (!globalValid(userpwd, 5, 17, '密码', that)) return;
                if (!globalValid(uservalid, 3, 5, '验证码', that)) return;
                this.loginInfo();
            },
            // pwd登陆
            loginInfo: function () {
                const that = this;
                let url = headapi + '?ctl=ajax&mod=index&act=login';
                let username = this.form.name;
                let userpwd = this.form.pwd;
                let uservalid = this.form.valid;
                let picId = this.form.picId;
                let current = new Date();
                let betweenTime = current - that.overtime;
                let s = 120;
                if (betweenTime > s * 1000) {
                    that.changeValImg();
                    that.$message.error('验证码已超时，请重新输入');
                    return false
                }
                let param = {
                    'verifyName': username,
                    'verifyCode': userpwd,
                    'src': 'pc',
                    'picId': picId,
                    'picCode': uservalid,
                };
                let postdata = qs.stringify(param);
                SignIn(postdata).then(res => {
                    if (res.Code == 0) {
                        that.res = res.Rs;
                        that.userName = res.Rs.userName;
                        localStorage.userName = res.Rs.username;
                        localStorage.token = res.Rs.token;
                        that.$router.push({path: '/'});
                    } else {
                        if (res.Code == 10005) {
                            that.$refs.userpwd.value = '';
                            that.$notify({
                                title: '警告',
                                message: '密码错误，请重新输入',
                                type: 'warning'
                            });
                        } else {
                            that.$notify({
                                title: '警告',
                                message: res.Memo,
                                type: 'warning'
                            });
                            that.form.valid = '';
                            that.changeValImg();
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
    #bg {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background-image: url("../assets/img/login.png");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
    }

    .title {
        font-size: 43px;
        font-weight: 600;
        text-align: center;
        color: #fff;
        margin-top: 2%;
        margin-bottom: 5px;
    }

    .subtitle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        color: #fff;
        margin-bottom: 40px;
        font-size: 14px;
    }

    .box-card {
        width: 626px;
        height: 389px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.18) !important;
        /*background: url("../assets/img/goss.png");*/
        /*background-image: url("../assets/img/goss.png");*/
        border: 1px solid rgba(255, 255, 255, 0.41);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% 100%;
    }

    .box-card .boxTitle {
        font-size: 30px;
        margin-bottom: 15px;
    }

    #validImg {
        position: relative;
        float: right;
        bottom: 35px;
    }

    .center {
        width: 300px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 12px;
        margin-top: 27px;
        margin-bottom: 27px;
        padding: 31px 133px;
    }

    .primaryBtn {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 44px;
        line-height: 24px;
        font-size: 16px;
    }

    .el-card {
        background: none;
    }

    /deep/ .el-input__inner {
        background: none;
        border: 1px solid #70C2FF;
        color: #BEE3FF;
    }

    /deep/ .el-input__inner::placeholder {
        color: #BEE3FF;
    }

    /deep/ .el-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        color: #6DC1FF;
    }
</style>