From 25c1d10f03df05104e323494fefd5af1e94c98f7 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Thu, 21 Aug 2025 17:12:55 +0800
Subject: [PATCH] 1
---
src/views/register.vue | 390 +++++++++++++++++++++++++++++--------------------------
1 files changed, 203 insertions(+), 187 deletions(-)
diff --git a/src/views/register.vue b/src/views/register.vue
index b8df264..c6e2f01 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -1,225 +1,241 @@
<template>
- <div class="register-container page-w page-content">
- <div class="register-left">
- <div class="logo-container flex-center">
- <img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
- </div>
- <div class="slogan">
+ <div class="register-container page-w page-content">
+ <div class="register-left">
+ <div class="logo-container flex-center">
+ <img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
+ </div>
+ <!-- <div class="slogan">
<h1>Purchase, Trading</h1>
<h2>All here</h2>
- </div>
- </div>
- <div class="register-right">
- <div class="register-form">
- <h2>{{ $t('hj15') }}</h2>
- <el-form :model="registerForm" :rules="rules" ref="registerForm">
- <el-form-item prop="phone">
- <label>{{ $t('hj27') }}</label>
- <el-input v-model="registerForm.phone" placeholder=""></el-input>
- </el-form-item>
- <el-form-item prop="userPwd">
- <label>{{ $t('Password') }}</label>
- <el-input v-model="registerForm.userPwd" type="password" placeholder=""
- show-password></el-input>
- </el-form-item>
- <el-form-item prop="confirmPwd">
- <label>{{ $t('Confirm Password') }}</label>
- <el-input v-model="registerForm.confirmPwd" type="password" placeholder=""
- show-password></el-input>
- </el-form-item>
- <el-form-item prop="inviteCode">
- <label>{{ $t('hj21') }}</label>
- <el-input v-model="registerForm.inviteCode" placeholder=""></el-input>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" class="register-button" @click="submitForm('registerForm')"
- :loading="isloading">
- {{ $t('hj15') }}
- </el-button>
- </el-form-item>
- <div class="register-options">
- <span>{{ $t('hj23') }}?</span>
- <router-link to="/login" class="login-link">{{ $t('Go to login') }}</router-link>
- </div>
- </el-form>
- </div>
- </div>
+ </div> -->
</div>
+ <div class="register-right">
+ <div class="register-form">
+ <h2>{{ $t("hj15") }}</h2>
+ <el-form :model="registerForm" :rules="rules" ref="registerForm">
+ <el-form-item prop="phone">
+ <label>{{ $t("hj27") }}</label>
+ <el-input v-model="registerForm.phone" placeholder=""></el-input>
+ </el-form-item>
+ <el-form-item prop="userPwd">
+ <label>{{ $t("Password") }}</label>
+ <el-input
+ v-model="registerForm.userPwd"
+ type="password"
+ placeholder=""
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item prop="confirmPwd">
+ <label>{{ $t("Confirm Password") }}</label>
+ <el-input
+ v-model="registerForm.confirmPwd"
+ type="password"
+ placeholder=""
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item prop="inviteCode">
+ <label>{{ $t("hj21") }}</label>
+ <el-input
+ v-model="registerForm.inviteCode"
+ placeholder=""
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button
+ type="primary"
+ class="register-button"
+ @click="submitForm('registerForm')"
+ :loading="isloading"
+ >
+ {{ $t("hj15") }}
+ </el-button>
+ </el-form-item>
+ <div class="register-options">
+ <span>{{ $t("hj23") }}?</span>
+ <router-link to="/login" class="login-link">{{
+ $t("Go to login")
+ }}</router-link>
+ </div>
+ </el-form>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import * as api from '@/axios/api.js'
+import * as api from "@/axios/api.js";
export default {
- name: "RegisterView",
- data() {
- // 确认密码验证
- const validateConfirmPwd = (rule, value, callback) => {
- if (value === '') {
- callback(new Error(this.$t('请输入')));
- } else if (value !== this.registerForm.userPwd) {
- callback(new Error(this.$t('两次输入密码不一致')));
- } else {
- callback();
- }
- };
- return {
- registerForm: {
- phone: "",
- userPwd: "",
- confirmPwd: "",
- inviteCode: "",
- code: '6666'
- },
- rules: {
- phone: [
- { required: true, message: this.$t('请输入'), trigger: "blur" }
- ],
- userPwd: [
- { required: true, message: this.$t('请输入'), trigger: "blur" }
- ],
- confirmPwd: [
- { required: true, validator: validateConfirmPwd, trigger: "blur" }
- ],
- inviteCode: [
- { required: true, message: this.$t('请输入'), trigger: "blur" }
- ]
- },
- isloading: false,
- };
- },
- methods: {
- // 提交表单 注册
- submitForm(formName) {
- this.$refs[formName].validate(async (valid) => {
- if (valid) {
- // 注册逻辑
- this.isloading = true; // 显示加载状态
- const params = {
- phone: this.registerForm.phone,
- userPwd: this.registerForm.userPwd,
- yzmCode: this.registerForm.code,
- agentCode: this.registerForm.inviteCode
- };
- let data = await api.register(params);
+ name: "RegisterView",
+ data() {
+ // 确认密码验证
+ const validateConfirmPwd = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error(this.$t("请输入")));
+ } else if (value !== this.registerForm.userPwd) {
+ callback(new Error(this.$t("两次输入密码不一致")));
+ } else {
+ callback();
+ }
+ };
+ return {
+ registerForm: {
+ phone: "",
+ userPwd: "",
+ confirmPwd: "",
+ inviteCode: "",
+ code: "6666",
+ },
+ rules: {
+ phone: [
+ { required: true, message: this.$t("请输入"), trigger: "blur" },
+ ],
+ userPwd: [
+ { required: true, message: this.$t("请输入"), trigger: "blur" },
+ ],
+ confirmPwd: [
+ { required: true, validator: validateConfirmPwd, trigger: "blur" },
+ ],
+ inviteCode: [
+ { required: true, message: this.$t("请输入"), trigger: "blur" },
+ ],
+ },
+ isloading: false,
+ };
+ },
+ methods: {
+ // 提交表单 注册
+ submitForm(formName) {
+ this.$refs[formName].validate(async (valid) => {
+ if (valid) {
+ // 注册逻辑
+ this.isloading = true; // 显示加载状态
+ const params = {
+ phone: this.registerForm.phone,
+ userPwd: this.registerForm.userPwd,
+ yzmCode: this.registerForm.code,
+ agentCode: this.registerForm.inviteCode,
+ };
+ let data = await api.register(params);
- if (data.status == 0) {
- this.$message.success(this.$t('注册成功'));
- this.$router.replace({ path: "/login" }); // 跳转到登录页
- }
- this.isloading = false; // 隐藏加载状态
- } else {
- console.log("error submit!!");
- return false;
- }
- });
+ if (data.status == 0) {
+ this.$message.success(this.$t("注册成功"));
+ this.$router.replace({ path: "/login" }); // 跳转到登录页
+ }
+ this.isloading = false; // 隐藏加载状态
+ } else {
+ console.log("error submit!!");
+ return false;
}
- }
+ });
+ },
+ },
};
</script>
<style lang="scss" scoped>
+::v-deep .el-input__inner {
+ background: none;
+ color: #fff;
+ border: none;
+ border-radius: 0;
+ border-bottom: #ccc solid 1px;
+}
.register-container {
- display: flex;
- height: 100vh;
- width: 100%;
- background-color: #fff;
+ display: flex;
+ height: 100vh;
+ width: 100%;
+ // background-color: #fff;
}
.register-left {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- background-color: #f5f5f5;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ background-color: #333;
}
.logo-container {
- margin-bottom: 40px;
+ margin-bottom: 40px;
}
.logo {
- width: 200px;
+ width: 200px;
}
.slogan {
- margin: 0 auto;
+ margin: 0 auto;
- h1 {
- font-size: 36px;
- color: #333;
- margin-bottom: 10px;
- font-weight: bold;
- }
+ h1 {
+ font-size: 36px;
+ color: #333;
+ margin-bottom: 10px;
+ font-weight: bold;
+ }
- h2 {
- font-size: 36px;
- color: #c8d405;
- font-weight: bold;
- }
+ h2 {
+ font-size: 36px;
+ color: #287dff;
+ font-weight: bold;
+ }
}
.register-right {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
.register-form {
- width: 70%;
- max-width: 400px;
+ width: 70%;
+ max-width: 400px;
- h2 {
- font-size: 24px;
- margin-bottom: 30px;
- font-weight: normal;
+ h2 {
+ font-size: 24px;
+ margin-bottom: 30px;
+ font-weight: normal;
+ }
+
+ label {
+ display: block;
+ margin-bottom: 8px;
+ color: #606266;
+ }
+
+ .el-form-item {
+ margin-bottom: 25px;
+ }
+
+ .el-input {
+ width: 100%;
+ }
+
+ .register-button {
+ width: 100%;
+ height: 50px;
+ font-size: 16px;
+ border-radius: 25px;
+ margin-top: 10px;
+ }
+
+ .register-options {
+ text-align: center;
+ margin-top: 15px;
+ font-size: 14px;
+ color: #606266;
+
+ .login-link {
+ color: #287dff;
+ margin-left: 5px;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
-
- label {
- display: block;
- margin-bottom: 8px;
- color: #606266;
- }
-
- .el-form-item {
- margin-bottom: 25px;
- }
-
- .el-input {
- width: 100%;
- }
-
- .register-button {
- width: 100%;
- height: 50px;
- background-color: #c8d405;
- border-color: #c8d405;
- font-size: 16px;
- border-radius: 25px;
- margin-top: 10px;
-
- &:hover,
- &:focus {
- background-color: #b8c205;
- border-color: #b8c205;
- }
- }
-
- .register-options {
- text-align: center;
- margin-top: 15px;
- font-size: 14px;
- color: #606266;
-
- .login-link {
- color: #c8d405;
- margin-left: 5px;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3