wuliguanli/ruoyi-ui/src/views/login.vue

<template>
  <div class="login">
    <div style="width: 50%; height: 100%;" class="inge">
      <img style="width: 477px;margin-top: 100px;margin-bottom: 25px; "   src="../assets/images/pic_htgl_bt_left.png" alt="">
       <img style="width: 477px; "   src="../assets/images/pic_htgl_left_tp.png" alt="">
    </div>
    <div style="width: 50%; height: 100%;padding: 0 120px;display: flex;align-items: center;">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <div style="display: flex;justify-content: center;">
          <img style="width: 302px; "   src="../assets/images/pic_htgl_logo.png" alt="">
        </div>
        <div style="display: flex;padding: 0 50px; justify-content: space-between;margin-top: 10px;margin-bottom: 10px;">
          <h3 :class="isnum ==0? 'title titlelov' : 'titlelov'" @click="tgs(0)">账号登录<span></span></h3>
          <h3 :class="isnum ==1? 'title titlelov' : 'titlelov'" @click="tgs(1)" >验证码{{zhucemiber == true?'注册':'登录'}}<span></span></h3>
        </div>
       <!-- v-if='xgmemberMe' -->
       <!-- <el-form-item prop="tenantId" v-if="tenantEnabled">
        <el-select v-model="loginForm.tenantId" filterable placeholder="请选择/输入学校名称" style="width: 100%">
           <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
           <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
         </el-select>
       </el-form-item> -->
      <el-form-item prop="username" v-if='!xgmemberMe'>
          <el-input
            v-model="loginForm.username"
            type="text"
            auto-complete="off"
            placeholder="账号"
          >
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password" v-if='!xgmemberMe'>
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            show-password
            @keyup.enter.native="handleLogin"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <!-- v-if="captchaEnabled" -->
        <el-form-item prop="code" v-if='!xgmemberMe && captchaEnabled' >
          <el-input
            v-model="loginForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter.native="handleLogin"
          >
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </el-form-item>
        <el-form-item  prop="phone" v-if='xgmemberMe' style="margin-bottom: 27px;">
          <el-input v-model="loginForm.phone"
            auto-complete="off"
            placeholder="联系方式"
            @keyup.enter.native="handleLogins" >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
         </el-input>
        </el-form-item>
      <!-- <el-form-item  prop="passwordxm" v-if='xgmemberMe' style="margin-bottom: 27px;">
        <el-input v-model="loginForm.passwordxm"  show-password placeholder="新密码"  >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item> -->
        <el-form-item  prop="codexd" v-if='xgmemberMe' style="margin-bottom: 27px;">
          <el-input style="width: 61%" v-model="loginForm.codexd"  placeholder="验证码"  >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
      <div class="login-code login-codeg">
        <!-- <img :src="codeUrl" @click="getCode" class="login-code-img"/> -->
         <el-button type="primary" plain @click="send" v-show="zhaodata.codeShow" >获取验证码</el-button>
         <el-button type="primary" plain  v-show="!zhaodata.codeShow" disabled >{{zhaodata.count}}秒后重试</el-button>
      </div>
        </el-form-item>
        <!-- v-if='xgmemberMe' -->
        <!-- <el-form-item  prop="confirmPassword"  class="njhyter" v-if="xgmemberMe" style="margin-bottom: 17px;">
          <fileUpload :limit="5"  v-model="loginForm.registerSchoolFileList" />
        </el-form-item> -->
        <div class="njuyehaf" style="justify-content: space-between;align-items: center;margin-bottom: 25px;">
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 0 0px;">记住密码</el-checkbox>
          <el-form-item style="float: right;margin-bottom: 0; padding-left: 20px;">
            <el-button circle title="微信登录" @click="doSocialLogin('wechat')">
              <svg-icon icon-class="wechat" />
            </el-button>
            <el-button circle title="支付宝登录" @click="doSocialLogin('topiam')">
              <svg-icon icon-class="topiam" />
            </el-button>
          </el-form-item>
      <!-- <el-checkbox v-model="xgmemberMe"  @change=" xgmes " style="margin:0px 0px 25px 25px;">找回密码</el-checkbox> -->
        <p  v-if="!zhucemiber">
          <span style="color: #46CB99;margin-right: 10px;"><router-link class="link-type" :to="'/registerx'" style="color: #46CB99;">忘记密码</router-link> </span>
          <span><router-link class="link-type" :to="'/register'">注册</router-link> </span></p>
        <!-- <span @click="zhuc">注册</span> -->

         <!-- <p v-if="zhucemiber">已有账号？去 <span @click="zhucs" >登录</span></p> -->
        </div>


        <el-form-item style="width:100%;margin-bottom: 0;" v-if='!xgmemberMe' >
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%;background-color: #4775EA;height: 45px; border-color: #4775EA;"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
         <!-- <p class="div_p">
            * 使用快捷登录，请先绑定第三方账号
          </p> -->
        </el-form-item>
        <el-form-item  style="width:100%;margin-bottom: 0;" v-if='xgmemberMe'>
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%;background-color: #4775EA;height: 45px; border-color: #4775EA;"
            @click.native.prevent="handleLogins"
          >
            <span v-if="!loading">确认</span>
            <span v-else>操 作 中...</span>
          </el-button>
          <!-- <p class="div_p">
            * 使用快捷登录，请先绑定第三方账号
          </p> -->
        </el-form-item>
      </el-form>
    </div>
    <!--  底部  -->
    <!-- <div class="el-login-footer">
      <span></span>
    </div> -->
  </div>
</template>

<script>
import { getCodeImg,register,registerf,getTenantList,getCaptcha,postphones,loginde } from "@/api/login";
import { authBinding } from '@/api/system/social/auth';
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
 import {setToken} from '@/utils/auth'
  import resetPwd from "./system/user/profile/resetPwd.vue";
  import { updateUserPwds } from "@/api/system/user";

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        tenantId:'000000'
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: false,
      // 注册开关
      register: false,
      redirect: undefined,
      xgmemberMe:false  ,//修改密码
      zhucemiber:false  ,//修改密码
	  tenantEnabled:true,
	  tenantList:[],
	  zhaodata:{
		  codeShow: true,
		  count: '',    //倒计时
		  timer: null,    //计时器
	  },
    isnum:0,
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();
	this.getnhgw()
	console.log(process.env,process.env.VUE_APP_BASE_API,81)
  },
  methods: {
	getnhgw(){
	  // this.loading = true;
	  getTenantList().then(response => {
		this.tenantEnabled = response.data.tenantEnabled
	    this.tenantList = response.data.voList;
	    this.loading = false;
	  });
	},
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.data.img;
          this.loginForm.uuid = res.data.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
	  const tenantId = Cookies.get('tenantId')
      this.loginForm = {
		// tenantId: tenantId === undefined ? this.loginForm.tenantId : tenantId,
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      console.log(this.zhucemiber)
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
		  // this.loginForm.tenantId = '000000'
          if (this.loginForm.rememberMe) {
			      Cookies.set("grantType", 'password', { expires: 30 });
            Cookies.set("clientKey", 'pc_user', { expires: 30 });
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
			Cookies.remove("grantType");
      Cookies.remove("clientKey");
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }

		  // this.loginForm.tenantId = '000000'
      // this.loginForm.clientId = 'e5cd7e4891bf95d1d19206ce24a7b32e'
      this.loginForm.grantType = 'password'
      this.loginForm.clientKey = 'pc_user'

		   // console.log(1,this.loginForm,this.$store.dispatch("Login", this.loginForm))
          this.$store.dispatch("Login", this.loginForm).then(() => {
			  console.log(3)
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
			console.log(2)
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    },
    // 修改密码
    handleLogins(){
		console.log(this.loginForm.phone == '')
     if(this.loginForm.phone == undefined){
		 this.$message.error('请输入联系方式');
		 return
     }
	 if(this.loginForm.phone == ''){
	 			this.$message.error('请输入联系方式');
	 			return
	 }
	 if(this.loginForm.phone == null){
	 			this.$message.error('请输入联系方式');
	 			return
	 }
  //    if(this.loginForm.passwordxm == undefined){
  //      this.$message.error('请输入新密码');
  //      return
  //    }
	 // if(this.loginForm.passwordxm == null){
	 //   this.$message.error('请输入新密码');
	 //   return
	 // }
	 // if(this.loginForm.passwordxm == ''){
	 //   this.$message.error('请输入新密码');
	 //   return
	 // }
	 if(this.loginForm.codexd == ''){
	   this.$message.error('请输入验证码');
	   return
	 }
	 if(this.loginForm.codexd == null){
	   this.$message.error('请输入验证码');
	   return
	 }
	 if(this.loginForm.codexd == undefined){
	   this.$message.error('请输入验证码');
	   return
	 }


     // if(this.loginForm.confirmPassword == undefined){
     //   this.$message.error('请输入确认密码');
     //   return
     // }
     // this.loading = true;
     let nhse={
	   code:'',
     }
    nhse.phonenumber = this.loginForm.phone
	 nhse.code = this.loginForm.codexd
   nhse.clientId = 'e5cd7e4891bf95d1d19206ce24a7b32e'
   nhse.grantType = 'sms'
   nhse.clientKey = 'pc_user'
   nhse.username = this.loginForm.phone
   nhse.smsCode = this.loginForm.codexd
	 // nhse.password = this.loginForm.passwordxm
   this.$store.dispatch("Login", nhse).then(() => {
   		  console.log(3)
              this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
            }).catch(() => {
              this.loading = false;
   		console.log(2)
              if (this.captchaEnabled) {
                this.getCode();
              }
            });
   //   loginde(nhse).then(
   //     response => {
   //       console.log(response.msg,36)
   //       if(response.msg == '操作成功'){
   //          this.$modal.msgSuccess(response.msg);
   //          this.xgmemberMe = false
   //          this.getCode();
   //          // this.$set(this.loginForm,'password','')
   //          this.$set(this.loginForm,'uuid','')
   //          this.$set(this.loginForm,'rememberMe',false)
   //          // this.$set(this.loginForm,'code','')
   //          this.$set(this.loginForm,'photo',undefined)
   //          this.$set(this.loginForm,'codexd',undefined)
   //          this.$set(this.loginForm,'passwordxm',undefined)
			// // this.$set(this.loginForm,'registerSchoolFileList',undefined)
   //          this.$set(this.loginForm,'username','')


   //       }else{
   //         this.$message.error(response.msg);
   //       }

   //       this.loading = false;

   //     }
   //   );
    },
    // 确认密码失去焦点
    cpass(){
     if(this.loginForm.confirmPassword !== this.loginForm.newPassword){
       this.$message.error('两次密码不一致');
     }
    },
    // 复选框选择修改密码
    xgmes(){
      if(this.xgmemberMe == false){
        this.$set(this.loginForm,'confirmPassword',undefined)
        this.$set(this.loginForm,'oldPassword',undefined)
        this.$set(this.loginForm,'newPassword',undefined)
        // this.$set(this.loginForm,'username','')
      }else{
		  // 找回密码
        // this.$set(this.loginForm,'username','')
        // this.$set(this.loginForm,'password','')
        // this.$set(this.loginForm,'uuid','')
        // this.$set(this.loginForm,'rememberMe',false)
        // this.$set(this.loginForm,'code','')
      }
    },
    tgs(val){
      if(val ==0){
        // 密码登录
        this.xgmemberMe = false

      }else{
        // 验证码登录
        this.xgmemberMe = true
      }
      this.isnum = val
    },
    zhuc(){

     this.xgmemberMe = true
     this.zhucemiber = !this.zhucemiber
     this.isnum = 1
    },
    zhucs(){
      this.xgmemberMe = false
      this.zhucemiber = !this.zhucemiber
      this.isnum = 0
    },
	send(){
		if(this.loginForm.phone == undefined){
			this.$message.error('请输入联系方式');
			return
		}
		if(this.loginForm.phone == null){
			this.$message.error('请输入联系方式');
			return
		}
		if(this.loginForm.phone == ''){
			this.$message.error('请输入联系方式');
			return
		}
		let clicktime = new Date().getTime() + 60000;   //未来60秒，这里也毫秒为单位
				sessionStorage.setItem('EndTime', JSON.stringify(clicktime));  //存入sessionStorage
        let sgse={'phonenumber':this.loginForm.phone,'type':1}
		       postphones(sgse).then(response => {
					this.$modal.msgSuccess("发送成功");
					this.timeDown(clicktime)
		       });
		   //      let res = await getCaptcha(this.username)
		   //      if (res.data.code == 200) {
		   //        showNotify({ type: 'success', message: '发送成功' });
		   //        this.timeDown(clicktime)  //请求成功则触发timeDown并将时间携带过去
		   //      }else{
					// this.$message.error('请输入联系方式');
		   //        showNotify({ type: 'danger', message:res.data.message  });
		   //      }
	},
	timeDown(time){
		console.log(this.zhaodata.timer)
	          if (!this.zhaodata.timer) {
	          this.zhaodata.count = Math.ceil((JSON.parse(time) - new Date().getTime())/1000);  //取出计时
	          this.zhaodata.codeShow = false;
	          this.zhaodata.timer = setInterval(() => {
	              if (this.zhaodata.count > 0) {
	                this.zhaodata.count--;
	              } else {
	                this.zhaodata.codeShow = true;
	                clearInterval(this.zhaodata.timer);  //清除计时器
	                this.zhaodata.timer = null;
	                sessionStorage.removeItem('EndTime')  //计时完后清除sessionStorage
	              }
	          }, 1000)
	        }
	},
  doSocialLogin(type){
    authBinding(type, this.loginForm.tenantId).then(res => {
      if (res.code === HttpStatus.SUCCESS) {
        // 获取授权地址跳转
        window.location.href = res.data;
      } else {
         this.$message.error(res.msg);
        // ElMessage.error(res.msg);
      }
    });
  }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  display: flex;
  // justify-content: center;
  // align-items: center;
  height: 100%;
  overflow: hidden;
  // background-image: url("../assets/images/login-background.jpg");
  // background-size: cover;
  // margin-left: 300px;
}
.inge{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/pic_htgl_bg_left.png");
  background-size: cover;
}
.title {
  // 10px  44
  // margin: 44px auto 40px auto;
  text-align: center;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2D2C44;
  position: relative;
  span{
	  position: absolute;
	  width: 40px;
	  height: 3px;
	  bottom: -10px;
	  left: 50%;
	  transform: translateX(-50%);
	  background-color: #4775EA;
  }
}

.login-form {

  border-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: #000a48;
  background-color:#fff;
  width: 100%;
  // margin-top: -4px;s
  // margin-left: -3.2%;
  // margin-right: 50%;
  // margin-left: 10px;
  padding: 0 50px 0 50px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
      background-color: #4775EA;
      border-color: #F7F6FC;
      background-color:#F7F6FC
    }
  }
  .el-checkbox__inner{
    background-color: #4775EA;
    border-color: rgba(1, 152, 221,0.2);
    background-color:rgba(0,0,0,0.3)
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
  .el-button--primary{
    margin-bottom: 20px;
    // background-color: #A6A1EB !important;

  }
  .el-form-item{
    // 有学校选择27  无 37
     margin-bottom: 37px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.login-codeg{
	width: 37%;
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
.nli{
  .el-button--primary{
    background-color: #4775EA;
    border-color:#4775EA !important;
  }
}
.njuyehaf{
  display: flex;
  p{
    flex: 1;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #C8C8C8;
    margin: 0;
    text-align: right;
    span{
      color: #FFB339;
      font-weight: 700;
      cursor:pointer;
      .link-type, {
        color: #FFB339;
      }
    }
  }
}
.njhyter{
  .el-upload{
    width: 100%;
  }
  .el-button--mini{
    width: 100% !important;
    padding: 11px 15px;
    // text-align: left;
    margin: 0;
	border-radius: 25px;
  }
  .el-button--primary{
    background-color: #F7F6FC;
    border-color: #F7F6FC;
    color: #A6A1EB;
  }
  .el-upload__tip{
    font-size: 12px;
  }
}
.titlelov{
  ont-weight: 500;
  font-size: 20px;
  color: #2D2C44;
}
</style>