@中文描述: 绑定错误提示 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 绑定错误提示 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 6c0fcc3 commit d38a1858d16ae345d7c25fcded9bc1c514961056 ganyi authored 4 days ago

Showing 1 changed file

Ignore Space Show notes View project/hivuiLogin/wechat/wxbind.html
<!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("绑定失败, " + (result.msg \|\| "用户名或密码不正确")); } } 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> <!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>

Ignore Space Show notes View

project/hivuiLogin/wechat/wxbind.html

<!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">
          
          <input
            type="text"
            class="form-input"
            id="userId"
            placeholder="请输入工号"
          />
        </div>
        <div class="form-item">
          
          <input
            type="password"
            class="form-input"
            id="password"
            placeholder="请输入登录密码"
          />
        </div>
        <button class="bind-btn" id="bindBtn">确认绑定</button>
      </div>
    </div>

// 获取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("绑定失败, " + (result.msg || "用户名或密码不正确"));
          }
        } 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>