taiyi/KaMixitong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
wsb1224
2026-03-25 15:24:22 +08:00
commit 0f8ac68d4d
156 changed files with 42365 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

466
app/web/templates/user/license_purchase.html Normal file
View File

@@ -0,0 +1,466 @@
{% extends "user/base.html" %}
{% block title %}购买授权 - {{ config.SITE_NAME or '软件授权管理系统' }}{% endblock %}
{% block extra_css %}
<style>
.product-card {
transition: transform 0.3s ease;
border: none;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.product-image {
height: 150px;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.plan-card {
border: 2px solid #e9ecef;
border-radius: 10px;
transition: all 0.3s ease;
}
.plan-card:hover {
border-color: #667eea;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
.plan-card.selected {
border-color: #667eea;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.plan-price {
font-size: 2rem;
font-weight: bold;
color: #667eea;
}
.payment-method {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.payment-method:hover {
border-color: #667eea;
}
.payment-method.selected {
border-color: #667eea;
background-color: rgba(102, 126, 234, 0.05);
}
.order-summary {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
}
</style>
{% endblock %}
{% block content %}
<div class="container py-4">
<div class="row">
<div class="col-12">
<h1 class="mb-4">购买授权</h1>
</div>
</div>
<div class="row">
<!-- 产品选择 -->
<div class="col-lg-8 mb-4">
<div class="card shadow-sm">
<div class="card-header">
<h5 class="mb-0">选择产品</h5>
</div>
<div class="card-body">
<div class="row" id="productsContainer">
<!-- 产品列表将通过JavaScript动态加载 -->
<div class="col-12 text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
<p class="mt-2">正在加载产品列表...</p>
</div>
</div>
</div>
</div>
<!-- 套餐选择 -->
<div class="card shadow-sm mt-4">
<div class="card-header">
<h5 class="mb-0">选择套餐</h5>
</div>
<div class="card-body">
<div class="row" id="plansContainer">
<!-- 套餐列表将根据选择的产品动态加载 -->
<div class="col-12 text-center py-5">
<i class="fas fa-info-circle fa-2x text-muted mb-3"></i>
<h4 class="text-muted">请选择一个产品</h4>
<p class="text-muted">选择产品后将显示可用的授权套餐</p>
</div>
</div>
</div>
</div>
</div>
<!-- 订单摘要和支付 -->
<div class="col-lg-4 mb-4">
<div class="card shadow-sm">
<div class="card-header">
<h5 class="mb-0">订单信息</h5>
</div>
<div class="card-body">
<div class="order-summary">
<h6>订单摘要</h6>
<hr>
<div class="mb-3">
<div class="d-flex justify-content-between">
<span>产品:</span>
<span id="selectedProduct">-</span>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between">
<span>套餐:</span>
<span id="selectedPlan">-</span>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between">
<span>数量:</span>
<span id="selectedQuantity">1</span>
</div>
</div>
<hr>
<div class="d-flex justify-content-between fw-bold">
<span>总计:</span>
<span id="totalAmount" class="plan-price">¥0.00</span>
</div>
</div>
<div class="mt-4">
<h6>支付方式</h6>
<div class="payment-methods">
<div class="payment-method mb-2 selected" data-method="alipay">
<div class="d-flex align-items-center">
<i class="fab fa-alipay fa-2x me-3 text-primary"></i>
<div>
<div class="fw-bold">支付宝</div>
<small class="text-muted">推荐使用</small>
</div>
</div>
</div>
<div class="payment-method mb-2" data-method="wechat">
<div class="d-flex align-items-center">
<i class="fab fa-weixin fa-2x me-3 text-success"></i>
<div>
<div class="fw-bold">微信支付</div>
<small class="text-muted">即时到账</small>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary w-100 mt-4" id="payBtn" disabled>
<i class="fas fa-credit-card me-2"></i>立即支付
</button>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
// 卡密购买页面JavaScript
let selectedProduct = null;
let selectedPlan = null;
let selectedQuantity = 1;
document.addEventListener('DOMContentLoaded', function() {
console.log('卡密购买页面加载完成');
// 初始化产品列表
loadProducts();
// 支付方式选择
document.querySelectorAll('.payment-method').forEach(method => {
method.addEventListener('click', function() {
document.querySelectorAll('.payment-method').forEach(m => m.classList.remove('selected'));
this.classList.add('selected');
});
});
// 支付按钮事件
document.getElementById('payBtn').addEventListener('click', function() {
processPayment();
});
});
// 加载产品列表
function loadProducts() {
// 显示加载状态
document.getElementById('productsContainer').innerHTML = `
<div class="col-12 text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
<p class="mt-2">正在加载产品列表...</p>
</div>
`;
// 调用API获取产品列表
apiRequest('/api/v1/user/products')
.then(data => {
if (data.success) {
renderProducts(data.data.products || []);
} else {
showNotification('加载产品列表失败: ' + data.message, 'error');
}
})
.catch(error => {
showNotification('加载产品列表失败，请稍后重试', 'error');
console.error('加载产品列表失败:', error);
});
}
// 渲染产品列表
function renderProducts(products) {
const container = document.getElementById('productsContainer');
if (products.length === 0) {
container.innerHTML = `
<div class="col-12 text-center py-5">
<i class="fas fa-box-open fa-3x text-muted mb-3"></i>
<h4 class="text-muted">暂无产品</h4>
<p class="text-muted">当前没有可购买的产品</p>
</div>
`;
return;
}
let productsHtml = '';
products.forEach(product => {
productsHtml += `
<div class="col-lg-4 col-md-6 mb-3">
<div class="card product-card h-100" onclick="selectProduct(${JSON.stringify(product).replace(/"/g, '&quot;')})">
<img src="${product.image_path || '/static/images/product-default.png'}"
class="card-img-top product-image"
alt="${product.product_name}">
<div class="card-body">
<h6 class="card-title">${product.product_name}</h6>
<p class="card-text small text-muted">${product.description || '暂无描述'}</p>
</div>
</div>
</div>
`;
});
container.innerHTML = productsHtml;
}
// 选择产品
function selectProduct(product) {
selectedProduct = product;
document.getElementById('selectedProduct').textContent = product.product_name;
// 更新UI选中状态
document.querySelectorAll('.product-card').forEach(card => {
card.classList.remove('border-primary');
});
event.currentTarget.classList.add('border-primary');
// 加载该产品的套餐
loadPlans(product.product_id);
// 更新支付按钮状态
updatePayButton();
}
// 加载套餐
function loadPlans(productId) {
// 显示加载状态
document.getElementById('plansContainer').innerHTML = `
<div class="col-12 text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
<p class="mt-2">正在加载套餐信息...</p>
</div>
`;
// 调用API获取套餐信息
apiRequest(`/api/v1/user/licenses/packages?product_id=${productId}`)
.then(data => {
if (data.success) {
renderPlans(data.data.packages || []);
} else {
showNotification('加载套餐信息失败: ' + data.message, 'error');
}
})
.catch(error => {
showNotification('加载套餐信息失败，请稍后重试', 'error');
console.error('加载套餐信息失败:', error);
});
}
// 渲染套餐
function renderPlans(plans) {
const container = document.getElementById('plansContainer');
if (plans.length === 0) {
container.innerHTML = `
<div class="col-12 text-center py-5">
<i class="fas fa-tags fa-2x text-muted mb-3"></i>
<h4 class="text-muted">暂无套餐</h4>
<p class="text-muted">该产品暂无可用的授权套餐</p>
</div>
`;
return;
}
let plansHtml = '';
plans.forEach(plan => {
plansHtml += `
<div class="col-lg-6 mb-3">
<div class="plan-card p-3" onclick="selectPlan(${JSON.stringify(plan).replace(/"/g, '&quot;')})">
<div class="d-flex justify-content-between align-items-start">
<div>
<h6 class="mb-1">${plan.name}</h6>
<p class="small text-muted mb-2">${plan.description || '暂无描述'}</p>
<div class="plan-price">¥${plan.price.toFixed(2)}</div>
<!-- 显示库存信息 -->
${plan.stock !== undefined && plan.stock !== -1 ?
`<div class="small text-muted mt-1">剩余库存: ${plan.stock}</div>` :
'<div class="small text-muted mt-1">库存: 无限</div>'}
</div>
<span class="badge bg-primary">${plan.duration_text || getDurationType(plan.duration)}</span>
</div>
<ul class="small mt-3 mb-0">
<li>有效期: ${plan.duration_text || getDurationType(plan.duration)}</li>
<li>设备数: ${plan.max_devices || '无限制'}</li>
${plan.stock !== undefined && plan.stock === 0 ?
'<li class="text-danger">库存不足</li>' : ''}
</ul>
</div>
</div>
`;
});
container.innerHTML = plansHtml;
}
// 选择套餐
function selectPlan(plan) {
selectedPlan = plan;
document.getElementById('selectedPlan').textContent = plan.name;
// 更新UI选中状态
document.querySelectorAll('.plan-card').forEach(card => {
card.classList.remove('selected');
});
event.currentTarget.classList.add('selected');
// 更新总价
updateTotalAmount();
// 更新支付按钮状态
updatePayButton();
}
// 获取时长类型
function getDurationType(days) {
if (days === -1) {
return '永久卡';
} else if (days === 1) {
return '天卡';
} else if (days === 30) {
return '月卡';
} else if (days === 90) {
return '季卡';
} else if (days === 365) {
return '年卡';
} else {
return `${days}天卡`;
}
}
// 更新总价
function updateTotalAmount() {
if (selectedPlan) {
const total = selectedPlan.price * selectedQuantity;
document.getElementById('totalAmount').textContent = `¥${total.toFixed(2)}`;
}
}
// 更新支付按钮状态
function updatePayButton() {
const payBtn = document.getElementById('payBtn');
if (selectedProduct && selectedPlan) {
payBtn.disabled = false;
} else {
payBtn.disabled = true;
}
}
// 处理支付
function processPayment() {
if (!selectedProduct || !selectedPlan) {
showNotification('请选择产品和套餐', 'warning');
return;
}
const paymentMethod = document.querySelector('.payment-method.selected').dataset.method;
// 显示加载状态
const payBtn = document.getElementById('payBtn');
const originalText = payBtn.innerHTML;
payBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>处理中...';
payBtn.disabled = true;
// 调用API创建订单
const orderData = {
product_id: selectedProduct.product_id,
package_id: selectedPlan.package_id,
quantity: selectedQuantity,
payment_method: paymentMethod
};
apiRequest('/user/orders', {
method: 'POST',
body: JSON.stringify(orderData)
})
.then(data => {
if (data.success) {
showNotification('订单创建成功！请完成支付', 'success');
// 这里应该跳转到支付页面或显示支付二维码
} else {
showNotification('创建订单失败: ' + data.message, 'error');
}
})
.catch(error => {
showNotification('创建订单失败，请稍后重试', 'error');
console.error('创建订单失败:', error);
})
.finally(() => {
payBtn.innerHTML = originalText;
payBtn.disabled = false;
});
}
</script>
{% endblock %}