Godemo/web-training/web/static/js/main.js

// 主要JavaScript功能

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // 初始化弹出框
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
    });
});

// API请求封装
const API = {
    // 基础URL
    baseURL: '/api/v1',

    // 获取认证令牌
    getAuthToken: function() {
        return localStorage.getItem('authToken');
    },

    // 设置认证令牌
    setAuthToken: function(token) {
        localStorage.setItem('authToken', token);
    },

    // 清除认证令牌
    clearAuthToken: function() {
        localStorage.removeItem('authToken');
    },

    // 通用请求方法
    request: function(method, url, data = null) {
        const options = {
            method: method,
            headers: {
                'Content-Type': 'application/json',
            },
        };

        // 添加认证头
        const token = this.getAuthToken();
        if (token) {
            options.headers['Authorization'] = `Bearer ${token}`;
        }

        // 添加请求体
        if (data) {
            options.body = JSON.stringify(data);
        }

        return fetch(this.baseURL + url, options)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            });
    },

    // GET请求
    get: function(url) {
        return this.request('GET', url);
    },

    // POST请求
    post: function(url, data) {
        return this.request('POST', url, data);
    },

    // PUT请求
    put: function(url, data) {
        return this.request('PUT', url, data);
    },

    // DELETE请求
    delete: function(url) {
        return this.request('DELETE', url);
    }
};

// 用户认证相关功能
const Auth = {
    // 登录
    login: function(username, password) {
        return API.post('/login', { username, password })
            .then(response => {
                if (response.code === 200) {
                    API.setAuthToken(response.data.token);
                    localStorage.setItem('user', JSON.stringify(response.data.user));
                    return response.data;
                } else {
                    throw new Error(response.message);
                }
            });
    },

    // 注册
    register: function(userData) {
        return API.post('/register', userData)
            .then(response => {
                if (response.code === 201) {
                    return response.data;
                } else {
                    throw new Error(response.message);
                }
            });
    },

    // 登出
    logout: function() {
        API.clearAuthToken();
        localStorage.removeItem('user');
        window.location.href = '/login';
    },

    // 获取当前用户
    getCurrentUser: function() {
        const userStr = localStorage.getItem('user');
        return userStr ? JSON.parse(userStr) : null;
    },

    // 检查是否已登录
    isLoggedIn: function() {
        return !!API.getAuthToken();
    }
};

// 商品相关功能
const Products = {
    // 获取商品列表
    getList: function(page = 1, pageSize = 10, search = '') {
        let url = `/products?page=${page}&page_size=${pageSize}`;
        if (search) {
            url += `&search=${search}`;
        }
        return API.get(url);
    },

    // 获取商品详情
    getDetail: function(id) {
        return API.get(`/products/${id}`);
    },

    // 创建商品
    create: function(productData) {
        return API.post('/products', productData);
    },

    // 更新商品
    update: function(id, productData) {
        return API.put(`/products/${id}`, productData);
    },

    // 删除商品
    delete: function(id) {
        return API.delete(`/products/${id}`);
    }
};

// 购物车相关功能
const Cart = {
    // 获取购物车内容
    getItems: function() {
        return API.get('/cart');
    },

    // 添加商品到购物车
    addItem: function(productId, quantity = 1) {
        return API.post('/cart/items', { product_id: productId, quantity });
    },

    // 更新购物车商品数量
    updateItem: function(itemId, quantity) {
        return API.put(`/cart/items/${itemId}`, { quantity });
    },

    // 删除购物车商品
    removeItem: function(itemId) {
        return API.delete(`/cart/items/${itemId}`);
    },

    // 清空购物车
    clear: function() {
        return API.delete('/cart');
    }
};

// 订单相关功能
const Orders = {
    // 获取订单列表
    getList: function(page = 1, pageSize = 10) {
        return API.get(`/orders?page=${page}&page_size=${pageSize}`);
    },

    // 获取订单详情
    getDetail: function(id) {
        return API.get(`/orders/${id}`);
    },

    // 创建订单
    create: function(orderData) {
        return API.post('/orders', orderData);
    },

    // 更新订单状态
    updateStatus: function(id, status) {
        return API.put(`/orders/${id}`, { status });
    }
};

// 工具函数
const Utils = {
    // 显示提示消息
    showAlert: function(message, type = 'info') {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        `;
        
        const container = document.querySelector('.container');
        container.insertBefore(alertDiv, container.firstChild);
        
        // 5秒后自动关闭
        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    },

    // 格式化价格
    formatPrice: function(price) {
        return `¥${parseFloat(price).toFixed(2)}`;
    },

    // 格式化日期
    formatDate: function(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    },

    // 显示加载状态
    showLoading: function(element) {
        element.innerHTML = '<span class="loading"></span> 加载中...';
        element.disabled = true;
    },

    // 隐藏加载状态
    hideLoading: function(element, originalText) {
        element.innerHTML = originalText;
        element.disabled = false;
    },

    // 确认对话框
    confirm: function(message, callback) {
        if (confirm(message)) {
            callback();
        }
    }
};

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
    // 检查登录状态
    if (Auth.isLoggedIn()) {
        const user = Auth.getCurrentUser();
        // 更新导航栏显示用户信息
        const navbar = document.querySelector('.navbar-nav');
        if (navbar) {
            // 隐藏登录/注册链接
            const loginLink = navbar.querySelector('a[href="/login"]');
            const registerLink = navbar.querySelector('a[href="/register"]');
            
            if (loginLink) loginLink.style.display = 'none';
            if (registerLink) registerLink.style.display = 'none';
            
            // 添加用户信息
            const userItem = document.createElement('li');
            userItem.className = 'nav-item dropdown';
            userItem.innerHTML = `
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    ${user.username}
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="/profile">个人信息</a></li>
                    <li><a class="dropdown-item" href="/orders">我的订单</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" onclick="Auth.logout()">退出登录</a></li>
                </ul>
            `;
            navbar.appendChild(userItem);
        }
    }
});

// 导出对象供其他脚本使用
window.API = API;
window.Auth = Auth;
window.Products = Products;
window.Cart = Cart;
window.Orders = Orders;
window.Utils = Utils;