注册页面

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/api.ts

@@ -0,0 +1 @@
+export const SENDVCODE = "/user/sendVcode"; //发送验证码

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

@@ -1,15 +1,179 @@
 <template>
-  <div>
-    register
+  <div class="loginView w-screen h-screen overflow-hidden flex">
+    <div class="w-[32rem] bg-white m-auto border-t-8 border-blue-400 shadow-xl rounded-md pl-9 pr-9">
+      <h2 class="text-xl text-center pt-4 font-bold">注册</h2>
+      <el-form class="pt-4" ref="ruleFormRef" :model="ruleForm" :rules="rules">
+        <el-form-item class="pt-1" prop="companyName">
+          <el-input type="text" size="large" v-model="ruleForm.companyName" autocomplete="off" placeholder="公司名"
+            clearable :prefix-icon="HomeFilled"></el-input>
+        </el-form-item>
+        <el-form-item class="pt-1" prop="name">
+          <el-input type="text" size="large" v-model="ruleForm.name" autocomplete="off" placeholder="姓名" clearable
+            :prefix-icon="UserFilled"></el-input>
+        </el-form-item>
+        <el-form-item class="pt-1" prop="phone">
+          <el-input type="text" size="large" v-model="ruleForm.phone" autocomplete="off" placeholder="手机号" clearable
+            :prefix-icon="Iphone"></el-input>
+        </el-form-item>
+        <el-form-item class="pt-1" prop="vcode">
+          <el-input type="text" size="large" v-model="ruleForm.vcode" autocomplete="off" placeholder="验证码" clearable
+            :prefix-icon="Tickets">
+            <template #append>
+              <el-button @click="sendVcode()" :disabled="ruleForm.phone == '' || showTimer">发送验证码<span
+                  v-if="showTimer">({{ countNum }})</span></el-button>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item class="pt-1" prop="password">
+          <el-input type="password" size="large" v-model="ruleForm.password" autocomplete="off"
+            placeholder="设置密码,长度不低于6位" clearable :prefix-icon="Lock">
+          </el-input>
+        </el-form-item>
+        <el-form-item class="pt-1" prop="repwd">
+          <el-input type="password" size="large" v-model="ruleForm.repwd" autocomplete="off" placeholder="重复密码"
+            clearable :prefix-icon="Lock">
+          </el-input>
+        </el-form-item>
+        <div class="pt-4 mb-5">
+          <el-button type="primary" size="large" class="w-full" :loading="registerLoading"
+            @click="register(ruleFormRef)">注册</el-button>
+        </div>
+      </el-form>
+      <div class="text-right mb-5 cursor-pointer text-blue-400 hover:text-blue-300" @click="router.push('/login')">
+        已有账号？返回登录
+      </div>
+    </div>
   </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'
+import { useRouter, useRoute } from "vue-router";
+import { HomeFilled, UserFilled, Lock, Iphone, Tickets } from '@element-plus/icons-vue'
+import { ElNotification, ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { isValueEmpty } from "@/utils/tools";
+import { post } from "@/utils/request";
+import { SENDVCODE } from "./api";
 const router = useRouter();
+const route = useRoute();
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = ref({
+  companyName: "",
+  name: "",
+  phone: "",
+  vcode: "",
+  password: "",
+  repwd: ""
+});
+const rules = reactive<FormRules<typeof ruleForm>>({
+  companyName: [{ required: true, message: '请输入公司名', trigger: 'blur' },],
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
+  phone: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' },
+  ],
+  vcode: [
+    { required: true, message: '请输入验证码', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请设置密码，长度不低于6位', trigger: 'blur' },
+    { min: 6, message: '密码长度不少于6位', trigger: 'blur' },
+  ],
+  repwd: [
+    { required: true, message: '请重复输入密码', trigger: 'blur' },
+    {
+      validator: (_rule, value, callback) => {
+        if (value !== ruleForm.value.password) {
+          callback(new Error('两次密码不一致'));
+        } else {
+          callback();
+        }
+      }, trigger: 'blur'
+    }
+  ]
+})
+
+const registerLoading = ref(false);
+const showTimer = ref(false);
+const countNum = ref(10);
+const countDown = () => {
+  if (countNum.value > 0) {
+    setTimeout(() => {
+      countNum.value -= 1;
+      countDown()
+    }, 1000)
+  } else {
+    showTimer.value = false;
+    countNum.value = 10;
+  }
+}
+const sendVcode = () => {
+  showTimer.value = true;
+  countDown();
+  if (ruleForm.value.phone.trim().length != 11) {
+    ElMessage.error({
+      message: "请输入正确的手机号",
+      type: "error",
+      duration: 2000,
+    })
+    return
+  }
+  // post(SENDVCODE, {
+  //   mobile: ruleForm.value.phone
+  // }).then(res => {
+  //   if (res.code == "ok") { 
+  //     ElMessage.success({
+  //       message: "发送成功",
+  //       type: "success",
+  //       duration: 2000,
+  //     })
+  //     showTimer.value = true;
+  //   countDown();
+  //   }
+  // })
+}
+const register = (formEl: FormInstance | undefined) => {
+  if (!formEl) {
+    return
+  }
+
+  formEl.validate((valid) => {
+    if (!valid) {
+      return false;
+    }
+    registerLoading.value = true;
+    let params = {
+      ...ruleForm.value,
+    }
+    if (!isValueEmpty(route.query)) {
+      params = {
+        ...params,
+        ...route.query
+      }
+    }
+    console.log(params);
+    // if (res.code == "ok") { 
+    //   ElNotification.success({
+    //     title: "注册成功",
+    //     message: "注册成功",
+    //     type: "success",
+    //     duration: 1000,
+    //     onClose: () => {
+    //       router.push('/login')
+    //     }
+    //   })
+    // }
+
+
+    registerLoading.value = false;
+  })
+
+};
+
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.loginView {
+  background: #f0f2f5 url("../assets/login/background.png") no-repeat;
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/thread/api.ts

@@ -0,0 +1 @@
+export const TEST_API = "/api/test"; //发送验证码

fhKeeper/formulahousekeeper/customerBuler-crm/src/utils/request.ts

@@ -2,10 +2,10 @@ import axios from "axios";
 import { showMessage } from "./errorStatusCode"; // 引入状态码文件
 import type { AxiosRequestConfig, AxiosResponse, AxiosError } from "axios";
 import { ElNotification } from "element-plus";
-
+const baseURL='/api'
 // 创建axios实例
 const instance = axios.create({
-  baseURL: "/api", // 设置API的基础URL
+  baseURL, // 设置API的基础URL
 });
 
 // 请求拦截器

fhKeeper/formulahousekeeper/customerBuler-crm/src/utils/tools.ts

@@ -0,0 +1,22 @@
+export function isValueEmpty(value: any): boolean {
+  if (value === null || value === undefined) {
+    return true;
+  }
+  if (typeof value === "string" && value.trim() === "") {
+    return true;
+  }
+  if (Array.isArray(value) && value.length === 0) {
+    return true;
+  }
+  if (
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    Object.keys(value).length === 0
+  ) {
+    return true;
+  }
+  if (typeof value === "symbol" && value.toString() === "Symbol()") {
+    return true;
+  }
+  return false;
+}