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_register_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>
          <div class="center">
            <div class="item account">
              <span
                style="color: #bbb; font-size: 21px; padding-top: 7px"
                class="icon iconfont icon-wode"
              ></span>
              <input
                type="text"
                v-model="memberEmail"
                :placeholder="L['请输入邮箱']"
                class="input"
              />
              <div
                data-type="userName"
                class="cancel"
                @click="clearInputVal('memberEmail')"
              >
                <span style="color: #bbb" class="iconfont icon-cuowu"></span>
              </div>
            </div>
            <div class="item password">
              <span
                style="color: #bbb; font-size: 18px; padding-top: 8px"
                class="icon iconfont icon-yanzhengma2"
              ></span>
              <input
                type="text"
                v-model="imgCode"
                :placeholder="L['请输入图形验证码']"
                class="input"
              />
              <img :src="showCodeImg" class="img_code" @click="getImgCode" />
            </div>
            <div class="error">
              <span
                v-if="errorMsg"
                style="color: #e1251b; font-size: 14px"
                class="iconfont icon-jubao"
              ></span>
              {{ errorMsg }}
            </div>
            <a href="javascript:void(0)" @click="forgetPwd" class="login_btn">{{
              L["找回密码"]
            }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage,ElMessageBox } from "element-plus";
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";
const filtersStore = useFiltersStore();
// const L = lang_zn;
const L = getCurLanguage();
const configInfo = useUserInfo();
const memberEmail = ref(""); //用户邮箱
const errorMsg = ref(); //错误提示
const router = useRouter();
const { proxy } = getCurrentInstance();
const showCodeImg = ref(""); //图形验证码图片
const imgCodeKey = ref(""); //图形验证码的key
const imgCode = ref(""); //图形验证码
const defaultImg = ref("/common_top_logo.png");
const defaultBgImg = ref("/forget_pwd_bg.png");
const ImgBG = ref('')

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

const forgetPwd = () => {
  let param = {};
  param.email = memberEmail.value;
  param.verifyCode = imgCode.value;
  param.verifyKey = imgCodeKey.value;

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

  //验证码校验
  let checkImgCode2 = checkImgCode(param.verifyCode);
  if (checkImgCode2 !== true) {
    errorMsg.value = checkImgCode2;
    return false;
  }

  post("v3/member/front/active/forget/pwd", param).then((res) => {
    if (res.state == 200) {
      //成功提示，并返回到登录页面
      // ElMessage.success(res.msg + param.email);
      // let msg = "<p style='color: #000;'><b>" + L["我们已经发邮件到"] + "</b> " + "<font color='#e13841'>"+param.email+"</font></p>" +
      let msg = "<p style='color: #000;'><b>" + L["我们已经发邮件到"] + " " +param.email+"</b></p>" +
              "<p>" + L["请按照邮件中的说明重新设置密码。"] + "</p>" +
              "<p style='margin-top: 10px;color: #00985e;'>" + L["邮件可能需要几分钟才能到达。如果您没有收到，请检查您的垃圾邮件文件夹或请求另一封邮件。"] + "</p>";
      ElMessageBox.alert(msg, L["温馨提示"], {dangerouslyUseHTMLString: true, confirmButtonText: L["好的"],});
      setTimeout(() => {
        router.back();
      }, 500);
    } else {
      //提示错误
      errorMsg.value = res.msg;
    }
  });
};
//清空输入框内容
const clearInputVal = (type) => {
  if (type == "memberEmail") {
    memberEmail.value = "";
  }
};

watch([memberEmail, imgCode], () => {
  imgCode.value = imgCode.value.substring(0, 4);
  if (imgCode.value || memberEmail.value) {
    errorMsg.value = "";
  }
});

//获取图形验证码
const getImgCode = () => {
  get("v3/captcha/common/getCaptcha", {}).then((res) => {
    if (res.state == 200) {
      showCodeImg.value = "data:image/png;base64," + res.data.captcha;
      imgCodeKey.value = res.data.key;
    }
  });
};
//通过replace方式跳转页面
const goToPage = (type) => {
  router.replace({
    path: type,
  });
};
onMounted(() => {
  getImgCode(); //获取图形验证码

  document.body.classList.remove("el-popup-parent--hidden");
});
</script>
<style lang="scss" scoped>
@use "@/assets/style/register.scss" as *;

.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>