dataControl/src/views/Login.vue

<template>
  <div class="login-body">
    <div class="login-container">
      <div class="head">
        <img class="logo" src="/favicon.ico" />
      </div>
      <div class="bottom">
        <div class="left-bottom"></div>
        <div class="middle-bottom"></div>
        <div class="right-bottom">
          <div class="title">数据控制器</div>
          <!-- <div class="s-title">登录LOGIN</div> -->
          <el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form" size="large">
            <el-form-item prop="username">
              <el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" placeholder="请输入账号">
                <template #prefix>
                  <img class="logo" src="../assets/user.png" width="16" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model.trim="ruleForm.password" autocomplete="off" placeholder="请输入密码"
                @keyup.enter="submitForm">
                <template #prefix>
                  <img class="logo" src="../assets/ps.png" width="16" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item class="login-btn">
              <el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, onMounted } from "vue";
import { localSet, localGet } from "@/utils";
import myApi from "@/api/myApi.js";
import { ElMessage } from "element-plus";
import { user, token, response } from '../proto/data/pd'
import axios from "axios";
import md5 from 'js-md5'
import { localRemove, pathMap } from "@/utils";
import { useStore } from "vuex";

export default {
  name: "Login",
  setup() {
    const store = useStore();
    const loginForm = ref(null);
    const state = reactive({
      ruleForm: {
        username: "",
        password: "",
      },
      checked: true,
      rules: {
        username: [
          { required: "true", message: "账户不能为空", trigger: "blur" },
        ],
        password: [
          { required: "true", message: "密码不能为空", trigger: "blur" },
        ],
      },
    });
    onMounted(() => {
      localRemove("token");

    });
    const submitForm = async () => {
      loginForm.value.validate(async (valid) => {
        if (valid) {
          // 1. 编码数据
          const userInfo = {
            username: state.ruleForm.username,
            password: state.ruleForm.password
            // password: md5(state.ruleForm.password).toUpperCase(),
          }
          // 模拟登录
          // localSet("token", '99999999999999999');
          // store.commit("setUserInfo", userInfo);
          // window.location.href = '/';

          myApi.login(userInfo).then(async (res) => {
            if (res.code == 0) {
              let userInfo = {
                nickName: state.ruleForm.username,
              };
              store.commit("setUserInfo", userInfo);
              getLoginStatus();
            } else {
              ElMessage.error(res.data);
            }
          })
        } else {
          return false;
        }
      })
    };

    const getLoginStatus = async () => {
      const res = await myApi.loginStatus();
      if (res.code == 0) {
        window.location.href = '/';
      } else {
        ElMessage.error(res.data || res.message || "请求失败");
      }
    }
    const resetForm = () => {
      loginForm.value.resetFields();
    };
    return {
      ...toRefs(state),
      loginForm,
      submitForm,
      resetForm,
    };
  },
};
</script>

<style scoped lang="scss">
.login-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: url("../assets/bg.png") no-repeat center;
  background-size: 100% 100%;
}

.login-container {
  width: 1280px;
  height: 750px;
  border-radius: 4px;
  background: url("../assets/bg1.png") no-repeat center;
  background-size: 100% 100%;
}

.head {
  display: flex;
  align-items: center;
  padding: 40px 0 20px 180px;
  margin: 0 auto;
}

.head img {
  width: 80px;
}

.bottom {
  height: 65%;
  display: flex;

  .left-bottom {
    width: 150px;
  }

  .middle-bottom {
    width: 690px;
    background: url("../assets/bg3.png") no-repeat center;
    background-size: 100% 100%;
  }

  .right-bottom {
    width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 36px;
      font-weight: 600;
      padding: 20px 0 40px 0;
      color: #333333;
    }

    .s-title {
      font-size: 24px;
      font-weight: 600;
      color: #333333;
    }
  }
}

.login-form {
  width: 85%;
  margin: 40px auto;
}
</style>
<style>
.el-form--label-top .el-form-item__label {
  padding: 0;
}

.login-form .el-form-item {
  margin-bottom: 40px;
}

.login-btn {
  margin-top: 80px;
}
</style>