路由文件+登录

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

@@ -5,13 +5,18 @@
         <img class="w-1/5 h-1/5 m-auto" :src="loginLogo" alt="">
       </div>
       <h2 class="text-xl text-center pt-4 font-bold">客户管家</h2>
-      <el-form class="pt-4" ref="ruleFormRef" :model="ruleForm">
-        <el-input :prefix-icon="UserFilled" size="large" class="mt-2" v-model="ruleForm.username"
-          placeholder="账号/手机号" />
-        <el-input :prefix-icon="Lock" show-password size="large" class="mt-6" v-model="ruleForm.password"
-          placeholder="密码" />
-        <div class="pt-6">
-          <el-button type="primary" size="large" class="w-full" :loading="loginLoading" @click="login">登录</el-button>
+      <el-form class="pt-4" ref="ruleFormRef" :model="ruleForm" :rules="rules">
+        <el-form-item prop="username">
+          <el-input :prefix-icon="UserFilled" size="large" class="mt-2" v-model="ruleForm.username" autocomplete="off"
+            placeholder="账号/手机号" />
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input :prefix-icon="Lock" show-password size="large" class="mt-4" v-model="ruleForm.password"
+            autocomplete="off" placeholder="密码" />
+        </el-form-item>
+        <div class="pt-4">
+          <el-button type="primary" size="large" class="w-full" :loading="loginLoading"
+            @click="login(ruleFormRef)">登录</el-button>
         </div>
       </el-form>
       <el-divider content-position="center">或</el-divider>
@@ -21,33 +26,62 @@
       <div class="flex justify-between pb-5">
         <div class="cursor-pointer text-blue-400 hover:text-blue-300">联系客服</div>
         <div class="flex justify-around">
-          <div class="mr-4 cursor-pointer text-blue-400 hover:text-blue-300">使用说明</div>
-          <div class="cursor-pointer text-blue-400 hover:text-blue-300">企业注册</div>
+          <div class="mr-4 cursor-pointer text-blue-400 hover:text-blue-300" @click="useHelp()">使用说明</div>
+          <div class="cursor-pointer text-blue-400 hover:text-blue-300" @click="toRegister()">企业注册</div>
         </div>
       </div>
+      <el-dialog v-model="helpDialog" width="30%" title="使用说明">
+        <div class="p-2 text-xl">文档水水水水</div>
+        <div>文档水水水水</div>
+        <div>文档水水水水</div>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import loginLogo from "@/assets/login/login_logo.png";
 import qiyeweixin from "@/assets/login/qiyeweixin.png";
 import { UserFilled, Lock } from '@element-plus/icons-vue'
-import { ref } from "vue";
-const ruleFormRef=ref(null);
+import type { FormInstance, FormRules } from 'element-plus'
+const router = useRouter();
+const ruleFormRef = ref<FormInstance>();
 const ruleForm = ref({
   username: "",
   password: "",
 });
-
 const loginLoading = ref(false);
-const login = () => {
-  loginLoading.value = true;
-  console.log(ruleForm.value);
-  setTimeout(() => {
-    loginLoading.value = false;
-  }, 1000);
+const rules = reactive<FormRules<typeof ruleForm>>({
+  username: [{ required: true, trigger: "blur", message: "请输入账号/手机号" }],
+  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
+})
+const helpDialog = ref(false);
+
+const login = (formEl: FormInstance | undefined) => {
+  if (!formEl) {
+    return
+  }
+  formEl.validate((valid) => {
+    if (!valid) {
+      return false;
+    }
+    loginLoading.value = true;
+    console.log(ruleForm.value);
+    setTimeout(() => {
+      loginLoading.value = false;
+      router.push("/home");
+    }, 1000);
+  })
+
 };
+const useHelp = () => {
+  helpDialog.value = true;
+}
+const toRegister = () => {
+  router.push("/register");
+}
 </script>
 
 <style lang="scss" scoped>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/register.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    register
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { UserFilled, Lock } from '@element-plus/icons-vue'
+import type { FormInstance, FormRules } from 'element-plus'
+const router = useRouter();
+</script>
+
+<style lang="scss" scoped></style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/router/index.ts

@@ -11,6 +11,11 @@ export const routes = [
         path: '/login',
         component: Login
     },
+    {
+        name: 'register',
+        path: '/register',
+        component: () => import("../pages/register.vue")
+    },
     {
         name: 'home',
         path: '/home',