// 客户数据管理
class CustomerManager {
constructor() {
this.customers = JSON.parse(localStorage.getItem('customers')) || this.getDefaultCustomers();
this.currentEditId = null;
this.init();
}
getDefaultCustomers() {
return [
{
id: 1,
name: '北京科技有限公司',
contact: '张经理',
phone: '13800138000',
email: 'zhang@tech.com',
address: '北京市海淀区中关村大街1号',
level: 'vip',
status: 'active',
lastTransaction: '2024-01-15',
totalOrders: 156,
totalAmount: 1256000
},
{
id: 2,
name: '上海贸易有限公司',
contact: '李总监',
phone: '13900139000',
email: 'li@trade.com',
address: '上海市浦东新区陆家嘴金融中心',
level: 'normal',
status: 'active',
lastTransaction: '2024-01-14',
totalOrders: 89,
totalAmount: 678000
},
{
id: 3,
name: '广州制造集团',
contact: '王总',
phone: '13700137000',
email: 'wang@manufacture.com',
address: '广州市天河区珠江新城',
level: 'vip',
status: 'active',
lastTransaction: '2024-01-13',
totalOrders: 234,
totalAmount: 1987000
},
{
id: 4,
name: '深圳创新企业',
contact: '陈主管',
phone: '13600136000',
email: 'chen@innovation.com',
address: '深圳市南山区科技园',
level: 'potential',
status: 'inactive',
lastTransaction: '2024-01-10',
totalOrders: 23,
totalAmount: 156000
},
{
id: 5,
name: '杭州电商公司',
contact: '刘经理',
phone: '13500135000',
email: 'liu@ecommerce.com',
address: '杭州市西湖区文三路',
level: 'normal',
status: 'suspended',
lastTransaction: '2024-01-08',
totalOrders: 67,
totalAmount: 456000
}
];
}
init() {
this.renderCustomerTable();
this.bindEvents();
}
bindEvents() {
// 新增客户按钮
document.getElementById('addCustomerBtn').addEventListener('click', () => {
this.openModal();
});
// 关闭模态框
document.getElementById('closeModal').addEventListener('click', () => {
this.closeModal();
});
document.getElementById('cancelBtn').addEventListener('click', () => {
this.closeModal();
});
// 表单提交
document.getElementById('customerForm').addEventListener('submit', (e) => {
e.preventDefault();
this.saveCustomer();
});
// 点击模态框背景关闭
document.getElementById('customerModal').addEventListener('click', (e) => {
if (e.target.id === 'customerModal') {
this.closeModal();
}
});
}
openModal(customer = null) {
const modal = document.getElementById('customerModal');
const title = document.getElementById('modalTitle');
const form = document.getElementById('customerForm');
if (customer) {
title.textContent = '编辑客户';
this.currentEditId = customer.id;
// 填充表单数据
Object.keys(customer).forEach(key => {
if (form.elements[key]) {
form.elements[key].value = customer[key];
}
});
} else {
title.textContent = '新增客户';
this.currentEditId = null;
form.reset();
}
modal.classList.remove('hidden');
setTimeout(() => {
modal.querySelector('div').classList.add('modal-enter');
}, 10);
}
closeModal() {
const modal = document.getElementById('customerModal');
modal.classList.add('hidden');
modal.querySelector('div').classList.remove('modal-enter');
}
saveCustomer() {
const form = document.getElementById('customerForm');
const formData = new FormData(form);
const customerData = Object.fromEntries(formData);
if (this.currentEditId) {
// 编辑现有客户
const index = this.customers.findIndex(c => c.id === this.currentEditId);
this.customers[index] = {
...this.customers[index],
...customerData,
lastTransaction: new Date().toISOString().split('T')[0]
};
} else {
// 新增客户
const newCustomer = {
id: Date.now(),
...customerData,
status: 'active',
lastTransaction: new Date().toISOString().split('T')[0],
totalOrders: 0,
totalAmount: 0
};
this.customers.push(newCustomer);
}
this.saveToLocalStorage();
this.renderCustomerTable();
this.closeModal();
// 显示成功消息
this.showMessage('客户信息保存成功！', 'success');
}
editCustomer(id) {
const customer = this.customers.find(c => c.id === id);
if (customer) {
this.openModal(customer);
}
}
deleteCustomer(id) {
if (confirm('确定要删除这个客户吗？此操作不可撤销。')) {
this.customers = this.customers.filter(c => c.id !== id);
this.saveToLocalStorage();
this.renderCustomerTable();
this.showMessage('客户删除成功！', 'success');
}
getLevelText(level) {
const levelMap = {
'vip': 'VIP客户',
'normal': '普通客户',
'potential': '潜在客户'
};
return levelMap[level] || level;
}
getStatusText(status) {
const statusMap = {
'active': '活跃',
'inactive': '不活跃',
'suspended': '暂停'
};
return statusMap[status] || status;
}
saveToLocalStorage() {
localStorage.setItem('customers', JSON.stringify(this.customers));
}
showMessage(message, type = 'info') {
// 创建消息元素
const messageEl = document.createElement('div');
messageEl.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 ${
type === 'success' ? 'bg-green-500 text-white' :
type === 'error' ? 'bg-red-500 text-white' :
'bg-blue-500 text-white'
}`;
messageEl.textContent = message;
document.body.appendChild(messageEl);
// 3秒后自动移除
setTimeout(() => {
messageEl.remove();
}, 3000);
}
renderCustomerTable() {
const tbody = document.getElementById('customerTableBody');
tbody.innerHTML = '';
this.customers.forEach(customer => {
const row = document.createElement('tr');
row.className = 'table-row';
row.innerHTML = `
${customer.name.charAt(0)}
${customer.name}
${customer.contact}
|
${customer.phone}
${customer.email}
|
${this.getLevelText(customer.level)}
|
${this.getStatusText(customer.status)}
|
${customer.lastTransaction}
|
|