Kamixitong/app/web/templates/user/product_detail.html

{% extends "user/base.html" %}

{% block title %}产品详情 - {{ config.SITE_NAME or '软件授权管理系统' }}{% endblock %}

{% block extra_css %}
<style>
    .product-detail-image {
        max-height: 400px;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .version-table th {
        background-color: #f8f9fa;
    }
    
    .download-section {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 2rem;
    }
    
    .feature-list li {
        margin-bottom: 0.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('user.user_index') }}">首页</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('user.user_products') }}">产品中心</a></li>
                    <li class="breadcrumb-item active" aria-current="page">产品详情</li>
                </ol>
            </nav>
        </div>
    </div>
    
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6 mb-4 mb-lg-0">
                            <img src="${product.image_path || '/static/images/product-default.png'}" 
                                 class="img-fluid product-detail-image" 
                                 alt="产品图片" id="productImage">
                        </div>
                        <div class="col-lg-6">
                            <h1 class="mb-3" id="productName">产品名称</h1>
                            <p class="lead" id="productDescription">产品描述信息，这里是产品的详细介绍内容。</p>
                            
                            <div class="row mb-3">
                                <div class="col-sm-4"><strong>产品版本:</strong></div>
                                <div class="col-sm-8" id="productVersion">v1.0.0</div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-sm-4"><strong>发布状态:</strong></div>
                                <div class="col-sm-8">
                                    <span class="badge bg-success" id="productStatus">已发布</span>
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-sm-4"><strong>分类:</strong></div>
                                <div class="col-sm-8" id="productCategory">办公软件</div>
                            </div>
                            
                            <div class="row mb-4">
                                <div class="col-sm-4"><strong>更新时间:</strong></div>
                                <div class="col-sm-8" id="updateTime">2023-10-01 10:30:00</div>
                            </div>
                            
                            <div class="download-section">
                                <h4 class="mb-3">
                                    <i class="fas fa-download me-2"></i>下载产品
                                </h4>
                                
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" 
                                           id="licenseKey" 
                                           placeholder="请输入卡密">
                                    <button class="btn btn-outline-secondary" 
                                            type="button" 
                                            id="verifyLicenseBtn">
                                        验证
                                    </button>
                                </div>
                                
                                <div id="downloadSection" style="display: none;">
                                    <div class="alert alert-success">
                                        <i class="fas fa-check-circle me-2"></i>
                                        卡密验证成功！
                                    </div>
                                    <button class="btn btn-success w-100" id="downloadBtn">
                                        <i class="fas fa-download me-2"></i>
                                        立即下载
                                    </button>
                                </div>
                                
                                <div class="mt-3 text-center">
                                    <a href="{{ url_for('user.user_license_purchase') }}" class="btn btn-link">
                                        <i class="fas fa-shopping-cart me-1"></i>购买卡密
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">产品功能特性</h5>
                </div>
                <div class="card-body">
                    <ul class="feature-list">
                        <li><i class="fas fa-check-circle text-success me-2"></i>功能特性一</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>功能特性二</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>功能特性三</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>功能特性四</li>
                        <li><i class="fas fa-check-circle text-success me-2"></i>功能特性五</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5 class="mb-0">版本历史</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped version-table">
                            <thead>
                                <tr>
                                    <th>版本</th>
                                    <th>发布日期</th>
                                    <th>更新内容</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="versionHistory">
                                <tr>
                                    <td>v1.0.0</td>
                                    <td>2023-10-01</td>
                                    <td>初始版本发布</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-download me-1"></i>下载
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 产品详情页面JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        console.log('产品详情页面加载完成');
        
        // 从URL中获取产品ID
        const urlPath = window.location.pathname;
        const productId = urlPath.split('/').pop();
        
        // 加载产品详情
        loadProductDetail(productId);
        
        // 验证卡密按钮事件
        document.getElementById('verifyLicenseBtn').addEventListener('click', function() {
            const licenseKey = document.getElementById('licenseKey').value.trim();
            
            if (!licenseKey) {
                showNotification('请输入卡密', 'warning');
                return;
            }
            
            // 显示加载状态
            showLoading();
            
            // 调用API验证卡密
            apiRequest('/user/licenses/verify', {
                method: 'POST',
                body: JSON.stringify({ license_key: licenseKey })
            })
            .then(data => {
                if (data.success) {
                    // 验证成功，显示下载按钮
                    document.getElementById('downloadSection').style.display = 'block';
                    showNotification('卡密验证成功！', 'success');
                } else {
                    showNotification('卡密验证失败: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showNotification('验证卡密失败，请稍后重试', 'error');
                console.error('验证卡密失败:', error);
            })
            .finally(() => {
                hideLoading();
            });
        });
        
        // 下载按钮事件
        document.getElementById('downloadBtn').addEventListener('click', function() {
            showNotification('开始下载...', 'info');
            // 这里应该触发实际的下载逻辑
        });
    });
    
    // 加载产品详情
    function loadProductDetail(productId) {
        if (!productId) {
            showNotification('产品ID无效', 'error');
            return;
        }
        
        // 显示加载状态
        showLoading();
        
        // 调用API获取产品详情
        apiRequest(`/api/v1/user/products/${productId}`)
            .then(data => {
                if (data.success) {
                    renderProductDetail(data.data);
                } else {
                    showNotification('加载产品详情失败: ' + data.message, 'error');
                }
            })
            .catch(error => {
                showNotification('加载产品详情失败，请稍后重试', 'error');
                console.error('加载产品详情失败:', error);
            })
            .finally(() => {
                hideLoading();
            });
    }
    
    // 渲染产品详情
    function renderProductDetail(product) {
        // 更新页面内容
        document.getElementById('productName').textContent = product.product_name;
        document.getElementById('productDescription').textContent = product.description || '暂无描述';
        document.getElementById('productVersion').textContent = product.latest_version || '1.0.0';
        document.getElementById('productStatus').textContent = product.status_name;
        document.getElementById('productStatus').className = `badge ${product.status === 1 ? 'bg-success' : 'bg-secondary'}`;
        document.getElementById('updateTime').textContent = product.update_time;
        
        // 更新版本历史
        const versionHistory = document.getElementById('versionHistory');
        if (product.recent_updates && product.recent_updates.length > 0) {
            let versionHtml = '';
            product.recent_updates.forEach(update => {
                versionHtml += `
                    <tr>
                        <td>${update.version_num}</td>
                        <td>${formatDate(update.update_time)}</td>
                        <td>${update.update_log || '无更新说明'}</td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-download me-1"></i>下载
                            </button>
                        </td>
                    </tr>
                `;
            });
            versionHistory.innerHTML = versionHtml;
        }
    }
</script>
{% endblock %}