coder
69e4ca4d64
- 使用 Flask context_processor 自动注入 site_config - 所有页面标题使用 site_name 配置 - 所有页面导航栏品牌使用 site_name 配置 - 所有页面底部使用 site_footer 配置 - 文件上传时使用 max_file_size 配置验证文件大小 - 显示最大文件限制提示
230 lines
11 KiB
HTML
230 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>会员套餐 - {{ site_config.site_name }}</title>
|
|
<link rel="icon" href="/static/img/favicon.svg" type="image/svg+xml">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="/static/css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">📄 {{ site_config.site_name }}</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item"><a class="nav-link" href="/">首页</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="/pricing">会员套餐</a></li>
|
|
{% if user %}
|
|
<li class="nav-item"><a class="nav-link" href="/history">翻译历史</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="/profile">个人中心</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
<div class="navbar-nav">
|
|
{% if user %}
|
|
<span class="nav-link text-light">👋 {{ user.username }}</span>
|
|
<a class="nav-link" href="/logout">退出</a>
|
|
{% else %}
|
|
<a class="nav-link" href="/login">登录</a>
|
|
<a class="nav-link" href="/register">注册</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container my-5">
|
|
<h2 class="text-center mb-5">会员套餐</h2>
|
|
|
|
<div class="row justify-content-center">
|
|
<!-- 免费用户（固定） -->
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card pricing-card h-100">
|
|
<div class="card-body text-center">
|
|
<h4 class="card-title">免费用户</h4>
|
|
<div class="price my-3">¥0<small>/永久</small></div>
|
|
|
|
<ul class="features text-start">
|
|
{% for feat in free_features %}
|
|
<li>{% if feat.has %}✅{% else %}<span class="text-muted">❌</span>{% endif %} {{ feat.name }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
{% if user and user.user_type in ['free', 'vip_basic', 'vip_pro', 'vip_enterprise', 'admin'] %}
|
|
<span class="btn btn-secondary w-100 mt-3 disabled">
|
|
{% if user.user_type == 'free' %}当前套餐{% else %}已升级{% endif %}
|
|
</span>
|
|
{% else %}
|
|
<a href="/register" class="btn btn-outline-secondary w-100 mt-3">免费注册</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 动态套餐 -->
|
|
{% for plan in plans if plan.is_active %}
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card pricing-card h-100 {% if plan.is_recommended %}border-primary{% endif %}">
|
|
{% if plan.is_recommended %}
|
|
<div class="card-header bg-primary text-white text-center">
|
|
<strong>推荐</strong>
|
|
</div>
|
|
{% endif %}
|
|
<div class="card-body text-center">
|
|
<h4 class="card-title">{{ plan.display_name }}</h4>
|
|
<div class="price my-3">
|
|
¥{{ plan.price }}<small>/{{ plan.period }}</small>
|
|
{% if plan.original_price and plan.original_price > plan.price %}
|
|
<br><span class="text-muted" style="font-size:0.8em">原价¥{{ plan.original_price }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<p class="text-muted">{{ plan.description }}</p>
|
|
|
|
<ul class="features text-start">
|
|
{% for feat in plan_features.get(plan.plan_key, []) %}
|
|
<li>✅ {{ feat.name }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
{% if user and user.user_type == plan.user_type_key %}
|
|
<span class="btn btn-success w-100 mt-3 disabled">当前套餐</span>
|
|
{% elif user and user.user_type in ['vip_enterprise', 'admin'] %}
|
|
<span class="btn btn-secondary w-100 mt-3 disabled">已升级</span>
|
|
{% elif user and user.user_type in ['vip_pro', 'vip_basic'] and plan.user_type_key not in ['vip_basic'] %}
|
|
<span class="btn btn-secondary w-100 mt-3 disabled">已升级</span>
|
|
{% else %}
|
|
<button class="btn {% if plan.is_recommended %}btn-primary{% else %}btn-outline-primary{% endif %} w-100 mt-3">立即购买</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 功能对比表 -->
|
|
<div class="card mt-5">
|
|
<div class="card-header">
|
|
<h4 class="mb-0">功能对比</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>功能</th>
|
|
<th>访客</th>
|
|
<th>免费用户</th>
|
|
<th>基础会员</th>
|
|
<th>专业会员</th>
|
|
<th>企业会员</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>每日翻译次数</td>
|
|
<td>3次</td>
|
|
<td>10次</td>
|
|
<td>50次</td>
|
|
<td>200次</td>
|
|
<td>无限制</td>
|
|
</tr>
|
|
<tr>
|
|
<td>单文件最大页数</td>
|
|
<td>20页</td>
|
|
<td>50页</td>
|
|
<td>100页</td>
|
|
<td>500页</td>
|
|
<td>无限制</td>
|
|
</tr>
|
|
<tr>
|
|
<td>翻译缓存</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>翻译历史</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>重新翻译</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>对比查看</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>导出PDF</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>批量翻译</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>自定义术语</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>自定义翻译要求</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
<tr>
|
|
<td>API调用</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-danger">❌</td>
|
|
<td class="text-success">✅</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="bg-light py-4 mt-5">
|
|
<div class="container text-center">
|
|
{{ site_config.site_footer | safe }}
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html> |