优化代码

src/views/emailRegistration.vue

@@ -17,6 +17,9 @@
       <div class="Email">
         <el-input type="text" size="large" class="input-item" v-model="Email" placeholder="请输入邮箱" />
       </div>
+      <div class="Email">
+        <el-input type="text" size="large" class="input-item" v-model="userName" placeholder="请输入用户名" @blur="userNameBlur"/>
+      </div>
       <div class="Password">
         <el-input type="Password" size="large" class="input-item" v-model="Password" show-password placeholder="请输入密码" />
         <text class="password-tip">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
@@ -26,7 +29,7 @@
       </div>
       <div class="btn">
          <div class="Return" @click="Return">返回</div>
-         <div class="nextStep"@click="nextStep">下一步</div>
+         <div class="nextStep" @click="nextStep" >下一步</div>
       </div>
     </div>
     <!-- 完成注册 -->
@@ -43,7 +46,7 @@
 </template>
 
 <script setup>
-import { register,checkStatus,resendEmail} from "@/api/account"; // 导入登录接口
+import { register,checkStatus,resendEmail,checkUsername} from "@/api/account"; // 导入登录接口
 import { tokenStore, UserStore } from '@/stores/notice'
 import { setStorage , getStorage } from '@/utils/storage.js';
 import {
@@ -58,12 +61,36 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 const active = ref(0);// 当前步骤
 const Email = ref("");// 邮箱
+const userName = ref("");// 用户名
 const Password = ref("");// 密码
 const ConfirmPassword = ref("");// 确认密码
 const token = tokenStore()
 const user = UserStore()
+const userNamebtn = ref(false)
+// 用户名失去焦点
+function userNameBlur() {
+  if (userName.value.length < 6 || userName.value.length > 16 || userName.value == '' || userName.value == null) {
+    ElMessage.error('用户名长度不能小于2，不能大于16,不能为空');
+    return;
+  }
+  checkUsername({ userName: userName.value }).then(res => {
+    if (res==false) {
+      ElMessage.error('用户名已存在');
+      userNamebtn.value = false
+      return;
+    } else {
+    ElMessage.success('用户名可用');
+    userNamebtn.value = true
+    }
+  })
+}
 //下一步
 function nextStep() {
+  //用户名验证
+  if (userNamebtn.value == false) {
+    ElMessage.error('用户名已存在');
+    return;
+  }
   // 邮箱验证
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   if (!emailRegex.test(Email.value)) {
@@ -78,12 +105,18 @@ function nextStep() {
     return;
   }
 
+  //用户名验证
+  if (userName.value.length < 6 || userName.value.length > 16 || userName.value == '' || userName.value == null) {
+    ElMessage.error('用户名长度不能小于2，不能大于16,不能为空');
+    return;
+  }
+
   // 确认密码验证
   if (Password.value !== ConfirmPassword.value) {
     ElMessage.error('两次输入的密码不一致');
     return;
   }
-  register({password: Password.value, email: Email.value, nickName: '用户' + Math.floor(Math.random() * 1000000),headerIcon:'181754562968_.pic_hd.jpg'}).then(res => {
+  register({ userName: userName.value,password: Password.value, email: Email.value, nickName: '用户' + Math.floor(Math.random() * 1000000),headerIcon:'181754562968_.pic_hd.jpg'}).then(res => {
     active.value = active.value + 1;
     check(res.id);
     token.setToken(res.token);
@@ -195,14 +228,14 @@ onUnmounted(() => {
     opacity: 0.8;
 }
 .Email{
-  margin-top: 70px;
+  margin-top: 30px;
   width: 90%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .Password{
-  margin-top: 50px;
+  margin-top: 30px;
   width: 90%;
   display: flex;
   flex-direction: column;
@@ -210,7 +243,7 @@ onUnmounted(() => {
   align-items: center;
 }
 .ConfirmPassword{
-  margin-top: 50px;
+  margin-top: 30px;
   width: 90%;
   display: flex;
   flex-direction: column;