xinkeaboard/xinkeaboard-web/pages/register.vue

<template>
  <div class="sld_login">
    <div class="sld_login_header">
      <div class="content">
        <nuxt-link tag="a" class="l_logo" :to="'/'">
          <img
            class="img"
            :src="
              filtersStore.getSiteLogo ? filtersStore.getSiteLogo : defaultImg
            "
            :onerror="defaultImg"
            alt
          />
        </nuxt-link>
        <div class="r_register_wrap">
          {{ L["还没注册？"] }}
          <a
            class="go_register_btn"
            href="javascript:void(0)"
            @click="goToPage('/register')"
            >{{ L["去注册"] }}</a
          >
        </div>
      </div>
    </div>
    <div class="sld_login_content">
      <img
        class="bg"
        :src="ImgBG ? ImgBG : configInfo.main_user_register_bg + ''"
        :onerror="defaultBgImg"
        alt
      />
      <div class="login">
        <div class="login_box">
          <div class="top">
            <div class="item1">{{ L["注册账号"] }}</div>
          </div>
          <div class="center">
            <p style="width: 296px">
              {{
                L["我们将发送一封验证邮件到你的邮箱，此邮箱将作为登录用户名"]
              }}
            </p>
            <div class="item account">
              <span
                style="color: #bbb; font-size: 19px; padding-top: 7px"
                class="icon iconfont icon-wode"
              ></span>
              <input
                type="text"
                v-model="memberEmail"
                :placeholder="L['请输入邮箱']"
                class="input"
                autocomplete="off"
              />
              <div
                data-type="userName"
                class="cancel"
                @click="clearInputVal('memberEmail')"
              >
                <span style="color: #bbb" class="iconfont icon-cuowu"></span>
              </div>
            </div>
            <div class="error" v-if="errorMsg">
              <span
                style="color: #e1251b; font-size: 14px"
                class="iconfont icon-jubao"
              ></span>
              {{ errorMsg }}
            </div>
            <!-- 人机验证组件 -->
            <!-- <div class="login-verify">
              <SliderVerify />
            </div> -->
            <a
              href="javascript:void(0)"
              @click="sendEmailLink"
              class="login_btn"
              >{{ L["发送验证邮件"] }}</a
            >
            <div class="agree_wrap">
              <input
                type="checkbox"
                :class="{ checkbox: true, default: true, checked: agreeFlag }"
              />
              <span
                class="agree_selected iconfont icon-finish"
                @click="agree"
              />
              <span class="text">
                {{ L["我同意"]
                }}<nuxt-link
                  target="_blank"
                  class="agreement"
                  :to="`/member/login/agreement?type=1`"
                >
                  {{ L["《用户注册协议》"] }}</nuxt-link
                >
                <nuxt-link
                  target="_blank"
                  class="agreement"
                  :to="`/member/login/agreement?type=2`"
                  >{{ L["《隐私政策》"] }}
                </nuxt-link>
              </span>
            </div>
          </div>
          <div :class="{ bottom: true, flex_row_between_center: true }">
            <a href="javascript:void(0)" @click="goToPage('/login')">{{
              L["已有账号，去登录"]
            }}</a>
            <nuxt-link tag="a" :to="`/member/login/forget`">{{
              L["忘记密码"]
            }}</nuxt-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from "@/composables/common.js";
import { useUserInfo } from "@/store/user.js";
import { useFiltersStore } from "@/store/filter.js";
const filtersStore = useFiltersStore();
const configInfo = useUserInfo();
// const L = lang_zn;
const L = getCurLanguage();
const route = useRoute();
const agreeFlag = ref(false); //同意注册协议标识，默认不同意
const memberEmail = ref(""); //邮箱
const errorMsg = ref(); //错误提示
const router = useRouter();
const { proxy } = getCurrentInstance();
const defaultImg = ref("/common_top_logo.png");
const defaultBgImg = ref("/login_bg.png");
const fromurl = ref("");
const emailCalc = ref();
const ImgBG = ref("");

useHead({
  title: "Register",
  meta: [
    {
      name: "description",
      content: "Register",
    },
    {
      name: "keywords",
      content: "Register",
    },
  ],
});

//获取背景图
const getBg = () => {
  get("v3/system/front/setting/getSettings?names=main_user_register_bg").then(
    (res) => {
      ImgBG.value = res.data[0];
    }
  );
};
getBg();

const sendEmailLink = () => {
  let param = {};
  param.email = memberEmail.value;
  param.source = 1;

  //邮箱的验证
  if (!param.email) {
    errorMsg.value = L["请输入邮箱"];
    return false;
  } else {
    emailCalc.value = checkEmail(param.email);
    if (emailCalc.value !== true) {
      errorMsg.value = emailCalc.value;
      return;
    } else {
      errorMsg.value = "";
    }
  }

  //同意用户注册协议及隐私政策
  if (!agreeFlag.value) {
    errorMsg.value = L["请同意用户注册协议及隐私政策"];
    return false;
  }

  post("v3/member/front/active/link", param).then((res) => {
    if (res.state == 200) {
      // 如果没有收到，请检查垃圾邮件
      // 如果还是没有收到，请重新填写邮箱
      ElMessage.success(L["注册验证邮件已发送到"] + param.email);
      //成功提示，并返回到登录页面
      setTimeout(() => {
        goToPage("/login");
      }, 500);
    } else {
      //提示错误
      errorMsg.value = res.msg;
    }
  });
};

//清空输入框内容
const clearInputVal = (type) => {
  if (type == "memberEmail") {
    memberEmail.value = "";
  }
};

//是否同意用户注册协议
const agree = () => {
  agreeFlag.value = !agreeFlag.value;
};

//通过replace方式跳转页面
const goToPage = (type) => {
  router.replace({
    path: type,
  });
};

watch([memberEmail], () => {
  if (memberEmail.value) {
    errorMsg.value = "";
  }
});

onMounted(() => {
  if (route.query.redirectUrl) {
    fromurl.value =
      window.location.origin + decodeURIComponent(route.query.redirectUrl);
  } else {
    fromurl.value = window.location.origin;
  }

  if (route.query.error) {
    ElMessage.error(decodeURIComponent(route.query.error));
  }
});
</script>
<style lang="scss" scoped>
@import "@/assets/style/register.scss";

.el-popup-parent--hidden {
  overflow: visible;
}
</style>