484 lines
16 KiB
HTML
484 lines
16 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>收货地址</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 16px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header h1 {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-list {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-item {
|
|||
|
|
padding: 16px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.default-tag {
|
|||
|
|
background: #ff6b35;
|
|||
|
|
color: white;
|
|||
|
|
padding: 2px 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-detail {
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn {
|
|||
|
|
background: none;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn:hover {
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn.primary {
|
|||
|
|
background: #ff6b35;
|
|||
|
|
color: white;
|
|||
|
|
border-color: #ff6b35;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn.primary:hover {
|
|||
|
|
background: #e55a2b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btn:disabled {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-address {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
width: 56px;
|
|||
|
|
height: 56px;
|
|||
|
|
background: #ff6b35;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-address:hover {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading, .error, .empty {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.error {
|
|||
|
|
color: #ff4757;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hidden {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toast {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
color: white;
|
|||
|
|
padding: 12px 24px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.toast.show {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.test-controls {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 10px;
|
|||
|
|
right: 10px;
|
|||
|
|
z-index: 1001;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.test-btn {
|
|||
|
|
background: #007aff;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="header">
|
|||
|
|
<h1>收货地址</h1>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<div id="loading" class="loading">
|
|||
|
|
加载中...
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="error" class="error hidden">
|
|||
|
|
加载失败，请重试
|
|||
|
|
<br><br>
|
|||
|
|
<button class="action-btn" onclick="loadAddresses()">重新加载</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="empty" class="empty hidden">
|
|||
|
|
暂无收货地址
|
|||
|
|
<br><br>
|
|||
|
|
<button class="action-btn primary" onclick="addAddress()">添加地址</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="addressList" class="address-list hidden">
|
|||
|
|
<!-- 地址列表将在这里动态生成 -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="add-address" onclick="addAddress()">+</button>
|
|||
|
|
|
|||
|
|
<div id="toast" class="toast"></div>
|
|||
|
|
|
|||
|
|
<!-- 测试控制按钮 -->
|
|||
|
|
<div class="test-controls">
|
|||
|
|
<button class="test-btn" onclick="generateTestToken()">生成Token</button>
|
|||
|
|
<button class="test-btn" onclick="toggleMock()">切换模式</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 配置
|
|||
|
|
const config = {
|
|||
|
|
apiBase: 'http://127.0.0.1:8080/api/v1',
|
|||
|
|
useMock: false
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 全局变量
|
|||
|
|
let addresses = [];
|
|||
|
|
let isLoading = false;
|
|||
|
|
|
|||
|
|
// 页面加载完成后初始化
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
// 自动设置测试token（如果没有token的话）
|
|||
|
|
if (!getToken()) {
|
|||
|
|
const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX3R5cGUiOiJ1c2VyIiwiaXNzIjoiZGlhbnNoYW5nIiwiZXhwIjoxNzYwMDMzMjg2LCJuYmYiOjE3NjAwMjYwODYsImlhdCI6MTc2MDAyNjA4Nn0.zCPYwDld_WDSwySyj62CWgk9xJnOUhUt3NbTc6kL4Zg';
|
|||
|
|
localStorage.setItem('token', testToken);
|
|||
|
|
console.log('自动设置测试token');
|
|||
|
|
}
|
|||
|
|
loadAddresses();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 显示提示信息
|
|||
|
|
function showToast(message) {
|
|||
|
|
const toast = document.getElementById('toast');
|
|||
|
|
toast.textContent = message;
|
|||
|
|
toast.classList.add('show');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
toast.classList.remove('show');
|
|||
|
|
}, 2000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取存储的token
|
|||
|
|
function getToken() {
|
|||
|
|
return localStorage.getItem('token') || '';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 模拟微信请求
|
|||
|
|
function wxRequest(options) {
|
|||
|
|
return fetch(options.url, {
|
|||
|
|
method: options.method || 'GET',
|
|||
|
|
headers: {
|
|||
|
|
'Authorization': `Bearer ${getToken()}`,
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
...options.header
|
|||
|
|
},
|
|||
|
|
body: options.data ? JSON.stringify(options.data) : undefined
|
|||
|
|
}).then(response => {
|
|||
|
|
return response.json().then(data => ({
|
|||
|
|
statusCode: response.status,
|
|||
|
|
data: data
|
|||
|
|
}));
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载地址列表
|
|||
|
|
async function loadAddresses() {
|
|||
|
|
if (isLoading) return;
|
|||
|
|
|
|||
|
|
isLoading = true;
|
|||
|
|
showLoading();
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
if (config.useMock) {
|
|||
|
|
// 使用模拟数据
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|||
|
|
addresses = [
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
name: '张三',
|
|||
|
|
phone: '13800138000',
|
|||
|
|
provinceName: '北京市',
|
|||
|
|
cityName: '北京市',
|
|||
|
|
districtName: '朝阳区',
|
|||
|
|
detailAddress: '三里屯街道工体北路8号',
|
|||
|
|
isDefault: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
name: '李四',
|
|||
|
|
phone: '13900139000',
|
|||
|
|
provinceName: '上海市',
|
|||
|
|
cityName: '上海市',
|
|||
|
|
districtName: '黄浦区',
|
|||
|
|
detailAddress: '南京东路100号',
|
|||
|
|
isDefault: false
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
displayAddresses();
|
|||
|
|
} else {
|
|||
|
|
// 调用真实API
|
|||
|
|
const res = await wxRequest({
|
|||
|
|
url: `${config.apiBase}/users/addresses`,
|
|||
|
|
method: 'GET'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (res.statusCode === 200 && res.data.code === 200) {
|
|||
|
|
addresses = res.data.data || [];
|
|||
|
|
displayAddresses();
|
|||
|
|
} else {
|
|||
|
|
throw new Error(res.data.message || '获取地址列表失败');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载地址列表失败:', error);
|
|||
|
|
showError();
|
|||
|
|
showToast('加载地址列表失败');
|
|||
|
|
} finally {
|
|||
|
|
isLoading = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示加载状态
|
|||
|
|
function showLoading() {
|
|||
|
|
document.getElementById('loading').classList.remove('hidden');
|
|||
|
|
document.getElementById('error').classList.add('hidden');
|
|||
|
|
document.getElementById('empty').classList.add('hidden');
|
|||
|
|
document.getElementById('addressList').classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示错误状态
|
|||
|
|
function showError() {
|
|||
|
|
document.getElementById('loading').classList.add('hidden');
|
|||
|
|
document.getElementById('error').classList.remove('hidden');
|
|||
|
|
document.getElementById('empty').classList.add('hidden');
|
|||
|
|
document.getElementById('addressList').classList.add('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示地址列表
|
|||
|
|
function displayAddresses() {
|
|||
|
|
const loadingEl = document.getElementById('loading');
|
|||
|
|
const errorEl = document.getElementById('error');
|
|||
|
|
const emptyEl = document.getElementById('empty');
|
|||
|
|
const listEl = document.getElementById('addressList');
|
|||
|
|
|
|||
|
|
loadingEl.classList.add('hidden');
|
|||
|
|
errorEl.classList.add('hidden');
|
|||
|
|
|
|||
|
|
if (addresses.length === 0) {
|
|||
|
|
emptyEl.classList.remove('hidden');
|
|||
|
|
listEl.classList.add('hidden');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
listEl.innerHTML = addresses.map(address => `
|
|||
|
|
<div class="address-item" data-id="${address.id}">
|
|||
|
|
<div class="address-header">
|
|||
|
|
<div class="user-info">
|
|||
|
|
${address.name} ${address.phone}
|
|||
|
|
</div>
|
|||
|
|
${address.isDefault ? '<span class="default-tag">默认</span>' : ''}
|
|||
|
|
</div>
|
|||
|
|
<div class="address-detail">
|
|||
|
|
${address.provinceName}${address.cityName}${address.districtName}${address.detailAddress}
|
|||
|
|
</div>
|
|||
|
|
<div class="address-actions">
|
|||
|
|
<button class="action-btn" onclick="editAddress(${address.id})">编辑</button>
|
|||
|
|
<button class="action-btn" onclick="deleteAddress(${address.id})">删除</button>
|
|||
|
|
${!address.isDefault ? `<button class="action-btn primary" onclick="setDefault(${address.id})">设为默认</button>` : ''}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
`).join('');
|
|||
|
|
|
|||
|
|
emptyEl.classList.add('hidden');
|
|||
|
|
listEl.classList.remove('hidden');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加地址
|
|||
|
|
function addAddress() {
|
|||
|
|
showToast('跳转到添加地址页面');
|
|||
|
|
// 实际应用中这里应该跳转到添加地址页面
|
|||
|
|
// window.location.href = '/pages/user/address/edit/index.html';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 编辑地址
|
|||
|
|
function editAddress(id) {
|
|||
|
|
showToast(`编辑地址 ID: ${id}`);
|
|||
|
|
// 实际应用中这里应该跳转到编辑地址页面
|
|||
|
|
// window.location.href = `/pages/user/address/edit/index.html?id=${id}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除地址
|
|||
|
|
async function deleteAddress(id) {
|
|||
|
|
if (!confirm('确定要删除这个地址吗？')) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const res = await wxRequest({
|
|||
|
|
url: `${config.apiBase}/users/addresses/${id}`,
|
|||
|
|
method: 'DELETE'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (res.statusCode === 200 && res.data.code === 200) {
|
|||
|
|
showToast('删除成功');
|
|||
|
|
// 从本地数组中移除
|
|||
|
|
addresses = addresses.filter(addr => addr.id !== id);
|
|||
|
|
displayAddresses();
|
|||
|
|
} else {
|
|||
|
|
throw new Error(res.data.message || '删除失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('删除地址失败:', error);
|
|||
|
|
showToast('删除失败');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 设为默认地址
|
|||
|
|
async function setDefault(id) {
|
|||
|
|
try {
|
|||
|
|
const res = await wxRequest({
|
|||
|
|
url: `${config.apiBase}/users/addresses/${id}/default`,
|
|||
|
|
method: 'PUT'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (res.statusCode === 200 && res.data.code === 200) {
|
|||
|
|
showToast('设置成功');
|
|||
|
|
// 更新本地数据
|
|||
|
|
addresses.forEach(addr => {
|
|||
|
|
addr.isDefault = addr.id === id;
|
|||
|
|
});
|
|||
|
|
displayAddresses();
|
|||
|
|
} else {
|
|||
|
|
throw new Error(res.data.message || '设置失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('设置默认地址失败:', error);
|
|||
|
|
showToast('设置失败');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 测试功能：生成测试token
|
|||
|
|
function generateTestToken() {
|
|||
|
|
// 使用我们之前测试成功的token
|
|||
|
|
const testToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX3R5cGUiOiJ1c2VyIiwiaXNzIjoiZGlhbnNoYW5nIiwiZXhwIjoxNzYwMDMzMjg2LCJuYmYiOjE3NjAwMjYwODYsImlhdCI6MTc2MDAyNjA4Nn0.zCPYwDld_WDSwySyj62CWgk9xJnOUhUt3NbTc6kL4Zg';
|
|||
|
|
localStorage.setItem('token', testToken);
|
|||
|
|
showToast('测试token已生成，页面将自动刷新');
|
|||
|
|
// 自动刷新页面以加载地址数据
|
|||
|
|
setTimeout(() => {
|
|||
|
|
loadAddresses();
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 切换模拟模式
|
|||
|
|
function toggleMock() {
|
|||
|
|
config.useMock = !config.useMock;
|
|||
|
|
showToast(`已切换到${config.useMock ? '模拟' : '真实API'}模式`);
|
|||
|
|
loadAddresses();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|