GCLS_Page_ROOT/src/components/login/registration.vue

<template>
  <div class="registration2">
    <div class="title">
      <!-- 注册账号 -->
      <p class="p1">{{ $t("Key23") }}</p>
      <!-- 用户信息 -->
      <p class="p2">{{ $t("Key24") }}</p>
    </div>
    <div class="form" v-loading="loading">
      <!-- 
        :show-message="false"
         -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :class="['demo-ruleForm', language_type == 'AR' ? 'ruleForm' : '']"
        :hide-required-asterisk="true"
        :show-message="false"
      >
        <el-form-item prop="Username">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin1.png" alt="" />
            <span> <!-- 用户名  -->{{ $t("Key25") }} </span>
          </span>
          <el-input
            :placeholder="$t('Key26')"
            v-model="ruleForm.Username"
            @input="trimInput('Username')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="Realname">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin2.png" alt="" />
            <span> <!-- 真实姓名  -->{{ $t("Key27") }} </span>
          </span>
          <el-input
            :placeholder="$t('Key28')"
            v-model="ruleForm.Realname"
            @input="trimInput('Realname')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="FromWhereCode" class="Noafter">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin3.png" alt="" />
            <span> <!-- 地区  -->{{ $t("Key29") }} </span>
          </span>
          <el-select
            v-model="ruleForm.FromWhereCode"
            :placeholder="$t('Key30')"
          >
            <el-option
              v-for="(item, i) in TimeZoneList"
              :key="i + item"
              :value="item.code"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="org_id">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin4.png" alt="" />
            <span> {{ $t("Key31") }} </span>
          </span>
          <el-select
            v-model="ruleForm.org_id"
            :placeholder="$t('Key32')"
            v-loadmore="SelectScroll"
            v-loading="SelectLoading"
          >
            <el-option
              v-for="item in institutionList.org_list"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <hr />
        <div class="title2">
          <!-- 注册信息 -->
          {{ $t("Key84") }}
        </div>
        <el-form-item prop="user_type">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin5.png" alt="" />
            <span>
              <!-- 身份 -->
              {{ $t("Key33") }}
            </span>
          </span>
          <el-radio-group style="width: 334px" v-model="ruleForm.user_type">
            <el-radio label="TEACHER">
              <span style="color: black"> 老师 </span>
            </el-radio>
            <el-radio label="STUDENT">
              <span style="color: black"> 学生 </span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="email">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin6.png" alt="" />
            <span> {{ $t("Key34") }} </span>
          </span>
          <el-input
            @change="ChangeEmail"
            v-model="ruleForm.email"
            :placeholder="$t('Key34')"
            @input="trimInput('email')"
          />
        </el-form-item>
        <el-form-item prop="verification_code">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin7.png" alt="" />
            <span> {{ $t("Key36") }} </span>
          </span>
          <el-input
            style="width: 202px"
            v-model="ruleForm.verification_code"
            :placeholder="$t('Key36')"
            @input="verification_codeChange"
            maxlength="6"
          />
          <button v-if="VerificationCodeShow" class="waitTime" disabled>
            {{ time + "s" }}
          </button>
          <button
            type="button"
            v-else
            @click.prevent="getVerificationCode"
            :class="[
              'getVerification',
              language_type == 'AR' ? 'marginRight' : '',
            ]"
          >
            获取
          </button>
        </el-form-item>
        <el-form-item prop="password">
          <span slot="label" class="lable">
            <img src="../../assets/login/singin9.png" alt="" />
            <span>
              <!-- 密码  -->
              {{ $t("Key14") }}
            </span>
          </span>
          <el-input
            v-model="ruleForm.password"
            :placeholder="$t('Key14')"
            :type="parsswordType"
            @change="changeParssword"
            @input="trimInput('password')"
          />
          <img
            v-show="parsswordType == 'password'"
            @click="lookParssowrd(1)"
            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
            src="../../assets/login/password1.png"
            alt=""
          />
          <img
            v-show="parsswordType == 'text'"
            @click="lookParssowrd(1)"
            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
            src="../../assets/login/password2.png"
            alt=""
          />
          <p :class="passwordError ? 'textRed' : 'psswordHint'">
            <!-- 请输入8-12位大写字母、小写字母、数字和组合。 -->
            {{ $t("Key17") }}
          </p>
        </el-form-item>
        <el-form-item prop="Twopassword">
          <span slot="label" class="lable" style="width: 200px">
            <img src="../../assets/login/singin9.png" alt="" />
            <span>
              <!-- 重复  -->
              {{ $t("Key15") }}
            </span>
          </span>
          <el-input
            v-model="ruleForm.Twopassword"
            :placeholder="$t('Key16')"
            :type="twoPasswordType"
            @change="Changetowpassword"
            @input="trimInput('Twopassword')"
          />
          <img
            v-show="twoPasswordType == 'password'"
            @click="lookParssowrd(2)"
            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
            src="../../assets/login/password1.png"
            alt=""
          />
          <img
            v-show="twoPasswordType == 'text'"
            @click="lookParssowrd(2)"
            :class="['rightimg', language_type == 'AR' ? 'posLeft' : '']"
            src="../../assets/login/password2.png"
            alt=""
          />
          <p :class="passwordErrorTwo ? 'textRed' : 'psswordHint'">
            <!-- 请再次输入密码。这两个项必须相同。 -->
            {{ $t("Key18") }}
          </p>
        </el-form-item>
        <hr />
        <div class="agreementAndRemeberMeAndForgetparssword">
          <!-- 同意协议 -->
          <div class="agreement">
            <el-checkbox v-model="ageeemnt">
              <span style="color: black">
                <!-- 我已阅读并同意  -->
                {{ $t("Key21") }}
              </span>
              <span>
                <!-- 用户协议 -->
                {{ $t("Key22") }}
              </span>
            </el-checkbox>
          </div>
          <!-- 我有账户 -->
          <!-- <div class="remeberMeAndForgetparssword">
            <p>I have an account. Log in.</p>
          </div> -->
        </div>
        <div class="sumit">
          <button v-if="isLogin">
            <img src="../../assets/login/Ellipse87.png" alt="" />
          </button>
          <button v-else type="button" @click.prevent="submitForm('ruleForm')">
            <!-- 注册 -->{{ $t("Key10") }}
          </button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { getLogin } from "@/api/api";
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["changeLoginReg"],
  data() {
    //这里存放数据
    return {
      ruleForm: {
        Username: "",
        Realname: "",
        FromWhereCode: "",
        org_id: "",
        user_type: "STUDENT",
        email: "",
        verification_code: "",
        password: "",
        Twopassword: "",
      },
      register: "邮箱",
      ageeemnt: false,
      rules: {
        Username: [
          { required: true, message: "Please enter", trigger: "blur" },
        ],
        Realname: [
          {
            required: true,
            message: "Please enter your real name",
            trigger: "blur",
          },
        ],
        // FromWhere: [
        //   {
        //     required: true,
        //     message: "Select country and region",
        //     trigger: "blur",
        //   },
        // ],
        org_id: [
          {
            required: true,
            message: "Selection mechanism",
            trigger: "blur",
          },
        ],
        user_type: [
          {
            required: true,
          },
        ],
        email: [
          {
            required: true,
          },
        ],
        verification_code: [
          {
            required: true,
          },
        ],
        password: [
          {
            required: true,
          },
        ],
        Twopassword: [
          {
            required: true,
          },
        ],
      },
      parsswordType: "password",
      twoPasswordType: "password",
      VerificationCodeShow: false,
      time: 60,
      EmailError: null, //邮箱是否正确
      loading: false,
      SelectLoading: false,
      institutionList: [], //机构列表
      inPage: 1,
      inPageSize: 10,
      isLogin: false,
      passwordError: false,
      passwordErrorTwo: false,
      TimeZoneList: null, //时区列表
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapGetters(["language_type"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 去除空格
    trimInput(key) {
      console.log(key);
      this.ruleForm[key] = this.ruleForm[key].trim();
    },
    //   提交
    submitForm(formName) {
      let flag = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          flag = true;
          return false;
        }
      });
      //   是否勾选了同意协议
      if (!this.ageeemnt) {
        this.$message.warning("阅读并同意用户协议");
        return;
      }
      if (this.ruleForm.Twopassword != this.ruleForm.password) {
        this.$message.warning("请重新输入密码。两个条目必须相同");
        return;
      }
      if (this.passwordError) {
        this.$message.warning(this.$t("Key17"));
        return;
      }
      if (flag) {
        return;
      }
      this.isLogin = true;
      let MethodName = "user_manager-RegisterUser";
      let data = {
        user_type: this.ruleForm.user_type,
        user_name: this.ruleForm.Username,
        real_name: this.ruleForm.Realname,
        org_id: this.ruleForm.org_id,
        country_code: this.ruleForm.FromWhereCode, //所属地区编码
        password: this.ruleForm.password,
        verification_type: this.register == "邮箱" ? "EMAIL" : "SMS",
        phone_or_email: this.ruleForm.email,
        verification_code: this.ruleForm.verification_code,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.$message.success("success");
          this.isLogin = false;
          this.$router.push({
            path: "/",
            query: {
              type: "login",
            },
          });
        })
        .catch((err) => {
          this.isLogin = false;
        });
    },
    // 验证密码
    changeParssword() {
      if (this.ruleForm.password) {
        let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
        let result = reg.test(this.ruleForm.password);
        if (result) {
          this.passwordError = false;
        } else {
          this.passwordError = true;
        }
      }
    },
    // 验证第二次密码是否一样
    Changetowpassword() {
      if (this.ruleForm.Twopassword) {
        if (this.ruleForm.Twopassword != this.ruleForm.password) {
          this.passwordErrorTwo = true;
          return;
        } else {
          this.passwordErrorTwo = false;
        }
      }
    },
    // 验证邮箱
    ChangeEmail() {
      let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; //验证邮箱的正则
      this.EmailError = reg.test(this.ruleForm.email);
      if (!this.EmailError) {
        this.EmailError = false;
        this.$message.error("邮箱格式不正确");
      }
    },
    // 获取验证码
    getVerificationCode() {
      if (!this.EmailError) {
        this.EmailError = false;
        this.$message.error("邮箱格式不正确");
        return;
      }
      let this_ = this;
      let timer;
      if (this_.ruleForm.email) {
        this_.VerificationCodeShow = true;

        let MethodName = "user_manager-SendVerificationCode";
        let data = {
          verification_type: this.register == "邮箱" ? "EMAIL" : "SMS",
          phone_or_email: this_.ruleForm.email,
        };
        getLogin(MethodName, data).then((res) => {
          console.log(res);
          timer = setInterval(() => {
            this_.time--;
            if (this_.time == 0) {
              this_.VerificationCodeShow = false;
              clearInterval(timer);
              timer = null;
              this_.time = 60;
            }
          }, 1000);
        });
      } else {
        this_.$message.warning("请先输入邮箱或手机号码");
      }
    },
    // 验证码的验证只能输入数字
    verification_codeChange() {
      this.ruleForm.verification_code = this.ruleForm.verification_code.replace(
        /[^\d]/g,
        ""
      );
    },
    // 查看密码
    lookParssowrd(number) {
      if (number == 1) {
        if (this.parsswordType == "text") {
          this.parsswordType = "password";
        } else {
          this.parsswordType = "text";
        }
      } else {
        if (this.twoPasswordType == "text") {
          this.twoPasswordType = "password";
        } else {
          this.twoPasswordType = "text";
        }
      }
    },
    // 获取机构列表
    getinstitutionList() {
      this.loading = true;
      let MethodName = "org_manager-PageQueryOrgIndexList_OpenQuery";
      let data = {
        name: this.inName,
        page_capacity: this.inPageSize,
        cur_page: this.inPage,
      };
      getLogin(MethodName, data).then((res) => {
        this.loading = false;
        this.institutionList = res;
      });
    },
    // 滚动加载
    SelectScroll() {
      if (
        this.institutionList.org_list.length == this.institutionList.total_count
      ) {
        // this.$message.warning("No more data");
        return;
      }
      this.SelectLoading = true;
      this.inPage++;
      let MethodName = "org_manager-PageQueryOrgIndexList_OpenQuery";
      let data = {
        name: this.inName,
        page_capacity: this.inPageSize,
        cur_page: this.inPage,
      };
      getLogin(MethodName, data).then((res) => {
        res.org_list.forEach((item) => {
          this.institutionList.org_list.push(item);
        });
        this.SelectLoading = false;
      });
    },
    // 获取时区列表
    getTimeZone() {
      let MethodName = "dict_manager-GetCountryList";
      getLogin(MethodName).then((res) => {
        this.TimeZoneList = res.country_list;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getinstitutionList();
    this.getTimeZone();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.registration2 {
  width: 1200px;
  background: white;
  margin: 40px 60px 40px 60px;
  padding: 40px 40px 40px 40px;
  border-radius: 8px;
  .title {
    p {
      margin: 0;
      padding: 0;
    }
    .p1 {
      font-size: 24px;
      color: #ff9900;
    }
    .p2 {
      margin-top: 40px;
      font-size: 20px;
      color: #000000;
    }
  }
  .form {
    margin-top: 50px;
    .title2 {
      font-weight: 600;
      font-size: 20px;
      color: #000000;
      margin: 20px 0;
    }
    hr {
      margin: 0;
      width: 474px;
      height: 1px;
      background: #d9d9d9;
    }
    .el-input,
    .el-select {
      width: 334px;
    }

    .el-form-item {
      width: 1140px;
      display: flex;
      .lable {
        display: inline-block;
        width: 120px !important;
        text-align: left;
        img {
          width: 24px;
          vertical-align: middle;
        }
        span {
          margin: 0 10px;
        }
      }
    }
    .el-form-item::after {
      content: "*";
      color: red;
      position: relative;
      left: 5px;
      top: 10px;
    }
    .ruleForm .el-form-item::after {
      left: -8px;
    }
    .getVerification {
      width: 116px;
      height: 40px;
      margin-left: 16px;
      border-radius: 4px;
      cursor: pointer;
      box-sizing: border-box;
      background: #ff9900;
      border: 1px solid #ff9900;
      color: white;
      &.marginRight {
        margin-right: 16px;
        margin-left: 0px;
      }
    }
    .waitTime {
      width: 116px;
      height: 40px;
      margin-left: 16px;
      border-radius: 4px;
      cursor: pointer;
      box-sizing: border-box;
      background: #f0f0f0;
      color: black;
      border: none;
    }
    .rightimg {
      width: 24px;
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
      &.posLeft {
        right: auto;
        left: 10px;
      }
    }
    .psswordHint {
      width: 334px;
      margin: 0;
      padding: 0;
      font-size: 14px;
      color: #000000;
      opacity: 0.3;
      line-height: 20px;
      margin-top: 5px;
    }
    .textRed {
      width: 334px;
      margin: 0;
      padding: 0;
      font-size: 14px;
      color: red;
      opacity: 1;
      line-height: 20px;
      margin-top: 5px;
    }
    .sumit {
      width: 474px;
      text-align: right;
      button {
        width: 337px;
        height: 48px;
        background: #ff9900;
        border-radius: 4px;
        cursor: pointer;
        border: none;
        outline: none;
        color: white;
        img {
          vertical-align: middle;
          animation: rotated 1s linear infinite;
        }
      }
    }
    .agreementAndRemeberMeAndForgetparssword {
      width: 474px;
      display: flex;
      justify-content: flex-end;
      > div {
        margin: 20px 0;
        width: 334px;
        position: relative;
      }
      .agreement {
        span {
          color: #ff9900;
        }
      }
    }
    .remeberMeAndForgetparssword {
      p {
        margin: 0;
        color: #ff9900;
        cursor: pointer;
        text-align: right;
      }
    }
    .Noafter::after {
      content: "";
    }
  }
  @keyframes rotated {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}
</style>

<style lang="scss">
.registration2 {
  .el-form-item__label {
    padding: 0;
  }
  .agreement {
    .el-checkbox__label {
      padding: 0 10px;
    }
  }
}
</style>