# PC渠道配置

## 概述

PC是桌面网页应用的重要平台，具有大屏幕、高分辨率、丰富交互的特点。本文档描述了PC渠道的完整配置流程。

## 基本信息

- **渠道标识**: `pc`
- **渠道名称**: PC
- **渠道类型**: 桌面网页
- **所属分组**: 网页端 (web)

## 配置要素

### 1. 基本配置

```php
// 渠道基本信息
'channel' => 'pc',
'name' => 'PC',
'status' => true, // 开启/关闭
'description' => 'PC桌面网页应用平台接入'
```

### 2. 网页平台配置

#### 必填参数
- **域名**: 应用访问域名
- **CDN配置**: 静态资源CDN（可选）
- **SSL证书**: HTTPS证书配置

#### 配置示例
```php
'pc_config' => [
    'domain' => 'https://www.yourdomain.com',
    'cdn_domain' => 'https://cdn.yourdomain.com',
    'ssl_enabled' => true,
    'cache_config' => [
        'enable' => true,
        'expire' => 3600, // 缓存过期时间
    ],
    'seo_config' => [
        'title' => '应用标题',
        'keywords' => '关键词',
        'description' => '应用描述'
    ],
    'analytics' => [
        'google_analytics' => 'UA-XXXXXXXX-X',
        'baidu_analytics' => 'your_baidu_id'
    ]
]
```

#### 获取方式
1. 购买域名并完成备案
2. 配置DNS解析
3. 申请SSL证书
4. 配置CDN加速（可选）

### 3. 支付配置

PC支持以下支付方式：

#### 3.1 支付宝支付 ✅ (推荐)
- **状态**: 开启
- **优先级**: 1
- **配置要求**: 
  - 需要开通支付宝商户号
  - 配置即时到账
  - 设置支付证书

```php
'payment_config' => [
    'alipay' => [
        'enabled' => true,
        'app_id' => '支付宝应用ID',
        'private_key' => '应用私钥',
        'public_key' => '支付宝公钥',
        'notify_url' => '支付回调地址',
        'return_url' => '支付返回地址'
    ]
]
```

#### 3.2 线下支付 ✅
- **状态**: 开启
- **优先级**: 2
- **说明**: 用户选择线下支付方式，如银行转账、现金等

```php
'payment_config' => [
    'offline' => [
        'enabled' => true,
        'methods' => [
            'bank_transfer' => '银行转账',
            'cash' => '现金支付',
            'pos' => 'POS机刷卡'
        ]
    ]
]
```

#### 3.3 余额支付 ✅
- **状态**: 开启
- **优先级**: 3
- **说明**: 用户使用账户余额进行支付

```php
'payment_config' => [
    'balance' => [
        'enabled' => true,
        'min_amount' => 0.01, // 最小支付金额
        'max_amount' => 100000, // 最大支付金额
    ]
]
```

#### 3.4 不支持的支付方式 ❌
- 微信支付
- 货到付款

### 4. 登录配置

#### 4.1 自动登录
- **状态**: 开启/关闭
- **说明**: 进入应用后，用户将会自动授权登录，未注册用户将会自动注册

```php
'login_config' => [
    'auto_login' => false, // PC通常不建议自动登录
    'auto_register' => true,
    'remember_login' => true, // 记住登录状态
]
```

#### 4.2 绑定手机号
- **状态**: 开启/关闭
- **说明**: 授权登录后，未绑定手机号的用户，将会立即提醒绑定手机号

```php
'login_config' => [
    'force_mobile' => true,
    'mobile_verify' => true, // 手机号验证
]
```

#### 4.3 第三方登录
- **QQ登录**: 推荐使用
- **微信登录**: 需要配置微信开放平台
- **其他第三方登录**: 根据需要配置

```php
'login_config' => [
    'qq_login' => [
        'enabled' => true,
        'app_id' => 'QQ互联AppID',
        'app_key' => 'QQ互联AppKey'
    ],
    'wechat_login' => [
        'enabled' => true,
        'app_id' => '微信开放平台AppID',
        'app_secret' => '微信开放平台AppSecret',
        'scope' => 'snsapi_login'
    ]
]
```

### 5. 功能特性

| 功能 | 支持状态 | 说明 |
|------|---------|------|
| 支付功能 | ✅ | 支持支付宝支付、线下支付、余额支付 |
| 分享功能 | ❌ | 不支持原生分享功能 |
| 定位功能 | ❌ | 不支持获取用户地理位置 |
| 拍照功能 | ❌ | 不支持调用摄像头拍照 |
| 推送功能 | ❌ | 不支持推送通知 |

## 配置流程

### 1. 域名与服务器配置

1. **域名配置**
   - 购买域名并完成备案
   - 配置DNS解析到服务器
   - 申请SSL证书

2. **服务器配置**
   - 配置Web服务器（Nginx/Apache）
   - 配置HTTPS
   - 配置Gzip压缩

3. **CDN配置**（可选）
   - 配置静态资源CDN
   - 配置缓存策略
   - 配置缓存刷新

### 2. 系统后台配置

1. **基本信息配置**
   ```
   渠道状态: 开启
   渠道名称: PC
   渠道描述: PC桌面网页应用平台
   ```

2. **平台参数配置**
   ```
   域名: https://www.yourdomain.com
   CDN域名: https://cdn.yourdomain.com
   SSL状态: 开启
   ```

3. **支付方式配置**
   ```
   微信支付: 关闭
   支付宝支付: 开启
   余额支付: 开启
   线下支付: 开启
   ```

4. **登录方式配置**
   ```
   自动登录: 关闭
   绑定手机号: 开启
   QQ登录: 开启
   微信登录: 开启
   ```

### 3. 开发配置

1. **前端代码配置**
   ```javascript
   // config.js
   const config = {
     apiUrl: 'https://api.yourdomain.com',
     cdnUrl: 'https://cdn.yourdomain.com',
     channel: 'pc',
     payment: {
       wechat: false,
       alipay: true,
       balance: true,
       offline: true
     },
     responsive: {
       minWidth: 1024, // 最小宽度
       maxWidth: 1920  // 最大宽度
     }
   };
   ```

2. **登录授权**
   ```javascript
   // QQ登录
   function loginWithQQ() {
     QC.Login.showPopup({
       appId: 'your_app_id',
       redirectURI: 'https://www.yourdomain.com/callback'
     });
   }
   
   // 微信登录
   function loginWithWechat() {
     const redirectUri = encodeURIComponent(window.location.href);
     const authUrl = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect`;
     
     window.open(authUrl, '_blank', 'width=400,height=600');
   }
   ```

3. **支付调用**
   ```javascript
   // 支付宝支付
   function payWithAlipay(orderInfo) {
     const form = document.createElement('form');
     form.method = 'POST';
     form.action = 'https://openapi.alipay.com/gateway.do';
     
     Object.keys(orderInfo).forEach(key => {
       const input = document.createElement('input');
       input.type = 'hidden';
       input.name = key;
       input.value = orderInfo[key];
       form.appendChild(input);
     });
     
     document.body.appendChild(form);
     form.submit();
   }
   ```

## 测试验证

### 1. 开发环境测试
- 使用Chrome开发者工具
- 测试不同分辨率适配
- 测试支付功能

### 2. 浏览器兼容性测试
- 测试Chrome、Firefox、Safari等浏览器
- 测试IE11等旧版浏览器
- 验证功能完整性

### 3. 接口测试
```bash
# 测试登录接口
curl -X POST "https://api.yourdomain.com/api/login" \
  -H "Content-Type: application/json" \
  -d '{"code":"授权code","channel":"pc"}'

# 测试支付接口
curl -X POST "https://api.yourdomain.com/api/payment/create" \
  -H "Content-Type: application/json" \
  -d '{"amount":100,"channel":"pc","payment_type":"alipay"}'
```

## 注意事项

1. **响应式设计**
   - 适配不同屏幕分辨率
   - 考虑最小支持宽度
   - 优化大屏幕显示效果

2. **性能优化**
   - 压缩静态资源
   - 使用CDN加速
   - 启用浏览器缓存

3. **SEO优化**
   - 设置合适的meta标签
   - 优化页面标题和描述
   - 使用语义化HTML

4. **安全配置**
   - 使用HTTPS
   - 配置CSP策略
   - 防止XSS攻击

5. **浏览器兼容性**
   - 考虑IE11等旧版浏览器
   - 使用polyfill支持新特性
   - 提供降级方案

## 常见问题

### Q1: 如何处理IE浏览器兼容性？
A: 使用polyfill、避免使用ES6+语法、提供降级方案。

### Q2: 为什么不支持微信支付？
A: PC端微信支付需要扫码，用户体验不如支付宝，建议使用支付宝支付。

### Q3: 如何优化PC端加载速度？
A: 使用CDN、压缩资源、优化图片、启用Gzip压缩。

### Q4: 如何实现响应式设计？
A: 使用CSS媒体查询、弹性布局、相对单位等技术。

## 相关链接

- [支付宝即时到账文档](https://opendocs.alipay.com/open/62/104743)
- [QQ互联文档](https://wiki.connect.qq.com/)
- [微信开放平台文档](https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html)
- [MDN Web文档](https://developer.mozilla.org/zh-CN/)
- [Can I Use](https://caniuse.com/)