From 16e22cfa6144d883ffcac0daf844322df179ea8b Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期一, 19 五月 2025 13:07:10 +0800 Subject: [PATCH] 首页开发 --- src/views/register.vue | 66 +++++++++++++++++---------------- 1 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/views/register.vue b/src/views/register.vue index 8d2d28d..58d9ba5 100644 --- a/src/views/register.vue +++ b/src/views/register.vue @@ -1,7 +1,7 @@ <template> <div class="register"> <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form"> - <h3 class="title">鑻ヤ緷鍚庡彴绠$悊绯荤粺</h3> + <h3 class="title">{{ title }}</h3> <el-form-item prop="username"> <el-input v-model="registerForm.username" @@ -37,7 +37,7 @@ <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> </el-input> </el-form-item> - <el-form-item prop="code" v-if="captchaOnOff"> + <el-form-item prop="code" v-if="captchaEnabled"> <el-input size="large" v-model="registerForm.code" @@ -70,17 +70,18 @@ </el-form> <!-- 搴曢儴 --> <div class="el-register-footer"> - <span>Copyright 漏 2018-2022 ruoyi.vip All Rights Reserved.</span> + <span>Copyright 漏 2018-2025 ruoyi.vip All Rights Reserved.</span> </div> </div> </template> <script setup> -import { ElMessageBox } from "element-plus"; -import { getCodeImg, register } from "@/api/login"; +import { ElMessageBox } from "element-plus" +import { getCodeImg, register } from "@/api/login" -const router = useRouter(); -const { proxy } = getCurrentInstance(); +const title = import.meta.env.VITE_APP_TITLE +const router = useRouter() +const { proxy } = getCurrentInstance() const registerForm = ref({ username: "", @@ -88,15 +89,15 @@ confirmPassword: "", code: "", uuid: "" -}); +}) const equalToPassword = (rule, value, callback) => { if (registerForm.value.password !== value) { - callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�")); + callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�")) } else { - callback(); + callback() } -}; +} const registerRules = { username: [ @@ -105,52 +106,53 @@ ], password: [ { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }, - { min: 5, max: 20, message: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", trigger: "blur" } + { min: 5, max: 20, message: "鐢ㄦ埛瀵嗙爜闀垮害蹇呴』浠嬩簬 5 鍜� 20 涔嬮棿", trigger: "blur" }, + { pattern: /^[^<>"'|\\]+$/, message: "涓嶈兘鍖呭惈闈炴硶瀛楃锛�< > \" ' \\\ |", trigger: "blur" } ], confirmPassword: [ { required: true, trigger: "blur", message: "璇峰啀娆¤緭鍏ユ偍鐨勫瘑鐮�" }, { required: true, validator: equalToPassword, trigger: "blur" } ], code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }] -}; +} -const codeUrl = ref(""); -const loading = ref(false); -const captchaOnOff = ref(true); +const codeUrl = ref("") +const loading = ref(false) +const captchaEnabled = ref(true) function handleRegister() { proxy.$refs.registerRef.validate(valid => { if (valid) { - loading.value = true; + loading.value = true register(registerForm.value).then(res => { - const username = registerForm.value.username; + const username = registerForm.value.username ElMessageBox.alert("<font color='red'>鎭枩浣狅紝鎮ㄧ殑璐﹀彿 " + username + " 娉ㄥ唽鎴愬姛锛�</font>", "绯荤粺鎻愮ず", { dangerouslyUseHTMLString: true, type: "success", }).then(() => { - router.push("/login"); - }).catch(() => {}); + router.push("/login") + }).catch(() => {}) }).catch(() => { - loading.value = false; - if (captchaOnOff) { - getCode(); + loading.value = false + if (captchaEnabled) { + getCode() } - }); + }) } - }); + }) } function getCode() { getCodeImg().then(res => { - captchaOnOff.value = res.captchaOnOff === undefined ? true : res.captchaOnOff; - if (captchaOnOff.value) { - codeUrl.value = "data:image/gif;base64," + res.img; - registerForm.value.uuid = res.uuid; + captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled + if (captchaEnabled.value) { + codeUrl.value = "data:image/gif;base64," + res.img + registerForm.value.uuid = res.uuid } - }); + }) } -getCode(); +getCode() </script> <style lang='scss' scoped> @@ -159,7 +161,7 @@ justify-content: center; align-items: center; height: 100%; - background-image: url("../assets/images/login-background.jpg"); + background-image: url("../assets/images/login-background.png"); background-size: cover; } .title { -- Gitblit v1.9.3