script.js

// 客户数据管理
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 = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
                            ${customer.name.charAt(0)}
                        </div>
                        <div class="ml-4">
                            <div class="text-sm font-medium text-gray-900">${customer.name}</div>
                            <div class="text-sm text-gray-500">${customer.contact}</div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">${customer.phone}</div>
                        <div class="text-sm text-gray-500">${customer.email}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="level-badge level-${customer.level}">${this.getLevelText(customer.level)}</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="status-badge status-${customer.status}">${this.getStatusText(customer.status)}</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    ${customer.lastTransaction}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button onclick="customerManager.editCustomer(${customer.id})" class="text-blue-600 hover:text-blue-900 mr-3">
                        <i data-feather="edit-2"></i>
                    </button>
                    <button onclick="customerManager.deleteCustomer(${customer.id})" class="text-red-600