feat: 用户端注册页面调整

xinkeaboard-web/assets/language/en.js

@@ -827,7 +827,8 @@ export const lang_en = {
         '校验不通过': 'The verification fails',
         '注册成功': 'Registration Successful',
         '我们将向您的邮箱发送验证码，该邮件将用作登录用户名': 'We will send a verification code to your email address, which will be used as your login username',
-        '请确认密码': 'Please confirm the password'
+        '请确认密码': 'Please confirm the password',
+        '两次输入的密码不一致': 'The passwords entered twice are inconsistent',
     },
 
     // 人机验证

xinkeaboard-web/assets/language/zh.js

@@ -854,7 +854,8 @@ export const lang_zn = {
       '校验不通过': '校验不通过',
       '注册成功': '注册成功',
       '我们将向您的邮箱发送验证码，该邮件将用作登录用户名': '我们将向您的邮箱发送验证码，该邮件将用作登录用户名',
-      '请确认密码': '请确认密码'
+      '请确认密码': '请确认密码',
+      '两次输入的密码不一致': '两次输入的密码不一致',
     },
 
     // 人机验证

xinkeaboard-web/components/register/RegisterAccount.vue

@@ -49,15 +49,15 @@
       </div>
     </div>
     <div class="item confirm">
-      <span
-        style="color: #bbb; font-size: 21px; padding-top: 7px"
-        class="icon iconfont icon-mima1"
-      ></span>
+      <span style="color: #bbb; font-size: 21px; padding-top: 7px" class="icon"
+        ><img src="/pwd_confirm.png" alt=""
+      /></span>
       <input
-        :type="showConfirmPwdFlag ? 'text' : 'password'"
+        class="input"
         v-model="confirmPassword"
+        :type="showConfirmPwdFlag ? 'text' : 'password'"
         :placeholder="L['register']['请确认密码']"
-        class="input"
+        @blur="checkPwdMatched"
       />
       <div class="cancel" @click="isShowConfirmPwd">
         <span
@@ -74,6 +74,13 @@
         ></span>
       </div>
     </div>
+    <div class="error" v-if="checkErrorMsg">
+      <span
+        style="color: #e1251b; font-size: 14px"
+        class="iconfont icon-jubao"
+      ></span>
+      {{ checkErrorMsg }}
+    </div>
     <a
       href="javascript:void(0)"
       @click="joinForFree"
@@ -115,6 +122,7 @@
 
 <script setup>
 import { getCurLanguage } from "@/composables/common.js";
+import { showMessage } from "@/utils/common";
 
 const L = getCurLanguage();
 
@@ -122,12 +130,17 @@ const agreeFlag = ref(false); //同意注册协议标识，默认不同意
 const agreeErrorMsg = ref(); // 协议错误提示
 const name = ref(""); //用户名
 const nameErrorMsg = ref(""); //用户名错误提示
+const checkErrorMsg = ref(""); // 密码一致性错误提示
 const password = ref(""); //密码
-const confirmPassword = ref("") //二次确认密码
+const confirmPassword = ref(""); //二次确认密码
 const showPwdFlag = ref(false); //密码是否明文显示，默认密文
-const showConfirmPwdFlag = ref(false) // 二次密码是否明文显示，默认密文
+const showConfirmPwdFlag = ref(false); // 二次密码是否明文显示，默认密文
 
-const joinForFreeDisabled = computed(() => false);
+const joinForFreeDisabled = computed(
+  () => !name.value || !password.value || !confirmPassword.value
+);
+
+const isPasswordMatched = computed(() => password.value === confirmPassword.value)
 
 const clearInputVal = () => {
   name.value = "";
@@ -141,7 +154,7 @@ const isShowPwd = () => {
 // 二次确认密码是否显示
 const isShowConfirmPwd = () => {
   showConfirmPwdFlag.value = !showConfirmPwdFlag.value;
-}
+};
 
 //是否同意用户注册协议
 const agree = () => {
@@ -149,11 +162,17 @@ const agree = () => {
 };
 
 const joinForFree = () => {
+  if (!isPasswordMatched) return;
   if (!agreeFlag.value) {
     agreeErrorMsg.value = L["请同意用户注册协议及隐私政策"];
     return false;
   }
   agreeErrorMsg.value = "";
+
+};
+
+const checkPwdMatched = () => {
+  checkErrorMsg.value = isPasswordMatched.value ? "" : L["register"]["两次输入的密码不一致"];
 };
 
 watch(name, (val) => {
@@ -183,11 +202,8 @@ watch(name, (val) => {
       height: 38px;
       background: #f8f8f8;
 
-      .input {
-        border: 1px solid #e8e8e8;
-        height: 40px;
-        padding: 0 44px 0 60px;
-        width: 326px;
+      img {
+        width: 20px;
       }
     }
 

xinkeaboard-web/components/register/RegisterMail.vue

@@ -86,6 +86,9 @@
 <script setup>
 import { getCurLanguage } from "@/composables/common.js";
 import { showMessage, startCountdown } from "@/utils/common";
+
+const emits = defineEmits(['success'])
+
 const L = getCurLanguage();
 
 const emailCalc = ref();
@@ -211,10 +214,7 @@ const next = () => {
         type: "success",
       });
       //成功提示，并返回到登录页面
-      currentStep.value = "registerAccount";
-      // setTimeout(() => {
-      //   goToPage("/login");
-      // }, 500);
+      emits('success')
     } else {
       //提示错误
       showMessage({

xinkeaboard-web/components/register/RegisterSuccess.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="register-success">
+    sdsdsd
+  </div>
+</template>
+
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.register-success {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

xinkeaboard-web/pages/register.vue

@@ -33,17 +33,21 @@
       <div class="login">
         <div class="login_box">
           <div class="top">
-            <div class="item1">{{ L["注册账号"] }}</div>
+            <div class="item1">{{ title }}</div>
           </div>
-          <RegisterMail v-if="currentStep === 'registerMail'" />
-          <RegisterAccount v-if="currentStep === 'registerAccount'" />
+          <RegisterMail v-if="currentStep === 'mail'" @success="currentStep = 'account'" />
+          <RegisterAccount v-if="currentStep === 'account'" @success="currentStep = 'finish'"/>
+          <RegisterSuccess v-if="currentStep === 'finish'"/>
           <div :class="{ bottom: true, flex_row_between_center: true }">
             <a href="javascript:void(0)" @click="goToPage('/login')">{{
               L["已有账号，去登录"]
             }}</a>
-            <nuxt-link tag="a" :to="`/member/login/forget`">{{
-              L["忘记密码"]
-            }}</nuxt-link>
+            <nuxt-link
+              v-if="currentStep === 'mail'"
+              tag="a"
+              :to="`/member/login/forget`"
+              >{{ L["忘记密码"] }}</nuxt-link
+            >
           </div>
         </div>
       </div>
@@ -55,13 +59,12 @@
 import { useRoute, useRouter } from "vue-router";
 import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
-// import { lang_zn } from "@/assets/language/zh";
 import { getCurLanguage } from "@/composables/common.js";
 import { useUserInfo } from "@/store/user.js";
 import { useFiltersStore } from "@/store/filter.js";
+
 const filtersStore = useFiltersStore();
 const configInfo = useUserInfo();
-// const L = lang_zn;
 const L = getCurLanguage();
 const route = useRoute();
 const router = useRouter();
@@ -71,7 +74,14 @@ const fromurl = ref("");
 const ImgBG = ref("");
 
 // 当前步骤标识
-const currentStep = ref('registerAccount')
+const currentStep = ref("mail");
+
+const title =
+  currentStep.value === "mail"
+    ? L["注册账号"]
+    : currentStep.value === "account"
+    ? L["下一步"]
+    : "";
 
 useHead({
   title: "Register",
@@ -97,13 +107,6 @@ const getBg = () => {
 };
 getBg();
 
-
-
-//是否同意用户注册协议
-const agree = () => {
-  agreeFlag.value = !agreeFlag.value;
-};
-
 //通过replace方式跳转页面
 const goToPage = (type) => {
   router.replace({