401 lines
17 KiB
HTML
401 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>个人中心</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
|
||
<style>
|
||
:root {
|
||
--bg-body: #f8fafc;
|
||
--primary: #0f172a;
|
||
--accent: #3b82f6;
|
||
}
|
||
body {
|
||
background: var(--bg-body);
|
||
padding-bottom: 90px;
|
||
font-family: -apple-system, sans-serif;
|
||
color: #334155;
|
||
}
|
||
|
||
/* 头部展示 */
|
||
.profile-card {
|
||
background: #fff; padding: 30px 20px; margin-bottom: 16px;
|
||
display: flex; flex-direction: column; align-items: center; text-align: center;
|
||
}
|
||
.avatar-placeholder {
|
||
width: 80px; height: 80px; border-radius: 50%; background: #f1f5f9; color: #cbd5e1;
|
||
font-size: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
|
||
}
|
||
.user-name-disp { font-size: 20px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
|
||
.user-phone-disp { font-size: 14px; color: #64748b; }
|
||
.btn-edit-profile {
|
||
margin-top: 16px; font-size: 12px; padding: 6px 16px; border-radius: 20px;
|
||
border: 1px solid #e2e8f0; background: transparent; color: #475569;
|
||
}
|
||
|
||
/* 菜单组 */
|
||
.menu-group { background: #fff; padding: 0 20px; margin-bottom: 16px; }
|
||
.menu-item {
|
||
padding: 16px 0; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center;
|
||
color: var(--primary); font-size: 15px; cursor: pointer; text-decoration: none;
|
||
}
|
||
.menu-item:last-child { border-bottom: none; }
|
||
.menu-icon { margin-right: 12px; font-size: 18px; color: #94a3b8; }
|
||
.menu-arrow { margin-left: auto; color: #cbd5e1; font-size: 14px; }
|
||
|
||
/* 模态框扁平化 */
|
||
.modal-content { border-radius: 16px; border: none; }
|
||
.modal-header { border-bottom: 1px solid #f1f5f9; }
|
||
|
||
/* 表单输入 */
|
||
.flat-input {
|
||
width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid #e2e8f0;
|
||
outline: none; transition: border-color 0.2s;
|
||
}
|
||
.flat-input:focus { border-color: var(--primary); }
|
||
.flat-input[readonly] { color: #94a3b8; border-bottom-style: dashed; }
|
||
|
||
.btn-black {
|
||
background: var(--primary); color: #fff; border: none; border-radius: 8px;
|
||
padding: 10px 20px; font-size: 14px; font-weight: 600; width: 100%;
|
||
}
|
||
|
||
/* 地址项 */
|
||
.addr-item {
|
||
border: 1px solid #f1f5f9; border-radius: 12px; padding: 16px; margin-bottom: 12px;
|
||
background: #fff; position: relative;
|
||
}
|
||
.addr-main { font-weight: 600; color: var(--primary); font-size: 15px; margin-bottom: 4px; }
|
||
.addr-sub { font-size: 13px; color: #64748b; }
|
||
.addr-tag { font-size: 10px; padding: 2px 6px; background: var(--primary); color: #fff; border-radius: 4px; margin-left: 8px; }
|
||
.addr-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f8fafc; }
|
||
.act-btn { font-size: 12px; color: #64748b; border: none; background: none; padding: 0; }
|
||
|
||
/* 底部导航 */
|
||
.mobile-tabbar {
|
||
position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
|
||
padding: 8px 0 20px; display: flex; border-top: 1px solid #f1f5f9; z-index: 99;
|
||
}
|
||
.tab-item { flex: 1; text-align: center; color: #94a3b8; text-decoration: none; font-size: 10px; }
|
||
.tab-item.active { color: var(--accent); }
|
||
.tab-item i { display: block; font-size: 24px; margin-bottom: 2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 头部展示 -->
|
||
<div class="profile-card">
|
||
<div class="avatar-placeholder"><i class="bi bi-person"></i></div>
|
||
<div class="user-name-disp" id="dispName">--</div>
|
||
<div class="user-phone-disp" id="dispPhone">--</div>
|
||
<button class="btn-edit-profile" onclick="openProfileModal()">编辑资料</button>
|
||
</div>
|
||
|
||
<!-- 菜单 -->
|
||
<div class="menu-group">
|
||
<div class="menu-item" onclick="openAddressModalList()">
|
||
<i class="bi bi-geo-alt menu-icon"></i>
|
||
<span>地址管理</span>
|
||
<i class="bi bi-chevron-right menu-arrow"></i>
|
||
</div>
|
||
<a href="/orders.html" class="menu-item">
|
||
<i class="bi bi-receipt menu-icon"></i>
|
||
<span>我的订单</span>
|
||
<i class="bi bi-chevron-right menu-arrow"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="px-4 mt-4">
|
||
<button class="btn btn-outline-danger w-100 border-0 bg-white py-3" onclick="logout()">退出登录</button>
|
||
</div>
|
||
|
||
<!-- 编辑资料模态框 -->
|
||
<div class="modal fade" id="profileModal" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title fw-bold">编辑资料</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="profileForm">
|
||
<div class="mb-3">
|
||
<label class="small text-muted">用户名</label>
|
||
<input type="text" class="flat-input" id="username" readonly>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="small text-muted">姓名</label>
|
||
<input type="text" class="flat-input" id="name" placeholder="设置昵称">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="small text-muted">手机号</label>
|
||
<input type="tel" class="flat-input" id="phone" placeholder="绑定手机">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="small text-muted">邮箱</label>
|
||
<input type="email" class="flat-input" id="email" placeholder="绑定邮箱">
|
||
</div>
|
||
<button type="submit" class="btn-black mt-3">保存修改</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地址列表模态框 (简单起见，用全屏 Modal 或普通 Modal 模拟新页面) -->
|
||
<div class="modal fade" id="addressListModal" tabindex="-1">
|
||
<div class="modal-dialog modal-fullscreen-sm-down modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title fw-bold">我的地址</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body bg-light">
|
||
<div id="addressListContent"></div>
|
||
<button class="btn-black mt-3" onclick="openAddressEditModal()">+ 新增地址</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地址编辑模态框 -->
|
||
<div class="modal fade" id="addressEditModal" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title fw-bold" id="addrModalTitle">新增地址</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="addressForm">
|
||
<input type="hidden" id="addrId">
|
||
<div class="mb-3">
|
||
<input type="text" class="flat-input" id="recipient" placeholder="收货人" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<input type="tel" class="flat-input" id="addressPhone" placeholder="联系电话" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<textarea class="flat-input" id="address" rows="2" placeholder="详细地址" required></textarea>
|
||
</div>
|
||
<div class="form-check mt-3">
|
||
<input class="form-check-input" type="checkbox" id="isDefault">
|
||
<label class="form-check-label small text-muted" for="isDefault">设为默认</label>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer border-0">
|
||
<button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-dark" onclick="saveAddress()">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部导航 -->
|
||
<div class="mobile-tabbar">
|
||
<a href="/index.html" class="tab-item"><i class="bi bi-cup-hot"></i>点餐</a>
|
||
<a href="/cart.html" class="tab-item"><i class="bi bi-bag"></i>购物袋</a>
|
||
<a href="/orders.html" class="tab-item"><i class="bi bi-receipt"></i>订单</a>
|
||
<a href="/profile.html" class="tab-item active"><i class="bi bi-person-fill"></i>我的</a>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="/static/js/custom-modal.js"></script>
|
||
<script>
|
||
// Init
|
||
loadProfile();
|
||
|
||
async function loadProfile() {
|
||
try {
|
||
const res = await fetch('/profile', { credentials: 'include' });
|
||
const data = await res.json();
|
||
if (data.code === 200) {
|
||
const u = data.data;
|
||
// 展示
|
||
document.getElementById('dispName').textContent = u.name || u.username;
|
||
document.getElementById('dispPhone').textContent = u.phone || u.email || '未绑定手机';
|
||
|
||
// 填充表单
|
||
document.getElementById('username').value = u.username || '';
|
||
document.getElementById('name').value = u.name || '';
|
||
document.getElementById('phone').value = u.phone || '';
|
||
document.getElementById('email').value = u.email || '';
|
||
} else if (data.message?.includes('登录')) {
|
||
location.href = '/login.html';
|
||
}
|
||
} catch (e) { console.error(e); }
|
||
}
|
||
|
||
function openProfileModal() {
|
||
// 使用自定义模态框
|
||
const modalContent = document.getElementById('profileForm').outerHTML;
|
||
const modal = new CustomModal({
|
||
title: '编辑资料',
|
||
content: modalContent,
|
||
size: 'medium',
|
||
showFooter: false,
|
||
onClose: () => {
|
||
// 模态框关闭时的处理
|
||
}
|
||
});
|
||
modal.show();
|
||
|
||
// 绑定表单提交事件
|
||
const form = modal.modal.querySelector('#profileForm');
|
||
if (form) {
|
||
form.onsubmit = async (e) => {
|
||
e.preventDefault();
|
||
const btn = form.querySelector('button[type="submit"]');
|
||
const old = btn.textContent;
|
||
btn.textContent = '保存中...'; btn.disabled = true;
|
||
|
||
try {
|
||
const res = await fetch('/profile', {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
name: form.querySelector('#name').value,
|
||
phone: form.querySelector('#phone').value,
|
||
email: form.querySelector('#email').value
|
||
})
|
||
});
|
||
const d = await res.json();
|
||
if(d.code===200) {
|
||
modal.hide();
|
||
loadProfile();
|
||
} else alert(d.message);
|
||
} catch(e) { alert('失败'); }
|
||
btn.textContent = old; btn.disabled = false;
|
||
};
|
||
}
|
||
}
|
||
|
||
document.getElementById('profileForm').onsubmit = async (e) => {
|
||
e.preventDefault();
|
||
const btn = e.target.querySelector('button');
|
||
const old = btn.textContent;
|
||
btn.textContent = '保存中...'; btn.disabled = true;
|
||
|
||
try {
|
||
const res = await fetch('/profile', {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
name: document.getElementById('name').value,
|
||
phone: document.getElementById('phone').value,
|
||
email: document.getElementById('email').value
|
||
})
|
||
});
|
||
const d = await res.json();
|
||
if(d.code===200) {
|
||
// 如果使用自定义模态框，这里已经通过onClose处理
|
||
loadProfile(); // 刷新展示
|
||
} else alert(d.message);
|
||
} catch(e) { alert('失败'); }
|
||
btn.textContent = old; btn.disabled = false;
|
||
};
|
||
|
||
// 地址管理相关
|
||
async function openAddressModalList() {
|
||
const listModal = new bootstrap.Modal(document.getElementById('addressListModal'));
|
||
listModal.show();
|
||
loadAddressesInternal();
|
||
}
|
||
|
||
async function loadAddressesInternal() {
|
||
const box = document.getElementById('addressListContent');
|
||
box.innerHTML = '<div class="text-center py-3 text-muted">加载中...</div>';
|
||
try {
|
||
const res = await fetch('/address', { credentials: 'include' });
|
||
const d = await res.json();
|
||
if (d.code === 200 && d.data?.length) {
|
||
box.innerHTML = d.data.map(a => `
|
||
<div class="addr-item">
|
||
<div class="addr-main">
|
||
${a.contactName||a.recipient} <span class="ms-2 small fw-normal text-muted">${a.contactPhone||a.phone}</span>
|
||
${a.isDefault?'<span class="addr-tag">默认</span>':''}
|
||
</div>
|
||
<div class="addr-sub">${a.address}</div>
|
||
<div class="addr-actions">
|
||
<button class="act-btn" onclick="openAddressEditModal(${a.id})">编辑</button>
|
||
<button class="act-btn text-danger" onclick="deleteAddress(${a.id})">删除</button>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
} else {
|
||
box.innerHTML = '<div class="text-center py-5 text-muted">暂无地址</div>';
|
||
}
|
||
} catch(e) { box.innerHTML = '加载失败'; }
|
||
}
|
||
|
||
async function openAddressEditModal(id = null) {
|
||
// 如果是在列表模态框之上打开，Bootstrap会自动处理层级
|
||
const modal = new bootstrap.Modal(document.getElementById('addressEditModal'));
|
||
document.getElementById('addressForm').reset();
|
||
document.getElementById('addrId').value = '';
|
||
document.getElementById('addrModalTitle').textContent = '新增地址';
|
||
|
||
if (id) {
|
||
document.getElementById('addrModalTitle').textContent = '编辑地址';
|
||
try {
|
||
const res = await fetch('/address', { credentials: 'include' });
|
||
const d = await res.json();
|
||
const addr = d.data.find(a => a.id === id);
|
||
if (addr) {
|
||
document.getElementById('addrId').value = addr.id;
|
||
document.getElementById('recipient').value = addr.contactName || '';
|
||
document.getElementById('addressPhone').value = addr.contactPhone || '';
|
||
document.getElementById('address').value = addr.address || '';
|
||
document.getElementById('isDefault').checked = addr.isDefault === 1;
|
||
}
|
||
} catch(e) {}
|
||
}
|
||
modal.show();
|
||
}
|
||
|
||
async function saveAddress() {
|
||
const id = document.getElementById('addrId').value;
|
||
const payload = {
|
||
contactName: document.getElementById('recipient').value.trim(),
|
||
contactPhone: document.getElementById('addressPhone').value.trim(),
|
||
address: document.getElementById('address').value.trim(),
|
||
isDefault: document.getElementById('isDefault').checked ? 1 : 0
|
||
};
|
||
|
||
// 验证必填字段
|
||
if (!payload.contactName || !payload.contactPhone || !payload.address) {
|
||
alert('请填写完整信息');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch(id ? `/address/${id}` : '/address', {
|
||
method: id ? 'PUT' : 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
credentials: 'include',
|
||
body: JSON.stringify(payload)
|
||
});
|
||
const d = await res.json();
|
||
if(d.code === 200) {
|
||
bootstrap.Modal.getInstance(document.getElementById('addressEditModal')).hide();
|
||
loadAddressesInternal(); // 刷新列表
|
||
} else alert(d.message);
|
||
} catch(e) { alert('保存失败'); }
|
||
}
|
||
|
||
async function deleteAddress(id) {
|
||
if(!confirm('确认删除？')) return;
|
||
await fetch(`/address/${id}`, { method: 'DELETE', credentials: 'include' });
|
||
loadAddressesInternal();
|
||
}
|
||
|
||
function logout() {
|
||
location.href = '/login.html';
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |