优化:设置弹窗提示改为百家乐内联卡片风格,3s 后自动淡出
- 新增 showInlineMsg() 函数:成功显示绿色卡片,失败显示红色卡片,3s 后自动淡出 - 修改密码区增加 #pwd-inline-msg 提示块(校验/成功/失败均在弹窗内显示,不遮挡操作) - 保存资料区增加 #settings-inline-msg 提示块(紧贴保存按钮上方) - 移除 chatDialog.alert() 弹窗交互,全部改为内联状态卡片
This commit is contained in:
@@ -105,6 +105,10 @@
|
||||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||||
<input id="set-new-pwd2" type="password" placeholder="确认新密码"
|
||||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||||
<div id="pwd-inline-msg"
|
||||
style="display:none; border-radius:10px; padding:10px 14px;
|
||||
text-align:center; margin-top:8px; font-size:12px; font-weight:bold;">
|
||||
</div>
|
||||
<button onclick="savePassword()"
|
||||
style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
|
||||
font-size:12px; cursor:pointer;">确定修改密码</button>
|
||||
@@ -157,6 +161,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 内联操作结果提示(仿百家乐已押注卡片风格) --}}
|
||||
<div id="settings-inline-msg"
|
||||
style="display:none; border-radius:10px; padding:10px 14px;
|
||||
text-align:center; margin-bottom:10px; font-size:13px; font-weight:bold;">
|
||||
</div>
|
||||
|
||||
{{-- 保存按钮 --}}
|
||||
<button onclick="saveSettings()"
|
||||
style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
|
||||
@@ -172,6 +182,41 @@
|
||||
|
||||
{{-- ═══════════ 工具条相关 JS 函数 ═══════════ --}}
|
||||
<script>
|
||||
/**
|
||||
* 保存密码(调用修改密码 API)
|
||||
*/
|
||||
/**
|
||||
* 显示内联操作结果提示(仿百家乐「已押注」卡片风格,3s 后自动消失)
|
||||
*
|
||||
* @param {string} elId 目标元素 ID
|
||||
* @param {string} message 提示内容
|
||||
* @param {boolean} success 是否成功(决定颜色)
|
||||
*/
|
||||
function showInlineMsg(elId, message, success) {
|
||||
const el = document.getElementById(elId);
|
||||
if (!el) return;
|
||||
if (success) {
|
||||
el.style.background = '#f0fdf4';
|
||||
el.style.border = '1px solid #86efac';
|
||||
el.style.color = '#16a34a';
|
||||
} else {
|
||||
el.style.background = '#fff5f5';
|
||||
el.style.border = '1px solid #fecaca';
|
||||
el.style.color = '#dc2626';
|
||||
}
|
||||
el.textContent = message;
|
||||
el.style.display = 'block';
|
||||
el.style.opacity = '1';
|
||||
el.style.transition = 'opacity .4s';
|
||||
clearTimeout(el._hideTimer);
|
||||
el._hideTimer = setTimeout(() => {
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
el.style.display = 'none';
|
||||
}, 420);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存密码(调用修改密码 API)
|
||||
*/
|
||||
@@ -180,15 +225,15 @@
|
||||
const newPwd = document.getElementById('set-new-pwd').value;
|
||||
const newPwd2 = document.getElementById('set-new-pwd2').value;
|
||||
if (!oldPwd || !newPwd) {
|
||||
window.chatDialog.alert('请填写旧密码和新密码', '提示', '#d97706');
|
||||
showInlineMsg('pwd-inline-msg', '⚠️ 请填写旧密码和新密码', false);
|
||||
return;
|
||||
}
|
||||
if (newPwd.length < 6) {
|
||||
window.chatDialog.alert('新密码最少6位!', '提示', '#d97706');
|
||||
showInlineMsg('pwd-inline-msg', '⚠️ 新密码最少6位!', false);
|
||||
return;
|
||||
}
|
||||
if (newPwd !== newPwd2) {
|
||||
window.chatDialog.alert('两次输入的新密码不一致!', '提示', '#d97706');
|
||||
showInlineMsg('pwd-inline-msg', '⚠️ 两次输入的新密码不一致!', false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -208,15 +253,15 @@
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok && data.status === 'success') {
|
||||
window.chatDialog.alert('密码修改成功!', '修改成功', '#16a34a');
|
||||
showInlineMsg('pwd-inline-msg', '🔒 密码修改成功!', true);
|
||||
document.getElementById('set-old-pwd').value = '';
|
||||
document.getElementById('set-new-pwd').value = '';
|
||||
document.getElementById('set-new-pwd2').value = '';
|
||||
} else {
|
||||
window.chatDialog.alert('修改失败:' + (data.message || '请输入正确的旧密码'), '修改失败', '#dc2626');
|
||||
showInlineMsg('pwd-inline-msg', '❌ ' + (data.message || '请输入正确的旧密码'), false);
|
||||
}
|
||||
} catch (e) {
|
||||
window.chatDialog.alert('网络异常,请稍后重试', '错误', '#6b7280');
|
||||
showInlineMsg('pwd-inline-msg', '🌐 网络异常,请稍后重试', false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -247,12 +292,12 @@
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok && data.status === 'success') {
|
||||
window.chatDialog.alert('资料保存成功!', '保存成功', '#16a34a');
|
||||
showInlineMsg('settings-inline-msg', '✅ 资料保存成功!', true);
|
||||
} else {
|
||||
window.chatDialog.alert('保存失败:' + (data.message || '输入有误'), '保存失败', '#dc2626');
|
||||
showInlineMsg('settings-inline-msg', '❌ ' + (data.message || '输入有误'), false);
|
||||
}
|
||||
} catch (e) {
|
||||
window.chatDialog.alert('网络异常,请稍后重试', '错误', '#6b7280');
|
||||
showInlineMsg('settings-inline-msg', '🌐 网络异常,请稍后重试', false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user