rain
386 lines
14 KiB
HTML
386 lines
14 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>
|
|
<link rel="stylesheet" href="../public/css/layui/css/layui.css" />
|
|
<link rel="stylesheet" href="../public/css/public.css" />
|
|
<link rel="stylesheet" href="../public/css/apply.css" />
|
|
</head>
|
|
<body>
|
|
<nav class="topbar" id="navbar">
|
|
<div class="topbar__inner">
|
|
<a href="index.html" class="topbar__brand">
|
|
<img src="../images/home-logo.png" alt="彩先知" class="topbar__logo" />
|
|
</a>
|
|
<div class="topbar__nav" id="navLotteryItems">
|
|
<a href="index.html" class="topbar__nav-link">首页</a>
|
|
</div>
|
|
<div class="topbar__user">
|
|
<div id="notLoggedInBox" class="topbar__guest">
|
|
<a href="login.html" class="topbar__btn topbar__btn--ghost">登录</a>
|
|
<a href="reg.html" class="topbar__btn topbar__btn--primary">免费注册</a>
|
|
</div>
|
|
<div id="loggedInBox" class="topbar__logged apply-hidden">
|
|
<a href="usercenter.html" class="topbar__profile">
|
|
<img id="userAvatar" src="../public/img/userimg.png" alt="" class="topbar__avatar" />
|
|
<div class="topbar__meta">
|
|
<span id="userName" class="topbar__uname">用户</span>
|
|
<span id="userLevel" class="topbar__ubadge">会员</span>
|
|
</div>
|
|
</a>
|
|
<button class="topbar__btn topbar__btn--logout" onclick="logout()">退出登录</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="apply-page">
|
|
<div class="cxz-breadcrumb">
|
|
<a href="index.html">首页</a>
|
|
<span class="sep">></span>
|
|
<a href="usercenter.html">个人中心</a>
|
|
<span class="sep">></span>
|
|
<span>专家申请</span>
|
|
</div>
|
|
|
|
<section class="apply-shell">
|
|
<div class="apply-hero">
|
|
<div>
|
|
<h1>申请成为专家</h1>
|
|
<p>提交身份资料和个人简介，审核通过后即可发布专家预测内容。</p>
|
|
</div>
|
|
<div class="apply-user-card">
|
|
<span>当前账号</span>
|
|
<strong id="currentUsername">--</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="apply-layout">
|
|
<aside class="apply-side">
|
|
<h2>申请说明</h2>
|
|
<ul>
|
|
<li>资料需真实有效，身份证照片需清晰完整。</li>
|
|
<li>简介用于审核您的分析经验和内容方向。</li>
|
|
<li>审核通过后，可在个人中心发布相关预测文章。</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<section class="apply-card">
|
|
<div class="apply-section-title">
|
|
<span></span>
|
|
资料上传
|
|
</div>
|
|
<div class="apply-upload-grid">
|
|
<button class="apply-upload-card" type="button" onclick="triggerUpload('uploadFront')">
|
|
<span class="apply-upload-plus" id="idCardFrontPlus">+</span>
|
|
<img class="apply-upload-preview" id="idCardFrontPreview" alt="身份证正面" />
|
|
<strong>身份证正面</strong>
|
|
<em>点击上传</em>
|
|
</button>
|
|
<button class="apply-upload-card" type="button" onclick="triggerUpload('uploadBack')">
|
|
<span class="apply-upload-plus" id="idCardBackPlus">+</span>
|
|
<img class="apply-upload-preview" id="idCardBackPreview" alt="身份证反面" />
|
|
<strong>身份证反面</strong>
|
|
<em>点击上传</em>
|
|
</button>
|
|
</div>
|
|
|
|
<input
|
|
class="apply-file-input"
|
|
type="file"
|
|
id="uploadFront"
|
|
accept="image/png,image/jpeg"
|
|
onchange="handleFileUpload(this, 'front')"
|
|
/>
|
|
<input
|
|
class="apply-file-input"
|
|
type="file"
|
|
id="uploadBack"
|
|
accept="image/png,image/jpeg"
|
|
onchange="handleFileUpload(this, 'back')"
|
|
/>
|
|
|
|
<div class="apply-section-title apply-intro-title">
|
|
<span></span>
|
|
个人简介
|
|
</div>
|
|
<textarea
|
|
class="apply-intro-textarea"
|
|
id="introTextarea"
|
|
placeholder="请输入个人简介"
|
|
oninput="updateIntro(this)"
|
|
></textarea>
|
|
<div class="apply-intro-count">
|
|
<span id="introCount">0</span> / <span id="introMinCount">80</span> 字（最低）
|
|
</div>
|
|
|
|
<button class="apply-submit" id="applyBtn" type="button" onclick="submitApply()">提交申请</button>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="site-footer__inner">
|
|
<img src="../images/home-logo.png" alt="彩先知" class="site-footer__logo" />
|
|
<p id="copyright-info">彩先知以开奖数据、免费文章、资讯推荐为核心</p>
|
|
<div class="site-footer__meta">
|
|
<a id="beian" href="https://beian.miit.gov.cn/" target="_blank">工信部备案号</a>
|
|
<span id="additional-info">本站仅供数据分析参考</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<button class="gotop" id="backTop" type="button" onclick="window.scrollTo({ top: 0, behavior: 'smooth' })">↑</button>
|
|
|
|
<script>
|
|
var updateData = {
|
|
idCardFrontId: "",
|
|
idCardBackId: "",
|
|
intro: "",
|
|
};
|
|
var expertIntroMinLength = 80;
|
|
|
|
layui.use(["layer", "jquery"], function () {
|
|
var $ = layui.$;
|
|
|
|
CommonUtil.loadPageConfig({ ads: false, links: false });
|
|
renderLoginState();
|
|
renderNav();
|
|
loadExpertApplyConfig();
|
|
CommonUtil.requireAuth(function () {
|
|
loadUserDetail();
|
|
});
|
|
|
|
$(window).on("scroll", function () {
|
|
$("#backTop").toggleClass("is-visible", $(window).scrollTop() > 320);
|
|
});
|
|
|
|
function renderLoginState() {
|
|
var token = CommonUtil.getAuthToken();
|
|
if (!token) {
|
|
$("#notLoggedInBox").show();
|
|
$("#loggedInBox").hide();
|
|
return;
|
|
}
|
|
$("#notLoggedInBox").hide();
|
|
$("#loggedInBox").css("display", "flex");
|
|
CommonUtil.getCurrentUserDetail(function (data) {
|
|
if (!data) return;
|
|
$("#userName").text(data.nickName || data.username || "用户");
|
|
$("#userLevel").text(CommonUtil.getUserLevelText ? CommonUtil.getUserLevelText(data) : "会员");
|
|
if (data.avatar) $("#userAvatar").attr("src", data.avatar);
|
|
});
|
|
}
|
|
|
|
function renderNav() {
|
|
ApiClient.post("/api/web/menu/getFormatList", {}).then(function (res) {
|
|
if (res.code !== 0 && res.code !== 200) return;
|
|
var list = ApiClient.asArray(ApiClient.pickData(res, []));
|
|
var $nav = $("#navLotteryItems");
|
|
$nav.find(".topbar__nav-link").not(":first").remove();
|
|
$.each(list, function (i, item) {
|
|
var code = item.suoxie || item.code || item.id || "";
|
|
var name = item.name || item.menuName || "";
|
|
if (!code || !name) return;
|
|
$nav.append(
|
|
'<a href="cai.html?id=' +
|
|
encodeURIComponent(code) +
|
|
'" class="topbar__nav-link">' +
|
|
safeText(name) +
|
|
"</a>"
|
|
);
|
|
});
|
|
});
|
|
}
|
|
|
|
function loadUserDetail() {
|
|
CommonUtil.getCurrentUserDetail(function (data) {
|
|
if (!data) return;
|
|
$("#currentUsername").text(data.nickName || data.username || data.phoneNumber || "用户");
|
|
var isExpert =
|
|
data.expert === true ||
|
|
data.regularExpert === true ||
|
|
data.isExpert === 1 ||
|
|
data.isExpert === "1";
|
|
if (isExpert) {
|
|
$("#applyBtn").text("已申请").prop("disabled", true);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
function safeText(value) {
|
|
return CommonUtil.escapeHtml ? CommonUtil.escapeHtml(value) : String(value || "");
|
|
}
|
|
|
|
function isApiSuccess(res) {
|
|
return res && (res.code === 0 || res.code === 200);
|
|
}
|
|
|
|
function firstValue(source, keys, fallback) {
|
|
for (var i = 0; i < keys.length; i += 1) {
|
|
var key = keys[i];
|
|
if (source && source[key] !== undefined && source[key] !== null && source[key] !== "") {
|
|
return source[key];
|
|
}
|
|
}
|
|
return fallback === undefined ? "" : fallback;
|
|
}
|
|
|
|
function loadExpertApplyConfig() {
|
|
ApiClient.get(ApiClient.API.expertConfig)
|
|
.then(function (res) {
|
|
var data = ApiClient.pickData(res, {}) || {};
|
|
var minLength = Number(
|
|
firstValue(
|
|
data,
|
|
["bioMinLength", "introMinLength", "minBioLength", "minIntroLength", "bio_min_length"],
|
|
80
|
|
)
|
|
);
|
|
if (Number.isFinite(minLength) && minLength > 0) {
|
|
expertIntroMinLength = minLength;
|
|
}
|
|
})
|
|
.catch(function () {})
|
|
.finally(function () {
|
|
$("#introMinCount").text(expertIntroMinLength);
|
|
$("#introTextarea").attr("placeholder", "请输入个人简介（不低于" + expertIntroMinLength + "字）");
|
|
});
|
|
}
|
|
|
|
window.triggerUpload = function (inputId) {
|
|
var input = document.getElementById(inputId);
|
|
if (input) input.click();
|
|
};
|
|
|
|
function getUploadFileId(res) {
|
|
var data = ApiClient.pickData(res, null);
|
|
if (data === null || data === undefined || data === "") return "";
|
|
if (typeof data === "string" || typeof data === "number") return String(data);
|
|
return String(
|
|
firstValue(
|
|
data,
|
|
["objectId", "fileId", "id", "ossId", "resourceId", "attachmentId", "file_id"],
|
|
""
|
|
)
|
|
);
|
|
}
|
|
|
|
function getUploadFileUrl(res, file) {
|
|
var data = ApiClient.pickData(res, null);
|
|
if (data && typeof data === "object") {
|
|
return firstValue(data, ["url", "fileUrl", "fullUrl", "previewUrl"], "");
|
|
}
|
|
return URL.createObjectURL(file);
|
|
}
|
|
|
|
window.handleFileUpload = function (input, type) {
|
|
var file = input.files && input.files[0];
|
|
if (!file) return;
|
|
if (!/^image\//.test(file.type || "")) {
|
|
layui.layer.msg("请选择图片文件", { icon: 2 });
|
|
input.value = "";
|
|
return;
|
|
}
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
layui.layer.msg("文件大小不能超过5MB", { icon: 2 });
|
|
input.value = "";
|
|
return;
|
|
}
|
|
|
|
var formData = new FormData();
|
|
formData.append("file", file);
|
|
var uploadUrl =
|
|
type === "front" ? ApiClient.API.expertUploadIdCardFront : ApiClient.API.expertUploadIdCardBack;
|
|
var plusId = type === "front" ? "idCardFrontPlus" : "idCardBackPlus";
|
|
var previewId = type === "front" ? "idCardFrontPreview" : "idCardBackPreview";
|
|
|
|
ApiClient.post(uploadUrl, formData)
|
|
.then(function (res) {
|
|
if (!isApiSuccess(res)) {
|
|
layui.layer.msg(res.msg || "上传失败", { icon: 2 });
|
|
return;
|
|
}
|
|
var fileId = getUploadFileId(res);
|
|
if (!fileId) {
|
|
layui.layer.msg("上传返回缺少文件编号", { icon: 2 });
|
|
return;
|
|
}
|
|
if (type === "front") updateData.idCardFrontId = fileId;
|
|
else updateData.idCardBackId = fileId;
|
|
|
|
$("#" + plusId).hide();
|
|
$("#" + previewId).attr("src", getUploadFileUrl(res, file)).show();
|
|
layui.layer.msg("上传成功", { icon: 1, time: 1000 });
|
|
})
|
|
.catch(function () {
|
|
layui.layer.msg("上传失败，请稍后重试", { icon: 2 });
|
|
})
|
|
.finally(function () {
|
|
input.value = "";
|
|
});
|
|
};
|
|
|
|
window.updateIntro = function (textarea) {
|
|
updateData.intro = textarea.value;
|
|
$("#introCount").text(textarea.value.length);
|
|
};
|
|
|
|
window.submitApply = function () {
|
|
CommonUtil.requireAuth(function () {
|
|
if (!updateData.intro || updateData.intro.trim().length < expertIntroMinLength) {
|
|
layui.layer.msg("个人简介不能低于" + expertIntroMinLength + "字", { icon: 2 });
|
|
return;
|
|
}
|
|
if (!updateData.idCardFrontId) {
|
|
layui.layer.msg("请上传身份证正面", { icon: 2 });
|
|
return;
|
|
}
|
|
if (!updateData.idCardBackId) {
|
|
layui.layer.msg("请上传身份证反面", { icon: 2 });
|
|
return;
|
|
}
|
|
|
|
var btn = document.getElementById("applyBtn");
|
|
btn.textContent = "申请中...";
|
|
btn.disabled = true;
|
|
|
|
ApiClient.post(ApiClient.API.expertApply, {
|
|
bio: updateData.intro.trim(),
|
|
idCardFrontImage: updateData.idCardFrontId,
|
|
idCardBackImage: updateData.idCardBackId,
|
|
})
|
|
.then(function (res) {
|
|
if (isApiSuccess(res)) {
|
|
layui.layer.msg(
|
|
"资料上传成功，请等待审核通过",
|
|
{ icon: 1, time: 1800 },
|
|
function () {
|
|
window.location.href = "usercenter.html";
|
|
}
|
|
);
|
|
} else {
|
|
layui.layer.msg(res.msg || "申请失败", { icon: 2 });
|
|
btn.textContent = "提交申请";
|
|
btn.disabled = false;
|
|
}
|
|
})
|
|
.catch(function () {
|
|
layui.layer.msg("网络错误，请稍后重试", { icon: 2 });
|
|
btn.textContent = "提交申请";
|
|
btn.disabled = false;
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|