vue-insagent-pc/src/views/Login.vue

<template>
  <div class="wavy-line">
    <div id="content" style="height: 100%;">
      <div id="Login">
        <header class="L_header">
          <div class="w1100">
            <img src="../assets/image/logoImg.png" />
          </div>
        </header>
        <main id="LBg">
          <section class="w1100 clearfix">
            <div class="LBox">
              <div class="Lg_Fm_header">
                <img src="../assets/image/loginheader.png" />
                <span>欢迎登录</span>
              </div>
              <div class="Lg_Fm_Body">
                <el-form size="medium" :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left"
                  label-width="80px">
                  <el-form-item prop="account" label=" 用户名:">
                    <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
                  </el-form-item>
                  <el-form-item prop="password" label=" 密码:">
                    <el-input type="password" v-model="loginForm.password" auto-complete="off"
                      placeholder="密码"></el-input>
                  </el-form-item>
                  <el-row>
                    <el-col :span="14">
                      <el-form-item prop="captcha" label=" 验证码:">
                        <el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码">
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">&nbsp;</el-col>
                    <el-col :span="9">
                      <img style="width: 100%;height: 32px;margin: 2px;" class="pointer" :src="loginForm.src"
                        @click="refreshCaptcha">
                    </el-col>
                  </el-row>
                  <el-row style="width:100%;padding: 0px 20px;margin-top: 10px;">
                    <el-button size="medium" type="primary" style="width:48%;float: left;" @click.native.prevent="reset">重
                      置</el-button>
                    <el-button size="medium" type="primary" style="width:48%;float: right;" @click.native.prevent="login"
                      :loading="loading">登 录</el-button>
                  </el-row>
                </el-form>
              </div>
            </div>
          </section>
        </main>
        <footer class="L_footer">
          <div class="w1100" style="padding-top: 15px;">
            <p style="font-weight: bold;">版权所有©1994-2014山西掌柜科技有限公司 未经许可不得复制转载或者摘编</p>
            <p style="font-weight: bold;">copyright 1994-2014 ZhangGui Property Insurance Co.Lid All rights reserved</p>
          </div>
        </footer>


      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Cookies from "js-cookie"
import ThemePicker from "@/components/ThemePicker"
import LangSelector from "@/components/LangSelector"
import { login } from '@/api/user'

export default {
  name: 'Login',
  components: {
    ThemePicker,
    LangSelector
  },
  data() {
    return {
      rememberPassword: false,
      loading: false,
      loginForm: {
        account: '',
        password: '',
        captcha: '',
        src: ''
      },
      fieldRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      checked: true,
    }
  },
  created() {
    // 记住密码
    if (Cookies.get('accountInfo')) {
      const accountInfo = JSON.parse(Cookies.get('accountInfo'));
      this.loginForm.account = accountInfo.account
      this.loginForm.password = accountInfo.password
      this.rememberPassword = true
    }
    this.enterEvent()//初始化回车事件
  },
  methods: {
    enterEvent() {
      if (this.$route.name === '登录') {
        document.onkeydown = (e) => {
          const url = e.target.baseURI.match(/login/)
          if (e.keyCode==13 &&  url.includes('login')) {
            this.login();
          }
        }
      }
    },
    login() {
      this.loading = true
      let userInfo = {
        account: this.loginForm.account,
        password: this.loginForm.password,
        captcha: this.loginForm.captcha.toLowerCase()
      }
            
      // this.$store.dispatch('login', userInfo)
      //     .then(() => {
      //       if (this.rememberPassword) { //是否保存密码
      //       Cookies.set('accountInfo', { 'account': this.loginForm.account, 'password': this.loginForm.password, })
      //     } else {
      //       Cookies.remove('accountInfo')
      //     }
      //     Cookies.set('user', userInfo.account) /
      //     sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
      //     this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
      //     this.$router.push('/')
      //     this.loading = false
      //   })
      //   .catch(() => {
      //     this.loading = false
      //   })
    
      this.$api.login.login(userInfo).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        } else {
          if (this.rememberPassword) { //是否保存密码
            Cookies.set('accountInfo', { 'account': this.loginForm.account, 'password': this.loginForm.password, })
          } else {
            Cookies.remove('accountInfo')
          }
          Cookies.set('token', res.data) // 放置token到Cookie
          Cookies.set('user', userInfo.account) // 放置token到Cookie
          this.getDictItems()
          this.$api.user.getLoginUser().then((response) => {
            if(response.code==200){
              localStorage.setItem('user_data', JSON.stringify(response.data)) 
            }
            else{
              this.$message.error(response.msg)
            }
          })
          this.$api.role.findAll().then((res) => {
            localStorage.setItem('find_all', JSON.stringify(res.data)) 
          })
          localStorage.setItem('routerId', '420') 
          sessionStorage.setItem('user', userInfo.account) /
          this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
          this.$router.push('/') // 登录成功，跳转到主页
        }
        this.loading = false
      }).catch((res) => {
        this.$message({
          message: res.message,
          type: 'error',
          duration: 2000
        })
      });

      // this.$api.login.login(userInfo).then((res) => {
      //   if (res.msg != null) {
      //     this.$message({
      //       message: res.msg,
      //       type: 'error',
      //       duration: 2000
      //     })
      //   } else {
      //     if (this.rememberPassword) { //是否保存密码
      //       Cookies.set('accountInfo', { 'account': this.loginForm.account, 'password': this.loginForm.password, })
      //     } else {
      //       Cookies.remove('accountInfo')
      //     }
      //     Cookies.set('token', res.data.token, { expires: 1, }) // 放置token到Cookie
      //     Cookies.set('user', userInfo.account) // 放置token到Cookie
      //     sessionStorage.setItem('user', userInfo.account) // 保存用户到本地会话
      //     this.$store.commit('menuRouteLoaded', false) // 要求重新加载导航菜单
      //     this.$router.push('/') // 登录成功，跳转到主页
      //   }
      //   this.loading = false
      // }).catch((res) => {
      //   this.$message({
      //     message: res.message,
      //     type: 'error',
      //     duration: 2000
      //   })
      // });
    },
    getDictItems() {
      //--数据字典--
      // 性别
      this.$api.dict
        .findByLableName('sex')
        .then((response) => {
          localStorage.setItem('sexOptions', JSON.stringify(response.data)) // 保存用户到本地会话
        })
        // 状态
        this.$api.dict
        .findByLableName('user_status')
        .then((response) => {
          localStorage.setItem('user_statusoptions', JSON.stringify(response.data)) // 保存用户到本地会话
        })
    },
    // 用户信息
    getUser(){
      this.$api.user.getLoginUser().then((response) => {
      if(response.code==200){
        this.$store.commit("SET_USER", response.data)
        localStorage.setItem('user_data', JSON.stringify(response.data)) // 保存用户到本地会话
      }
    })
    },
    refreshCaptcha() {
      // this.loginForm.src = this.global.baseUrl + "/captcha.jpg?t=" + new Date().getTime();
      this.loginForm.src = process.env.BASE_URL + "/captcha.jpg?t=" + new Date().getTime();
    },
    reset() {
      this.$refs.loginForm.resetFields()
    },
    // 切换主题
    onThemeChange: function (themeColor) {
      this.$store.commit('setThemeColor', themeColor)
    }
  },
  mounted() {
    this.refreshCaptcha()
  },
  computed: {
    ...mapState({
      themeColor: state => state.app.themeColor
    })
  },
  //销毁函数
  destroyed() {
    document.onkeydown = null;
  }
}
</script>

<style lang="scss" scoped>
.wavy-line {
  font: 13px/150% Arial, Verdana, "\5B8B\4F53";
  color: #666;
  background: #fff;
  height: 100%;
}

#content {
  overflow: auto;
}

#Login {
  width: 100%;
  
  height: 100%;
  background-image: url(../assets/image/bgImg5.jpg) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 100%;

  .L_header {
    width: 100%;
    height: 64px;
    background-color: #fff;

    img {
      padding-top: 11px;
    }
  }

  .w1100 {
    width: 1100px;
    margin: 0 auto;
  }

  #LBg {
    width: 100%;

    .LBox {
      width: 365px;
      height: 326px;
      border-radius: 10px;
      background-color: #fff;
      margin-top: 133px;
      margin-bottom: 20px;
      position: relative;
      float: right;

      .Lg_Fm_header {
        img {
          position: absolute;
          top: 11px;
          right: -64px;
        }

        span {
          color: #fff;
          position: absolute;
          display: block;
          top: 19px;
          left: 155px;
          font-size: 18px;
        }
      }

      .Lg_Fm_Body {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 10px;
        position: absolute;
        top: 60px;
        width: 340px;
      }
    }
  }

  .L_footer {
    width: 100%;
    height: 64px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    color: #888;
    font-size: 12px;

    p {
      margin: 0;
    }
  }
}



// // 登录背景
// .loginBackground{
//   background: #2b4b6b;
//   width:100%;
//   height: 100%;
//   background-image: url(../assets/image/bgImg.jpg);
//   background-repeat:no-repeat ;
//   background-size:100% 100%;
// }
// // 登录Form容器
// .login-container {
//   width: 350px;
//   background: #fff;
//   border: 1px solid #eaeaea;
//   -webkit-border-radius: 5px;
//   border-radius: 5px;
//   -moz-border-radius: 5px;
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%,-50%);
//   padding: 35px 35px 15px 35px;
//   // 登录标题
//   .title {
//     margin: 0px auto 30px auto;
//     text-align: center;
//     color: #505458;
//   }
//   // 记住密码
//   .remember {
//     margin: 0px 0px 35px 0px;
//     text-align: right;
//   }
// }
</style>