5、登录页

 

 

setup 语法糖 + element-plus（表单，提示） + vue-router

 

<template>
  <div class="login">
    <el-row>
      <el-col :span="24">
        <div class="l">

          <div style="font-size: 20px;font-weight: bold;">{{systemName}}</div>

          <div style="width: 500px;margin-top: 50px;">
            <el-form ref="addruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
              <el-form-item label="账号" prop="account">
                <el-input v-model="ruleForm.account" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm()" :loading="isLoading">登录
                </el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import {
    ref,
    reactive,
    unref
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import {
    ElMessage
  } from 'element-plus'
  
  //<!-----------------------------------参数----------------------------------->
  let router = useRouter();
  const isLoading = ref(false);
  const systemName = ref(window.config.systemName);
  const company = ref(window.config.company);
  const version = ref(window.config.version);
  const account = ref(window.config.account);
  const password = ref(window.config.password);
  const ruleForm = reactive({
    account: '',
    password: '',
  });
  const rules = reactive({
    account: [{
      required: true,
      message: '账号不能为空！',
      trigger: 'blur',
    }, ],
    password: [{
      required: true,
      message: '密码不能为空！',
      trigger: 'blur',
    }, ],
  });
  const addruleForm = ref(null);

  //<!-----------------------------------方法----------------------------------->
  //提交
  const submitForm = async () => {
    isLoading.value = true;
    setTimeout(() => { //设置延迟执行
      isLoading.value = false;
    }, 2000);
    const form = unref(addruleForm);
    try {
      await form.validate();
      //console.log("验证成功");
      if (ruleForm.account == account.value && ruleForm.password == password.value) {

        ElMessage({
          message: '登录成功！',
          type: 'success',
        })
        setTimeout(() => { //设置延迟执行
          router.push({
            //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
            path: '/home'
            //name:'Home',
            //params:{
            //num:1
            //}
          });
        }, 1000);


      } else {
        ElMessage.error('请输入正确账号密码！')
        return false
      }

    } catch (err) {
      //console.log("err===" + err);
      ElMessage.error('请输入正确账号密码！')
      return false
    }
  }

  //重置
  const resetForm = (formName) => {
    const form = unref(addruleForm);
    form.resetFields()
  }

</script>

<style scoped>
  .login {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 98vh;
  }
</style>