# BEX-H5

BEX 数字资产交易平台 H5 页面集合，为 Flutter WebView 提供静态页面支持。

## 核心技术栈

- **前端**：原生 HTML5 + CSS3 + JavaScript
- **多语言**：中英文双语支持
- **移动端集成**：Flutter WebView H5 混合开发
- **通信机制**：JSBridge（Flutter ↔ H5 双向通信）

## 功能概览

| 页面 | 文件 | 功能描述 |
|------|------|----------|
| VIP会员等级 | [vip.html](vip.html) | 展示会员等级体系、贡献值、质押要求、团队奖励 |
| 活动详情 | [activity.html](activity.html) | 动态加载平台活动内容 |
| 邀请下载 | [invite-download.html](invite-download.html) | App下载引导页 |
| 邀请注册 | [invite-register.html](invite-register.html) | 邀请码注册页面 |
| 隐私政策 | [privacy-policy.html](privacy-policy.html) | 隐私政策条款 |
| 服务条款 | [service-terms.html](service-terms.html) | 服务条款与说明 |
| 法律声明 | [legal-notice.html](legal-notice.html) | 法律声明 |
| 社区规则 | [community-rules.html](community-rules.html) | 社区行为规范 |
| 在线客服条款 | [customer-service-terms.html](customer-service-terms.html) | 客服服务条款 |

## 目录结构

```
bex-h5/
├── css/                    # 样式文件
│   ├── activity.css       # 活动页面样式
│   ├── invite.css         # 邀请页面样式
│   ├── styles.css         # 通用样式
│   └── vip.css            # VIP页面样式
├── images/                # 图片资源
├── js/                    # JavaScript脚本
│   ├── locales.js         # 多语言文本数据
│   └── script.js          # 通用交互脚本
├── docs/                  # 文档目录
├── activity.html          # 活动详情页
├── vip.html               # VIP会员等级页
├── invite-download.html   # 邀请下载页
├── invite-register.html   # 邀请注册页
└── *.html                 # 其他条款页面
```

## 快速开始

本项目为纯静态资源，无需构建工具即可运行。

### 本地开发

1. **方式一：直接打开**
   ```bash
   # 直接在浏览器中打开 HTML 文件
   open vip.html
   ```

2. **方式二：静态服务器**
   ```bash
   # 使用 Python
   python -m http.server 8080

   # 或使用 Node.js
   npx serve .
   ```

3. 访问 `http://localhost:8080` 查看页面

## 页面说明

### VIP会员等级（vip.html）

展示用户会员等级信息，包括：

- 当前会员等级及图标
- 贡献值进度条
- 质押要求进度条
- 等级权益表格（团队质押奖励、交易返佣比例）
- 贡献值获取方式说明

数据通过 Flutter WebView 获取用户 Token 后调用 API 渲染。

### 活动详情（activity.html）

- 从 API 动态加载活动内容
- 显示加载状态和错误重试机制
- 支持活动 ID 参数传递

### 邀请下载（invite-download.html）

- App 下载引导页面
- 安卓/iOS 下载按钮区分
- 平台检测自动切换下载选项

### 邀请注册（invite-register.html）

- 邀请码注册页面
- 表单验证
- 注册协议展示

### 条款页面

包含隐私政策、服务条款、法律声明、社区规则、在线客服条款等静态页面，采用统一样式模板。

## 移动端集成

### Flutter WebView 通信机制

H5 页面通过 JSBridge 与 Flutter 原生通信，实现数据获取和页面控制。

### 接口说明

| 接口方法 | 方向 | 描述 |
|----------|------|------|
| `getToken` | H5 ← Flutter | 获取用户认证 Token |
| `getActivityId` | H5 ← Flutter | 获取活动 ID |
| `closeWebview` | H5 → Flutter | 关闭 WebView |

### 使用示例

```javascript
// 获取用户 Token
async function getToken() {
    try {
        const token = await window.flutter_inappwebview.callHandler('getToken');
        return token;
    } catch (e) {
        console.error('获取Token失败', e);
        return null;
    }
}

// 关闭 WebView
function closeWebview() {
    if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
        window.flutter_inappwebview.callHandler('closeWebview');
    }
}
```

### 数据获取流程

1. H5 页面加载完成
2. 调用 `window.flutter_inappwebview.callHandler('getToken')` 获取 Token
3. 携带 Token 调用后端 API 获取数据
4. 渲染页面内容

## 多语言支持

### 支持语言

- 中文（zh）- 默认
- 英文（en）

### 翻译文件

多语言文本统一管理在 [js/locales.js](js/locales.js) 中，通过 `BEXLocales` 对象组织。

### 使用方式

```html
<!-- 静态文本：使用 data-i18n 属性 -->
<div data-i18n="pageTitle">默认文本</div>

<!-- 动态数据：使用 data-field 属性 -->
<span data-field="userName"></span>
```

### 页面内翻译切换

部分页面支持页面内的语言切换，通过翻译对象中的 `translations` 字段定义各语言版本。

## 部署指南

### 部署方式

项目为纯静态资源，可部署到任意 Web 服务器或 CDN。

### 部署步骤

1. 将整个项目目录部署到 Web 服务器
2. 确保服务器支持 SPA 路由（如需要）
3. 配置资源缓存策略
4. 验证各页面加载正常

### 路径要求

- 建议部署到域名根路径
- 如部署到子路径，需相应调整 CSS/JS 引用路径
- API 请求路径需根据实际环境配置

### 注意事项

- 确保 `/css/`、`/js/`、`/images/` 路径可正确访问
- API 接口地址需根据部署环境配置
- 生产环境建议启用 Gzip 压缩