1

PC-20250623MANY\Administrator

2025-09-16 58af838e57447ce1e5d47b038c45f0df0eda23ba

 src/views/register.vue

@@ -1,225 +1,254 @@
<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("hj16") }}</label>
            <el-input v-model="registerForm.phone" placeholder=""></el-input>
          </el-form-item>

          <el-form-item prop="code">
            <label>{{ $t("hj25") }}</label>
            <el-input v-model="registerForm.code" placeholder="">
              <el-button slot="append" :loading="djs > 0" @click="getYzm">
                {{ djs > 0 ? djs : $t('获取验证码') }}
              </el-button>
            </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 {
      djs: 0,
      registerForm: {
        phone: "",
        userPwd: "",
        confirmPwd: "",
        inviteCode: "",
        code: "",
      },
      rules: {
        phone: [
          { required: true, message: this.$t("请输入"), trigger: "blur" },
        ],
        userPwd: [
          { required: true, message: this.$t("请输入"), trigger: "blur" },
        ],
        code: [
          { 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;
        }
    }
      });
    },
    async getYzm() {
      let data = await api.getsendmail({ email: this.registerForm.phone });
      if (data.status == 0) {
        this.$message.success(data.msg);
        this.djs = 60;
        let time = setInterval(() => {
          this.djs--;
          if (this.djs <= 0) {
            clearInterval(time);
          }
        }, 1000);
      } else {
        this.$message.warning(data.msg);
      }
    },
  },
};
</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>
</style>