Files
shencaisuan/html/reg.html
T
2026-08-21 17:19:01 +08:00

755 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">
<input type="hidden" id="inviteCode" name="inviteCode" />
<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 = $("#inviteCode").val().trim();
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;
$("#inviteCode").val(AuthPageUtil.getReferralInviteCodeFromUrl());
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>