rain
374 lines
13 KiB
HTML
374 lines
13 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="loginForm" autocomplete="off">
|
|
<div class="form-group" id="phoneContainer">
|
|
<label for="phoneInput">手机号</label>
|
|
<input
|
|
type="text"
|
|
name="phoneNumber"
|
|
id="phoneInput"
|
|
placeholder="请输入手机号"
|
|
class="form-input"
|
|
maxlength="11"
|
|
/>
|
|
<div class="error-message" id="phoneError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="passwordContainer">
|
|
<label for="passwordInput">密码</label>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="passwordInput"
|
|
placeholder="请输入密码"
|
|
class="form-input"
|
|
maxlength="20"
|
|
/>
|
|
<div class="error-message" id="passwordError"></div>
|
|
</div>
|
|
|
|
<div class="form-group" id="captchaGroup">
|
|
<label for="captchaInput">验证码</label>
|
|
<div class="captcha-row">
|
|
<input
|
|
type="text"
|
|
name="captcha"
|
|
placeholder="请输入验证码"
|
|
class="form-input"
|
|
id="captchaInput"
|
|
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" name="captchaId" id="captchaId" value="" />
|
|
</div>
|
|
|
|
<button type="submit" class="auth-submit-btn" id="loginButton">
|
|
登 录
|
|
</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="reg.html">立即注册</a>
|
|
<a href="repwd.html">忘记密码</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div class="loading-spinner"></div>
|
|
</div>
|
|
|
|
<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;
|
|
|
|
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");
|
|
|
|
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>',
|
|
);
|
|
}
|
|
|
|
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");
|
|
$("#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 validatePhone(show) {
|
|
const value = $("#phoneInput").val().trim();
|
|
if (!AuthPageUtil.isPhone(value)) {
|
|
if (show) showError("phone", "请输入正确的手机号");
|
|
return false;
|
|
}
|
|
clearError("phone");
|
|
return true;
|
|
}
|
|
|
|
function validatePassword(show) {
|
|
if (!AuthPageUtil.isPassword($("#passwordInput").val())) {
|
|
if (show) showError("password", "密码长度应为6-20位");
|
|
return false;
|
|
}
|
|
clearError("password");
|
|
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 validateForm() {
|
|
if (!validatePhone(true) || !validatePassword(true)) return false;
|
|
if (!getVerifyParams(true)) return false;
|
|
if (!$("#agreementCheckbox").prop("checked")) {
|
|
layerInstance.msg("请阅读并同意用户协议和隐私政策", { icon: 2 });
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function submitLogin() {
|
|
const payload = Object.assign(
|
|
{
|
|
grantType: "password",
|
|
clientId: ApiClient.clientId,
|
|
client_id: ApiClient.clientId,
|
|
phoneNumber: $("#phoneInput").val().trim(),
|
|
password: hex_md5($("#passwordInput").val()),
|
|
deviceType: "WEB",
|
|
},
|
|
getVerifyParams(false) || {},
|
|
);
|
|
const $button = $("#loginButton");
|
|
$("#loadingOverlay").show();
|
|
$button.prop("disabled", true).text("登录中...");
|
|
ApiClient.post(ApiClient.API.authLogin, payload, {
|
|
publicRequest: true,
|
|
})
|
|
.then(function (res) {
|
|
if (ApiClient.isSuccess(res) && res.data) {
|
|
localStorage.setItem(
|
|
"token",
|
|
JSON.stringify(
|
|
res.data.token || res.data.access_token || res.data,
|
|
),
|
|
);
|
|
layerInstance.msg(
|
|
"登录成功，即将跳转到首页",
|
|
{ icon: 1, time: 1200 },
|
|
function () {
|
|
window.location.href = "index.html";
|
|
},
|
|
);
|
|
return;
|
|
}
|
|
layerInstance.msg(
|
|
(res && res.msg) || "登录失败，请检查手机号或密码",
|
|
{ icon: 2 },
|
|
);
|
|
refreshCaptcha();
|
|
})
|
|
.catch(function (error) {
|
|
layerInstance.msg(
|
|
"登录请求失败：" + (error.message || "网络错误"),
|
|
{ icon: 2 },
|
|
);
|
|
refreshCaptcha();
|
|
})
|
|
.finally(function () {
|
|
$("#loadingOverlay").hide();
|
|
$button.prop("disabled", false).text("登 录");
|
|
});
|
|
}
|
|
|
|
layui.use(["layer", "jquery"], function () {
|
|
layerInstance = layui.layer;
|
|
loadVerifyConfig().then(refreshCaptcha);
|
|
$("#loginForm").on("submit", function (event) {
|
|
event.preventDefault();
|
|
if (validateForm()) submitLogin();
|
|
});
|
|
$("#phoneInput").on("blur", function () {
|
|
validatePhone(true);
|
|
});
|
|
$("#passwordInput").on("blur", function () {
|
|
validatePassword(true);
|
|
});
|
|
$("#captchaInput").on("input", function () {
|
|
clearError("captcha");
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|