hi-ucs/front/src/views/login/index.vue

<template>
  <div class="login-container">
    <a-row>
      <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
        <div class="login-container-form">
          <!-- <div class="login-container-hello">hello!</div> -->
          <div class="login-container-title">{{ title }}</div>
          <a-form :model="form" @submit="handleSubmit" @submit.prevent>
            <a-form-item>
              <a-input v-model:value="form.username" placeholder="Username">
                <template v-slot:prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                v-model:value="form.password"
                type="password"
                placeholder="Password"
              >
                <template v-slot:prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <!-- IE Chrome  || judgeAgent() !== 'Chrome'-->
              <a-button
                type="primary"
                html-type="submit"
                :disabled="
                  form.username === '' ||
                  form.password === '' ||
                  !canOpen.includes(judgeAgent())
                "
              >
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
    <div class="login-container-tips">©青岛海信网络科技股份有限公司</div>
  </div>
</template>
<script>
  import { dependencies, devDependencies } from '*/package.json'
  import { mapActions, mapGetters } from 'vuex'
  import Cookies from 'js-cookie'
  import { Encrypt } from '@/utils/crypto'
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
  import { message, Modal } from 'ant-design-vue'

  // 是否是西海岸
  const isXiHaiAn = whoShow.itShowXiHaiAn

  export default {
    name: 'Login',
    components: {
      UserOutlined,
      LockOutlined,
    },
    data() {
      return {
        form: {
          username: '',
          password: '',
        },
        redirect: undefined,
        dependencies: dependencies,
        devDependencies: devDependencies,
        is360: false,
        isIE: false,
        canOpen: ['FF', 'Chrome'],
      }
    },
    computed: {
      ...mapGetters({
        logo: 'settings/logo',
        title: 'settings/title',
      }),
    },
    watch: {
      $route: {
        handler(route) {
          this.redirect = (route.query && route.query.redirect) || '/'
        },
        immediate: true,
      },
    },
    mounted() {
      this.form.username = ''
      this.form.password = ''

      if (!this.canOpen.includes(this.judgeAgent())) {
        Modal.warning({
          title: '提示',
          content: '请使用谷歌或火狐浏览器！',
        })
      }
    },
    methods: {
      ...mapActions({
        login: 'user/login',
      }),
      // 判断浏览器
      judgeAgent() {
        let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
        console.log('userAgent------------>', userAgent)
        let isOpera = userAgent.indexOf('Opera') > -1
        //判断是否Opera浏览器
        if (isOpera) {
          return 'Opera'
        }
        //判断是否Firefox浏览器
        if (userAgent.indexOf('Firefox') > -1) {
          return 'FF'
        }
        //判断是否chorme浏览器
        if (userAgent.indexOf('Chrome') > -1) {
          return 'Chrome'
        }
        //判断是否Safari浏览器
        if (userAgent.indexOf('Safari') > -1) {
          return 'Safari'
        }
        //判断是否IE浏览器
        if (
          userAgent.indexOf('compatible') > -1 &&
          userAgent.indexOf('MSIE') > -1 &&
          !isOpera
        ) {
          return 'IE'
        }
        //判断是否Edge浏览器
        if (userAgent.indexOf('Trident') > -1) {
          return 'Edge'
        }
      },
      handleRoute() {
        return this.redirect === '/404' || this.redirect === '/403'
          ? '/home'
          : this.redirect
      },
      async handleSubmit() {
        // debugger
        try {
          // console.log('登录', Decrypt(Encrypt(this.form.password)))
          if (this.form.password !== this.form.password.trim()) {
            message.error('登陆失败，用户名或密码错误！')
            return
          }
          await this.login({
            password: Encrypt(this.form.password),
            username: Encrypt(this.form.username),
          })
          // window.localStorage.setItem('tokenStartTime', new Date().getTime())
          window.sessionStorage.setItem('visits', JSON.stringify([]))
          // console.log(this.handleRoute())
          // 西海岸特殊处理
          if (isXiHaiAn) {
            await this.$router.push({
              path: '/DetailsPageconetent',
              query: {
                select: '基础设施',
                tecHnosphere: '',
                appLiCation: '',
              },
            })
          } else {
            await this.$router.push('/home')
          }
        } catch (error) {
          message.error('登陆失败，用户名或密码错误！')
        }
      },
    },
  }
</script>
<style lang="less">
  .login-container {
    width: 100%;
    height: 100vh;
    background: url('~@/assets/login_images/login_background.png');
    background-size: cover;

    &-form {
      width: calc(100% - 40px);
      height: 380px;
      padding: 4vh;
      margin-top: calc((100vh - 380px) / 2);
      margin-right: 20px;
      margin-left: 20px;
      background: url('~@/assets/login_images/login_form.png');
      background-size: 100% 100%;
      border-radius: 10px;
      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    }

    &-hello {
      font-size: 32px;
      color: #fff;
    }

    &-title {
      margin-bottom: 30px;
      font-size: 20px;
      color: #fff;
    }

    &-tips {
      position: fixed;
      bottom: @vab-margin;
      width: 100%;
      height: 40px;
      color: rgba(255, 255, 255, 0.856);
      text-align: center;
    }

    .ant-col {
      width: 100%;
      padding: 0 10px 0 10px;
    }

    .ant-input {
      height: 35px;
    }

    .ant-btn {
      width: 100%;
      height: 45px;
      border-radius: 99px;
    }
  }
</style>