# 微信公众号 H5 充值页面

这是一个基于 Vue.js 开发的微信公众号 H5 充值页面，包含用户搜索和充值两个页面。

## 功能特性

- 用户搜索页面：通过 ID 搜索用户
- 充值页面：选择充值金额，支持支付宝支付
- 响应式设计，适配各种移动设备
- 美观的 UI 界面，专业的用户体验

## 技术栈

- Vue.js 2.x
- Vue Router
- Vant UI 组件库
- Less CSS 预处理器

## 项目结构

```
src/
  ├── assets/        # 静态资源
  ├── components/    # 公共组件
  ├── router/        # 路由配置
  ├── views/         # 页面组件
  │   ├── Search.vue    # 搜索用户页面
  │   └── Recharge.vue  # 充值页面
  ├── App.vue        # 根组件
  └── main.js        # 入口文件
```

## 开发说明

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run serve
```

### 构建生产版本

```bash
npm run build
```

## 打包配置说明（包含 6 个版本）

- 配置文件路径：`src/utils/config.js`
- 需调整的两个开关：
  - `PAYMENT_TYPE`（支付方式，`'wechat' | 'alipay'`）位于 `src/utils/config.js#L9-10`
  - `ALI_CUSTOM`（是否开启“任意金额”，仅在支付宝时生效）位于 `src/utils/config.js#L13`

### 版本清单与构建步骤

- 微信支付-需要登录(有金币兑换)

  - 分支：该版本在`main`分支，请先切换到对应分支
  - 设置：`PAYMENT_TYPE = 'wechat'`
  - 任意金额：不适用（仅支付宝）
  - 构建：`npm run build`

- 微信支付-无需登录(无金币兑换)

  - 分支：该版本在`master`分支，请先切换到对应分支
  - 设置：无需配置
  - 构建：`npm run build`

- 支付宝支付-需要登录(有金币兑换)-无任意金额

  - 分支：该版本在`main`分支，请先切换到对应分支
  - 设置：`PAYMENT_TYPE = 'alipay'`，`ALI_CUSTOM = false`
  - 构建：`npm run build`

- 支付宝支付-需要登录(有金币兑换)-有任意金额

  - 分支：该版本在`main`分支，请先切换到对应分支
  - 设置：`PAYMENT_TYPE = 'alipay'`，`ALI_CUSTOM = true`
  - 构建：`npm run build`

- 支付宝支付-无需登录(无金币兑换)-无任意金额

  - 分支：该版本在`alipay`分支，请先切换到对应分支
  - 设置：无需配置
  - 构建：`npm run build`

- 支付宝支付-无需登录(无金币兑换)-有任意金额
  - 分支：该版本在`alipay-anymoney`分支，请先切换到对应分支
  - 设置：无需配置
  - 构建：`npm run build`

### 说明与建议

- 金币兑换：登录版的“金币兑换”由后端登录态返回的权限 `canExchange` 控制，无需额外打包开关；无需登录版本不包含兑换入口。
- 产物命名：每次构建会生成 `dist/`，建议按以下名称保存归档，便于区分：
  - `微信支付-无需登录(无金币兑换)`
  - `微信支付-需要登录(有金币兑换)`
  - `支付宝支付-无需登录(无金币兑换)-无任意金额`
  - `支付宝支付-无需登录(无金币兑换)-有任意金额`
  - `支付宝支付-需要登录(有金币兑换)-无任意金额`
  - `支付宝支付-需要登录(有金币兑换)-有任意金额`