fj-dc-ui/.svn/pristine/f2/f2a34e23c260446594ec201a2c5cd917074be2d1.svn-base

<template>
    <div class="login">
        <div class="login_content" style="
            box-shadow: 0px 0px 13px 11px rgba(0, 0, 0, 0.08);">
            <h2 style="text-align:center;margin-bottom: 20px;font-size:28px">新疆兵团水利监督</h2>
            <div class="login_content_left">
                <div class="province_logo">
                    <!-- <p>福建水利监督</p> -->
                    <img src="../../assets/images/province_logo.png" alt="">
                </div>
                <span class="left_hr"></span>
                <div class="download_app">
                    <p>扫码下载APP</p>
                    <img src="../../assets/images/appQrcode.png" alt="">
                    <div class="llq_xz">
                        <svg t="1590743046917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2942" width="28" height="28"><path d="M382.4 514.4c0 69.6 57.6 127.2 127.2 127.2S636.8 584 636.8 514.4s-57.6-127.2-127.2-127.2-127.2 57.6-127.2 127.2z" fill="#BBBBBB" p-id="2943"></path><path d="M509.6 320h400.8C838.4 171.2 687.2 70.4 512 70.4c-127.2 0-242.4 52.8-321.6 139.2l136.8 240C353.6 375.2 425.6 320 509.6 320z" fill="#F75B60" p-id="2944"></path><path d="M548 704c-12 2.4-26.4 4.8-38.4 4.8-69.6 0-129.6-36-163.2-88.8L144.8 267.2c-48 69.6-74.4 153.6-74.4 244.8 0 213.6 151.2 391.2 352.8 432l-9.6-4.8L548 704z" fill="#00D19C" p-id="2945"></path><path d="M934.4 387.2H656c28.8 33.6 48 79.2 48 127.2 0 38.4-9.6 72-28.8 103.2l-194.4 336c9.6 0 21.6 2.4 31.2 2.4 244.8 0 441.6-196.8 441.6-441.6 0-45.6-7.2-88.8-19.2-127.2z" fill="#FCA253" p-id="2946"></path></svg>
                        <a href="http://pdc.goldenwater.com.cn/tools/chrome.exe" class="llq_text">浏览器下载</a>
                    </div>

                </div>
            </div>
            <div class="login_content_right">
                <div class="system_type_tab">
<!--                    <span :class="{'tabActived': tabActived == 2}" @click="changeSystem(2)">水利稽察</span>-->
                    <span :class="{'tabActived': tabActived == 1}" @click="changeSystem(1)">水利督查</span>
                </div>
                <div class="login_types">
                    <div class="item" v-show="loginType==1">
                        <i class="el-icon-s-custom"></i>
                        <el-input v-model="account" :placeholder="accountPlaceHolder" @keyup.enter.native="toLogin" size="medium" v-if="loginType==1" maxlength="11"></el-input>
                    </div>
                    <!--短信验证码图片验证-->
                    <div class="item authCode" style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center;"
                         v-show="loginType==1">
                        <i><svg t="1580975211684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1275" width="18" height="18"><path d="M511.92574 1023.975247C357.959389 1023.975247 71.50029 794.49855 71.50029 577.448076V163.162251c0-10.049894 8.416167-18.16902 18.837362-18.379424l24.95146-0.420808c0.953007 0 98.766196-1.967898 199.599304-41.895185 103.481725-40.843164 170.179849-87.936569 170.885322-88.419261l14.691162-10.421195a19.86463 19.86463 0 0 1 11.398956-3.601625 19.480951 19.480951 0 0 1 11.324696 3.539741l14.975826 10.507832c0.680719 0.482692 67.440727 47.526591 170.798685 88.419262 100.932121 39.927287 198.74531 41.895185 199.747825 41.895184l24.753432 0.420809c10.433572 0.210404 18.824985 8.32953 18.824986 18.379423l0.210404 414.285825c0 217.02572-286.508606 446.527171-440.6111 446.527171z m372.625797-812.568556c-37.860375-2.846645-117.516921-12.624251-200.267646-45.385419-84.557726-33.417134-146.725972-71.005221-172.358151-87.602398-25.557919 16.535293-87.763295 54.135757-172.296268 87.602398-82.602205 32.686908-162.03597 42.464514-200.416167 45.385419v366.041385c0 170.216979 249.576484 378.281957 372.712435 378.281957 47.724618 0 140.723264-38.726745 232.137691-123.767163 88.12222-81.909108 140.723264-177.07368 140.723264-254.490041z m-407.948946 435.660414a33.305744 33.305744 0 0 1-23.899439 10.049894 33.738929 33.738929 0 0 1-23.998453-10.037517l-101.674724-102.330691a34.345388 34.345388 0 0 1 0-48.269193 33.664668 33.664668 0 0 1 47.935022 0l77.738155 78.183717 196.269967-197.69329a33.590408 33.590408 0 0 1 47.910269 0 34.18449 34.18449 0 0 1 0 48.269194z m0 0" p-id="1276"></path></svg></i>

                        <el-input style="flex-basis:100%;" v-model="vCode" placeholder="请输入图片验证码" size="medium" v-if="loginType==1" maxlength="4">
                            <img slot="append" :src="imgUrl" alt="" style="width:112px; height: 34px; cursor: pointer; vertical-align: middle;" @click="imgClick">
                        </el-input>
                    </div>
                    <div class="item" v-show="loginType==1">
                        <i class="el-icon-lock"></i>
                        <el-input v-model="password" :placeholder="passwordPlaceHolder" @keyup.enter.native="toLogin" size="medium" v-if="loginType==1" maxlength="6">
                            <el-button slot="append" size="medium"  plain style="flex-basis:20%" @click="getMessage" :disabled='messageDisable'>{{messageButton}}</el-button>
                        </el-input>
                    </div>
                    <div class="item" v-show="loginType==3" style="padding-top: 20px;">
                        <canvas id="canvas" style="width:200px;height:200px;"></canvas>
                    </div>
                    <div class="item" v-if="loginType != 3">
                        <el-button type="primary" round  @click="toLogin">登 录</el-button>
                    </div>
                </div>
                <p class="login_text"><span></span> 登录方式 <span></span></p>
                <div class="item login_item"  style="display:flex;flex-direction:row;justify-content:center;align-items:center;">
                    <div :class="{'item': true,'active': loginType == 3}">
                        <el-button type="text" icon="iconfont watericon1-erweima1 loginTypeButton" size="default"  @click="loginTypeChange(3)"></el-button>
                        <p>二维码</p>
                    </div>
                    <div :class="{'item': true,'active': loginType == 1}">
                    <el-button type="text" icon="iconfont watericon1-yanzhengma loginTypeButton" size="default"  @click="loginTypeChange(1)"></el-button>
                        <p>验证码</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {sendMessage,loginWithMessage,qrCodeSubmit,qrCodeLogin} from '@api/loginAPI.js'
import request from '@util/gw_ajax_request'
const QRCode = require('qrcode');
const uuidv4  = require('uuid/v4');
export default {
    components:{

    },
    computed: {
        changeData() {
            const { account, vCode} = this;
            return {
                account,
                vCode
            }
        }
    },
    data(){
        return{
            account: '',
            password: '',
            vCode: '',
            messageButton:'获取验证码',
            loginTitle:'APP扫码登录',
            messageDisable: true,
            loginType:3,
            accountPlaceHolder:'请输入手机号码',
            passwordPlaceHolder:'请输入验证码',
            qrUuid:'',
            pubKey: '',
            rememberPwd: false,
            tabActived: 1,
            countTimeNum: 0,
            imgUrl: null
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.imgClick();
            this.getQrCode();
            localStorage.setItem('ownApp',this.tabActived);
        })

    },
    methods:{
        toLogin(){
            if(this.loginType == 1){
                this.toLoginWithMessage();
            }
        },
        toLoginWithMessage(){
            if(!this.account){
                this.$message('请输入手机号');
                return
            }
            if (!this.vCode) {
                this.$message('请输入图片验证码');
                return
            }
            if(!this.password){
                this.$message('请输入验证码');
                return
            }
            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 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("departId",res.data.departId);  //人员所属责任处室id-浙江
                    localStorage.setItem("departNm",res.data.departNm);  //人员所属责任处室名称-浙江
                    // 改变全局adcode状态
                    this.$store.commit('changeAdCode',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){

            }

        },
        getMessage:function(){
            try{
                sendMessage(this.account,this.imgcodeid,this.vCode).then(
                    (res) => {
                        this.messageDisable = true;
                        if(res.success){
                            this.messageButton = '已发送(' + 60 + ')';
                            this.countTime(59);
                        }else{
                            this.$message.warning(res.message);
                            this.messageDisable = false;
                            this.messageButton = '发送验证码';
                        }
                    },
                    (err) => {
                        this.messageDisable = false;
                        this.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){
            if(this.tabActived == '2'){
                localStorage.setItem('ownApp','2');
            }else{
                localStorage.setItem('ownApp','1');
            }
            this.loginType = loginType;
            if(this.loginType == 1){
                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) =>{
                if(res.success){
                    _self.qrUuid = res.data.key;
                    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;
            let timer = setTimeout(function () {
                _self.countTimeNum ++;
                if(_self.countTimeNum > 20) {
                    clearTimeout(timer);
                    _self.countTimeNum = 0;
                }else {
                    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('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("departId",res.data.departId);  //人员所属责任处室id-浙江
                                    localStorage.setItem("departNm",res.data.departNm);  //人员所属责任处室名称-浙江
                                    // 改变全局adcode状态
                                    _self.$store.commit('changeAdCode', 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);
        },
        // 选择登入系统
        changeSystem(val){
            this.tabActived = val;
            localStorage.setItem('ownApp',val)
        },
        imgClick(){
            this.imgUrl = null;
            request.get(`/bis/insp/getCaptchaImage`)
                .then(res =>{
                    this.$nextTick(()=>{
                        this.imgcodeid = res.data.imgCodeId;
                        this.imgUrl = "data:image/jpg;base64," + res.data.img;
                    })
                })
                .catch(err =>{

                })
        }
    },
    watch:{
        changeData: {
            handler: function(newval , oldval) {
                if(newval){
                    for(var key in newval){
                        if(!newval[key]) {
                            this.messageDisable = true;
                            return;
                        }else{
                            this.messageDisable = false;
                        }
                    }
                }
            },
            deep: true
        }
    }
}
</script>
<style lang="scss">
@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: '微软雅黑';
        .llq_xz {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        .llq_text{
            margin-left: 4px;
            text-decoration: none;
            font-size: 14px;
        }
    }
    .login > p{
        font-size: 28px;
        color: #333;
        text-align: center;
        margin-top: 22vh;
        letter-spacing: 5px;
    }
    .login .login_content{
        width: 800px;
        margin: 40px auto;
        margin-top:20vh;
        color: #333;
        padding: 50px 30px;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 10px;
        overflow: hidden;
        box-sizing: border-box;
        .login_content_left{
            width: 35%;
            float: left;
            text-align: center;
            border-right: dashed 1px #B2B2B2;
            padding: 10px 10px 10px 0;
            .left_hr{
                display: block;
                height: 1px;
                margin: 0 10px 20px;
                background-color: #B2B2B2;
            }
            .province_logo{
                margin-bottom: 20px;
                font-size: 20px;
                font-weight: bold;
                img{
                    width: 130px;
                }
            }
            .download_app{
                font-size: 14px;
            }
            .download_app img{
                width: 110px;
            }
        }
        .login_content_right{
            width: 52%;
            float: right;
            padding: 10px 30px;
            text-align: center;
            .system_type_tab{
                width: 100%;
                border: solid 1px #D7D7D7;
                border-radius: 8px;
                padding: 8px 20px;
                font-size: 18px;
                color: #999;
                box-sizing: border-box;
                margin-bottom: 20px;
                span{
                    display: inline-block;
                    width: 48%;
                    &:first-child{
                        /*border-right: solid 1px #D6D3D6;*/
                    }
                }
                span{
                    cursor: pointer;
                }
                .tabActived{
                    color: #3D9AFE;
                    font-weight: bold;
                }
            }
            .login_types{
                width: 100%;
                height: 210px;
                .item{
                    position: relative;
                    i{
                        position: absolute;
                        top: 10px;
                        left: 2px;
                        color: #666;
                        font-size: 18px;
                    }
                }
                .el-input-group__append{
                    background-color: transparent;
                    border: none;
                    border-bottom: 1px solid #DCDFE6;
                }
            }
            .item{
                width: 100%;
            }
            .login_text{
                font-size: 12px;
                color: #666;
                span{
                    display: inline-block;
                    width: 30%;
                    height: 1px;
                    margin: 0 10px;
                    background-color: #aaa;
                    vertical-align: middle;
                }
            }
            .login_item{
                p{
                    font-size: 12px;
                    color: #666;
                }
                .el-button--text{
                    color: #666;
                }
                .item:hover{
                    .el-button--text,p{
                        color: #66b1ff;
                    }
                }
                .item.active .el-button--text,.item.active p{
                    color: #66b1ff;
                }
            }
            input:-webkit-autofill{
                -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
                background-color:transparent;
                background-image: none;
                transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
            }
            .el-input__inner{
                padding-left: 30px;
                background: transparent;
                border-top: none;
                border-left: none;
                border-right: none;
            }
        }
    }
    .login .login_content .login_content_left p{
        text-align: center;
        margin-bottom: 10px;
    }
    .login .login_content .item{
        margin-bottom: 20px;
        width:80%;
    }
    .login .el-input{
        width: 100%;
    }
    .login .el-button--mini, .el-button--mini.is-round{
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }
    .loginTypeChange:hover{
        color:blue;
        cursor: pointer;
    }
    .loginTypeButton{
        font-size:xx-large !important;
    }
    .authCode .el-input-group__append, .el-input-group__prepend {
        padding: 0 !important;
    }
    @media screen and (max-width: 1600px) {
        .login .login_content{
            width: 600px;
            margin: 40px auto;
            margin-top: 10vh;
            padding: 36px 20px;
        }
        .login .login_content .item{
            margin-bottom: 10px;
        }
        .login .el-button--mini, .el-button--mini.is-round{
            margin-top: 10px;
        }
    }
</style>