1

PC-20250623MANY\Administrator

2025-08-21 25c1d10f03df05104e323494fefd5af1e94c98f7

 src/views/register.vue

@@ -4,42 +4,59 @@
            <div class="logo-container flex-center">
                <img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
            </div>
            <div class="slogan">
      <!-- <div class="slogan">
                <h1>Purchase, Trading</h1>
                <h2>All here</h2>
            </div>
            </div> -->
        </div>
        <div class="register-right">
            <div class="register-form">
                <h2>{{ $t('hj15') }}</h2>
        <h2>{{ $t("hj15") }}</h2>
                <el-form :model="registerForm" :rules="rules" ref="registerForm">
                    <el-form-item prop="phone">
                        <label>{{ $t('hj27') }}</label>
            <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>
            <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>
            <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>
            <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
              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>
            <span>{{ $t("hj23") }}?</span>
            <router-link to="/login" class="login-link">{{
              $t("Go to login")
            }}</router-link>
                    </div>
                </el-form>
            </div>
@@ -48,16 +65,16 @@
</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('请输入')));
      if (value === "") {
        callback(new Error(this.$t("请输入")));
            } else if (value !== this.registerForm.userPwd) {
                callback(new Error(this.$t('两次输入密码不一致')));
        callback(new Error(this.$t("两次输入密码不一致")));
            } else {
                callback();
            }
@@ -68,21 +85,21 @@
                userPwd: "",
                confirmPwd: "",
                inviteCode: "",
                code: '6666'
        code: "6666",
            },
            rules: {
                phone: [
                    { required: true, message: this.$t('请输入'), trigger: "blur" }
          { required: true, message: this.$t("请输入"), trigger: "blur" },
                ],
                userPwd: [
                    { required: true, message: this.$t('请输入'), trigger: "blur" }
          { required: true, message: this.$t("请输入"), trigger: "blur" },
                ],
                confirmPwd: [
                    { required: true, validator: validateConfirmPwd, trigger: "blur" }
          { required: true, validator: validateConfirmPwd, trigger: "blur" },
                ],
                inviteCode: [
                    { required: true, message: this.$t('请输入'), trigger: "blur" }
                ]
          { required: true, message: this.$t("请输入"), trigger: "blur" },
        ],
            },
            isloading: false,
        };
@@ -98,12 +115,12 @@
                        phone: this.registerForm.phone,
                        userPwd: this.registerForm.userPwd,
                        yzmCode: this.registerForm.code,
                        agentCode: this.registerForm.inviteCode
            agentCode: this.registerForm.inviteCode,
                    };
                    let data = await api.register(params);

                    if (data.status == 0) {
                        this.$message.success(this.$t('注册成功'));
            this.$message.success(this.$t("注册成功"));
                        this.$router.replace({ path: "/login" }); // 跳转到登录页
                    }
                    this.isloading = false; // 隐藏加载状态
@@ -112,17 +129,24 @@
                    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;
  // background-color: #fff;
}

.register-left {
@@ -130,7 +154,7 @@
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f5f5f5;
  background-color: #333;
}

.logo-container {
@@ -153,7 +177,7 @@

    h2 {
        font-size: 36px;
        color: #c8d405;
    color: #287dff;
        font-weight: bold;
    }
}
@@ -192,17 +216,9 @@
    .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 {
@@ -212,7 +228,7 @@
        color: #606266;

        .login-link {
            color: #c8d405;
      color: #287dff;
            margin-left: 5px;
            text-decoration: none;