Initial commit
This commit is contained in:
sjk
484
miniprogram/pages/user/address/list/index.html
Normal file
484
miniprogram/pages/user/address/list/index.html
Normal file
@@ -0,0 +1,484 @@
|
||||
<!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>
|
||||
463
miniprogram/pages/user/address/list/index.js
Normal file
463
miniprogram/pages/user/address/list/index.js
Normal file
@@ -0,0 +1,463 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { fetchDeliveryAddressList, deleteAddress, setDefaultAddress } from '../../../../services/address/fetchAddress';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
import { resolveAddress, rejectAddress } from '../../../../services/address/list';
|
||||
import { getAddressPromise } from '../../../../services/address/edit';
|
||||
|
||||
// 添加日志工具
|
||||
const logger = {
|
||||
info: (module, message, data = {}) => {
|
||||
console.log(`[${new Date().toISOString()}] [INFO] [${module}] ${message}`, data);
|
||||
},
|
||||
debug: (module, message, data = {}) => {
|
||||
console.log(`[${new Date().toISOString()}] [DEBUG] [${module}] ${message}`, data);
|
||||
},
|
||||
error: (module, message, data = {}) => {
|
||||
console.error(`[${new Date().toISOString()}] [ERROR] [${module}] ${message}`, data);
|
||||
},
|
||||
warn: (module, message, data = {}) => {
|
||||
console.warn(`[${new Date().toISOString()}] [WARN] [${module}] ${message}`, data);
|
||||
}
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
addressList: [],
|
||||
deleteID: '',
|
||||
showDeleteConfirm: false,
|
||||
isOrderSure: false,
|
||||
},
|
||||
|
||||
/** 选择模式 */
|
||||
selectMode: false,
|
||||
/** 是否已经选择地址，不置为true的话页面离开时会触发取消选择行为 */
|
||||
hasSelect: false,
|
||||
|
||||
addressUpdated: false, // 标记地址是否被更新
|
||||
|
||||
onLoad(query) {
|
||||
logger.info('ADDRESS_LIST_PAGE', '地址列表页面加载', { query });
|
||||
|
||||
const { selectMode = '', isOrderSure = '', id = '' } = query;
|
||||
this.setData({
|
||||
isOrderSure: !!isOrderSure,
|
||||
id,
|
||||
});
|
||||
this.selectMode = !!selectMode;
|
||||
this.addressUpdated = false; // 重置地址更新标记
|
||||
|
||||
logger.debug('ADDRESS_LIST_PAGE', '页面参数设置完成', {
|
||||
selectMode: this.selectMode,
|
||||
isOrderSure: !!isOrderSure,
|
||||
id
|
||||
});
|
||||
|
||||
this.init();
|
||||
this.waitForNewAddress();
|
||||
},
|
||||
|
||||
init() {
|
||||
logger.info('ADDRESS_LIST_PAGE', '初始化地址列表页面');
|
||||
this.getAddressList();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
logger.info('ADDRESS_LIST_PAGE', '页面显示，刷新地址列表');
|
||||
// 每次页面显示时都重新获取地址列表，确保数据是最新的
|
||||
this.getAddressList();
|
||||
},
|
||||
onUnload() {
|
||||
if (this.selectMode && !this.hasSelect) {
|
||||
logger.info('ADDRESS_LIST_PAGE', '页面卸载，检查是否需要传递更新后的地址');
|
||||
|
||||
// 检查是否有默认地址，如果有则传递给订单确认页面
|
||||
const defaultAddress = this.data.addressList.find(addr => addr.isDefault === 1);
|
||||
if (defaultAddress && this.addressUpdated) {
|
||||
logger.info('ADDRESS_LIST_PAGE', '传递更新后的默认地址给订单确认页面', {
|
||||
addressId: defaultAddress.addressId,
|
||||
name: defaultAddress.name
|
||||
});
|
||||
|
||||
// 将默认地址存储到本地存储，供订单确认页面的onShow方法使用
|
||||
wx.setStorageSync('selectedAddress', defaultAddress);
|
||||
return; // 不调用rejectAddress，让订单确认页面通过onShow处理
|
||||
}
|
||||
|
||||
rejectAddress();
|
||||
}
|
||||
},
|
||||
getAddressList() {
|
||||
logger.info('ADDRESS_LIST_PAGE', '开始获取地址列表');
|
||||
|
||||
const { id } = this.data;
|
||||
fetchDeliveryAddressList().then((addressList) => {
|
||||
logger.info('ADDRESS_LIST_PAGE', '获取地址列表成功', {
|
||||
count: addressList.length,
|
||||
addressIds: addressList.map(addr => addr.id)
|
||||
});
|
||||
|
||||
// 转换API数据格式为前端期望的格式
|
||||
const formattedList = addressList.map((address) => {
|
||||
const formatted = {
|
||||
id: address.id,
|
||||
addressId: address.id,
|
||||
name: address.name,
|
||||
phoneNumber: address.phone,
|
||||
address: `${address.province_name || ''}${address.city_name || ''}${address.district_name || ''}${address.detail_address || ''}`,
|
||||
provinceName: address.province_name,
|
||||
cityName: address.city_name,
|
||||
districtName: address.district_name,
|
||||
detailAddress: address.detail_address,
|
||||
isDefault: address.is_default ? 1 : 0,
|
||||
tag: address.address_tag || '',
|
||||
};
|
||||
|
||||
logger.debug('ADDRESS_LIST_PAGE', '格式化地址数据', {
|
||||
originalId: address.id,
|
||||
formattedId: formatted.id,
|
||||
name: formatted.name,
|
||||
isDefault: formatted.isDefault
|
||||
});
|
||||
|
||||
return formatted;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
addressList: formattedList,
|
||||
});
|
||||
|
||||
logger.info('ADDRESS_LIST_PAGE', '地址列表数据设置完成', {
|
||||
totalCount: formattedList.length,
|
||||
defaultCount: formattedList.filter(addr => addr.isDefault === 1).length
|
||||
});
|
||||
}).catch((err) => {
|
||||
logger.error('ADDRESS_LIST_PAGE', '获取地址列表失败', { error: err.message || err });
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '获取地址列表失败',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
});
|
||||
},
|
||||
getWXAddressHandle() {
|
||||
console.log('[地址列表-微信导入] 开始获取微信地址');
|
||||
|
||||
wx.chooseAddress({
|
||||
success: (res) => {
|
||||
console.log('[地址列表-微信导入] wx.chooseAddress成功回调');
|
||||
console.log('[地址列表-微信导入] 微信返回的原始数据:', res);
|
||||
console.log('[地址列表-微信导入] errMsg:', res.errMsg);
|
||||
|
||||
if (res.errMsg.indexOf('ok') === -1) {
|
||||
console.log('[地址列表-微信导入] errMsg检查失败，显示错误信息');
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: res.errMsg,
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[地址列表-微信导入] errMsg检查通过，开始处理地址数据');
|
||||
|
||||
const { length: len } = this.data.addressList;
|
||||
console.log('[地址列表-微信导入] 当前地址列表长度:', len);
|
||||
|
||||
const newAddress = {
|
||||
name: res.userName,
|
||||
phoneNumber: res.telNumber,
|
||||
address: `${res.provinceName}${res.cityName}${res.countryName}${res.detailInfo}`,
|
||||
isDefault: 0,
|
||||
tag: '微信地址',
|
||||
id: len,
|
||||
};
|
||||
|
||||
console.log('[地址列表-微信导入] 构建的新地址对象:', newAddress);
|
||||
|
||||
this.setData({
|
||||
[`addressList[${len}]`]: newAddress,
|
||||
});
|
||||
|
||||
console.log('[地址列表-微信导入] 地址已添加到列表，新列表长度:', len + 1);
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '添加成功',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
|
||||
console.log('[地址列表-微信导入] 微信地址导入完成');
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[地址列表-微信导入] wx.chooseAddress失败:', err);
|
||||
console.log('[地址列表-微信导入] 失败原因:', err.errMsg);
|
||||
},
|
||||
complete: () => {
|
||||
console.log('[地址列表-微信导入] wx.chooseAddress调用完成');
|
||||
}
|
||||
});
|
||||
},
|
||||
confirmDeleteHandle({ detail }) {
|
||||
const { id } = detail || {};
|
||||
if (id !== undefined) {
|
||||
this.setData({ deleteID: id, showDeleteConfirm: true });
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '地址删除成功',
|
||||
theme: 'success',
|
||||
duration: 1000,
|
||||
});
|
||||
} else {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '需要组件库发新版才能拿到地址ID',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteAddressHandle(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
|
||||
logger.info('ADDRESS_LIST_PAGE', '开始删除地址', { addressId: id });
|
||||
|
||||
// 调用API删除地址
|
||||
deleteAddress(id).then(() => {
|
||||
logger.info('ADDRESS_LIST_PAGE', '删除地址成功', { addressId: id });
|
||||
|
||||
// 删除成功后从列表中移除
|
||||
this.setData({
|
||||
addressList: this.data.addressList.filter((address) => address.id !== id),
|
||||
deleteID: '',
|
||||
showDeleteConfirm: false,
|
||||
});
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '地址删除成功',
|
||||
theme: 'success',
|
||||
duration: 1000,
|
||||
});
|
||||
}).catch((err) => {
|
||||
logger.error('ADDRESS_LIST_PAGE', '删除地址失败', {
|
||||
addressId: id,
|
||||
error: err.message || err
|
||||
});
|
||||
|
||||
console.error('删除地址失败:', err);
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '删除地址失败',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
|
||||
// 关闭确认对话框
|
||||
this.setData({
|
||||
deleteID: '',
|
||||
showDeleteConfirm: false,
|
||||
});
|
||||
});
|
||||
},
|
||||
editAddressHandle({ detail }) {
|
||||
logger.info('ADDRESS_LIST_PAGE', '编辑地址', { addressDetail: detail });
|
||||
|
||||
this.waitForNewAddress();
|
||||
|
||||
const { id } = detail || {};
|
||||
wx.navigateTo({ url: `/pages/user/address/edit/index?id=${id}` });
|
||||
},
|
||||
selectHandle({ detail }) {
|
||||
logger.info('ADDRESS_LIST_PAGE', '选择地址', {
|
||||
selectMode: this.selectMode,
|
||||
addressDetail: detail
|
||||
});
|
||||
|
||||
if (this.selectMode) {
|
||||
this.hasSelect = true;
|
||||
|
||||
// 将选择的地址存储到本地存储中，供订单确认页面使用
|
||||
wx.setStorageSync('selectedAddress', detail);
|
||||
logger.info('ADDRESS_LIST_PAGE', '地址已存储到本地存储', { selectedAddress: detail });
|
||||
|
||||
resolveAddress(detail);
|
||||
wx.navigateBack({ delta: 1 });
|
||||
} else {
|
||||
this.editAddressHandle({ detail });
|
||||
}
|
||||
},
|
||||
createHandle() {
|
||||
logger.info('ADDRESS_LIST_PAGE', '创建新地址');
|
||||
|
||||
this.waitForNewAddress();
|
||||
wx.navigateTo({ url: '/pages/user/address/edit/index' });
|
||||
},
|
||||
|
||||
setDefaultAddressHandle({ detail }) {
|
||||
logger.info('ADDRESS_LIST_PAGE', '设置默认地址', { addressDetail: detail });
|
||||
|
||||
const addressId = parseInt(detail.id || detail.addressId);
|
||||
|
||||
if (!addressId) {
|
||||
logger.error('ADDRESS_LIST_PAGE', '地址ID无效', { detail });
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '地址ID无效',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用设置默认地址API
|
||||
setDefaultAddress(addressId)
|
||||
.then(() => {
|
||||
logger.info('ADDRESS_LIST_PAGE', '设置默认地址成功', { addressId });
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '设置默认地址成功',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
|
||||
// 更新本地地址列表
|
||||
const addressList = this.data.addressList.map(address => ({
|
||||
...address,
|
||||
isDefault: (parseInt(address.id) === addressId || parseInt(address.addressId) === addressId) ? 1 : 0
|
||||
}));
|
||||
|
||||
// 重新排序，默认地址排在前面
|
||||
addressList.sort((prevAddress, nextAddress) => {
|
||||
if (prevAddress.isDefault && !nextAddress.isDefault) {
|
||||
return -1;
|
||||
}
|
||||
if (!prevAddress.isDefault && nextAddress.isDefault) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
addressList: addressList,
|
||||
});
|
||||
|
||||
logger.info('ADDRESS_LIST_PAGE', '地址列表已更新', {
|
||||
totalCount: addressList.length,
|
||||
defaultAddressId: addressId
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
logger.error('ADDRESS_LIST_PAGE', '设置默认地址失败', {
|
||||
addressId,
|
||||
error: err.message || err
|
||||
});
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '设置默认地址失败',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
waitForNewAddress() {
|
||||
logger.debug('ADDRESS_LIST_PAGE', '等待新地址返回');
|
||||
|
||||
getAddressPromise()
|
||||
.then((newAddress) => {
|
||||
logger.info('ADDRESS_LIST_PAGE', '收到新地址数据', {
|
||||
addressId: newAddress.addressId,
|
||||
name: newAddress.name,
|
||||
isEdit: newAddress.isEdit
|
||||
});
|
||||
|
||||
let addressList = [...this.data.addressList];
|
||||
|
||||
newAddress.phoneNumber = newAddress.phone;
|
||||
newAddress.address = `${newAddress.provinceName}${newAddress.cityName}${newAddress.districtName}${newAddress.detailAddress}`;
|
||||
newAddress.tag = newAddress.addressTag;
|
||||
|
||||
if (!newAddress.addressId) {
|
||||
logger.debug('ADDRESS_LIST_PAGE', '添加新地址到列表');
|
||||
|
||||
newAddress.id = `${addressList.length}`;
|
||||
newAddress.addressId = `${addressList.length}`;
|
||||
|
||||
if (newAddress.isDefault === 1) {
|
||||
logger.debug('ADDRESS_LIST_PAGE', '新地址设为默认，清除其他默认地址');
|
||||
addressList = addressList.map((address) => {
|
||||
address.isDefault = 0;
|
||||
return address;
|
||||
});
|
||||
} else {
|
||||
newAddress.isDefault = 0;
|
||||
}
|
||||
|
||||
addressList.push(newAddress);
|
||||
} else {
|
||||
logger.debug('ADDRESS_LIST_PAGE', '更新现有地址');
|
||||
|
||||
addressList = addressList.map((address) => {
|
||||
if (address.addressId === newAddress.addressId) {
|
||||
return newAddress;
|
||||
}
|
||||
return address;
|
||||
});
|
||||
}
|
||||
|
||||
addressList.sort((prevAddress, nextAddress) => {
|
||||
if (prevAddress.isDefault && !nextAddress.isDefault) {
|
||||
return -1;
|
||||
}
|
||||
if (!prevAddress.isDefault && nextAddress.isDefault) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
addressList: addressList,
|
||||
});
|
||||
|
||||
// 标记地址已被更新
|
||||
this.addressUpdated = true;
|
||||
|
||||
logger.info('ADDRESS_LIST_PAGE', '地址列表更新完成', {
|
||||
totalCount: addressList.length,
|
||||
defaultCount: addressList.filter(addr => addr.isDefault === 1).length,
|
||||
addressUpdated: true
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.message !== 'cancel') {
|
||||
logger.error('ADDRESS_LIST_PAGE', '地址编辑发生错误', { error: e.message || e });
|
||||
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '地址编辑发生错误',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
} else {
|
||||
logger.info('ADDRESS_LIST_PAGE', '用户取消地址编辑');
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
11
miniprogram/pages/user/address/list/index.json
Normal file
11
miniprogram/pages/user/address/list/index.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"navigationBarTitleText": "收货地址",
|
||||
"usingComponents": {
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"t-address-item": "/pages/user/components/ui-address-item/index",
|
||||
"t-location": "/pages/user/components/t-location/index",
|
||||
"t-empty": "tdesign-miniprogram/empty/empty"
|
||||
}
|
||||
}
|
||||
40
miniprogram/pages/user/address/list/index.wxml
Normal file
40
miniprogram/pages/user/address/list/index.wxml
Normal file
@@ -0,0 +1,40 @@
|
||||
<view class="address-container">
|
||||
<view class="address-list" wx:if="{{addressList.length > 0}}">
|
||||
<block wx:for="{{addressList}}" wx:for-index="index" wx:for-item="address" wx:key="addressId">
|
||||
<t-address-item
|
||||
isDrawLine="{{index+1 !== addressList.length}}"
|
||||
extra-space="{{extraSpace}}"
|
||||
class-prefix="ym"
|
||||
address="{{address}}"
|
||||
data-id="{{address.id}}"
|
||||
bind:onSelect="selectHandle"
|
||||
bind:onDelete="deleteAddressHandle"
|
||||
bind:onEdit="editAddressHandle"
|
||||
bind:onSetDefault="setDefaultAddressHandle"
|
||||
/>
|
||||
</block>
|
||||
</view>
|
||||
<view wx:else class="no-address">
|
||||
<t-empty icon="" description="暂无收货地址，赶快添加吧" />
|
||||
</view>
|
||||
<view class="bottom-fixed">
|
||||
<view class="btn-wrap">
|
||||
<t-location
|
||||
title="微信地址导入"
|
||||
isOrderSure="{{isOrderSure}}"
|
||||
isDisabledBtn="{{addressList.length >= 20}}"
|
||||
navigateUrl="/pages/user/address/edit/index"
|
||||
navigateEvent="onWeixinAddressPassed"
|
||||
t-class="location-btn"
|
||||
isCustomStyle="{{true}}"
|
||||
bind:navigate="waitForNewAddress"
|
||||
/>
|
||||
<view class="address-btn {{addressList.length >= 20 ? 'btn-default':''}}" bind:tap="createHandle">
|
||||
<t-icon name="add" size="48rpx" color="#fff" t-class="custom-class" />
|
||||
<text>新建收货地址</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer" wx:if="{{addressList.length >= 20}}">最多支持添加20个收货地址</view>
|
||||
</view>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
109
miniprogram/pages/user/address/list/index.wxss
Normal file
109
miniprogram/pages/user/address/list/index.wxss
Normal file
@@ -0,0 +1,109 @@
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
height: 100%;
|
||||
}
|
||||
.address-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 172rpx);
|
||||
}
|
||||
.address-container .address-list {
|
||||
font-size: 24rpx;
|
||||
background-color: #ffffff;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.address-list .no-address {
|
||||
width: 750rpx;
|
||||
padding-top: 30vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.address-list .no-address__icon {
|
||||
width: 224rpx;
|
||||
height: 224rpx;
|
||||
}
|
||||
.address-list .no-address__text {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #999999;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
.address-container .bottom-fixed {
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12rpx 32rpx calc(env(safe-area-inset-bottom) + 12rpx) 32rpx;
|
||||
}
|
||||
.address-container .btn-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.address-container .btn-wrap .location-btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
.address-container .btn-wrap .location-btn::after {
|
||||
content: '';
|
||||
position: absolute; /* 把父视图设置为relative，方便定位*/
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 88rpx;
|
||||
border: #dddddd 2rpx solid;
|
||||
}
|
||||
.address-container .btn-wrap .address-btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fa4126;
|
||||
border-radius: 44rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.address-container .btn-wrap .btn-default {
|
||||
background: #c6c6c6;
|
||||
}
|
||||
.address-container .bottom-fixed .footer {
|
||||
margin-top: 10rpx;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #ff2525;
|
||||
line-height: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.address-container .message {
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
.address-container .custom-class {
|
||||
margin-right: 12rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
Reference in New Issue
Block a user