Game-Backstage-Management-System/src/views/Login/LoginView.vue

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import type { RuleInfo } from '@/types/input'
import { useRequest } from '@/hooks/useRequest'
import router from '@/router'
import axiosInstance from '@/utils/axios/axiosInstance'
import MyButton from '@/components/form/MyButton.vue'
import MyInput from '@/components/form/MyInput.vue'
import { initLoadResouce } from '@/utils/resource'

const { AllApi, analysisResCode } = useRequest()

interface LoginInfoType {
  userName: string
  password: string
}

const loginInfo = reactive<LoginInfoType>({
  userName: '',
  password: ''
})

const userLogin = () => {
  let vaild = Object.keys(loginInfo).every((key) => {
    return formFieldsRules[key].rules.every((item) => item.validator())
  })
  if (vaild) {
    axiosInstance
      .post(AllApi.userLogin, loginInfo)
      .then((data) => {
        let result = JSON.parse(JSON.stringify(data))
        analysisResCode(result, 'login')
          .then(() => {
            localStorage.setItem('token', result.token)
            localStorage.setItem('refreshToken', result.refreshToken)
            router.push('/')
          })
          .catch((err) => {
            console.log(err)
          })
      })
      .catch((err) => {
        console.log(err)
      })
  } else {
    console.log('不通过')
  }
}

const formFieldsRules = reactive<{
  [key: string]: RuleInfo
}>({
  userName: {
    name: 'username',
    placeholder: '请输入用户名',
    rules: [
      {
        validator: (): boolean => {
          return loginInfo.userName.trim().length > 0
        },
        errMsg: '用户名不能为空'
      },
      {
        validator: (): boolean => {
          return loginInfo.userName.trim().length >= 1 && loginInfo.userName.trim().length <= 16
        },
        errMsg: '用户名长度为1-16位'
      }
    ]
  },
  password: {
    name: 'password',
    placeholder: '请输入密码',
    rules: [
      {
        validator: (): boolean => {
          return loginInfo.password.trim().length > 0
        },
        errMsg: '密码不能为空'
      },
      {
        validator: (): boolean => {
          return loginInfo.password.trim().length >= 1 && loginInfo.password.trim().length <= 16
        },
        errMsg: '密码长度为1-16位'
      }
    ]
  }
})

// 资源的加载路径
const resourceInfo: Record<string, string> = {
  logo: `/img/logo.svg`
}

// 使用blob的资源路径数组
const blobUrlInfo = reactive<Record<string, string>>({})

onMounted(() => {
  // 去加载所有需要的资源
  initLoadResouce(resourceInfo).then((data) => {
    Object.assign(blobUrlInfo, data)
  })
})
</script>

<template>
  <!-- <img :src="urlList.head" style="width: 50px; height: 50px" alt="" /> -->
  <div class="container">
    <div class="loginBox">
      <div class="banner"></div>
      <div class="logoBox">
        <div class="logoImg">
          <el-image :fit="'fill'" class="logoImg" :src="blobUrlInfo.logo"></el-image>
        </div>

        <span class="logoText">淳皓科技</span>
      </div>
      <div class="content">
        <div class="loginFormBox">
          <div class="loginFormTitle">登录淳皓游戏管理系统</div>
          <div class="loginFormSubTitle">登录管理系统</div>
          <form class="loginForm" @submit.prevent>
            <!-- 一定要阻止默认提交事件，不然会导致第一次自动跳转 -->
            <div class="loginFormItem">
              <MyInput
                :p-input-type="'text'"
                :pinput-rules="formFieldsRules.userName"
                :placeholder="formFieldsRules.userName.placeholder"
                v-model="loginInfo.userName"
                class="userName"
              >
                <template #icon>
                  <UserFilled />
                </template>
              </MyInput>
            </div>
            <div class="loginFormItem">
              <MyInput
                :p-input-type="'password'"
                :pinput-rules="formFieldsRules.password"
                :placeholder="formFieldsRules.password.placeholder"
                v-model="loginInfo.password"
                class="password"
              >
                <template #icon>
                  <icon-mdi-password></icon-mdi-password>
                </template>
              </MyInput>
            </div>
            <div class="loginFormItem loginBtn">
              <MyButton @click-event="userLogin" :btn-info="{ text: '登录' }"></MyButton>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100vh;
  // background-color: lightblue;
  position: relative;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    PingFang SC,
    Hiragino Sans GB,
    noto sans,
    Microsoft YaHei,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
}

.loginBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 500px;
  // background-color: lightcoral;
  display: flex;
}

.banner {
  width: 400px;
  height: 100%;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
  // background-color: lightgreen;
}

.logoBox {
  box-sizing: border-box;
  position: fixed;
  left: 24px;
  top: 22px;
  min-height: 33px;
  display: flex;
  align-items: center;
}

.logoImg {
  width: 33px;
  height: 33px;
}

.logoText {
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-height: 32px;
  margin-right: 4px;
  margin-left: 10px;
  color: white;
  font-size: 20px;
  font-weight: 600;
}

.content {
  width: 500px;
  position: relative;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e6eb;
  border-left: none;
}

.loginFormBox {
  width: 320px;
}

.loginFormTitle {
  color: black;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
}

.loginFormSubTitle {
  color: rgb(134, 144, 156);
  font-size: 16px;
  line-height: 24px;
}

.loginForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  align-items: center;
}

.loginFormItem {
  width: 100%;
  // min-height: 52px;
}

.loginBtn {
  margin-bottom: 30px;
}

.userName {
  margin: 1% 0;
}
</style>