xt-ems-front/src/views/index/components/login.vue

<template>
    <div class="xs-lg ggshown">
        <img
            style="width:100%;height:100%;position:absolute;"
            src="../../../assets/img/icore-shown.png"
        />
        <section class="xs-lg-content xs-lg-mmw">
            <div class="xs-lg-bg">
                <div class="frame-area">
                    <div class="desc-area" style="background: none;color: #fff;font-size: 13px;">安泰控股集团智能管控系统</div>
                    <div style="position: absolute;left: 30px;width: 346px;top: 105px;">
                        <el-form
                            :inline="false"
                            ref="loginForm"
                            :model="loginForm"
                            :rules="loginFormRules"
                            class="xs-lg-form"
                        >
                            <el-form-item
                                style="margin-bottom:20px"
                                prop="loginName"
                            >
                                <el-input
                                    v-model="loginForm.loginName"
                                    placeholder="用户名"
                                >
                                    <i
                                        class="oa-login-ibg oa-login-ibg1"
                                        slot="prefix"
                                    ></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item
                                style="margin-bottom:20px"
                                prop="password"
                            >
                                <el-input
                                    v-model="loginForm.password"
                                    :type="pwdShow ? 'text' : 'password'"
                                    placeholder="密码"
                                    @keyup.enter.native="loginSubmit('loginForm')"
                                >
                                    <i
                                        class="oa-login-ibg oa-login-ibg2"
                                        slot="prefix"
                                    ></i>
                                    <i
                                        class="xs-icons xs-icons-see oa-login-ibg4"
                                        :class="{ 'xs-icons-see-reverse': !pwdShow }"
                                        @click="showPwd"
                                        slot="suffix"
                                    ></i>
                                </el-input>
                            </el-form-item>
                            <el-form-item style="margin-bottom:20px">
                                <el-button
                                    type="primary"
                                    class="xs-lg-btn"
                                    size=""
                                    @click="loginSubmit('loginForm')"
                                    :loading="loginBtnLoading"
                                >登&nbsp;录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <div
                    v-if="false"
                    class="xs-lg-md"
                >
                    <div class="login-bac">
                    </div>
                    <el-form
                        :inline="false"
                        ref="loginForm"
                        :model="loginForm"
                        :rules="loginFormRules"
                        class="xs-lg-form"
                    >
                        <el-form-item
                            style="margin-bottom:20px"
                            prop="loginName"
                        >
                            <el-input
                                v-model="loginForm.loginName"
                                placeholder="用户名"
                            >
                                <i
                                    class="oa-login-ibg oa-login-ibg1"
                                    slot="prefix"
                                ></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            style="margin-bottom:20px"
                            prop="password"
                        >
                            <el-input
                                v-model="loginForm.password"
                                :type="pwdShow ? 'text' : 'password'"
                                placeholder="密码"
                                @keyup.enter.native="loginSubmit('loginForm')"
                            >
                                <i
                                    class="oa-login-ibg oa-login-ibg2"
                                    slot="prefix"
                                ></i>
                                <i
                                    class="xs-icons xs-icons-see oa-login-ibg4"
                                    :class="{ 'xs-icons-see-reverse': !pwdShow }"
                                    @click="showPwd"
                                    slot="suffix"
                                ></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item style="margin-bottom:20px">
                            <el-button
                                type="primary"
                                class="xs-lg-btn"
                                size=""
                                @click="loginSubmit('loginForm')"
                                :loading="loginBtnLoading"
                            >登&nbsp;录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import { cookieUserId, cookieTime, cookieUserName } from '@/config/config.js';
import { setCookie, getCookie, formatDate } from '@/utils/util.js';
import store from '@/store/index.js';
import JsSHA from 'jssha'
const shaObj = new JsSHA('SHA-1', 'TEXT', { encoding: 'UTF8' })
export default {
    data () {
        return {
            store,
            loginBtnLoading: false,
            pwdShow: false,
            shaObj,
            loginForm: {
                loginName: '',
                password: '',
                postId: '',
                date: store.getters['index/login/workDate']
            },
            loginFormRules: {
                loginName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]// ,
                // postId: [
                //   { required: true, message: '请选择岗位', trigger: 'change' }
                // ]
            }
        }
    },
    beforeCreate () {
        let token = getCookie('accessToken');
        if (token) {
            this.$router.push({ path: 'main' })
        }
        window.top.localStorage.setItem('ownPrivilege', '')
    },
    mounted () {
        // 从cookie中获取上一次的登录用户名，赋值给用户名
        if (getCookie('loginName')) {
            this.loginForm.loginName = getCookie('loginName');
        }
    },
    destroyed () {
    },
    methods: {
        loginSubmit (formName) {
            this.loginForm.loginName = this.loginForm.loginName.trim();
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // if (this.loginForm.loginName === 'admin' && this.loginForm.password === '123456') {
                    //     // 前期无后台测试用
                    //     setCookie('accessToken', 'accessToken', cookieTime, '/');
                    //     setCookie('refreshToken', 'refreshToken', cookieTime, '/');
                    //     setCookie('loginName', this.loginForm.loginName);
                    //     setCookie('workDate', this.loginForm.date);
                    //     this.store.commit('userInfo', {
                    //         userName: this.loginForm.loginName
                    //     });
                    //     let sRedirect = this.$route.query.redirect;
                    //     if (sRedirect) {
                    //         this.$router.push({ path: sRedirect });
                    //     } else {
                    //         this.$router.push({ path: 'main' });
                    //     }
                    // } else {
                    //     this.$message({
                    //         message: '账号或密码错误',
                    //         type: 'error'
                    //     });
                    // }
                    // /*
                    // 登陆中 登录按钮不可用
                    this.loginBtnLoading = true;
                    let form = JSON.parse(JSON.stringify(this.loginForm));
                        // this.shaObj.update(form.password)
                        // form.password = this.shaObj.getHash('HEX')
                    this.store.dispatch('index/login/login', form).then(res => {
                      if (res.code === '0') {
                        //  登录成功
                        //  设置缓存信息
                        setCookie('accessToken', res.data.accessToken, cookieTime, '/');
                        setCookie('refreshToken', res.data.refreshToken, cookieTime, '/');
                        setCookie('loginName', this.loginForm.loginName);
                        setCookie('userId', res.data.user.userId);
                        setCookie('userInfo', JSON.stringify(res.data.user));
                        setCookie('account', res.data.user.userName);
                        let sRedirect = this.$route.query.redirect;
                        let userInfo = res.data.user;
                        if (userInfo.sysCompanys) {
                          // 公司列表过多时cookie存放失败，存至localStorage
                          // setCookie('companys', JSON.stringify(userInfo.sysCompanys));
                          // window.localStorage.setItem('sysGroup', JSON.stringify(userInfo.sysGroup));
                          // window.localStorage.setItem('companys', JSON.stringify(userInfo.sysCompanys));
                          if (userInfo.hasOwnProperty('sysCompanys')) {
                            window.localStorage.setItem('companyId', userInfo.sysCompanys[0].id);
                          }
                        }
                        console.log(sRedirect);
                        if (sRedirect) {
                          this.$router.push({ path: sRedirect });
                        } else {
                           this.$router.push({ path: 'main' }).catch(() => {});
                        }
                      } else {
                        //  登录失败
                        // 提示
                        this.$message({
                          message: res.message,
                          type: 'error'
                        });
                      }
                      this.loginBtnLoading = false;
                        console.log(res.date)
                    }).catch(() => {
                      this.loginBtnLoading = false;
                    });
                    // */
                } else {
                    return false;
                }
            });
        },
        showPwd () {
            this.pwdShow = !this.pwdShow;
        }
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.ggshown .el-button--primary,
.ggshown .el-button--primary:hover {
    color: rgba(8, 129, 153) !important;
    background-color: rgba(0, 255, 170) !important;
    border-color: rgba(0, 255, 170) !important;
}
.ggshown .el-input__inner {
    color: #eded !important;
    /* padding-left: 80px !important; */
    -webkit-appearance: none;
    background-color: rgba(1, 1, 1, 0.1);
    background-image: none;
    /* border-radius: 4px; */
    border: 0px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 50px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
}
.ggshown input:-webkit-autofill {
    -webkit-text-fill-color: #eded !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-transition: background-color 50000s ease-in-out 0s !important;
    transition: background-color 50000s ease-in-out 0s !important;
}
.frame-area {
    position: absolute;
    right: 295px;
    width: 372px;
    height: 336px;
    top: 173px;
    background: url(../../../assets/img/icore-shown-frame.png) no-repeat;
}
.desc-area {
    position: absolute;
    left: 55px;
    width: 135px;
    height: 31px;
    top: 63px;
    background: url(../../../assets/img/icore-shown-desc.png) no-repeat;
}
.login-bac {
    height: 60px;
    background-image: url(../../../assets/img/login.png);
}
.xs-lg-mmw {
    margin: 0 auto;
    min-width: 1200px;
    max-width: 1920px;
}
.xs-lg {
    position: relative;
    height: 100%;
    width: 100%;
    min-width: 1200px;
    min-height: 600px;
    max-width: 1920px;
    /* background: url() 100% 100% no-repeat; */
}
.xs-lg-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 60px;
    overflow: hidden;
    background-image: url(../../../assets/img/ytg_tab.png);
}

.xs-lg-content {
    position: relative;
    padding-top: 60px;
    height: 100%;
    /* background: url(../../../assets/img/login/login-bg.png) center center */
    /* no-repeat; */
}
.xs-lg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* margin-top: -270px; */
    overflow: hidden;
    /* background: url(../../../assets/img/login/login_blue.png) center center */
    /* no-repeat; */
}
.xs-lg-line {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    left: 50%;
    z-index: 1;
    height: 1px;
    background-color: #fff;
    -webkit-animation: line_fadeIn 8s ease-out 1.2s both infinite;
    animation: line_fadeIn 8s ease-out 1.2s both infinite;
}
@-webkit-keyframes line_fadeIn {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    60% {
        opacity: 0.6;
    }
    85% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes line_fadeIn {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.6;
    }
    60% {
        opacity: 0.6;
    }
    85% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.xs-lg-line12 {
    width: 200px;
    margin-left: -655px;
    top: 270px;
    -webkit-transform: rotate3d(0, 0, 1, 126deg);
    transform: rotate3d(0, 0, 1, 126deg);
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.xs-lg-line13 {
    width: 200px;
    margin-left: -605px;
    top: 375px;
    -webkit-transform: rotate3d(0, 0, 1, 12deg);
    transform: rotate3d(0, 0, 1, 12deg);
    -webkit-animation-delay: 1.35s;
    animation-delay: 1.35s;
}
.xs-lg-line24 {
    width: 200px;
    margin-left: -520px;
    top: 177px;
    -webkit-transform: rotate3d(0, 0, 1, 167deg);
    transform: rotate3d(0, 0, 1, 167deg);
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.xs-lg-line35 {
    width: 250px;
    margin-left: -430px;
    top: 339px;
    -webkit-transform: rotate3d(0, 0, 1, 147deg);
    transform: rotate3d(0, 0, 1, 147deg);
    -webkit-animation-delay: 1.65s;
    animation-delay: 1.65s;
}
.xs-lg-line45 {
    width: 200px;
    margin-left: -365px;
    top: 210px;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s;
}
.xs-lg-line56 {
    width: 200px;
    margin-left: -245px;
    top: 360px;
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-delay: 1.95s;
    animation-delay: 1.95s;
}
.xs-lg-line57 {
    width: 200px;
    margin-left: -215px;
    top: 210px;
    -webkit-transform: rotate3d(0, 0, 1, 145deg);
    transform: rotate3d(0, 0, 1, 145deg);
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}
.xs-lg-line58 {
    width: 300px;
    margin-left: -215px;
    top: 270px;
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.xs-lg-line68 {
    width: 250px;
    margin-left: -125px;
    top: 345px;
    -webkit-transform: rotate3d(0, 0, 1, 137deg);
    transform: rotate3d(0, 0, 1, 137deg);
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
}
.xs-lg-line78 {
    width: 150px;
    margin-left: -35px;
    top: 205px;
    -webkit-transform: rotate3d(0, 0, 1, 145deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-delay: 2.55s;
    animation-delay: 2.55s;
}
.xs-lg-icon {
    display: inline-block;
    position: absolute;
    left: 50%;
    z-index: 2;
}
.xs-lg-icon1 {
    top: 315px;
    margin-left: -650px;
    width: 70px;
    height: 70px;
    background: url(../../../assets/img/login/login-list-icon1.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.5s both;
    animation: aop_up 0.6s ease-out 0.5s both;
}
.xs-lg-icon2 {
    top: 150px;
    margin-left: -550px;
    width: 94px;
    height: 94px;
    background: url(../../../assets/img/login/login-list-icon2.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.3s both;
    animation: aop_up 0.6s ease-out 0.3s both;
}
.xs-lg-icon3 {
    top: 340px;
    margin-left: -430px;
    width: 70px;
    height: 70px;
    background: url(../../../assets/img/login/login-list-icon3.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.5s both;
    animation: aop_up 0.6s ease-out 0.5s both;
}
.xs-lg-icon4 {
    top: 130px;
    margin-left: -350px;
    width: 55px;
    height: 55px;
    background: url(../../../assets/img/login/login-list-icon4.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.7s both;
    animation: aop_up 0.6s ease-out 0.7s both;
}
.xs-lg-icon5 {
    top: 220px;
    margin-left: -250px;
    width: 100px;
    height: 100px;
    background: url(../../../assets/img/login/login-list-icon5.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.3s both;
    animation: aop_up 0.6s ease-out 0.3s both;
}
.xs-lg-icon6 {
    top: 410px;
    margin-left: -130px;
    width: 55px;
    height: 55px;
    background: url(../../../assets/img/login/login-list-icon6.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.7s both;
    animation: aop_up 0.6s ease-out 0.7s both;
}
.xs-lg-icon7 {
    top: 100px;
    margin-left: -50px;
    width: 72px;
    height: 72px;
    background: url(../../../assets/img/login/login-list-icon7.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.5s both;
    animation: aop_up 0.6s ease-out 0.5s both;
}
.xs-lg-icon8 {
    top: 240px;
    margin-left: 50px;
    width: 55px;
    height: 55px;
    background: url(../../../assets/img/login/login-list-icon8.png) center
        center no-repeat;
    -webkit-animation: aop_up 0.6s ease-out 0.7s both;
    animation: aop_up 0.6s ease-out 0.7s both;
}
@-webkit-keyframes aop_up {
    0% {
        -webkit-transform: translate3d(0, 150%, 0) scale(0.2, 0.2);
        transform: translate3d(0, 150%, 0) scale(0.2, 0.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
        transform: translate3d(0, 0, 0) scale(1, 1);
        opacity: 1;
    }
}
@keyframes aop_up {
    0% {
        -webkit-transform: translate3d(0, 150%, 0) scale(0.2, 0.2);
        transform: translate3d(0, 150%, 0) scale(0.2, 0.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1, 1);
        transform: translate3d(0, 0, 0) scale(1, 1);
        opacity: 1;
    }
}
.xs-lg-bgi {
}
.xs-lg-footer {
    text-align: center;
    padding: 20px 0 30px 0;
}
.xs-lg-footer > p {
    padding: 5px 0;
}
.xs-lg-md {
    background-color: #e5e5e5 !important;
    font-size: 12px;
    width: 340px;
    background-color: #fff;
    position: absolute;
    top: 10px;
    left: 57%;
    margin-left: 200px;
    box-shadow: 0 0 5px #666;
    border-radius: 0px;
    animation: fadeIn 0.4s ease-out 0.4s both;
    transition: box-shadow 0.4s ease-out;
}
.xs-lg-md:hover {
    box-shadow: 0 0 20px #666;
}
.xs-lg-md-h1 {
    font-size: 27px;
    font-family: cursive;
    font-weight: bold;
    color: #3d9df2;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #e3e3e3;
}
.oa-login-form {
    box-sizing: border-box;
    padding: 30px 40px 50px;
}
.oa-login-fl {
    padding-bottom: 20px;
}
.oa-login-input {
    padding: 8px 10px 0 50px;
    width: 100%;
    height: 36px;
    line-height: 28px;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid #d9d9d9;
    background-color: inherit;
    outline: none;
    font-size: 14px;
}
.oa-login-ibg {
    position: absolute;
    left: 15px;
    top: 15px;
    height: 20px;
    width: 20px;
}
.oa-login-ibg1 {
    background: url(../../../assets/img/icore-shown-user.png) center center
        no-repeat;
}
.oa-login-ibg2 {
    background: url(../../../assets/img/icore-shown-psw.png) center center
        no-repeat;
}
.oa-login-ibg3 {
    background: url(../../../assets/img/login/login-icon3.png) center center
        no-repeat;
}
.oa-login-ibg4 {
    position: absolute;
    right: 15px;
    top: 20px;
}
.oa-login-b {
    padding-top: 18px;
}
.xs-lg-btn {
    margin-top: 5px;
    width: 100%;
    height: 45px;
    font-size: 14px;
    border-radius: 0px;
}
</style>