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_login_btn"
            href="javascript:void(0)"
            @click="goToPage('/login')"
            >{{ L["去登录"] }}</a
          >
        </div>
      </div>
    </div>
    <NavTopBar/>
    <div class="sld_login_content">
      <img
        class="bg"
        :src="ImgBG"
        :onerror="defaultBgImg"
        alt
      />
      <div class="login">
        <div class="login_box">
          <div class="top" v-if="currentStep !== 'finish'">
            <div class="item1">{{ title }}</div>
          </div>
          <RegisterPhone v-if="currentStep === 'first' && appType === 'distributor'" @success="(val) => { currentStep = 'second'; mobile = val  }" />
          <RegisterMail v-if="currentStep === 'first' && appType === 'user'" @success="(val) => { currentStep = 'second'; email = val  }" />
          <RegisterAccount v-if="currentStep === 'second'" :email="email" :mobile="mobile" @success="currentStep = 'finish'"/>
          <RegisterSuccess v-if="currentStep === 'finish'"/>
          <div :class="{ bottom: true, flex_row_between_center: true, 'row-reverse': currentStep !== 'emai' }">
            <a href="javascript:void(0)" @click="goToPage('/login')">{{
              L["已有账号，去登录"]
            }}</a>
            <nuxt-link
              v-if="currentStep === 'mail'"
              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, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getCurLanguage } from "@/composables/common.js";
import { useUserInfo } from "@/store/user.js";
import { useFiltersStore } from "@/store/filter.js";
import RegisterPhone from "~/components/register/RegisterPhone.vue";

const filtersStore = useFiltersStore();
const configInfo = useUserInfo();
const L = getCurLanguage();
const route = useRoute();
const router = useRouter();
const defaultImg = ref("/common_top_logo.png");
const defaultBgImg = ref("/login_bg.png");
const fromurl = ref("");
const ImgBG = ref("");
const email = ref('');
const mobile = ref('')

const config = useRuntimeConfig()
const appType = config.public.appType;

// 当前步骤标识
const currentStep = ref('first');

const title =
  currentStep.value === "first"
    ? L["注册账号"]
    : currentStep.value === "second"
    ? L["下一步"]
    : "";

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();

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

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>