zuobijiance/front/src/views/login.vue

<template>
  <div class="loginMain">
    <div class="login">
      <el-card shadow="hover" style="width: 450px">
        <template #header>
          <div style="text-align: center">
            <el-button class="button" text @click="regist = false">
              登录
            </el-button>
            <!-- <el-button class="button" text @click="regist = true">
              注册
            </el-button> -->
          </div>
        </template>
        <div>
          <el-form :model="regForm" label-suffix=":" @submit.prevent>
            <el-form-item label="账号">
              <el-input v-model="regForm.name" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="regForm.password" type="password" placeholder="请输入密码" show-password
                @keyup.enter="login" />
            </el-form-item>
            <el-form-item label="邮箱" v-if="regist">
              <el-input v-model="regForm.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div style="text-align: center">
            <el-button class="button" v-if="regist" @click="login">
              注册
            </el-button>
            <el-button class="button" v-else @click="login"> 登录 </el-button>
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  loginFun, //登录
} from "@/api/user";
import md5 from "md5"
export default {
  name: "login",
  components: {},
  data() {
    return {
      regist: false,
      regForm: {
        name: "",
        password: "",
        email: "",
      },
    };
  },
  watch: {},
  computed: {},
  async mounted() {
    await this.init();
  },
  beforeUnmount() { },

  methods: {
    dealForm() {
      return {
        regist: this.regist,
        xuehao: this.regForm.name,
        mima: md5(this.regForm.password),
        email: this.regForm.email,
      }
    },
    async init() { },
    async login() {
      let formData = this.dealForm()
      let res = await loginFun(formData)
      console.log(999, res)
      if (!res.hasError) {
        ElMessage.success(res.msg);
        localStorage.setItem("userId", this.$_.get(res, ["list", 0, "_id"], ""))
        localStorage.setItem("userName", this.$_.get(res, ["list", 0, "xueshengxingming"], ""))
        this.$router.push("/user")
      } else {
        ElMessage.error(res.msg);
        localStorage.clear()
      }
    },
  },
};
</script>
<style scoped>
.loginMain {
  background-image: url("@/assets/img/login.jpg");
  background-size: 100% 100%;
  height: 100vh;
  width: 100vw;
}

.login {
  padding-top: calc(50vh - 165px);
  padding-left: calc(50vw - 225px);
}
</style>