<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>微信账号绑定</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
background-color: #fff;
border-radius: 12px;
padding: 25px 20px;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); */
}
/* 绑定信息展示区域 */
.bind-info-wrap {
margin-bottom: 30px;
}
.title {
font-size: 18px;
color: #333;
margin-bottom: 15px;
font-weight: 600;
text-align: center;
}
.bind-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border: 1px solid #e8e8e8;
border-radius: 8px;
margin-bottom: 10px;
}
.bind-content {
font-size: 16px;
color: #666;
}
.bind-content .account {
color: #1a73e8;
font-weight: 500;
}
.unbind-btn {
padding: 8px 16px;
background-color: #ff4d4f;
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
.unbind-btn:hover {
background-color: #ff3838;
}
.unbind-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.no-bind-tip {
font-size: 15px;
color: #999;
padding: 15px;
text-align: center;
border: 1px dashed #e8e8e8;
border-radius: 8px;
}
/* 绑定表单区域 */
.bind-form-wrap {
margin-top: 30px;
}
.form-item {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 15px;
color: #333;
margin-bottom: 8px;
}
.form-input {
width: 100%;
height: 48px;
padding: 0 15px;
border: 1px solid #e8e8e8;
border-radius: 8px;
font-size: 16px;
color: #333;
outline: none;
transition: border-color 0.2s;
}
.form-input:focus {
border-color: #1a73e8;
}
.bind-btn {
width: 100%;
height: 50px;
background-color: #1a73e8;
color: #fff;
border: none;
border-radius: 8px;
font-size: 17px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
margin-top: 10px;
}
.bind-btn:hover {
background-color: #0d5bcc;
}
.bind-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* 提示框样式 */
.tip-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px 25px;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 8px;
font-size: 14px;
z-index: 999;
display: none;
}
/* 加载提示 */
.loading {
text-align: center;
padding: 20px;
font-size: 16px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<!-- 绑定表单区域 -->
<div class="bind-form-wrap">
<h2 class="title">账号绑定</h2>
<div class="form-item">
<!-- <label class="form-label" for="userId">绑定账号</label> -->
<input
type="text"
class="form-input"
id="userId"
placeholder="请输入工号"
/>
</div>
<div class="form-item">
<!-- <label class="form-label" for="password">登录密码</label> -->
<input
type="password"
class="form-input"
id="password"
placeholder="请输入登录密码"
/>
</div>
<button class="bind-btn" id="bindBtn">确认绑定</button>
</div>
</div>
<div class="tip-modal" id="tipModal"></div>
<script src="./crypto-js.min.js"></script>
<script>
// var pn = "fdszh/0000221";
var pn = "${projectNameUtil.projectName()}/${projectNameUtil.devGroup()}";
const CONFIG = {
pn: pn,
getBindInfoUrl: '/wx-mp/get-bind-info?pn=' + pn,
bindUrl: '/wx-mp/bind-info?pn=' + pn,
unbindUrl: '/wx-mp/unbind-info?pn=' + pn,
appId: "wx95a188d6589eeca5",
redirectUri: encodeURIComponent(
window.location.origin + window.location.pathname
), // 当前页面URL，需要进行URL编码
};
// 获取URL参数的函数
function getUrlParameter(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
function encryptPasswordToMD5(password) {
if (!password || typeof password !== "string") {
throw new Error("请传入有效的明文密码");
}
// 调用crypto-js的MD5方法进行加密，toString()转为32位小写十六进制字符串
const md5Result = CryptoJS.MD5(password).toString();
return md5Result;
}
// 跳转到微信授权页面
function redirectToWechatAuth() {
// 构造微信授权URL
const authUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + CONFIG.appId + '&redirect_uri=' + CONFIG.redirectUri + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
// 跳转到授权页面
window.location.href = authUrl;
}
// 页面加载完成后初始化
window.onload = async function () {
// 检查URL中是否有code参数
const code = getUrlParameter("code");
// 如果URL中没有code参数，则显示"微信授权中.."而非立即跳转
if (!code) {
// 构造微信授权URL并跳转
const authUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + CONFIG.appId + '&redirect_uri=' + CONFIG.redirectUri + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
window.location.href = authUrl;
return; // 停止后续执行
}
CONFIG.authCode = code;
// 1. 查询并渲染绑定信息
await getBindInfo();
// 2. 绑定"确认绑定"按钮点击事件
document
.getElementById("bindBtn")
.addEventListener("click", handleBind);
// 3. 绑定"解绑"按钮点击事件（动态渲染后通过事件委托）
// document
// .getElementById("bindInfoContainer")
// .addEventListener("click", function (e) {
// if (e.target.classList.contains("unbind-btn")) {
// handleUnbind(e.target);
// }
// });
};
/**
* 查询绑定信息并渲染页面
*/
async function getBindInfo() {
// try {
// // 使用URL中的code参数
// const queryUrl = `${CONFIG.getBindInfoUrl}&code=${CONFIG.authCode}`;
// const response = await fetch(queryUrl, {
// method: "GET",
// headers: {
// "Content-Type": "application/json;charset=utf-8",
// },
// });
// const result = await response.json();
// const container = document.getElementById("bindInfoContainer");
// // 清空容器
// container.innerHTML = "";
// // 处理接口返回结果（假设接口返回成功且有绑定信息时，包含userId字段）
// if (
// response.ok &&
// result.status === 200 &&
// result.dataPack &&
// result.dataPack.userId
// ) {
// // 渲染已绑定状态
// container.innerHTML = `
// <div class="bind-card">
// <div class="bind-content">
// 已绑定账号：<span class="account">${result.dataPack.userName}</span>
// </div>
// <button class="unbind-btn" data-code="${CONFIG.authCode}">
// 解绑
// </button>
// </div>
// `;
// } else {
// // 渲染未绑定状态
// container.innerHTML = `<div class="no-bind-tip">暂无绑定账号</div>`;
// }
// } catch (error) {
// console.error("查询绑定信息失败：", error);
// showTip("查询绑定信息失败，请稍后重试");
// const container = document.getElementById("bindInfoContainer");
// container.innerHTML = `<div class="no-bind-tip">查询失败，暂无绑定信息</div>`;
// }
}
/**
* 处理账号绑定逻辑
*/
async function handleBind() {
const userId = document.getElementById("userId").value.trim();
const pwd = document.getElementById("password").value.trim();
const bindBtn = document.getElementById("bindBtn");
// 表单验证
if (!userId) {
showTip("请输入工号");
return;
}
if (!pwd) {
showTip("请输入登录密码");
return;
}
// 禁用按钮防止重复提交
bindBtn.disabled = true;
bindBtn.innerText = "绑定中...";
try {
// 构造请求参数
const requestData = {
code: CONFIG.authCode, // 使用从URL获取的微信授权code
userId: userId,
password: encryptPasswordToMD5(pwd),
};
// alert(JSON.stringify(requestData));
const response = await fetch(CONFIG.bindUrl, {
method: "POST",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify(requestData),
});
const result = await response.json();
// 处理绑定结果
if (response.ok && result.status === 200) {
showTip("绑定成功！");
// 重置表单
document.getElementById("userId").value = "";
document.getElementById("password").value = "";
// 重新查询绑定信息并渲染
setTimeout(async () => {
// await getBindInfo();
window.location.href = `./wxbinded.html`;
}, 500);
} else {
showTip(`绑定失败`);
}
} catch (error) {
console.error("绑定账号失败：", error);
showTip("绑定失败，请检查网络或稍后重试");
} finally {
// 恢复按钮状态
bindBtn.disabled = false;
bindBtn.innerText = "确认绑定";
}
}
/**
* 处理账号解绑逻辑
* @param {HTMLElement} btn 解绑按钮元素
*/
async function handleUnbind(btn) {
// 确认解绑
if (
!confirm(
"确定要解绑当前账号吗？解绑后将需要重新绑定才能使用相关功能。"
)
) {
return;
}
const code = btn.getAttribute("data-code");
// 禁用按钮防止重复提交
btn.disabled = true;
btn.innerText = "解绑中...";
try {
// 构造请求参数
const requestData = {
code: code,
};
const response = await fetch(CONFIG.unbindUrl, {
method: "POST",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
body: JSON.stringify(requestData),
});
const result = await response.json();
// 处理解绑结果
if (response.ok && result.status === 200) {
showTip("解绑成功！");
// 重新查询绑定信息并渲染
setTimeout(async () => {
await getBindInfo();
}, 1000);
} else {
showTip(`解绑失败`);
}
} catch (error) {
console.error("解绑账号失败：", error);
showTip("解绑失败，请检查网络或稍后重试");
} finally {
// 恢复按钮状态
btn.disabled = false;
btn.innerText = "解绑";
}
}
/**
* 显示全局提示框
* @param {string} text 提示文本
* @param {number} duration 提示显示时长（默认2000ms）
*/
function showTip(text, duration = 2000) {
const tipModal = document.getElementById("tipModal");
tipModal.innerText = text;
tipModal.style.display = "block";
// 定时隐藏提示框
setTimeout(() => {
tipModal.style.display = "none";
}, duration);
}
</script>
</body>
</html>
GitBucket
4.6.0