yintai-company-home-am/views/LoginPage.vue

<template>
  <div
    class="page"
    style="
      background: url('src/pub/login.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    "
  >
    <div class="login-box flex-col">
      <div class="title">{{ corpName }}</div>
      <div class="input-box flex-row">
        <label class="input-label">账号</label>
        <ElInput class="input" v-model="username"></ElInput>
      </div>
      <div class="input-box flex-row">
        <label class="input-label">密码</label>
        <ElInput class="input" v-model="password" type="password" show-password></ElInput>
      </div>
      <!-- <div v-if="!hideCorpList" class="input-box flex-row">
        <label class="input-label">企业</label>
        <ElSelect
          placeholder="请选择要登陆的企业"
          class="input"
          v-model="corp"
          type="password"
          show-password
        >
          <ElOption
            v-for="(item, index) in corpList"
            :key="index"
            :label="(item as any).name"
            :value="(item as any).id"
          >
          </ElOption>
        </ElSelect>
      </div> -->
      <ElButton type="primary" class="login" @click="login">登录</ElButton>
    </div>
  </div>
</template>

<script lang="ts">
import { getConfig } from 'lib/config'
import { indexStore } from 'lib/stores'
import message from 'lib/utils/message'
import login from 'src/api/login'
// import Request from 'lib/utils/requests'
export default {
  data() {
    return {
      username: '',
      password: '',
      corp: '',
      baseUrl: getConfig('baseUrl'),
      corpList: [],
      corpName: ''
      //   hideCorpList: true
    }
  },
  mounted() {
    const store = indexStore()
    store.logout(true)
    store.$patch({
      headers: {
        'x-host': import.meta.env.VITE_PUBLIC_ENV == 'dev' ? 'a1.batiao8.com' : window.location.host
      }
    })
    // Request({
    //   url: '/corp/available/corp',
    //   method: 'get'
    // }).then((res: any) => {
    //   this.corpList = res.data
    //   const params = this.getHashParams()
    //   if (params.corp_id) {
    //     this.corp = params.corp_id
    //     this.hideCorpList = true
    //   }
    // })
    // 获取企业名
    
    this.corpName = '银泰官网后台'
    store.$patch({
      title: this.corpName
    })
    window.onkeydown = (e) => {
      if (e.key == 'Enter') {
        this.login()
      }
    }
  },
  unmounted() {
    window.onkeydown = null
  },
  methods: {
    getHashParams() {
      // 移除hash中的'#'
      let hash = window.location.hash
        .replace(window.location.hash.split('?')[0], '')
        .replace('?', '')
      // 分割hash为键值对
      let params: any = {}
      let vars = hash.split('&')
      for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split('=')
        params[pair[0]] = decodeURIComponent(pair[1])
      }

      return params
    },
    login() {
      if (this.username == '') {
        message.error('请输入用户名')
        return
      }
      if (this.password == '') {
        message.error('请输入密码')
        return
      }
      //   if (!this.corp) {
      //     message.error('请选择企业')
      //     return
      //   }
      //   const corp: any = this.corpList.find((item: any) => item.id == this.corp)
      const store = indexStore()
      store.$patch({
        baseUrl: this.baseUrl
      })
      store
        .login({
          username: this.username,
          password: this.password
        })
        .then((res: any) => {
          store.$patch({
            token: res.data.token,
            nickname: this.username,
            username: this.username,
            password: this.password,
            // tableData: res.data.table,
            // menus: res.data.menus,
            kwargs: res.data
          })
        })
        .finally(() => {
          this.$router.push('/')
          // setTimeout(() => {
          //     location.reload()
          // }, 1000)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  // background-image: url("src/pub/login.jpg");

  .login-box {
    //height: 400px;
    width: 400px;
    // border: solid;
    background-color: #fff;
    margin: auto;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 2px rgb(69, 82, 141);

    .title {
      margin: 30px auto 20px auto;
      font-size: 30px;
      font-weight: bold;
      color: rgb(26, 36, 83);
    }

    .input-box {
      margin: 10px auto;
      width: 300px;

      .input-label {
        align-self: center;
        width: 40px;
      }

      .input {
        width: 260px;
      }
    }

    .login {
      margin: 30px auto;
      width: 300px;
      height: 40px;
    }
  }
}
</style>