rain
521 lines
18 KiB
HTML
521 lines
18 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/cxz-logo.png" alt="彩先知" />
|
|
</a>
|
|
<div class="auth-subtitle">CaiXianZhi - 新用户注册</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-20个字符）"
|
|
maxlength="20"
|
|
/>
|
|
<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">
|
|
<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 currentSlideUuid = "";
|
|
let currentSlideX = 0;
|
|
let pendingSmsAfterVerify = false;
|
|
let referralPreviewData = null;
|
|
|
|
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;
|
|
});
|
|
}
|
|
|
|
function refreshCaptcha() {
|
|
currentCaptchaId = "";
|
|
currentSlideUuid = "";
|
|
currentSlideX = 0;
|
|
$("#captchaId").val("");
|
|
$("#captchaInput").val("");
|
|
$("#captchaGroup").removeClass("is-slide-mode");
|
|
$("#sendSmsBtn").prop("disabled", currentVerifyType === "slide");
|
|
if (currentVerifyType === "slide") {
|
|
renderSlideCaptchaEntry();
|
|
return;
|
|
}
|
|
$("#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 || {};
|
|
currentSlideUuid =
|
|
data.slideUuid || data.uuid || nested.slideUuid || nested.uuid || "";
|
|
currentSlideX =
|
|
Number(data.slideX || data.x || nested.slideX || nested.x || 0) || 0;
|
|
if (!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>',
|
|
);
|
|
$("#sendSmsBtn").prop("disabled", false);
|
|
if (pendingSmsAfterVerify) {
|
|
pendingSmsAfterVerify = false;
|
|
sendSmsCode();
|
|
}
|
|
}
|
|
|
|
function openSlideCaptcha() {
|
|
AuthPageUtil.loadSlideCaptchaScript()
|
|
.then(function (SlideCaptcha) {
|
|
SlideCaptcha.open({
|
|
title: "注册安全验证",
|
|
subtitle: "拖动滑块完成验证后继续注册",
|
|
apiBase: ApiClient.baseUrl || "",
|
|
onSuccess: completeSlideCaptcha,
|
|
onCancel: function () {
|
|
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");
|
|
$("#sendSmsBtn").prop("disabled", true);
|
|
$("#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.length < 2 || value.length > 20) {
|
|
if (show) showError("nickname", "昵称长度应为2-20个字符");
|
|
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 getVerifyParams(show) {
|
|
if (currentVerifyType === "slide") {
|
|
if (!currentSlideUuid) {
|
|
if (show) layerInstance.msg("请先完成滑动验证", { icon: 2 });
|
|
return null;
|
|
}
|
|
return {
|
|
verifyType: "slide",
|
|
slideUuid: currentSlideUuid,
|
|
slideX: currentSlideX,
|
|
};
|
|
}
|
|
const code = $("#captchaInput").val().trim();
|
|
if (!code || !currentCaptchaId) {
|
|
if (show) showError("captcha", "请填写有效验证码");
|
|
return null;
|
|
}
|
|
clearError("captcha");
|
|
return { verifyType: "captcha", code, uuid: currentCaptchaId };
|
|
}
|
|
|
|
function sendSmsCode() {
|
|
if (!validatePhone(true)) return;
|
|
if (currentVerifyType === "slide" && !currentSlideUuid) {
|
|
layerInstance.msg("请先完成滑动验证后获取短信验证码", { icon: 2 });
|
|
return;
|
|
}
|
|
const verifyParams = getVerifyParams(true);
|
|
if (!verifyParams) return;
|
|
$("#sendSmsBtn").prop("disabled", true);
|
|
AuthPageUtil.sendSmsCode(
|
|
Object.assign(
|
|
{ phoneNumber: $("#phone").val().trim() },
|
|
verifyParams,
|
|
),
|
|
)
|
|
.then(function (res) {
|
|
if (ApiClient.isSuccess(res)) {
|
|
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) ||
|
|
!validatePassword(true) ||
|
|
!validateConfirmPassword(true)
|
|
)
|
|
return false;
|
|
if (!getVerifyParams(true)) return false;
|
|
if (!$("#agreementCheckbox").prop("checked")) {
|
|
layerInstance.msg("请阅读并同意用户协议和隐私政策", { icon: 2 });
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function buildRegisterData() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const referrerId =
|
|
(referralPreviewData &&
|
|
(referralPreviewData.referrerId ||
|
|
referralPreviewData.userId ||
|
|
referralPreviewData.id)) ||
|
|
params.get("referrerId") ||
|
|
params.get("pid") ||
|
|
0;
|
|
return Object.assign(
|
|
{
|
|
phoneNumber: $("#phone").val().trim(),
|
|
password: hex_md5($("#password").val()),
|
|
smsCode: $("#smsCode").val().trim(),
|
|
nickname: $("#nickname").val().trim(),
|
|
referrerId: referrerId,
|
|
},
|
|
getVerifyParams(false) || {},
|
|
);
|
|
}
|
|
|
|
function loadReferralBindPreview() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const inviteCode =
|
|
params.get("inviteCode") || params.get("referralCode") || "";
|
|
if (!inviteCode) return;
|
|
ApiClient.get(
|
|
ApiClient.API.referralBindPreview,
|
|
{ inviteCode: inviteCode },
|
|
{ publicRequest: true },
|
|
)
|
|
.then(function (res) {
|
|
if (!ApiClient.isSuccess(res)) return;
|
|
referralPreviewData = ApiClient.pickData(res, {}) || {};
|
|
const name =
|
|
referralPreviewData.nickname ||
|
|
referralPreviewData.nickName ||
|
|
referralPreviewData.userName ||
|
|
"";
|
|
if (name)
|
|
layerInstance.msg("已识别推荐人：" + name, {
|
|
icon: 1,
|
|
time: 1500,
|
|
});
|
|
})
|
|
.catch(function () {
|
|
referralPreviewData = null;
|
|
});
|
|
}
|
|
|
|
function register() {
|
|
$("#registerBtn").prop("disabled", true).text("注册中...");
|
|
ApiClient.post(ApiClient.API.authRegister, buildRegisterData(), {
|
|
publicRequest: true,
|
|
})
|
|
.then(function (res) {
|
|
if (ApiClient.isSuccess(res)) {
|
|
layerInstance.msg(
|
|
"注册成功，即将前往登录",
|
|
{ icon: 1, time: 1200 },
|
|
function () {
|
|
window.location.href = "login.html";
|
|
},
|
|
);
|
|
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);
|
|
loadReferralBindPreview();
|
|
$("#sendSmsBtn").on("click", sendSmsCode);
|
|
$("#registerForm").on("submit", function (event) {
|
|
event.preventDefault();
|
|
if (validateForm()) register();
|
|
});
|
|
$("#nickname").on("blur", function () {
|
|
validateNickname(true);
|
|
});
|
|
$("#phone").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>
|