第一次提交

app/web/templates/package/list.html

@@ -0,0 +1,218 @@
+{% extends "base.html" %}
+
+{% block title %}套餐管理 - {{ config.SITE_NAME or '太一软件授权管理系统' }}{% endblock %}
+
+{% block page_title %}套餐管理{% endblock %}
+
+{% block page_actions %}
+<a href="{{ url_for('web.products') }}" class="btn btn-outline-secondary">
+    <i class="fas fa-arrow-left me-2"></i>
+    返回产品列表
+</a>
+<a href="{{ url_for('web.create_package') }}?product_id={{ product.product_id }}" class="btn btn-primary">
+    <i class="fas fa-plus me-2"></i>
+    创建套餐
+</a>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <div class="card shadow mb-4">
+            <div class="card-header">
+                <h6 class="mb-0">产品信息</h6>
+            </div>
+            <div class="card-body">
+                <div class="row">
+                    <div class="col-md-6">
+                        <dl class="row">
+                            <dt class="col-sm-4">产品ID:</dt>
+                            <dd class="col-sm-8"><code>{{ product.product_id }}</code></dd>
+                            
+                            <dt class="col-sm-4">产品名称:</dt>
+                            <dd class="col-sm-8">{{ product.product_name }}</dd>
+                        </dl>
+                    </div>
+                    <div class="col-md-6">
+                        <dl class="row">
+                            <dt class="col-sm-4">状态:</dt>
+                            <dd class="col-sm-8">
+                                <span class="badge {% if product.status == 1 %}bg-success{% else %}bg-secondary{% endif %}">
+                                    {{ product.status_name }}
+                                </span>
+                            </dd>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-12">
+        <div class="card shadow">
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover">
+                        <thead class="table-light">
+                            <tr>
+                                <th>套餐名称</th>
+                                <th>价格</th>
+                                <th>时长</th>
+                                <th>最大设备数</th>
+                                <th>库存</th>
+                                <th>状态</th>
+                                <th>排序</th>
+                                <th>操作</th>
+                            </tr>
+                        </thead>
+                        <tbody id="package-list">
+                            <tr>
+                                <td colspan="8" class="text-center text-muted">加载中...</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 删除确认模态框 -->
+<div class="modal fade" id="deleteModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">确认删除</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                确定要删除套餐 "<strong id="delete-package-name"></strong>" 吗？此操作不可恢复。
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-danger" id="confirm-delete">确定删除</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+// 页面加载完成后初始化
+document.addEventListener('DOMContentLoaded', function() {
+    loadPackages();
+    initEventListeners();
+});
+
+// 初始化事件监听器
+function initEventListeners() {
+    // 删除确认
+    document.getElementById('confirm-delete').addEventListener('click', function() {
+        const packageId = this.dataset.packageId;
+        deletePackage(packageId);
+    });
+}
+
+// 加载套餐列表
+function loadPackages() {
+    const product_id = "{{ product.product_id }}";
+    
+    apiRequest(`/api/v1/packages?product_id=${product_id}`)
+        .then(data => {
+            if (data && data.success) {
+                renderPackageList(data.data.packages);
+            } else {
+                renderPackageList([]);
+                showNotification('加载套餐列表失败: ' + (data.message || '未知错误'), 'error');
+            }
+        })
+        .catch(error => {
+            renderPackageList([]);
+            showNotification('加载套餐列表失败: ' + error.message, 'error');
+        });
+}
+
+// 渲染套餐列表
+function renderPackageList(packages) {
+    const tbody = document.getElementById('package-list');
+    
+    if (!Array.isArray(packages) || packages.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">暂无数据</td></tr>';
+        return;
+    }
+
+    tbody.innerHTML = packages.map(pkg => `
+        <tr>
+            <td>
+                <strong>${pkg.name}</strong>
+                ${pkg.description ? `<br><small class="text-muted">${pkg.description}</small>` : ''}
+            </td>
+            <td>¥${pkg.price.toFixed(2)}</td>
+            <td>${pkg.duration_text}</td>
+            <td>${pkg.max_devices}</td>
+            <td>${pkg.stock === -1 ? '无限' : pkg.stock}</td>
+            <td>
+                <span class="badge ${pkg.status === 1 ? 'bg-success' : 'bg-secondary'}">
+                    ${pkg.status_name}
+                </span>
+            </td>
+            <td>${pkg.sort_order}</td>
+            <td>
+                <div class="btn-group btn-group-sm" role="group">
+                    <a href="/packages/${pkg.package_id}/edit" class="btn btn-outline-primary" title="编辑">
+                        <i class="fas fa-edit"></i>
+                    </a>
+                    <button type="button" class="btn btn-outline-danger btn-delete"
+                            data-package-id="${pkg.package_id}"
+                            data-package-name="${pkg.name}"
+                            title="删除">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </td>
+        </tr>
+    `).join('');
+
+    // 绑定删除按钮事件
+    document.querySelectorAll('.btn-delete').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const packageId = this.dataset.packageId;
+            const packageName = this.dataset.packageName;
+            showDeleteModal(packageId, packageName);
+        });
+    });
+}
+
+// 显示删除确认模态框
+function showDeleteModal(packageId, packageName) {
+    document.getElementById('delete-package-name').textContent = packageName;
+    document.getElementById('confirm-delete').dataset.packageId = packageId;
+
+    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
+    modal.show();
+}
+
+// 删除套餐
+function deletePackage(packageId) {
+    apiRequest(`/api/v1/packages/${packageId}`, {
+        method: 'DELETE'
+    })
+    .then(data => {
+        if (data && data.success) {
+            showNotification('套餐删除成功', 'success');
+            loadPackages();
+
+            // 关闭模态框
+            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
+            modal.hide();
+        } else {
+            showNotification('删除失败: ' + (data.message || '未知错误'), 'error');
+        }
+    })
+    .catch(error => {
+        showNotification('删除失败: ' + error.message, 'error');
+    });
+}
+</script>
+{% endblock %}