页面

  1<template>
  2  <el-row class="login" justify="center" align="middle">
  3    <el-card class="box-card">
  4      <template #header>
  5        <div class="card-header">
  6          <span>用户登录</span>
  7          <div class="dark-icon" @click="toggleDark()">
  8            <el-icon>
  9              <Moon v-if="isDark" />
 10              <Sunny v-else />
 11            </el-icon>
 12          </div>
 13        </div>
 14      </template>
 15      <div>
 16        <el-form
 17          ref="ruleFormRef"
 18          :model="ruleForm"
 19          status-icon
 20          :rules="rules"
 21          label-width="60px"
 22          class="demo-ruleForm"
 23        >
 24          <el-form-item label="用户名" prop="username">
 25            <el-input v-model.number="ruleForm.username" />
 26          </el-form-item>
 27          <el-form-item label="密码" prop="password">
 28            <el-input
 29              v-model="ruleForm.password"
 30              type="password"
 31              autocomplete="off"
 32            />
 33          </el-form-item>
 34          <el-form-item>
 35            <el-button type="primary" @click="submitForm(ruleFormRef)"
 36              >登录</el-button
 37            >
 38          </el-form-item>
 39        </el-form>
 40      </div>
 41    </el-card>
 42  </el-row>
 43</template>
 44
 45<style scoped>
 46.login {
 47  position: absolute;
 48  top: 20%;
 49  bottom: 60%;
 50  width: 100%;
 51}
 52
 53.box-card {
 54  width: 450px;
 55}
 56
 57.card-header {
 58  display: flex;
 59  justify-content: space-between;
 60  align-items: center;
 61}
 62
 63.dark-icon {
 64  font-size: 20px;
 65  cursor: pointer;
 66}
 67
 68.text {
 69  font-size: 14px;
 70}
 71
 72.item {
 73  margin-bottom: 18px;
 74}
 75</style>
 76
 77<script lang="ts" setup>
 78import { reactive, ref } from "vue";
 79import { useRouter } from "vue-router";
 80import { toggleDark, isDark } from "@/stores/dark";
 81import type { FormInstance, FormRules } from "element-plus";
 82import { fetchUsers } from "@/apis/user/login";
 83
 84const ruleFormRef = ref<FormInstance>();
 85const router = useRouter();
 86
 87const validateEmpty = (rule: any, value: any, callback: any) => {
 88  if (value === "") {
 89    callback(new Error("字段不能为空"));
 90  } else {
 91    callback();
 92  }
 93};
 94
 95const ruleForm = reactive({
 96  username: "",
 97  password: "",
 98});
 99
100const rules = reactive<FormRules>({
101  username: [{ validator: validateEmpty, trigger: "blur" }],
102  password: [{ validator: validateEmpty, trigger: "blur" }],
103});
104
105const submitForm = (formEl: FormInstance | undefined) => {
106  if (!formEl) return;
107  formEl.validate(async (valid) => {
108    if (valid) {
109      const { error, data, response } = await fetchUsers(ruleForm);
110      if (error) {
111        console.log(response);
112        return;
113      }
114      console.log(data.token);
115      router.push("/");
116    } else {
117      console.log("error submit!");
118      return false;
119    }
120  });
121};
122</script>