|
|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <div class="center">
|
|
|
+ <p style="width: 296px">
|
|
|
+ {{ L["register"]["我们将向您的手机号发送验证码，该手机号将用作登录用户名"] }}
|
|
|
+ </p>
|
|
|
+ <div class="item account">
|
|
|
+ <span
|
|
|
+ style="color: #bbb; font-size: 19px; padding-top: 7px"
|
|
|
+ class="icon iconfont icon-wode"
|
|
|
+ ></span>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="email"
|
|
|
+ :placeholder="L['请输入邮箱']"
|
|
|
+ class="input"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ <div data-type="userName" class="cancel" @click="clearInputVal">
|
|
|
+ <span style="color: #bbb" class="iconfont icon-cuowu"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="error" v-if="emailErrorMsg">
|
|
|
+ <span
|
|
|
+ style="color: #e1251b; font-size: 14px"
|
|
|
+ class="iconfont icon-jubao"
|
|
|
+ ></span>
|
|
|
+ {{ emailErrorMsg }}
|
|
|
+ </div>
|
|
|
+ <!-- 邮箱验证码 -->
|
|
|
+ <div class="verify-code">
|
|
|
+ <span class="verify-code-icon">
|
|
|
+ <img src="/register/mail_success.png" alt="" />
|
|
|
+ </span>
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ v-model="emailCode"
|
|
|
+ :placeholder="L['请输入验证码']"
|
|
|
+ class="input"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ <span class="verify-code-accept">
|
|
|
+ <el-button
|
|
|
+ @click="showHMVerify"
|
|
|
+ :disabled="countDownNumer"
|
|
|
+ :loading="getVerifyCodeLoading"
|
|
|
+ >
|
|
|
+ <span>{{ codeText }}</span>
|
|
|
+ <span v-if="countDownNumer">{{ `(${countDownNumer})` }}</span>
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="error" v-if="emailCodeErrorMsg">
|
|
|
+ <span
|
|
|
+ style="color: #e1251b; font-size: 14px"
|
|
|
+ class="iconfont icon-jubao"
|
|
|
+ ></span>
|
|
|
+ {{ emailCodeErrorMsg }}
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ @click="next"
|
|
|
+ :class="{ submit: true, disabled: nextDisabled }"
|
|
|
+ :disabled="nextDisabled"
|
|
|
+ :loading="nextActionLoading"
|
|
|
+ >{{ L["下一步"] }}</el-button
|
|
|
+ >
|
|
|
+ <el-dialog
|
|
|
+ :title="L['register']['滑动验证']"
|
|
|
+ destroy-on-close
|
|
|
+ width="500px"
|
|
|
+ center
|
|
|
+ modal-class="register-verify-model"
|
|
|
+ v-model="modalVisible"
|
|
|
+ >
|
|
|
+ <SliderVerify
|
|
|
+ :slideVerifyOptions="{ show: false, w: 450, h: 220 }"
|
|
|
+ @onSuccess="verifySuccess"
|
|
|
+ @onFail="verifyFail"
|
|
|
+ />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { getCurLanguage } from "@/composables/common.js";
|
|
|
+import { showMessage, startCountdown } from "@/utils/common";
|
|
|
+
|
|
|
+const emits = defineEmits(["success"]);
|
|
|
+
|
|
|
+const L = getCurLanguage();
|
|
|
+
|
|
|
+const emailCalc = ref();
|
|
|
+const email = ref(""); //邮箱
|
|
|
+const emailCode = ref(""); // 邮箱验证码
|
|
|
+const emailErrorMsg = ref(); //错误提示
|
|
|
+const emailCodeErrorMsg = ref(); //验证码错误提示
|
|
|
+
|
|
|
+// 人机验证弹窗显示标识
|
|
|
+const modalVisible = ref(false);
|
|
|
+
|
|
|
+// 重新获取验证码标识
|
|
|
+const isReacquireCode = ref(false);
|
|
|
+
|
|
|
+const getVerifyCodeLoading = ref(false);
|
|
|
+
|
|
|
+const nextActionLoading = ref(false);
|
|
|
+
|
|
|
+// 倒计时展示
|
|
|
+const countDownNumer = ref(0);
|
|
|
+
|
|
|
+// 获取验证码的文案
|
|
|
+const codeText = computed(() => {
|
|
|
+ return isReacquireCode.value
|
|
|
+ ? L["register"]["重新获取"]
|
|
|
+ : L["register"]["获取验证码"];
|
|
|
+});
|
|
|
+
|
|
|
+// 注册邮箱时按钮置灰状态
|
|
|
+const nextDisabled = computed(() => !email.value || !emailCode.value);
|
|
|
+
|
|
|
+//开启人机校验
|
|
|
+const showHMVerify = () => {
|
|
|
+ // 校验邮箱非空以及格式
|
|
|
+ if (!validateEmail()) return;
|
|
|
+ modalVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取验证码
|
|
|
+const getVerifyCode = () => {
|
|
|
+ getVerifyCodeLoading.value = true;
|
|
|
+ post("v3/member/front/active/verification/code", {
|
|
|
+ email: email.value,
|
|
|
+ source: 1,
|
|
|
+ type: 1,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.state === 200) {
|
|
|
+ showMessage({
|
|
|
+ message: L["register"]["验证码已发送"],
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ // 设置倒计时
|
|
|
+ startCountdown(60, (time) => (countDownNumer.value = time));
|
|
|
+ isReacquireCode.value = true;
|
|
|
+ } else {
|
|
|
+ showMessage({
|
|
|
+ message: res.msg,
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ getVerifyCodeLoading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 人机验证成功
|
|
|
+const verifySuccess = () => {
|
|
|
+ modalVisible.value = false;
|
|
|
+ getVerifyCode();
|
|
|
+};
|
|
|
+
|
|
|
+// 人机校验失败
|
|
|
+const verifyFail = () => {
|
|
|
+ showMessage({
|
|
|
+ message: L["register"]["校验不通过"],
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 校验邮箱
|
|
|
+const validateEmail = () => {
|
|
|
+ //邮箱非空的验证
|
|
|
+ if (!email.value) {
|
|
|
+ emailErrorMsg.value = L["请输入邮箱"];
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 邮箱格式验证
|
|
|
+ emailCalc.value = checkEmail(email.value);
|
|
|
+ if (emailCalc.value !== true) {
|
|
|
+ emailErrorMsg.value = emailCalc.value;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ emailErrorMsg.value = "";
|
|
|
+
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+// 邮箱验证码验证
|
|
|
+const validateEmailCode = () => {
|
|
|
+ if (!emailCode.value) {
|
|
|
+ emailCodeErrorMsg.value = L["register"]["请输入邮箱验证码"];
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ emailCodeErrorMsg.value = "";
|
|
|
+
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+const next = () => {
|
|
|
+ if (!validateEmail() || !validateEmailCode()) return;
|
|
|
+ nextActionLoading.value = true;
|
|
|
+ post("v3/member/front/active/check/verification/code", {
|
|
|
+ email: email.value,
|
|
|
+ type: 1,
|
|
|
+ verificationCode: emailCode.value,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.state == 200) {
|
|
|
+ // showMessage({
|
|
|
+ // message: L["register"]["注册成功"],
|
|
|
+ // type: "success",
|
|
|
+ // });
|
|
|
+ //成功提示，并返回到登录页面
|
|
|
+ emits("success", email.value);
|
|
|
+ } else {
|
|
|
+ //提示错误
|
|
|
+ showMessage({
|
|
|
+ message: res.msg,
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ nextActionLoading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//清空输入框内容
|
|
|
+const clearInputVal = (type) => {
|
|
|
+ email.value = "";
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.register-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>
|
|
|
+.center {
|
|
|
+ padding: 30px 30px 40px;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 15px;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 1px;
|
|
|
+ top: 1px;
|
|
|
+ width: 50px;
|
|
|
+ text-align: center;
|
|
|
+ height: 38px;
|
|
|
+ background: #f8f8f8;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 44px 0 60px;
|
|
|
+ width: 326px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 44px 0 60px;
|
|
|
+ width: 326px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.code {
|
|
|
+ .input {
|
|
|
+ padding-right: 10px;
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 1px;
|
|
|
+ width: 44px;
|
|
|
+ height: 38px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ :before {
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ left: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .error {
|
|
|
+ margin-top: 10px;
|
|
|
+ position: relative;
|
|
|
+ color: $colorMain;
|
|
|
+ height: 16px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .verify-code {
|
|
|
+ display: flex;
|
|
|
+ width: 326px;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ &-icon {
|
|
|
+ width: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ border-right: none;
|
|
|
+ background: #f8f8f8;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ input {
|
|
|
+ border: 1px solid #e8e8e8;
|
|
|
+ border-left: none;
|
|
|
+ border-right: none;
|
|
|
+ height: 40px;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ width: 190px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-accept {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 90px;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #666;
|
|
|
+ background: #f8f8f8;
|
|
|
+ border-left: none;
|
|
|
+ border-radius: 0;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: #e8e8e8;
|
|
|
+ color: $colorMain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ margin-top: 35px;
|
|
|
+ background: $colorMain;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ font-size: 18px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ background-color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
周玉环