xinkeaboard/xinkeaboard-web/pages/member/login/forget.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"
            :onerror="defaultImg"
            alt
          />
        </nuxt-link>
        <div class="r_register_wrap">
          {{ L["想起密码？"] }}
          <a
            href="javascript:void(0)"
            class="go_login_btn"
            @click="goToPage('/login')"
          >
            {{ L["去登录"] }}
          </a>
        </div>
      </div>
    </div>
    <div class="sld_login_content">
      <img
        class="bg"
        :src="ImgBG ? ImgBG : configInfo.main_user_forget_password_bg + ''"
        :onerror="defaultBgImg"
        alt
      />
      <div class="login">
        <div class="login_box">
          <div class="top">
            <div class="item1">{{ L["找回密码"] }}</div>
          </div>
          <!-- 找回密码 -->
          <RetrievePwdByPhone v-if="contactType === 'mobile' && currentStep === 'reset'" @success="() => currentStep = 'finish'" />
          <RetrievePassword v-if="contactType === 'email' && currentStep === 'reset'" @success="() => currentStep = 'finish'"/>
          <RetrieveSuccess v-if="currentStep === 'finish'"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserInfo } from "@/store/user.js";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from "@/composables/common.js";
import { useFiltersStore } from "@/store/filter.js";
import { getContactType } from "@/utils/common";
const contactType = getContactType();

const filtersStore = useFiltersStore();
const L = getCurLanguage();
const configInfo = useUserInfo();
const router = useRouter();
const defaultImg = ref("/common_top_logo.png");
const defaultBgImg = ref("/forget_pwd_bg.png");
const ImgBG = ref("");
const currentStep = ref('reset');

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


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

//通过replace方式跳转页面
const goToPage = (type) => {
  router.replace({
    path: type,
  });
};
onMounted(() => {
  document.body.classList.remove("el-popup-parent--hidden");
});
</script>

<style lang="scss">
.retrieve-verify-model {
  .el-dialog__title {
    font-weight: 900 !important;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/style/register.scss";

.el-popup-parent--hidden {
  overflow: visible;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>