Newer
Older
smart-economy / src / components / login.vue
StephanieGitHub on 26 Jan 2021 5 KB first commit
<template>
  <div class="body-box">
    <div class="login-body">
        <div class="login-logo">智慧园区产业经济运行监测分析平台</div>
        <div class="login-info">
          <div class="login-row clearfix" style="margin-bottom:8px;">
            <input type="text" class="login-user" placeholder="用户" v-model="userName">
          </div>
          <div class="login-row">
            <input type="password" class="login-password" placeholder="密码" v-model="password" @keyup.enter="handleLogin">
          </div>
          <div class="login-row">
            <div class="login-btn" @click="handleLogin">登录</div>
          </div>
        </div>
    </div>
    <div class="download-container">扫码下载掌上经信(安卓)
      <div class="download-image"></div>
    </div>
    <div class="web-container" v-if="false">
      <div class="">扫码访问手机网页版</div>
      <div class="asscess-web"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'login',
    data () {
      return {
        token:'',
        userName:"",
        password:""
      }
    },
    created (){
      /*setInterval(handleLogin1, 3000)*/
      let aa = window.location.href;
      let array = aa.split('?')
      if(typeof array[1] == "string" && array[1].trim() !== ""){
        this.token = array[1].split('=')[1];
        this.handleLoginByToken();
      }
    },
    methods:{
      handleLoginByToken() {
        let vm = this;
        axios.defaults.headers.common['Authorization'] = vm.token;
        vm.$http.post('/dx-economy-api/auth/loginByToken').then(function (resp) {
          var _data = resp.data;
          if (_data.code === 200) {
            debugger
            sessionStorage.setItem("menuList",JSON.stringify(_data.data.menus))
            sessionStorage.setItem("userData",JSON.stringify(_data.data.user))
            sessionStorage.setItem("token",JSON.stringify(_data.data.token))
            vm.$router.push("/entrance")
          } else {
            vm.$message.error(_data.message);
            axios.defaults.headers.common['Authorization'] = ""
            sessionStorage.setItem("menuList","")
            sessionStorage.setItem("userData","")
          }
        })
      },
      handleLogin() {
        let vm = this,_form = {};
        if(vm.$Util.isEmpty(vm.userName)){
          vm.$message.warning("用户名不能为空!");
          return;
        }else if(vm.$Util.isEmpty(vm.password)){
          vm.$message.warning("密码不能为空!");
          return;
        }
        vm.$http.post('/dx-economy-api/auth/login',{
          userName: vm.userName,
          pwd: vm.$md5(vm.password),
          /*origin:'web'*/
        }).then(function (resp) {
          var _data = resp.data;
          if (_data.code === 200) {
            axios.defaults.headers.common['Authorization'] = _data.data.token
            sessionStorage.setItem("menuList",JSON.stringify(_data.data.menus))
            sessionStorage.setItem("userData",JSON.stringify(_data.data.user))
            sessionStorage.setItem("token",JSON.stringify(_data.data.token))
            vm.$router.push("/entrance")
          } else {
            vm.$message.error(_data.message);
            axios.defaults.headers.common['Authorization'] = ""
            sessionStorage.setItem("menuList","")
            sessionStorage.setItem("userData","")
          }
        })
      },
      handleLogin1() {
        let vm = this,_form = {};
        vm.$confirm('由于系统数据库维护,系统将于12月15日暂时关闭!', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.handleLogin1();
        }).catch(() => {});
      },
    }
  }
</script>
<style scoped>
  .body-box{width:100%;height:100%;min-width:1366px;background:url(../assets/images/bgbody.png) no-repeat center;font-size:14px;overflow:hidden;position:relative;}
  /*.login-body{width:1366px;height:768px;background:url(../assets/images/login-bg.png) no-repeat center;position: absolute;top:calc(50% - 384px);left:calc(50% - 683px);}*/
  .login-body{width:600px;height:408px;position: absolute;background:url(../assets/images/login-bg.png) no-repeat center;top:calc(50% - 204px);left:calc(50% - 300px);}
  .login-logo{width:100%;height:58px;line-height:54px;letter-spacing:3px;text-align:center;font-size:26px;color:#fcfcfc;}
  .login-info{width:405px;height:180px;margin:76px auto 0;}
  .login-row{width:100%;height:50px;}
  .login-row input{width:calc(100% - 46px);height:48px;color:#fff;border:1px solid rgba(1,182,255,.1);padding:0 0 0 44px;font-size:16px;}
  .login-row input:focus{border-color:#07b6ff;}
  .login-row input.login-user{background:rgba(1,182,255,.1) url(../assets/images/user_icon1.png) no-repeat 13px center;}
  .login-row input.login-password{background:rgba(1,182,255,.1) url(../assets/images/password_icon.png) no-repeat 13px center;}
  .login-btn{width:100%;height:50px;line-height:50px;background:rgba(21,164,243,.5);text-align: center;color:#fff;margin-top:20px;font-size:16px;letter-spacing:3px;}
  .login-btn:hover{cursor:pointer;background:rgba(21,164,243,.6);}
  .download-container,.web-container{position: absolute;line-height: 30px;height: 130px;font-size: 12px;;top:calc(50% + 65px);color:#fff;display: flex;flex-direction: column;justify-content: center;align-items: center}
  .download-container{right:10px;}
  .download-container .download-image{width: 100px;height: 100px;background: url("../assets/images/app.png") no-repeat center;background-size: 100%;}
  .web-container{right:150px;}
  .web-container .asscess-web{width: 100px;height: 100px;background: url("../assets/images/wap.png") no-repeat center;background-size: 100%;}

</style>