优化:设置弹窗提示改为百家乐内联卡片风格,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;">
|
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
||||||
<input id="set-new-pwd2" type="password" placeholder="确认新密码"
|
<input id="set-new-pwd2" type="password" placeholder="确认新密码"
|
||||||
style="padding:6px 8px; border:1px solid #ccc; border-radius:4px; font-size:12px;">
|
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()"
|
<button onclick="savePassword()"
|
||||||
style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
|
style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
|
||||||
font-size:12px; cursor:pointer;">确定修改密码</button>
|
font-size:12px; cursor:pointer;">确定修改密码</button>
|
||||||
@@ -157,6 +161,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</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()"
|
<button onclick="saveSettings()"
|
||||||
style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
|
style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
|
||||||
@@ -172,6 +182,41 @@
|
|||||||
|
|
||||||
{{-- ═══════════ 工具条相关 JS 函数 ═══════════ --}}
|
{{-- ═══════════ 工具条相关 JS 函数 ═══════════ --}}
|
||||||
<script>
|
<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)
|
* 保存密码(调用修改密码 API)
|
||||||
*/
|
*/
|
||||||
@@ -180,15 +225,15 @@
|
|||||||
const newPwd = document.getElementById('set-new-pwd').value;
|
const newPwd = document.getElementById('set-new-pwd').value;
|
||||||
const newPwd2 = document.getElementById('set-new-pwd2').value;
|
const newPwd2 = document.getElementById('set-new-pwd2').value;
|
||||||
if (!oldPwd || !newPwd) {
|
if (!oldPwd || !newPwd) {
|
||||||
window.chatDialog.alert('请填写旧密码和新密码', '提示', '#d97706');
|
showInlineMsg('pwd-inline-msg', '⚠️ 请填写旧密码和新密码', false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (newPwd.length < 6) {
|
if (newPwd.length < 6) {
|
||||||
window.chatDialog.alert('新密码最少6位!', '提示', '#d97706');
|
showInlineMsg('pwd-inline-msg', '⚠️ 新密码最少6位!', false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (newPwd !== newPwd2) {
|
if (newPwd !== newPwd2) {
|
||||||
window.chatDialog.alert('两次输入的新密码不一致!', '提示', '#d97706');
|
showInlineMsg('pwd-inline-msg', '⚠️ 两次输入的新密码不一致!', false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -208,15 +253,15 @@
|
|||||||
});
|
});
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
if (res.ok && data.status === 'success') {
|
if (res.ok && data.status === 'success') {
|
||||||
window.chatDialog.alert('密码修改成功!', '修改成功', '#16a34a');
|
showInlineMsg('pwd-inline-msg', '🔒 密码修改成功!', true);
|
||||||
document.getElementById('set-old-pwd').value = '';
|
document.getElementById('set-old-pwd').value = '';
|
||||||
document.getElementById('set-new-pwd').value = '';
|
document.getElementById('set-new-pwd').value = '';
|
||||||
document.getElementById('set-new-pwd2').value = '';
|
document.getElementById('set-new-pwd2').value = '';
|
||||||
} else {
|
} else {
|
||||||
window.chatDialog.alert('修改失败:' + (data.message || '请输入正确的旧密码'), '修改失败', '#dc2626');
|
showInlineMsg('pwd-inline-msg', '❌ ' + (data.message || '请输入正确的旧密码'), false);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
window.chatDialog.alert('网络异常,请稍后重试', '错误', '#6b7280');
|
showInlineMsg('pwd-inline-msg', '🌐 网络异常,请稍后重试', false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -247,12 +292,12 @@
|
|||||||
});
|
});
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
if (res.ok && data.status === 'success') {
|
if (res.ok && data.status === 'success') {
|
||||||
window.chatDialog.alert('资料保存成功!', '保存成功', '#16a34a');
|
showInlineMsg('settings-inline-msg', '✅ 资料保存成功!', true);
|
||||||
} else {
|
} else {
|
||||||
window.chatDialog.alert('保存失败:' + (data.message || '输入有误'), '保存失败', '#dc2626');
|
showInlineMsg('settings-inline-msg', '❌ ' + (data.message || '输入有误'), false);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
window.chatDialog.alert('网络异常,请稍后重试', '错误', '#6b7280');
|
showInlineMsg('settings-inline-msg', '🌐 网络异常,请稍后重试', false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user