Merge branch 'master' of http://139.186.142.91:10010/r/productDev/dmvisit

liukangdong

2024-10-09 0e35f7cdaecc1c05f6a28784c2d66ce623ff77f1

 admin/src/views/login.vue

@@ -1,21 +1,54 @@
<template>
  <div class="wrap">
    <div class="introduce">
      <h2>豆米跳跳</h2>
      <h3></h3>
    </div>
    <div class="login">
      <h1>系统登录&nbsp;/&nbsp;LOGIN IN</h1>
      <div class="info-input">
        <el-input v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" maxlength="50" v-trim/>
        <el-input v-model="password" placeholder="请输入密码" type="password" prefix-icon="eva-icon-password" maxlength="30" show-password/>
        <div class="captcha-input">
          <el-input v-model="captcha.value" placeholder="图片验证码" prefix-icon="eva-icon-shield" maxlength="4" @keypress.enter.native="login"/>
          <img v-if="!captcha.loading" :src="captcha.uri" @click="refreshCaptcha">
          <span v-else><i class="el-icon-loading"></i></span>
    <img src="@/assets/images/bg@2x.png" class="main_bg" alt="">
    <div class="login_wrap">
      <div class="login_img">
        <div class="h3">智慧物流园区安消一体化系统</div>
      </div>
      <div class="form_wrap">
        <!-- <div class="tabs">
          <div class="tab active">
            <div class="name">帐号登录</div>
            <div class="icon"></div>
          </div>
          <div class="tab">
            <div class="name">手机登录</div>
            <div class="icon"></div>
          </div>
        </div> -->
        <div class="df_ac">
          <div class="label">帐号</div>
          <div class="line">
            <el-input v-model="username" placeholder="请输入帐号" maxlength="50" v-trim />
          </div>
        </div>
        <div class="df_ac">
          <div class="label">密码</div>
          <div class="line">
            <el-input v-model="password" placeholder="请输入密码" type="password" maxlength="30" show-password />
          </div>
        </div>

        <div class="df_ac">
          <div class="label">验证码</div>
          <div class="line">
            <el-input v-model="captcha.value" placeholder="请输入验证码" maxlength="4" @keypress.enter.native="login" />
            <img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
        </div>
        <el-button :loading="loading" type="primary" class="login_btn"
          @click.native.prevent="login">立即登录</el-button>
        <div class="btn_wrap">
          <el-checkbox v-model="isRemPsd">
            <span style="font-size: 13px; font-weight: 400" class="placeholder9">记住密码</span>
          </el-checkbox>
        </div>
        <div class="google">
          <img src="@/assets/images/ic_google@2x.png" class="img" alt="">
          <span class="placeholder6">本系统推荐使用GOOGLE浏览器</span>
        </div>
      </div>
      <el-button :loading="loading" @click="login">登&nbsp;&nbsp;录</el-button>
    </div>
  </div>
</template>
@@ -23,12 +56,14 @@
<script>
import { mapMutations } from 'vuex'
import { getCaptcha, loginByPassword } from '@/api/system/common'
import Cookies from "js-cookie"

export default {
  name: 'Login',
  data () {
  data() {
    return {
      loading: false,
      isRemPsd: false,
      username: '',
      password: '',
      // 验证码
@@ -40,10 +75,17 @@
      }
    }
  },
  mounted() {
    this.username = localStorage.getItem('username') || ''
    this.password = localStorage.getItem('password') || ''
    const isRemPsd = localStorage.getItem('isRemPsd') || false
    this.isRemPsd = JSON.parse(isRemPsd)
    this.refreshCaptcha()
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    // 登录
    login () {
    login() {
      if (this.loading) {
        return
      }
@@ -57,20 +99,30 @@
        code: this.captcha.value.trim(),
        uuid: this.captcha.uuid
      })
        .then(() => {
         // window.location.href = process.env.VUE_APP_CONTEXT_PATH
          window.location.reload()
        .then((res) => {
          // window.location.href = process.env.VUE_APP_CONTEXT_PATH
          if (this.isRemPsd) {
            localStorage.setItem('username', this.username.trim())
            localStorage.setItem('password', this.password.trim())
            localStorage.setItem('isRemPsd', this.isRemPsd)
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
            localStorage.removeItem('isRemPsd')
          }
          Cookies.set('dm_user_token', res)
          this.$router.push('index')
        })
        .catch(e => {
          this.refreshCaptcha()
          this.$tip.apiFailed(e)
          // this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 刷新验证码
    refreshCaptcha () {
    refreshCaptcha() {
      this.captcha.loading = true
      getCaptcha()
        .then(data => {
@@ -87,7 +139,7 @@
        })
    },
    // 登录前验证
    __check () {
    __check() {
      if (this.username.trim() === '') {
        this.$tip.error('请输入用户名')
        return false
@@ -103,47 +155,218 @@
      return true
    }
  },
  created () {
    this.refreshCaptcha()
  }

}
</script>

<style scoped lang="scss">
@import "@/assets/style/variables.scss";

div {
  box-sizing: border-box;
}

$input-gap: 30px;

.wrap {
  display: flex;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/images/login.jpg");
  background-repeat: no-repeat;
  background-size: auto 180%;
  background-clip: content-box;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  // 左边介绍
  .introduce {
    padding-left: 10%;
  .main_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .login_wrap {
    width: 1000px;
    height: 600px;
    box-sizing: border-box;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    background: #ffffff;
    box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.11);
    display: flex;
    flex-direction: column;
    justify-content: center;
    h2 {
      font-size:34px;
      font-style: italic;
      font-weight: 900;
      margin-top: 50px;

    .login_img {
      width: 500px;
      height: 600px;
      background: url("../assets/images/login_img@2x.png");
      background-size: 100% 100%;
      padding-left: 40px;
      padding-top: 80px;

      .h3 {
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 26px;
      }

      .text {
        font-size: 18px;
        color: #fff;
      }
    }
    h3 {
      font-size: 49px;
      font-weight: 300;
      margin: 25px 0;

    .form_wrap {
      flex: 1;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      /* padding: 50px 80px 20px; */
      padding: 80px 80px 20px;
      position: relative;

      .tabs {
        display: flex;
        justify-content: space-evenly;
        font-size: 20px;
        color: #666666;
        margin-bottom: 30px;

        .tab {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            width: 36px;
            height: 4px;
            background: #fff;
            border-radius: 2px;
            margin-top: 8px;
          }
        }

        .active {
          font-weight: 500;
          font-size: 24px;
          color: #222222;

          .icon {
            background: #207FF7;
          }
        }
      }

      .df_ac {
        flex-direction: column;
        align-items: flex-start;
      }

      .title {
        font-size: 24px;
        margin-top: 70px;
        margin-bottom: 48px;
        text-align: center;
      }

      .label {
        color: #222222;
        margin-bottom: 18px;
        font-size: 14px;
        margin-right: 12px;
        width: 42px;
      }

      &.ey {
        .label {
          width: 135px;
        }
      }

      .line {
        margin-bottom: 17px;
        display: flex;
        width: 100%;

        .el-input {
          height: 40px;

          // font-size: 14px;
          ::v-deep .el-input__inner {
            height: 40px !important;
          }
        }

        .code_image {
          width: 100px;
          margin-left: 10px;
        }
      }

      .forget {
        justify-content: space-between;
        width: 100%;

        .text {
          cursor: pointer;
        }
      }

      .login_btn {
        width: 100%;
        height: 40px;
        background: $primary-color;
        box-shadow: 0px 2px 8px 0px rgba(67, 94, 190, 0.15);
        border-radius: 2px;
        margin: 0 auto;
        font-weight: 500;
        font-size: 16px;
      }

      .google {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 12px;

        .img {
          margin-right: 5px;
          width: 18px;
        }
      }

      .btn_wrap {
        margin-top: 20px;
      }

      .agreement {
        text-align: center;
      }

      .google {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 12px;

        .img {
          margin-right: 5px;
          width: 18px;
        }
      }
    }
  }

  // 右边登录
  .login {
    height: 100%;
@@ -158,40 +381,50 @@
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;

    h1 {
      font-size: 28px;
      font-weight: 500;
    }

    .info-input {
      margin-top: $input-gap;
      margin-bottom: 60px;

      /deep/ .el-input {
        margin-top: 30px;

        .el-input__inner {
          height: 50px;
          background: #F9F9F9;
          border: 1px solid transparent;

          &:focus {
            border: 1px solid $primary-color;
          }
        }
      }
    }

    // 验证码输入
    .captcha-input {
      display: flex;
      margin-top: $input-gap;
      height: 50px;

      .el-input {
        width: 100%;
        margin-top: 0;
      }
      span, img {

      span,
      img {
        width: 45%;
        height: 100%;
        flex-shrink: 0;
        margin-left: 16px;
      }

      span {
        display: flex;
        align-items: center;
@@ -200,6 +433,7 @@
        border-radius: 8px;
      }
    }

    .el-button {
      height: 50px;
      width: 100%;