Files
pdf-translate-web/templates/pricing.html
coder 436ac2cb66 fix: pricing页面导航栏动态显示用户状态
- 登录用户显示:首页/会员套餐/翻译历史 + 用户名/退出
- 未登录用户显示:首页/会员套餐 + 登录/注册
- 添加navbar-toggler支持移动端展开
2026-04-14 18:21:18 +08:00

268 lines
13 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>会员套餐 - PDF翻译助手</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="/">📄 PDF翻译助手</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>
{% 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">
<li>✅ 每日翻译10次</li>
<li>✅ 单文件最大50页</li>
<li>✅ 翻译历史记录</li>
<li>✅ 不满意重新翻译</li>
<li>✅ 导出PDF格式</li>
<li class="text-muted">❌ 原文译文对比</li>
<li class="text-muted">❌ 批量翻译</li>
</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>
<!-- 基础会员 -->
<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">¥29<small>/月</small></div>
<ul class="features text-start">
<li>✅ 每日翻译50次</li>
<li>✅ 单文件最大100页</li>
<li>✅ 翻译历史记录</li>
<li>✅ 不满意重新翻译</li>
<li>✅ 原文译文对比查看</li>
<li>✅ 导出PDF格式</li>
<li>✅ 优先处理队列</li>
</ul>
{% if user and user.user_type == 'vip_basic' %}
<span class="btn btn-success w-100 mt-3 disabled">当前套餐</span>
{% elif user and user.user_type in ['vip_pro', 'vip_enterprise', 'admin'] %}
<span class="btn btn-secondary w-100 mt-3 disabled">已升级</span>
{% else %}
<button class="btn btn-outline-primary w-100 mt-3">立即购买</button>
{% endif %}
</div>
</div>
</div>
<!-- 专业会员 -->
<div class="col-lg-3 col-md-6 mb-4">
<div class="card pricing-card h-100 border-primary">
<div class="card-header bg-primary text-white text-center">
<strong>推荐</strong>
</div>
<div class="card-body text-center">
<h4 class="card-title">专业会员</h4>
<div class="price my-3">¥99<small>/月</small></div>
<ul class="features text-start">
<li>✅ 每日翻译200次</li>
<li>✅ 单文件最大500页</li>
<li>✅ 所有基础会员功能</li>
<li>✅ 原文译文对比查看</li>
<li>✅ 批量翻译</li>
<li>✅ 自定义术语库</li>
</ul>
{% if user and user.user_type == 'vip_pro' %}
<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>
{% else %}
<button class="btn btn-primary w-100 mt-3">立即购买</button>
{% endif %}
</div>
</div>
</div>
<!-- 企业会员 -->
<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">¥999<small>/年</small></div>
<ul class="features text-start">
<li>✅ 翻译次数无限制</li>
<li>✅ 页数无限制</li>
<li>✅ 所有功能解锁</li>
<li>✅ 专属客服支持</li>
<li>✅ API接口调用</li>
</ul>
{% if user and user.user_type in ['vip_enterprise', 'admin'] %}
<span class="btn btn-success w-100 mt-3 disabled">当前套餐</span>
{% else %}
<button class="btn btn-outline-primary w-100 mt-3">联系购买</button>
{% endif %}
</div>
</div>
</div>
</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>
</body>
</html>