yuncaijiao_admin_ui/src/views/login/login.vue

<template>
  <div class="login">
    <div class="logoTitle" style="margin-left: 50px;margin-top: 50px;">
     <!-- <img src="../../assets/loginImg/shgf.png"
        style="width: 50px;height: 50px; margin-right: 10px;" /><span>惠享</span>
      <p class="title" style="margin-top: 5px;">惠享管理平台</p> -->
    </div>
    <div class="main">
      <div class="content">
        <el-form ref="loginForm" :model="loginForm" class="login-form">
          <h3 class="title1">用户登录</h3>
          <el-form-item>
            <el-input v-model="loginForm.userName" autocomplete="off" placeholder="请输入账号" prefix-icon="el-icon-user">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginForm.password" autocomplete="off" placeholder="请输入密码" prefix-icon="el-icon-lock"
              show-password>
            </el-input>
            <!-- <span class="nopsw register" @click="forgetPwd = true">忘记密码 ？</span> -->
          </el-form-item>
          <el-form-item v-show="showMsg" style="margin-bottom:0;">
            <span class="text-danger">提示：用户名或密码错误，请重试！</span>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="login-btn" v-loading="loading" @click="login">登 录</el-button>
            <!--  <el-popover placement="top" width="400" trigger="click" v-model="loginCode" @show="codeShow">
              <imgCodeRole @login="login" ref="imgCodeRole"></imgCodeRole>
              <el-button slot="reference" type="primary" class="login-btn" v-loading="loading">登 录</el-button>
            </el-popover> -->
            <!--<router-link :to="{name: 'registUser'}"  target="_blank"  tag="a" class="register fl">个人注册</router-link>
						<router-link :to="{name: 'registOrg'}"  target="_blank"  tag="a" class="register fr">单位注册</router-link>-->
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-dialog title="忘记密码" :visible.sync="forgetPwd">
      <el-form :model="nopassword">
        <el-form-item label="手机号">
          <el-input v-model="nopassword.userPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="nopassword.userName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="forgetPwd = false">取 消</el-button>
        <el-button type="primary" @click="reGetPwd()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    doLogin,
    getUserById,
    imgCode
  } from '@/api/user.js'
  import user from '@/api/User/login.js'
  import {
    setToken,
    getToken,
    setSession
  } from '@/utils/auth'
  import imgCodeRole from '@/components/imgCodeRole/index.vue'
  import qs from 'qs'
  export default {
    components: {
      imgCodeRole
    },
    data() {
      return {
        loginForm: {
          userName: '',
          password: '',
        },
        imgCode: '',
        loading: false,
        loginCode: false,
        showMsg: false,
        forgetPwd: false,
        nopassword: {
          userPhone: '',
          userName: '',
        },
      }
    },
    methods: {
      login() {
        console.log(66);
        doLogin(this.loginForm).then((response) => {
          if (response.code == 200) {
            this.$router.push({
              path: '/index'
            })
            this.loading = true
            // this.getUserInfo(response.data.loginId)
            window.sessionStorage.setItem('tokenName', response.data.tokenName)
            window.sessionStorage.setItem('tokenValue', response.data.tokenValue)
          }

        }).catch(() => {
          this.loading = true
        })

      },
      getUserInfo(id) {
        getUserById(id).then((response) => {
          if (response.code == 200) {
            console.log(" response", response)
              let user = response.data
               // 结果存入缓存
               window.sessionStorage.setItem('staffSid', user.staffSid)
               window.sessionStorage.setItem('sid', user.sid)
               window.sessionStorage.setItem('userName', user.userName)
          }

        }).catch(() => {
        })

      },
      codeShow() {
        if (this.loginForm.password == '' || this.loginForm.userName == '') {
          this.loginCode = false
          this.showMsg = true
          return
        }
        this.$refs.imgCodeRole.getCodeImage()
      },
      reGetPwd() {
        user.reGetPwd(this.nopassword).then((res) => {})
      },
    },
  }
</script>


<style lang="scss">
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-image: url(../../assets/home/bj.jpg);
    background-position: center;
    overflow: hidden;

    .logoTitle {
      margin: 30px;

      img {
        width: 70px;
      }

      span {
        font-size: 40px;
        color: #191919;
      }

      .title {
        font-size: 25px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #191919;
        margin: 0;
      }
    }

    .main {
      width: 30%;
      /*height: 640px;*/
      background: #ffffff;
      box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
      opacity: 0.8;
      border-radius: 20px;
      position: absolute;
      right: 15%;
	  top:35%;

      .content {
        position: relative;
        /*.title-h3{
					width: 100%;
					text-align: center;
					color: #FFFFFF;
					font-size: 30px;
					margin: 0;
					position: absolute;
					top: -65px;

				}*/
      }
    }
  }

  .login-form {
    padding: 30px 50px;

    .title1 {
      margin: 0px auto 30px auto;
      text-align: center;
      font-size: 20px;
      color: #191919;
      font-size: 23px;
      font-weight: 500;
    }

    .el-input {
      border: none;
      background-color: transparent;
    }

    .code {
      position: absolute;
      top: 3px;
      right: 5px;
      width: 35%;
      height: 35px;
      cursor: pointer;
      z-index: 9;
    }

    .nopsw {
      position: absolute;
      bottom: -30px;
      right: 5px;
      color: #018ad2;
      font-size: 15px;
      line-height: 30px;
    }

    .register {
      color: #EE640C;
    }

    .register:hover,
    .nopsw:hover {
      cursor: pointer;
    }

    .btn-eye {
      cursor: pointer;
    }

    .text-danger {
      color: #f56c6c;
    }

    .login-btn {
      margin: 10px 0 10px 0;
      width: 100%;
      background-color: #EE640C;
      border: 0;
    }

    .login-btn:hover {
      background-color: #EE640C;
      border: 0;
    }

    .el-input--prefix .el-input__inner {
      border: 1px solid #EE640C;
      background: transparent;
      color: #333 !important;
    }

    .el-form-item {
      margin-bottom: 40px;
    }

    .el-loading-mask {
      background-color: rgba(255, 255, 255, 0.6);
    }
  }
</style>