753 lines
26 KiB
HTML
753 lines
26 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title id="page-title">神彩算 - 注册</title>
|
|
<script src="../public/css/layui/layui.js"></script>
|
|
<script src="../config.js"></script>
|
|
<script src="../utils/ApiClient.js"></script>
|
|
<script src="../utils/DateUtil.js"></script>
|
|
<script src="../utils/CommonUtil.js"></script>
|
|
<script src="../utils/AuthPageUtil.js"></script>
|
|
<link rel="stylesheet" href="../public/css/layui/css/layui.css" />
|
|
<link rel="stylesheet" href="../public/css/public.css" />
|
|
<link rel="stylesheet" href="../public/css/auth.css" />
|
|
</head>
|
|
<body>
|
|
<main class="auth-container">
|
|
<div class="auth-card">
|
|
<div class="auth-header">
|
|
<a class="auth-logo" href="index.html" aria-label="返回首页">
|
|
<img src="../images/scs-logo.png" alt="神彩算" />
|
|
</a>
|
|
<div class="auth-subtitle">神彩算 - 新用户注册</div>
|
|
</div>
|
|
<div class="auth-body">
|
|
<form id="registerForm" autocomplete="off">
|
|
<div class="form-group" id="nickNameContainer">
|
|
<label for="nickName">昵称</label>
|
|
<input
|
|
type="text"
|
|
id="nickName"
|
|
class="form-input"
|
|
placeholder="请输入昵称（2-6个汉字或2-12个英文）"
|
|
maxlength="12"
|
|
/>
|
|
<div class="error-message" id="nickNameError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="phoneContainer">
|
|
<label for="phone">手机号</label>
|
|
<input
|
|
type="text"
|
|
id="phone"
|
|
class="form-input"
|
|
placeholder="请输入手机号"
|
|
maxlength="11"
|
|
/>
|
|
<div class="error-message" id="phoneError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="captchaGroup" style="visibility: hidden">
|
|
<label for="captchaInput">滑动验证</label>
|
|
<div class="captcha-row">
|
|
<input
|
|
type="text"
|
|
id="captchaInput"
|
|
class="form-input"
|
|
placeholder="请输入验证码"
|
|
maxlength="6"
|
|
/>
|
|
<div
|
|
class="captcha-img-box"
|
|
id="captchaContainer"
|
|
onclick="refreshCaptcha()"
|
|
>
|
|
<img id="captchaImage" src="" alt="验证码" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="captcha-refresh-link"
|
|
id="captchaRefreshLink"
|
|
onclick="refreshCaptcha()"
|
|
>
|
|
看不清？换一张
|
|
</div>
|
|
<div class="error-message" id="captchaError"></div>
|
|
<input type="hidden" id="captchaId" value="" />
|
|
</div>
|
|
|
|
<div class="form-group" id="smsCodeContainer">
|
|
<label for="smsCode">短信验证码</label>
|
|
<div class="auth-sms-row">
|
|
<input
|
|
type="text"
|
|
id="smsCode"
|
|
class="form-input"
|
|
placeholder="请输入短信验证码"
|
|
maxlength="6"
|
|
/>
|
|
<button type="button" class="auth-sms-button" id="sendSmsBtn">
|
|
获取验证码
|
|
</button>
|
|
</div>
|
|
<div class="error-message" id="smsCodeError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="passwordContainer">
|
|
<label for="password">密码</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
class="form-input"
|
|
placeholder="请输入密码（6-20位）"
|
|
maxlength="20"
|
|
/>
|
|
<div class="error-message" id="passwordError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="confirmPasswordContainer">
|
|
<label for="confirmPassword">确认密码</label>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
class="form-input"
|
|
placeholder="请再次输入密码"
|
|
maxlength="20"
|
|
/>
|
|
<div class="error-message" id="confirmPasswordError"></div>
|
|
</div>
|
|
|
|
<button type="submit" class="auth-submit-btn" id="registerBtn">
|
|
确认注册
|
|
</button>
|
|
|
|
<div class="auth-agreement">
|
|
<input type="checkbox" id="agreementCheckbox" />
|
|
<span>已阅读并同意</span>
|
|
<a href="yonghuxieyi.html" target="_blank">《神彩算用户协议》</a>
|
|
<a href="yinsixieyi.html" target="_blank">《神彩算隐私政策》</a>
|
|
</div>
|
|
|
|
<div class="auth-links">
|
|
<a href="login.html">已有账号？立即登录</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="../public/js/jquery.js"></script>
|
|
<script src="../public/js/md5.js"></script>
|
|
<script>
|
|
CommonUtil.loadPageConfig({ ads: false, links: false });
|
|
const $ = layui.$;
|
|
let layerInstance = null;
|
|
let currentCaptchaId = "";
|
|
let currentVerifyType = "captcha";
|
|
let currentSlideToken = "";
|
|
let currentSlideUuid = "";
|
|
let currentSlideX = 0;
|
|
let pendingSmsAfterVerify = false;
|
|
let smsCodeIssuedPhone = "";
|
|
|
|
function showError(field, message) {
|
|
const containerId =
|
|
field === "captcha" ? "captchaGroup" : field + "Container";
|
|
$("#" + field + "Error")
|
|
.text(message)
|
|
.show();
|
|
$("#" + containerId).addClass("error");
|
|
}
|
|
|
|
function clearError(field) {
|
|
const containerId =
|
|
field === "captcha" ? "captchaGroup" : field + "Container";
|
|
$("#" + field + "Error")
|
|
.hide()
|
|
.text("");
|
|
$("#" + containerId).removeClass("error");
|
|
}
|
|
|
|
function loadVerifyConfig() {
|
|
return AuthPageUtil.loadVerifyType().then(function (type) {
|
|
currentVerifyType = type === "none" ? "captcha" : type;
|
|
});
|
|
}
|
|
|
|
function refreshCaptcha() {
|
|
$("#captchaGroup").css("visibility", "visible");
|
|
if (currentVerifyType === "none") {
|
|
currentCaptchaId = "";
|
|
currentSlideUuid = "";
|
|
currentSlideX = 0;
|
|
$("#captchaGroup").hide();
|
|
$("#captchaRefreshLink").hide();
|
|
return;
|
|
}
|
|
|
|
$("#captchaGroup").show();
|
|
currentCaptchaId = "";
|
|
currentSlideUuid = "";
|
|
currentSlideX = 0;
|
|
$("#captchaId").val("");
|
|
$("#captchaInput").val("");
|
|
$("#captchaGroup").removeClass("is-slide-mode");
|
|
if (currentVerifyType === "slide") {
|
|
renderSlideCaptchaEntry();
|
|
$("#captchaGroup").hide();
|
|
return;
|
|
}
|
|
$("#captchaGroup").show();
|
|
$("#captchaInput").show();
|
|
$("#captchaRefreshLink").show().text("看不清？换一张");
|
|
$("#captchaContainer")
|
|
.attr("onclick", "refreshCaptcha()")
|
|
.html('<img id="captchaImage" src="" alt="验证码" />');
|
|
$("#captchaImage").attr("src", ApiClient.transparentGif());
|
|
ApiClient.get(ApiClient.API.authCode, {}, { publicRequest: true })
|
|
.then(function (res) {
|
|
if (ApiClient.isSuccess(res) && res.data) {
|
|
currentCaptchaId = res.data.uuid || res.data.id || "";
|
|
$("#captchaId").val(currentCaptchaId);
|
|
$("#captchaImage").attr(
|
|
"src",
|
|
res.data.img || res.data.image || "",
|
|
);
|
|
clearError("captcha");
|
|
return;
|
|
}
|
|
layerInstance.msg(
|
|
"获取验证码失败：" + ((res && res.msg) || "未知错误"),
|
|
{ icon: 2 },
|
|
);
|
|
})
|
|
.catch(function () {
|
|
layerInstance.msg("网络错误，无法获取验证码", { icon: 2 });
|
|
});
|
|
}
|
|
|
|
function completeSlideCaptcha(result) {
|
|
const data = result || {};
|
|
const nested = data.data || {};
|
|
currentSlideToken =
|
|
data.slideToken || data.token || nested.slideToken || nested.token || "";
|
|
currentSlideUuid =
|
|
data.slideUuid || data.uuid || nested.slideUuid || nested.uuid || "";
|
|
currentSlideX =
|
|
Number(data.slideX || data.x || nested.slideX || nested.x || 0) || 0;
|
|
if (!currentSlideToken && !currentSlideUuid) {
|
|
layerInstance.msg("滑动验证未返回凭证，请重试", { icon: 2 });
|
|
renderSlideCaptchaEntry();
|
|
return;
|
|
}
|
|
$("#captchaContainer").html(
|
|
'<div class="slide-verify-card is-success"><div class="slide-verify-mark">✓</div><div class="slide-verify-main"><div class="slide-verify-title">验证已通过</div><div class="slide-verify-desc">可以获取短信或注册</div></div><div class="slide-verify-action">完成</div></div>',
|
|
);
|
|
checkSmsWaitAfterVerify();
|
|
if (pendingSmsAfterVerify) {
|
|
pendingSmsAfterVerify = false;
|
|
sendSmsCode();
|
|
}
|
|
}
|
|
|
|
function openSlideCaptcha() {
|
|
AuthPageUtil.loadSlideCaptchaScript()
|
|
.then(function (SlideCaptcha) {
|
|
SlideCaptcha.open({
|
|
title: "注册安全验证",
|
|
subtitle: "拖动滑块完成验证后继续注册",
|
|
apiBase: ApiClient.baseUrl || "",
|
|
tenantId: ApiClient.tenantId || "936208",
|
|
headers: ApiClient.publicHeaders(),
|
|
onSuccess: completeSlideCaptcha,
|
|
onCancel: function () {
|
|
currentSlideToken = "";
|
|
currentSlideUuid = "";
|
|
currentSlideX = 0;
|
|
},
|
|
onError: function (error) {
|
|
layerInstance.msg(
|
|
(error && error.message) || "滑动验证失败，请重试",
|
|
{ icon: 2 },
|
|
);
|
|
renderSlideCaptchaEntry();
|
|
},
|
|
});
|
|
})
|
|
.catch(function (error) {
|
|
layerInstance.msg(error.message || "滑动验证组件加载失败", {
|
|
icon: 2,
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderSlideCaptchaEntry() {
|
|
$("#captchaInput").hide();
|
|
$("#captchaRefreshLink").hide();
|
|
$("#captchaGroup").addClass("is-slide-mode");
|
|
$("#captchaContainer")
|
|
.removeAttr("onclick")
|
|
.html(
|
|
'<div class="slide-verify-card" role="button" tabindex="0"><div class="slide-verify-mark">↔</div><div class="slide-verify-main"><div class="slide-verify-title">拖动滑块验证</div><div class="slide-verify-desc">完成后获取短信</div></div><div class="slide-verify-action">开始</div></div>',
|
|
);
|
|
$(".slide-verify-card")
|
|
.off("click keydown")
|
|
.on("click", openSlideCaptcha)
|
|
.on("keydown", function (event) {
|
|
if (event.key === "Enter" || event.key === " ") {
|
|
event.preventDefault();
|
|
openSlideCaptcha();
|
|
}
|
|
});
|
|
}
|
|
|
|
function validateNickname(show) {
|
|
const value = $("#nickName").val().trim();
|
|
if (!value) {
|
|
if (show) showError("nickName", "请输入昵称");
|
|
return false;
|
|
}
|
|
const nicknameWidth = Array.from(value).reduce(function (total, char) {
|
|
return total + (/[\u4e00-\u9fa5\uff00-\uffef]/.test(char) ? 2 : 1);
|
|
}, 0);
|
|
if (value.length < 2 || nicknameWidth > 12) {
|
|
if (show) showError("nickName", "昵称长度应为2-6个汉字或2-12个英文");
|
|
return false;
|
|
}
|
|
clearError("nickName");
|
|
return true;
|
|
}
|
|
|
|
function validatePhone(show) {
|
|
const value = $("#phone").val().trim();
|
|
if (!AuthPageUtil.isPhone(value)) {
|
|
if (show) showError("phone", "请输入正确的手机号");
|
|
return false;
|
|
}
|
|
clearError("phone");
|
|
return true;
|
|
}
|
|
|
|
function validateSmsCode(show) {
|
|
const value = $("#smsCode").val().trim();
|
|
if (!/^\d{4,6}$/.test(value)) {
|
|
if (show) showError("smsCode", "请输入4-6位短信验证码");
|
|
return false;
|
|
}
|
|
clearError("smsCode");
|
|
return true;
|
|
}
|
|
|
|
function validatePassword(show) {
|
|
if (!AuthPageUtil.isPassword($("#password").val())) {
|
|
if (show) showError("password", "密码长度应为6-20位");
|
|
return false;
|
|
}
|
|
clearError("password");
|
|
return true;
|
|
}
|
|
|
|
function validateConfirmPassword(show) {
|
|
if ($("#confirmPassword").val() !== $("#password").val()) {
|
|
if (show) showError("confirmPassword", "两次输入的密码不一致");
|
|
return false;
|
|
}
|
|
clearError("confirmPassword");
|
|
return true;
|
|
}
|
|
|
|
function hasIssuedSmsCodeForCurrentPhone() {
|
|
const phone = $("#phone").val().trim();
|
|
return !!phone && smsCodeIssuedPhone === phone;
|
|
}
|
|
|
|
function handlePhoneInput() {
|
|
const phone = $("#phone").val().trim();
|
|
if (smsCodeIssuedPhone && smsCodeIssuedPhone !== phone) {
|
|
smsCodeIssuedPhone = "";
|
|
$("#smsCode").val("");
|
|
clearError("smsCode");
|
|
$("#captchaGroup").show();
|
|
refreshCaptcha();
|
|
}
|
|
}
|
|
|
|
function validateSmsCodePhone(show) {
|
|
const phone = $("#phone").val().trim();
|
|
if (smsCodeIssuedPhone && smsCodeIssuedPhone !== phone) {
|
|
if (show) showError("smsCode", "手机号已修改，请重新获取短信验证码");
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function getOptionalGraphVerifyParams() {
|
|
if (hasIssuedSmsCodeForCurrentPhone()) return {};
|
|
if (currentVerifyType === "slide" && (currentSlideToken || currentSlideUuid)) {
|
|
return {
|
|
verifyType: "slide",
|
|
slideToken: currentSlideToken,
|
|
slideUuid: currentSlideUuid,
|
|
slideX: currentSlideX,
|
|
};
|
|
}
|
|
if (currentVerifyType === "captcha") {
|
|
const code = $("#captchaInput").val().trim();
|
|
if (code && currentCaptchaId) {
|
|
return { verifyType: "captcha", code: code, uuid: currentCaptchaId };
|
|
}
|
|
}
|
|
return {};
|
|
}
|
|
|
|
function getGraphVerifyParams(show) {
|
|
if (currentVerifyType === "slide") {
|
|
if (!currentSlideToken && !currentSlideUuid) {
|
|
if (show) {
|
|
layerInstance.msg("请先完成滑动验证后获取短信验证码", {
|
|
icon: 2,
|
|
});
|
|
}
|
|
return null;
|
|
}
|
|
return {
|
|
verifyType: "slide",
|
|
slideToken: currentSlideToken,
|
|
slideUuid: currentSlideUuid,
|
|
slideX: currentSlideX,
|
|
};
|
|
}
|
|
const code = $("#captchaInput").val().trim();
|
|
if (!code) {
|
|
if (show) {
|
|
layerInstance.msg("请先完成图片验证码后获取短信验证码", {
|
|
icon: 2,
|
|
});
|
|
}
|
|
return null;
|
|
}
|
|
if (!currentCaptchaId) {
|
|
if (show) {
|
|
layerInstance.msg("验证码已失效，请换一张", { icon: 2 });
|
|
refreshCaptcha();
|
|
}
|
|
return null;
|
|
}
|
|
clearError("captcha");
|
|
return { verifyType: "captcha", code, uuid: currentCaptchaId };
|
|
}
|
|
|
|
function getSmsWaitSeconds() {
|
|
const smsCountdownApi = ApiClient.API["authSmsCountdown"];
|
|
if (!smsCountdownApi) return Promise.resolve(0);
|
|
return ApiClient.get(
|
|
smsCountdownApi,
|
|
{ phoneNumber: $("#phone").val().trim(), scene: "auth" },
|
|
{ publicRequest: true },
|
|
)
|
|
.then(function (res) {
|
|
if (!ApiClient.isSuccess(res)) return 0;
|
|
const data = res.data || {};
|
|
return (
|
|
Number(
|
|
data.seconds ||
|
|
data.waitSeconds ||
|
|
data.remainingSeconds ||
|
|
data.countdown ||
|
|
0,
|
|
) || 0
|
|
);
|
|
})
|
|
.catch(function () {
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
function checkSmsWaitAfterVerify() {
|
|
if (!validatePhone(false)) return;
|
|
getSmsWaitSeconds().then(function (waitSeconds) {
|
|
if (waitSeconds > 0) {
|
|
layerInstance.msg("请 " + waitSeconds + " 秒后再获取短信验证码", {
|
|
icon: 0,
|
|
});
|
|
AuthPageUtil.startSmsCountdown("#sendSmsBtn", waitSeconds);
|
|
}
|
|
});
|
|
}
|
|
|
|
function refreshDialogCaptcha() {
|
|
currentCaptchaId = "";
|
|
$("#captchaInput").val("");
|
|
$("#captchaId").val("");
|
|
$("#captchaDialogInput").val("");
|
|
$("#captchaDialogImage").attr("src", "");
|
|
|
|
return ApiClient.get(
|
|
ApiClient.API.authCode,
|
|
{},
|
|
{ publicRequest: true },
|
|
)
|
|
.then(function (res) {
|
|
if (ApiClient.isSuccess(res) && res.data) {
|
|
currentCaptchaId = res.data.uuid || res.data.id || "";
|
|
$("#captchaId").val(currentCaptchaId);
|
|
$("#captchaDialogImage").attr(
|
|
"src",
|
|
res.data.img || res.data.image || "",
|
|
);
|
|
return;
|
|
}
|
|
layerInstance.msg("获取验证码失败，请重试", { icon: 2 });
|
|
})
|
|
.catch(function () {
|
|
layerInstance.msg("网络错误，无法获取验证码", { icon: 2 });
|
|
});
|
|
}
|
|
|
|
function openImageCaptchaDialog() {
|
|
const dialogHtml = `
|
|
<div class="captcha-dialog">
|
|
<div class="captcha-dialog-title">完成图片验证码</div>
|
|
<div class="captcha-dialog-desc">请输入右侧图片中的验证码，通过后将自动发送短信验证码。</div>
|
|
<div class="captcha-dialog-row">
|
|
<input type="text" class="captcha-dialog-input" id="captchaDialogInput" maxlength="6" placeholder="请输入验证码" />
|
|
<div class="captcha-dialog-img-box" id="captchaDialogRefresh">
|
|
<img class="captcha-dialog-img" id="captchaDialogImage" src="" alt="验证码" />
|
|
</div>
|
|
</div>
|
|
<div class="captcha-dialog-tip">看不清？<span id="captchaDialogRefreshText">换一张</span></div>
|
|
<div class="captcha-dialog-actions">
|
|
<button type="button" class="captcha-dialog-btn" id="captchaDialogCancel">取消</button>
|
|
<button type="button" class="captcha-dialog-btn primary" id="captchaDialogConfirm">确认发送</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const dialogIndex = layerInstance.open({
|
|
type: 1,
|
|
title: false,
|
|
area: ["420px", "auto"],
|
|
shadeClose: true,
|
|
closeBtn: 1,
|
|
content: dialogHtml,
|
|
success: function () {
|
|
refreshDialogCaptcha();
|
|
$("#captchaDialogRefresh, #captchaDialogRefreshText").on(
|
|
"click",
|
|
refreshDialogCaptcha,
|
|
);
|
|
$("#captchaDialogCancel").on("click", function () {
|
|
layerInstance.close(dialogIndex);
|
|
});
|
|
$("#captchaDialogInput").on("keydown", function (event) {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
$("#captchaDialogConfirm").trigger("click");
|
|
}
|
|
});
|
|
$("#captchaDialogConfirm").on("click", function () {
|
|
const code = $("#captchaDialogInput").val().trim();
|
|
if (!code) {
|
|
layerInstance.msg("请输入验证码", { icon: 2 });
|
|
return;
|
|
}
|
|
$("#captchaInput").val(code);
|
|
layerInstance.close(dialogIndex);
|
|
sendSmsCode();
|
|
});
|
|
setTimeout(function () {
|
|
$("#captchaDialogInput").focus();
|
|
}, 80);
|
|
},
|
|
end: function () {
|
|
$("#sendSmsBtn").prop("disabled", false);
|
|
},
|
|
});
|
|
}
|
|
|
|
function sendSmsCode() {
|
|
if (!validatePhone(true)) return;
|
|
|
|
if (currentVerifyType === "slide" && !currentSlideToken && !currentSlideUuid) {
|
|
pendingSmsAfterVerify = true;
|
|
openSlideCaptcha();
|
|
return;
|
|
}
|
|
|
|
if (
|
|
currentVerifyType === "captcha" &&
|
|
!$("#captchaInput").val().trim()
|
|
) {
|
|
$("#sendSmsBtn").prop("disabled", true);
|
|
openImageCaptchaDialog();
|
|
return;
|
|
}
|
|
|
|
const verifyParams = getGraphVerifyParams(true);
|
|
if (!verifyParams) return;
|
|
$("#sendSmsBtn").prop("disabled", true);
|
|
getSmsWaitSeconds().then(function (waitSeconds) {
|
|
if (waitSeconds > 0) {
|
|
layerInstance.msg("请 " + waitSeconds + " 秒后再获取短信验证码", {
|
|
icon: 0,
|
|
});
|
|
AuthPageUtil.startSmsCountdown("#sendSmsBtn", waitSeconds);
|
|
return;
|
|
}
|
|
AuthPageUtil.sendSmsCode(
|
|
Object.assign(
|
|
{ phoneNumber: $("#phone").val().trim() },
|
|
verifyParams,
|
|
),
|
|
)
|
|
.then(function (res) {
|
|
if (ApiClient.isSuccess(res)) {
|
|
smsCodeIssuedPhone = $("#phone").val().trim();
|
|
$("#captchaGroup").hide();
|
|
layerInstance.msg("短信验证码已发送", { icon: 1 });
|
|
AuthPageUtil.startSmsCountdown("#sendSmsBtn");
|
|
return;
|
|
}
|
|
$("#sendSmsBtn").prop("disabled", false);
|
|
layerInstance.msg((res && res.msg) || "短信验证码发送失败", {
|
|
icon: 2,
|
|
});
|
|
refreshCaptcha();
|
|
})
|
|
.catch(function () {
|
|
$("#sendSmsBtn").prop("disabled", false);
|
|
layerInstance.msg("网络异常，短信发送失败", { icon: 2 });
|
|
refreshCaptcha();
|
|
});
|
|
});
|
|
}
|
|
|
|
function validateForm() {
|
|
if (
|
|
!validateNickname(true) ||
|
|
!validatePhone(true) ||
|
|
!validateSmsCode(true) ||
|
|
!validateSmsCodePhone(true) ||
|
|
!validatePassword(true) ||
|
|
!validateConfirmPassword(true)
|
|
)
|
|
return false;
|
|
if (!$("#agreementCheckbox").prop("checked")) {
|
|
layerInstance.msg("请阅读并同意用户协议和隐私政策", { icon: 2 });
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function buildRegisterData() {
|
|
const registerData = Object.assign(
|
|
{
|
|
phoneNumber: $("#phone").val().trim(),
|
|
password: hex_md5($("#password").val()),
|
|
smsCode: $("#smsCode").val().trim(),
|
|
nickName: $("#nickName").val().trim(),
|
|
},
|
|
getOptionalGraphVerifyParams(),
|
|
);
|
|
const inviteCode = AuthPageUtil.getReferralInviteCodeFromUrl();
|
|
if (inviteCode) registerData.inviteCode = inviteCode;
|
|
return registerData;
|
|
}
|
|
|
|
function saveRegisterTokenIfPresent(res) {
|
|
const data = ApiClient.pickData(res) || {};
|
|
if (!data || typeof data !== "object") return false;
|
|
|
|
const token = data.access_token || data.token || "";
|
|
if (!token) return false;
|
|
|
|
localStorage.setItem("token", token);
|
|
localStorage.setItem("userInfo", JSON.stringify(data));
|
|
sessionStorage.removeItem("authExpiredRedirecting");
|
|
sessionStorage.removeItem("authExpiredMessage");
|
|
return true;
|
|
}
|
|
|
|
function redirectAfterRegister(hasToken) {
|
|
if (hasToken) {
|
|
NavigationUtil.open(
|
|
typeof CommonUtil !== "undefined"
|
|
? CommonUtil.siteHref("/index.html")
|
|
: "index.html",
|
|
);
|
|
return;
|
|
}
|
|
|
|
NavigationUtil.open("login.html");
|
|
}
|
|
|
|
function finishRegisterSuccess(res) {
|
|
const hasToken = saveRegisterTokenIfPresent(res);
|
|
layerInstance.msg(
|
|
hasToken ? "注册成功，即将跳转到首页" : "注册成功，即将前往登录",
|
|
{ icon: 1, time: 1200 },
|
|
function () {
|
|
redirectAfterRegister(hasToken);
|
|
},
|
|
);
|
|
}
|
|
|
|
function register() {
|
|
$("#registerBtn").prop("disabled", true).text("注册中...");
|
|
ApiClient.post(ApiClient.API.authRegister, buildRegisterData(), {
|
|
publicRequest: true,
|
|
})
|
|
.then(function (res) {
|
|
if (ApiClient.isSuccess(res)) {
|
|
finishRegisterSuccess(res);
|
|
return;
|
|
}
|
|
layerInstance.msg((res && res.msg) || "注册失败，请稍后重试", {
|
|
icon: 2,
|
|
});
|
|
refreshCaptcha();
|
|
})
|
|
.catch(function () {
|
|
layerInstance.msg("网络异常，注册失败", { icon: 2 });
|
|
refreshCaptcha();
|
|
})
|
|
.finally(function () {
|
|
$("#registerBtn").prop("disabled", false).text("确认注册");
|
|
});
|
|
}
|
|
|
|
layui.use(["layer", "jquery"], function () {
|
|
layerInstance = layui.layer;
|
|
loadVerifyConfig().then(refreshCaptcha);
|
|
$("#sendSmsBtn").on("click", sendSmsCode);
|
|
$("#registerForm").on("submit", function (event) {
|
|
event.preventDefault();
|
|
if (validateForm()) register();
|
|
});
|
|
$("#nickName").on("blur", function () {
|
|
validateNickname(true);
|
|
});
|
|
$("#phone")
|
|
.on("input", handlePhoneInput)
|
|
.on("blur", function () {
|
|
validatePhone(true);
|
|
});
|
|
$("#smsCode").on("blur", function () {
|
|
validateSmsCode(true);
|
|
});
|
|
$("#password").on("blur", function () {
|
|
validatePassword(true);
|
|
});
|
|
$("#confirmPassword").on("blur", function () {
|
|
validateConfirmPassword(true);
|
|
});
|
|
$("#captchaInput").on("input", function () {
|
|
clearError("captcha");
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|