xinkeaboard/xinkeaboard-web/pages/email/active.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_register_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 password">
              <span
                style="color: #bbb; font-size: 21px; padding-top: 7px"
                class="icon iconfont icon-wode"
              ></span>
              <input
                type="text"
                v-model="name"
                :placeholder="L['请输入用户名']"
                class="input"
              />
              <div
                data-type="userName"
                class="cancel"
                @click="clearInputVal('name')"
              >
                <span style="color: #bbb" class="iconfont icon-cuowu"></span>
              </div>
            </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="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="activeEmail"
              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["我同意"]
                }}<router-link
                  target="_blank"
                  class="agreement"
                  :to="`/agreement?type=1`"
                >
                  {{ L["《用户注册协议》"] }}</router-link
                >
                <router-link
                  target="_blank"
                  class="agreement"
                  :to="`/agreement?type=2`"
                  >{{ L["《隐私政策》"] }}
                </router-link>
              </span>
            </div>
          </div>
          <div
            :class="{
              bottom: true,
              flex_row_between_center: wxEnable == 1,
              flex_row_end_center: wxEnable != 1,
            }"
          >
            <!--                        <img v-if="wxEnable==1" src="@/assets/wechat_login.png" alt="" @click="wetChatLogin">-->
            <a href="javascript:void(0)" @click="goToPage('/login')">{{
              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 {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 route = useRoute();
const agreeFlag = ref(false); //同意注册协议标识，默认不同意
const name = ref(""); //用户名
const errorMsg = ref(); //错误提示
const password = ref(""); //密码
const showPwdFlag = ref(false); //密码是否明文显示，默认密文
const imgCode = ref(""); //图形验证码
const router = useRouter();
const { proxy } = getCurrentInstance();
const showCodeImg = ref(""); //图形验证码图片
const imgCodeKey = ref(""); //图形验证码的key
const configInfo = useUserInfo();
const defaultImg = ref("/common_top_logo.png")
const defaultBgImg = ref("/login_bg.png")
const wxEnable = ref("");
const pcAppid = ref("");
const fromurl = ref("");
const activeEmailVal = ref("");
const activeEmailCode = ref("");
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 isShowPwd = () => {
  showPwdFlag.value = !showPwdFlag.value;
};

//清空输入框内容
const clearInputVal = (type) => {
  if (type == "name") {
    name.value = "";
  } else if (type == "password") {
    password.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;
    }
  });
};
//是否同意用户注册协议
const agree = () => {
  agreeFlag.value = !agreeFlag.value;
};

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

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

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

  getImgCode(); //获取图形验证码
  document.body.classList.remove("el-popup-parent--hidden");

  activeEmailVal.value = route.query.email;
  activeEmailCode.value = route.query.code;
});

const activeEmail = () => {
  let param = {};
  param.nickName = name.value;
  param.password = password.value;
  param.email = activeEmailVal.value;
  param.code = activeEmailCode.value;
  param.verifyCode = imgCode.value;
  param.verifyKey = imgCodeKey.value;

  //用户名验证
  if (!param.nickName) {
    errorMsg.value = L["请输入用户名"];
    return false;
  }

  //密码验证
  if (!param.password) {
    errorMsg.value = L["请输入密码"];
    return false;
  }

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

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

  post("v3/member/front/active/email", param).then((res) => {
    if (res.state == 200) {
      ElMessage.success(L["会员邮箱账户激活成功，请登录"]);
      setTimeout(() => {
        goToPage("/login");
      }, 500);
    } else {
      //提示错误
      getImgCode();
      errorMsg.value = res.msg;
    }
  });
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/register.scss";

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