feat: 调整注册页面功能以及交互

xinkeaboard-web/assets/language/en.js

@@ -829,6 +829,9 @@ export const lang_en = {
         '我们将向您的邮箱发送验证码，该邮件将用作登录用户名': 'We will send a verification code to your email address, which will be used as your login username',
         '请确认密码': 'Please confirm the password',
         '两次输入的密码不一致': 'The passwords entered twice are inconsistent',
+        '注册成功': 'Registration successful',
+        '您已注册成功, 5s内跳转到登录页': 'You have registered successfully. You will be redirected to the login page within 5 seconds',
+        '立即登录': 'Log in now'
     },
 
     // 人机验证

xinkeaboard-web/assets/language/zh.js

@@ -856,6 +856,9 @@ export const lang_zn = {
       '我们将向您的邮箱发送验证码，该邮件将用作登录用户名': '我们将向您的邮箱发送验证码，该邮件将用作登录用户名',
       '请确认密码': '请确认密码',
       '两次输入的密码不一致': '两次输入的密码不一致',
+      '注册成功': '注册成功',
+      '您已注册成功, 5s内跳转到登录页': '您已注册成功, 5s内跳转到登录页',
+      '立即登录': '立即登录'
     },
 
     // 人机验证

xinkeaboard-web/components/SliderVerify.vue

@@ -10,7 +10,7 @@
     ></slide-verify>
     <div class="verify-content-action">
       <span class="verify-content-action__refresh" @click="refresh">
-        <img src="/refresh.png" />
+        <img src="/register/refresh.png" />
         <span>{{ L["humanMachineVerify"]["刷新"] }}</span>
       </span>
     </div>

xinkeaboard-web/components/register/RegisterAccount.vue

@@ -50,7 +50,7 @@
     </div>
     <div class="item confirm">
       <span style="color: #bbb; font-size: 21px; padding-top: 7px" class="icon"
-        ><img src="/pwd_confirm.png" alt=""
+        ><img src="/register/pwd_confirm.png" alt=""
       /></span>
       <input
         class="input"
@@ -81,11 +81,12 @@
       ></span>
       {{ checkErrorMsg }}
     </div>
-    <a
-      href="javascript:void(0)"
+    <el-button
       @click="joinForFree"
       :class="{ submit: true, disabled: joinForFreeDisabled }"
-      >{{ L["去注册"] }}</a
+      :disabled="joinForFreeDisabled"
+      :loading="joinForFreeLoading"
+      >{{ L["去注册"] }}</el-button
     >
     <div class="agree_wrap">
       <input
@@ -126,6 +127,14 @@ import { showMessage } from "@/utils/common";
 
 const L = getCurLanguage();
 
+const emits = defineEmits(["success"]);
+const props = defineProps({
+  email: {
+    type: String,
+    default: "",
+  },
+});
+
 const agreeFlag = ref(false); //同意注册协议标识，默认不同意
 const agreeErrorMsg = ref(); // 协议错误提示
 const name = ref(""); //用户名
@@ -135,12 +144,15 @@ const password = ref(""); //密码
 const confirmPassword = ref(""); //二次确认密码
 const showPwdFlag = ref(false); //密码是否明文显示，默认密文
 const showConfirmPwdFlag = ref(false); // 二次密码是否明文显示，默认密文
+const joinForFreeLoading = ref(false);
 
 const joinForFreeDisabled = computed(
   () => !name.value || !password.value || !confirmPassword.value
 );
 
-const isPasswordMatched = computed(() => password.value === confirmPassword.value)
+const isPasswordMatched = computed(
+  () => password.value === confirmPassword.value
+);
 
 const clearInputVal = () => {
   name.value = "";
@@ -169,10 +181,38 @@ const joinForFree = () => {
   }
   agreeErrorMsg.value = "";
 
+  // 注册账号
+  joinForFreeLoading.value = true;
+  post("/v3/member/front/active/register", {
+    confirmPassword: confirmPassword.value,
+    email: props.email,
+    nickName: name.value,
+    password: password.value,
+  })
+    .then((res) => {
+      if (res.state === 200) {
+        showMessage({
+          message: L["register"]["注册成功"],
+          type: "success",
+        });
+
+        emits("success");
+      } else {
+        showMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
+    })
+    .finally(() => {
+      joinForFreeLoading.value = false;
+    });
 };
 
 const checkPwdMatched = () => {
-  checkErrorMsg.value = isPasswordMatched.value ? "" : L["register"]["两次输入的密码不一致"];
+  checkErrorMsg.value = isPasswordMatched.value
+    ? ""
+    : L["register"]["两次输入的密码不一致"];
 };
 
 watch(name, (val) => {
@@ -246,14 +286,13 @@ watch(name, (val) => {
   }
 
   .submit {
-    display: block;
     margin-top: 35px;
     background: $colorMain;
     color: #fff;
     text-align: center;
     border-radius: 2px;
+    width: 100%;
     height: 45px;
-    line-height: 45px;
     font-size: 18px;
     letter-spacing: 0px;
 
@@ -263,7 +302,6 @@ watch(name, (val) => {
 
     &.disabled {
       background-color: #909399;
-      pointer-events: none;
     }
   }
 

xinkeaboard-web/components/register/RegisterMail.vue

@@ -15,11 +15,7 @@
         class="input"
         autocomplete="off"
       />
-      <div
-        data-type="userName"
-        class="cancel"
-        @click="clearInputVal"
-      >
+      <div data-type="userName" class="cancel" @click="clearInputVal">
         <span style="color: #bbb" class="iconfont icon-cuowu"></span>
       </div>
     </div>
@@ -33,7 +29,7 @@
     <!-- 邮箱验证码 -->
     <div class="verify-code">
       <span class="verify-code-icon">
-        <img src="/mail_success.png" alt="" />
+        <img src="/register/mail_success.png" alt="" />
       </span>
       <input
         type="text"
@@ -60,11 +56,12 @@
       ></span>
       {{ emailCodeErrorMsg }}
     </div>
-    <a
-      href="javascript:void(0)"
+    <el-button
       @click="next"
       :class="{ submit: true, disabled: nextDisabled }"
-      >{{ L["下一步"] }}</a
+      :disabled="nextDisabled"
+      :loading="nextActionLoading"
+      >{{ L["下一步"] }}</el-button
     >
     <el-dialog
       :title="L['register']['滑动验证']"
@@ -87,7 +84,7 @@
 import { getCurLanguage } from "@/composables/common.js";
 import { showMessage, startCountdown } from "@/utils/common";
 
-const emits = defineEmits(['success'])
+const emits = defineEmits(["success"]);
 
 const L = getCurLanguage();
 
@@ -108,6 +105,8 @@ const isHMVerifySuccess = ref(false);
 
 const getVerifyCodeLoading = ref(false);
 
+const nextActionLoading = ref(false);
+
 // 倒计时展示
 const countDownNumer = ref(0);
 
@@ -203,31 +202,36 @@ const validateEmailCode = () => {
 
 const next = () => {
   if (!validateEmail() || !validateEmailCode()) return;
+  nextActionLoading.value = true;
   post("v3/member/front/active/check/verification/code", {
     email: email.value,
     type: 1,
     verificationCode: emailCode.value,
-  }).then((res) => {
-    if (res.state == 200) {
-      showMessage({
-        message: L["register"]["注册成功"],
-        type: "success",
-      });
-      //成功提示，并返回到登录页面
-      emits('success')
-    } else {
-      //提示错误
-      showMessage({
-        message: res.msg,
-        type: "warning",
-      });
-    }
-  });
+  })
+    .then((res) => {
+      if (res.state == 200) {
+        showMessage({
+          message: L["register"]["注册成功"],
+          type: "success",
+        });
+        //成功提示，并返回到登录页面
+        emits("success", email.value);
+      } else {
+        //提示错误
+        showMessage({
+          message: res.msg,
+          type: "warning",
+        });
+      }
+    })
+    .finally(() => {
+      nextActionLoading.value = false;
+    });
 };
 
 //清空输入框内容
 const clearInputVal = (type) => {
-   email.value = "";
+  email.value = "";
 };
 </script>
 <style lang="scss">
@@ -364,14 +368,13 @@ const clearInputVal = (type) => {
   }
 
   .submit {
-    display: block;
     margin-top: 35px;
     background: $colorMain;
     color: #fff;
     text-align: center;
     border-radius: 2px;
+    width: 100%;
     height: 45px;
-    line-height: 45px;
     font-size: 18px;
     letter-spacing: 0px;
 
@@ -381,7 +384,6 @@ const clearInputVal = (type) => {
 
     &.disabled {
       background-color: #909399;
-      pointer-events: none;
     }
   }
 }

xinkeaboard-web/components/register/RegisterSuccess.vue

@@ -1,16 +1,108 @@
 <template>
   <div class="register-success">
-    sdsdsd
+    <div class="register-success-content">
+      <div class="register-success-content__icon">
+        <div class="icon-circle">
+          <img src="/register/success.png" />
+        </div>
+      </div>
+      <div class="register-success-content__tip">
+        <div class="tip-title">{{ L["register"]["注册成功"] }}</div>
+        <div class="tip-content">
+          {{ L["register"]["您已注册成功, 5s内跳转到登录页"] }}
+        </div>
+        <div class="line"></div>
+        <div class="login-button">
+          <el-button size="large" @click="goLogin">{{
+            L["register"]["立即登录"]
+          }}</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 
-<script lang="ts" setup></script>
+<script setup>
+import { getCurLanguage } from "@/composables/common.js";
+import { useRouter } from "vue-router";
+
+const L = getCurLanguage();
+const router = useRouter();
+
+const goLogin = () => {
+  router.replace({
+    path: "/login",
+  });
+};
+
+setTimeout(() => {
+  goLogin()
+}, 5000)
+</script>
+
 
 <style lang="scss" scoped>
 .register-success {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  height: 386px;
+  padding: 0 20px;
+
+  &-content {
+    width: 240px;
+    height: 150px;
+    display: flex;
+
+    &__icon {
+      margin-right: 15px;
+      .icon-circle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 100%;
+        background-color: $colorMain;
+
+        img {
+          width: 20px;
+        }
+      }
+    }
+
+    &__tip {
+      display: flex;
+      flex-direction: column;
+
+      .tip-title {
+        font-size: 25px;
+      }
+
+      .tip-content {
+        font-size: 12px;
+        color: #85899e;
+        margin-top: 10px;
+      }
+
+      .line {
+        width: 200px;
+        height: 0px;
+        border: 0.5px solid #dcdfe6;
+        margin: 30px 0;
+      }
+
+      .login-button {
+        // margin-top: 10px;
+
+        .el-button {
+          background-color: $colorMain;
+          color: #fff;
+        }
+      }
+    }
+  }
 }
 </style>

xinkeaboard-web/composables/index.js

@@ -1,8 +1,8 @@
 // 测试环境
-export const apiUrl = 'http://54.46.9.88:8001/';
+// export const apiUrl = 'http://54.46.9.88:8001/';
 
 // 本地后端
-// export const apiUrl = 'http://192.168.0.158:8001/';
+export const apiUrl = 'http://192.168.0.158:8001/';
 
 export const defaultUrl = 'http://54.46.9.88:8001/';
 export const supplierUrl = 'http://54.46.9.88:82/user/login';

xinkeaboard-web/pages/login.vue

@@ -5,7 +5,9 @@
         <nuxt-link tag="a" class="l_logo" :to="'/'">
           <img
             class="img"
-            :src="filtersStore.getSiteLogo ? filtersStore.getSiteLogo : defaultImg "
+            :src="
+              filtersStore.getSiteLogo ? filtersStore.getSiteLogo : defaultImg
+            "
             :onerror="defaultImg"
             alt
           />
@@ -83,9 +85,12 @@
               ></span>
               {{ errorMsg }}
             </div>
-            <a href="javascript:void(0)" @click="login" :class=" isLoading ? 'login_btn isLoading' : 'login_btn'">{{
-              L["登录"]
-            }}</a>
+            <a
+              href="javascript:void(0)"
+              @click="login"
+              :class="isLoading ? 'login_btn isLoading' : 'login_btn'"
+              >{{ L["登录"] }}</a
+            >
           </div>
           <div
             :class="{
@@ -110,15 +115,15 @@
 <script setup>
 import { ElMessage } from "element-plus";
 // import { lang_zn } from "@/assets/language/zh";
-import { getCurLanguage } from '@/composables/common.js';
+import { getCurLanguage } from "@/composables/common.js";
 import { useUserInfo } from "@/store/user.js";
 import { useFiltersStore } from "@/store/filter.js";
 const configInfo = useUserInfo();
 const filtersStore = useFiltersStore();
-const isLoading = ref(false)
+const isLoading = ref(false);
 
 // const L = lang_zn;
-const L = getCurLanguage()
+const L = getCurLanguage();
 const router = useRouter();
 const route = useRoute();
 const { proxy } = getCurrentInstance();
@@ -132,18 +137,18 @@ const defaultBgImg = ref("/login_bg.png");
 const fromurl = ref("");
 const wxEnable = ref("");
 const pwdCalc = ref();
-const ImgBG = ref('')
+const ImgBG = ref("");
 
 useHead({
-  title: 'Login',
+  title: "Login",
   meta: [
     {
       name: "description",
-      content: 'Login',
+      content: "Login",
     },
     {
       name: "keywords",
-      content: 'Login',
+      content: "Login",
     },
   ],
 });
@@ -160,11 +165,13 @@ if (process.client) {
 
 //获取背景图
 const getBg = () => {
-  get('v3/system/front/setting/getSettings?names=main_user_logon_bg').then(res=>{
-    ImgBG.value = res.data[0]
-  })
-}
-getBg()
+  get("v3/system/front/setting/getSettings?names=main_user_logon_bg").then(
+    (res) => {
+      ImgBG.value = res.data[0];
+    }
+  );
+};
+getBg();
 
 const login = () => {
   let param = {};
@@ -172,8 +179,8 @@ const login = () => {
   param.password = password.value;
   param.loginType = loginType.value;
   //防止重复提交
-  if(isLoading.value){
-    return
+  if (isLoading.value) {
+    return;
   }
 
   //账号验证
@@ -194,25 +201,24 @@ const login = () => {
     }
   }
 
-  isLoading.value = true
+  isLoading.value = true;
 
   post("v3/frontLogin/oauth/token", param).then((res) => {
-    isLoading.value = false
+    isLoading.value = false;
     if (res.state == 200) {
       //将用户信息存缓存，并跳转到首页
       filtersStore.setLoginStatus(true);
       filtersStore.setToken(res.data.access_token);
-      filtersStore.setRefreshToken(res.data.refresh_token)
-      filtersStore.setTime(new Date().getTime().toString())//存储refresh_token更新时间
+      filtersStore.setRefreshToken(res.data.refresh_token);
+      filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
       //获取用户信息，并同步信息到pinia
 
-     
       get("v3/member/front/member/getInfo").then((res) => {
         if (res.state == 200) {
-          filtersStore.setMemberInfo(res.data)
+          filtersStore.setMemberInfo(res.data);
           if (window.history.state.back) {
             // if(window.history.state.back == '/register' || window.history.state.back == '/member/login/forget' || window.history.state.back == '/member/login/forget' || window.history.state.back == '/member/login/forget'){
-              window.location.href = '/'
+            window.location.href = "/";
             // }else{
             //   window.location.href = window.history.state.back;
             // }
@@ -283,4 +289,81 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 @import "@/assets/style/register.scss";
+.center {
+  padding: 30px 30px 40px;
+
+  .item {
+    position: relative;
+    margin-top: 15px;
+    border-radius: 2px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .icon {
+      position: absolute;
+      left: 1px;
+      top: 1px;
+      width: 50px;
+      text-align: center;
+      height: 38px;
+      background: #f8f8f8;
+
+      .input {
+        border: 1px solid #e8e8e8;
+        height: 40px;
+        padding: 0 44px 0 60px;
+        width: 326px;
+      }
+    }
+
+    .input {
+      border: 1px solid #e8e8e8;
+      height: 40px;
+      padding: 0 44px 0 60px;
+      width: 326px;
+    }
+  }
+
+  .cancel {
+    position: absolute;
+    right: 0;
+    top: 1px;
+    width: 44px;
+    height: 38px;
+    cursor: pointer;
+
+    :before {
+      position: absolute;
+      top: 9px;
+      left: 14px;
+    }
+  }
+
+  .error {
+    margin-top: 10px;
+    position: relative;
+    color: $colorMain;
+    height: 16px;
+    line-height: 16px;
+  }
+
+  .login_btn {
+    display: block;
+    margin-top: 35px;
+    background: $colorMain;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    height: 45px;
+    line-height: 45px;
+    font-size: 18px;
+    letter-spacing: 0px;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
 </style>

xinkeaboard-web/pages/register.vue

@@ -35,8 +35,8 @@
           <div class="top">
             <div class="item1">{{ title }}</div>
           </div>
-          <RegisterMail v-if="currentStep === 'mail'" @success="currentStep = 'account'" />
-          <RegisterAccount v-if="currentStep === 'account'" @success="currentStep = 'finish'"/>
+          <RegisterMail v-if="currentStep === 'mail'" @success="(val) => { currentStep = 'account'; email = val  }" />
+          <RegisterAccount v-if="currentStep === 'account'" :email="email" @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')">{{
@@ -72,6 +72,7 @@ const defaultImg = ref("/common_top_logo.png");
 const defaultBgImg = ref("/login_bg.png");
 const fromurl = ref("");
 const ImgBG = ref("");
+const email = ref('');
 
 // 当前步骤标识
 const currentStep = ref("mail");