xinkeaboard/xinkeaboard-web/pages/email/reset/pwd.vue

<template>
  <div class="sld_login">
    <div class="sld_login_header">
      <div class="content">
        <router-link tag="a" class="l_logo" :to="`/`">
          <img
            class="img"
            :src="filtersStore.getSiteLogo"
            :onerror="defaultImg"
            alt
          />
        </router-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"
                :disabled="emailDisabled"
              />
              <div
                data-type="userName"
                class="cancel"
                @click="clearInputVal('memberEmail')"
                :style="{ display: emailDisabled == true ? 'none' : 'block' }"
              >
                <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="item password">
              <span
                style="color: #bbb; font-size: 21px; padding-top: 7px"
                class="icon iconfont icon-mima1"
              ></span>
              <input
                :type="showPwdFlag ? 'text' : 'password'"
                v-model="password"
                :placeholder="L['请输入6～20位英文、数字、符号']"
                class="input"
              />
              <div class="cancel" @click="isShowPwd">
                <span
                  :style="{
                    color: '#bbb',
                    fontSize: showPwdFlag ? '20px' : '16px',
                  }"
                  :class="{
                    iconfont: true,
                    'icon-bukejian11': !showPwdFlag,
                    'icon-kejian': showPwdFlag,
                    show_pwd: showPwdFlag,
                  }"
                ></span>
              </div>
            </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 { 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 memberEmail = ref(""); //用户邮箱
const password = ref(""); //密码
const route = useRoute();
const errorMsg = ref(); //错误提示
const router = useRouter();
const { proxy } = getCurrentInstance();
const showPwdFlag = ref(false); //密码是否明文显示，默认密文
const showCodeImg = ref(""); //图形验证码图片
const imgCodeKey = ref(""); //图形验证码的key
const imgCode = ref(""); //图形验证码
const defaultImg = ref("/common_top_logo.png");
const defaultBgImg = ref("/assets/forget_pwd_bg.png");
const resetEmailVal = ref("");
const resetEmailCode = ref("");
const emailDisabled = ref(false);
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.code = resetEmailCode.value;
  param.loginPwd = password.value;
  param.verifyCode = imgCode.value;
  param.verifyKey = imgCodeKey.value;

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

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

  //密码校验
  if (!param.loginPwd) {
    errorMsg.value = L["请输入密码"];
    return false;
  } else {
    let checkPwdVal = checkPwd(param.loginPwd);
    if (checkPwdVal !== true) {
      errorMsg.value = checkPwdVal;
      return false;
    }
  }

  post("v3/member/front/active/email/reset/pwd", param).then((res) => {
    if (res.state == 200) {
      //成功提示，并返回到登录页面
      ElMessage.success(res.msg);
      setTimeout(() => {
        goToPage("/login");
      }, 500);
    } else {
      //提示错误
      errorMsg.value = res.msg;
    }
  });
};
//清空输入框内容
const clearInputVal = (type) => {
  if (type == "memberEmail") {
    memberEmail.value = "";
  }
};
//密码是否显示
const isShowPwd = () => {
  showPwdFlag.value = !showPwdFlag.value;
};
watch([memberEmail, imgCode, password], () => {
  imgCode.value = imgCode.value.substring(0, 4);
  password.value = password.value.substring(0, 20);
  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");

  resetEmailVal.value = route.query.email;
  resetEmailCode.value = route.query.code;
  // activeEmailId.value = route.query.id;
  if (
    resetEmailVal.value != "" &&
    resetEmailVal.value != null &&
    resetEmailVal.value != undefined
  ) {
    memberEmail.value = resetEmailVal.value;
    emailDisabled.value = true;
  }
});
</script>
<style lang="scss" scoped>
/*@import "../../../style/forgetPassword.scss";*/
@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>