fj-dc-ui/.svn/pristine/b8/b87271610bb3c89b2a3e449a2ebe08a9777f9975.svn-base

<template>
    <div class="login">
        <div class="login_content" style="
            display:  flex;
            flex-direction: column;
            justify-content:  space-around;
            align-items:  center;
            box-shadow: 0px 0px 13px 11px rgba(0, 0, 0, 0.08);">
            <img class="logoImg" src="../../assets/logo.png" style="margin: 10px auto;height: 110px;width:110px;" alt="">
             <p style="font-size: xx-large;">水利督查</p>
            <p style="font-size: x-large;">{{loginTitle}}</p>
            <div class="item" style="display:flex;flex-direction:row;justify-content:lflex-start;align-items:center;" v-show="loginType==1 || loginType==2">
                <!-- <span style="flex-basis:20%;">用户名：</span> -->
                <el-input style="flex-basis:100%;" v-model="account" :placeholder="accountPlaceHolder" @keyup.enter.native="toLogin" size="medium" v-if="loginType==1 || loginType==2"></el-input>
            </div>
            <!-- <div class="item">
                <span>密&#x3000;码：</span>

            </div> -->
            <!--   style="display:flex;flex-direction:row;justify-contnet:space-around;align-items:center;" -->
            <div class="item"  style="display:flex;flex-direction:row;justify-content:lflex-start;align-items:center;" v-show="loginType==1 || loginType==2">
                <!-- <span style="flex-basis:20%;">验证码：</span> -->
                <el-input style="flex-basis:100%;" v-model="password" type="password" :placeholder="passwordPlaceHolder" @keyup.enter.native="toLogin" size="medium" v-if="loginType==1">
                    <el-button slot="append" size="medium"  plain style="flex-basis:20%" @click="getMessage" :disabled='messageDisable'>{{messageButton}}</el-button>
                </el-input>
                <el-input v-model="password" size="medium" type="password" placeholder="请输入密码" @keyup.enter.native="toLogin" v-if="loginType==2"></el-input>
            </div>
            <div class="item" style="display:flex;flex-direction:row;justify-content:center;align-items:center;" v-show="loginType==3">
                <!-- <span style="flex-basis:20%;">用户名：</span> -->
                <canvas id="canvas" style="width:200px;height:200px;"></canvas>
            </div>
            <div class="item"  style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
                <!-- <p class="loginTypeChange" @click="loginTypeChange()" style="font-size:smaller">{{loginType!=1?'使用短信验证登录':'使用账户密码登录'}}</p> -->
                <!-- <p style="margin:0px;">登录方式:</p> -->

                <el-tooltip class="item" effect="dark" content="app扫码登录" placement="top">
                    <el-button type="text" icon="iconfont watericon1-erweima1 loginTypeButton" size="default"  @click="loginTypeChange(3)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="手机验证码登录" placement="top">
                <el-button type="text" icon="iconfont watericon1-yanzhengma loginTypeButton" size="default"  @click="loginTypeChange(1)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="账户密码登录" placement="top" >
                <el-button type="text" icon="iconfont watericon1-mima loginTypeButton" size="default"  @click="loginTypeChange(2)"></el-button>
                </el-tooltip>
            </div>
            <div v-if="loginType == 2" style="width:78%;text-align:right">
                <el-checkbox v-model="rememberPwd" style="color: #fff;">记住密码</el-checkbox>
            </div>
            <div class="item" v-if="loginType != 3" style="margin-top:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;">
                <el-button type="success"  @click="toLogin"  size="medium" style="height:60px;width:100%;font-size:x-large;">登录</el-button>
            </div>


        </div>
        <div class="download_app">
            <p>扫码下载APP</p>
            <img src="../../assets/images/appQrcode.png" alt="">
        </div>
    </div>
</template>
<script>

import request from '../../utils/gw_ajax_request.js'
import {getCookie,setCookie} from '../../utils/gw_cookie.js'
import JsEncrypt from 'jsencrypt'
import {sendMessage,loginWithMessage,qrCodeSubmit,qrCodeLogin} from '../../api/loginAPI.js'
const QRCode = require('qrcode');
const uuidv4  = require('uuid/v4');
export default {
    components:{

    },
    data(){
        return{
            account: '',
            password: '',
            messageButton:'获取验证码',
            loginTitle:'APP扫码登录',
            messageDisable:false,
            loginType:3,
            accountPlaceHolder:'请输入手机号码',
            passwordPlaceHolder:'请输入验证码',
            qrUuid:'',
            pubKey: '',
            rememberPwd: false,

        }
    },
    computed: {
        isDev:function(){
            return  window.location.href.indexOf("localhost")>-1||window.location.href.indexOf("10.1.102.136") > -1||window.location.href.indexOf("10.1.102.136") > -1;
        },
        isProd:function(){
            return window.location.href.indexOf("http://slbdc.mwr.gov.cn/")>-1;
        }
    },
    created(){
        // 在页面加载时从cookie获取登录信息
        let account = getCookie("account")
        let password = getCookie("password")
        // 如果存在赋值给表单，并且将记住密码勾选
        if(account){
            this.account = account
            this.password = password
            this.rememberPwd = true
        }
    },
    mounted(){
        this.getQrCode();
    },
    methods:{
        toLogin(){
            if(this.loginType == 1){
                this.toLoginWithMessage();
            }else{
                this.toGetPubKey();
            }
        },
        toLoginWithMessage(){
            let _self = this;
            if(!this.account){
                this.$message('请输入用户名')
                return
            }
            if(!this.password){
                this.$message('请输入密码')
                return
            }
            let params = {
                'username':this.account,
                'password':this.password
            }
            // params = JSON.stringify(params)
            try{
            loginWithMessage(this.account,this.password).then((res)=>{
                console.log(res)
                if(res.success == true){
                    let token = res.data.token
                    let userid = res.data.guid
                    // let userid = '1098101939614724096'
                    let loginName = res.data.persName
                    let guid = res.data.orgId
                    let orgNm = res.data.orgNm
                    let accessToken = res.accessToken  //token是否过期

                    localStorage.setItem('token',token)
                    localStorage.setItem('userid',userid)
                    localStorage.setItem('account',loginName)
                    localStorage.setItem('guid',guid)
                    localStorage.setItem('orgNm',orgNm)
                    localStorage.setItem('accessToken',accessToken)

                    let persType = res.data.persType;
                    let isAdmin = res.data.permission
                    localStorage.setItem('persType',persType);
                    let allNode = JSON.stringify(res.data.allNode);//当前用户所在组信息
                    let allOrg = JSON.stringify(res.data.allOrg);
                    localStorage.setItem('isAdmin',isAdmin)
                    let orgId=res.data.orgId;
                    localStorage.setItem('orgId',orgId)
                    localStorage.setItem('allOrg',allOrg);
                    localStorage.setItem("currentOrgId",res.data.defaultOrg.orgId);  //省级当前的机构id
                    localStorage.setItem("currentRlcode",res.data.defaultOrg.rlcode);  //省级当前的行政区划编码
                    localStorage.setItem("currentOrgNm",res.data.defaultOrg.orgNm);  //省级当前的机构名称
                    localStorage.setItem('allNode',allNode)
                    ;
                    this.$message.success({
                        message: '登录成功',
                        duration: 700
                    })
                    this.$router.push('/')
                }else{
                    this.$message(res.message)
                }
            },(err)=>{
                this.$message.error({
                        message: '用户名或密码错误',
                        duration: 700
                    })
            })
            }catch(e){

            }

        },
        toLoginWithPassWord(){
            if(!this.account){
                this.$message('请输入用户名')
                return
            }
            if(!this.password){
                this.$message('请输入密码')
                return
            }
            let params = {
                'username':this.account,
                'password':this.password,
                'pubKey': this.pubKey
            }
            var encrypt=new JSEncrypt();
            encrypt.setPublicKey(this.pubKey);
            params.password = encrypt.encrypt(this.password);
            // params = JSON.stringify(params)
            request.post(`/bis/insp/login?username=${params.username}&password=${params.password}&pubKey=${params.pubKey}`,{headers: {'Content-Type': 'application/json'}}).then((res)=>{
                console.log(res)
                if(res.success == true){
                    this.setUserInfo()
                    // let token = res.data.token
                    let userid = res.data.guid
                    // let userid = '1098101939614724096'
                    let loginName = res.data.persName
                    let guid = res.data.orgId
                    let orgNm = res.data.orgNm
                    let isAdmin = res.data.permission
                    let allNode = JSON.stringify(res.data.allNode);//当前用户所在组信息
                    let allOrg = JSON.stringify(res.data.allOrg);
                    let persType = res.data.persType;
                    let accessToken = res.accessToken  //token是否过期
                    // localStorage.setItem('token',token)
                    localStorage.setItem('userid',userid)
                    localStorage.setItem('account',loginName)
                    localStorage.setItem('guid',guid)
                    localStorage.setItem('orgNm',orgNm)
                    localStorage.setItem('isAdmin',isAdmin)
                    localStorage.setItem('persType',persType)
                    localStorage.setItem('allNode',allNode)
                    localStorage.setItem('accessToken',accessToken)
                    let orgId=res.data.orgId;
                    localStorage.setItem('orgId',orgId)
                    localStorage.setItem('allOrg',allOrg);
                    localStorage.setItem("currentOrgId",res.data.defaultOrg.orgId);  //省级当前的机构id
                    localStorage.setItem("currentRlcode",res.data.defaultOrg.rlcode);  //省级当前的行政区划编码
                    localStorage.setItem("currentOrgNm",res.data.defaultOrg.orgNm);  //省级当前的机构名称
                    // ;
                    this.$message.success({
                        message: '登录成功',
                        duration: 700
                    })
                    this.$router.push('/')
                }else{
                    this.$message(res.message)
                }
            })
            // axios.post(`${baseUrl}/sys/login`,params,{headers: {'Content-Type': 'application/json'}}).then((res) => {
            //     if(res.data.success == true){
            //         let token = res.data.data.token
            //         let userid = res.data.data.id
            //         let loginName = res.data.data.loginName
            //         let depId = res.data.data.depId
            //         localStorage.setItem('token',token)
            //         localStorage.setItem('userid',userid)
            //         localStorage.setItem('account',loginName)
            //         localStorage.setItem('depId',depId)
            //         getAdcd()
            //         this.$message.success({
            //             message: '登录成功',
            //             duration: 700
            //         })
            //         this.$router.push('/')
            //     }else{
            //         this.$message(res.data.message)
            //     }
            // })
        },
        getMessage:function(){
            this.messageDisable = true;
            let _self = this;
            try{
                sendMessage(this.account).then(
                    (res) => {
                        this.messageDisable = true;
                        _self.messageButton = '已发送(' + 60 + ')';
                        _self.countTime(59);
                    },
                    (err) => {
                        _self.messageDisable = false;
                     _self.messageButton = '发送验证码'
                    },
                )
            }catch(e){
                _self.messageDisable = false;
                     _self.messageButton = '发送验证码'
            }

        },
        countTime:function(countTime){
            var _self = this;
            setTimeout(function(){

                 if(countTime>0){
                      _self.messageButton = '已发送(' + countTime+ ')';
                      countTime--;
                    _self.countTime(countTime);
                }else{
                     _self.messageDisable = false;
                     _self.messageButton = '发送验证码'
                }



            },1000);
        },
        loginTypeChange:function(loginType){
            this.loginType = loginType;
            if(this.loginType == 1){
                this.loginTitle = '短信验证码登录'
                this.accountPlaceHolder = '请输入手机号码';
                this.passwordPlaceHolder = '请输入验证码';

            }else if(this.loginType == 2){
                this.loginTitle = '用户密码登录'
                this.accountPlaceHolder = '请输入账户';
                this.passwordPlaceHolder = '请输入密码';
            }else{
                this.loginTitle = 'APP扫码登录';
                this.getQrCode();
            }
        },
        getQrCode:function(){
            var canvas = document.getElementById('canvas');
            let _self = this;
            this.qrUuid = uuidv4();
            console.log(this.qrUuid);

            qrCodeSubmit(this.qrUuid).then((res) =>{
                setTimeout(function(){
                    QRCode.toCanvas(canvas, _self.qrUuid, function (error) {
                    if (error) console.error(error)
                        console.log('success!');
                        _self.toLoginWithQrCode();
                    })
                },1000);
            },(err)=>{});
        },
        toLoginWithQrCode:function(){
            var _self = this;
            let qrCode = _self.qrUuid;
            let logtyp = this.loginType;
            setTimeout(function(){

                if(logtyp == 3){
                    console.log('调用二维码登录');
                    qrCodeLogin(qrCode).then(
                        (res)=>{
                            console.log(res);
                            if(res.success){
                                let userid = res.data.guid
                                let loginName = res.data.persName
                                let guid = res.data.orgId
                                let orgNm = res.data.orgNm
                                let isAdmin = res.data.permission
                                let allNode = JSON.stringify(res.data.allNode);//当前用户所在组信息
                                let allOrg = JSON.stringify(res.data.allOrg);
                                let persType = res.data.persType;
                                let accessToken = res.accessToken  //token是否过期
                                // localStorage.setItem('token',token)
                                localStorage.setItem('userid',userid)
                                localStorage.setItem('account',loginName)
                                localStorage.setItem('guid',guid)
                                localStorage.setItem('orgNm',orgNm)
                                localStorage.setItem('isAdmin',isAdmin)
                                localStorage.setItem('persType',persType)
                                localStorage.setItem('accessToken',accessToken)
                                let orgId=res.data.orgId;
                                localStorage.setItem('orgId',orgId)
                                localStorage.setItem('allOrg',allOrg);
                                localStorage.setItem("currentOrgId",res.data.defaultOrg.orgId);  //省级当前的机构id
                                localStorage.setItem("currentRlcode",res.data.defaultOrg.rlcode);  //省级当前的行政区划编码
                                localStorage.setItem("currentOrgNm",res.data.defaultOrg.orgNm);  //省级当前的机构名称
                                localStorage.setItem('allNode',allNode)
                                _self.$message.success({
                                    message: '登录成功',
                                    duration: 700
                                })
                                _self.$router.push('/')
                            }else{
                                _self.toLoginWithQrCode();

                            }
                         }
                     );
                }



            },3000);
        },
        toGetPubKey(){
            request.post('/bis/insp/getPubKey').then(res=>{
                if(res.success){
                    this.pubKey = res.data.key
                    this.toLoginWithPassWord()
                }
            })
        },
        // 储存表单信息
        setUserInfo: function () {
            // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
            // 如果没有勾选，储存的信息为空
            if(this.rememberPwd){
                setCookie("account",this.account)
                setCookie("password",this.password)
            }else{
                setCookie("account","")
                setCookie("password","")
            }
        },
    }
}
</script>
<style>
@import url("/src/assets/iconfont/iconfont.css");
    .login{
        width: 100%;
        height: 100vh;
        background-image: url('../../assets/images/login_bj.jpg');
        background-size: 100% 100%;
        background-color: #0077c6;
        overflow: hidden;
        font-family: '微软雅黑';
    }
    .login > p{
        font-size: 28px;
        color: #fff;
        text-align: center;
        margin-top: 22vh;
        letter-spacing: 5px;
    }
    .login .login_content{
        width: 400px;
        margin: 40px auto;
        margin-top:10%;
        color: #fff;
        padding: 30px 50px;
        background-color: rgba(255, 255, 255, .2);
        border-radius: 3px;
    }
    .login .login_content p{
        text-align: center;
        font-size: 20px;
        margin-bottom: 30px;
        letter-spacing: 2px;
    }
    .login .login_content .item{
        margin-bottom: 20px;
        width:80%;
    }
    .login .el-input{
        width: 100%;
    }
    .login .el-button--mini, .el-button--mini.is-round{
        width: 30%;
        margin-left: 35%;
        margin-top: 10px;
    }
    .loginTypeChange:hover{
        color:blue;
        cursor: pointer;
    }
    .loginTypeButton{
        font-size:xx-large !important;
    }
    .download_app{
        position: absolute;
        bottom: 80px;
        right: 30px;
        color: #fff;
        text-align: center;
    }
    .download_app img{
        width: 110px;
        margin-top: 10px;
    }
    @media screen and (max-width: 1600px) {
        .login .login_content{
            width: 400px;
            margin: 40px auto;
            margin-top:4%;
            padding: 20px 40px;
        }
        .login .login_content p{
            font-size: 20px;
            margin-bottom: 26px;
            letter-spacing: 2px;
        }
        .login .login_content .item{
            margin-bottom: 10px;
        }
        .login .el-button--mini, .el-button--mini.is-round{
            margin-top: 10px;
        }
    }
</style>