# 登录页面 (Login Page)

## 概述 (Overview)

这是海外预约小程序的登录页面，支持微信一键登录功能。

## 功能特性 (Features)

- ✅ 微信一键登录 (WeChat One-Click Login)
- ✅ 用户协议和隐私政策弹窗 (User Agreement & Privacy Policy Modals)
- ✅ 多语言支持 (Multi-language Support: Chinese, English, Portuguese)
- ✅ 自动重定向已登录用户 (Auto-redirect for logged-in users)
- ✅ 响应式设计 (Responsive Design)

## 文件结构 (File Structure)

```
pages/login/
├── login-page.vue      # 登录页面组件
└── README.md          # 本文件
```

## 使用方法 (Usage)

### 1. 路由配置 (Route Configuration)

在 `pages.json` 中添加登录页面路由：
#
```json
{
  "path": "pages/login/login-page",
  "style": {
    "navigationBarTitleText": "登录",
    "navigationStyle": "custom"
  }
}
```

### 2. 导航到登录页面 (Navigate to Login Page)

```javascript
uni.navigateTo({
  url: '/pages/login/login-page'
})
```

### 3. 从登录页面返回 (Navigate Back from Login)

```javascript
uni.navigateBack()
```

## 组件属性 (Component Props)

无 (None)

## 事件 (Events)

无 (None)

## 数据流 (Data Flow)

1. 用户进入登录页面
2. 用户勾选同意用户协议和隐私政策
3. 用户点击"一键注册/登录"按钮
4. 调用微信登录 API 获取授权码
5. 将授权码发送到后端进行认证
6. 后端返回 token 和用户信息
7. 存储 token 到本地存储
8. 重定向到首页

## 国际化 (Internationalization)

登录页面支持三种语言：

- 中文 (Chinese) - `locale/zh.js`
- 英文 (English) - `locale/en.js`
- 葡萄牙文 (Portuguese) - `locale/pt.js`

所有翻译都在 `login` 命名空间下。

## API 端点 (API Endpoints)

### 微信登录 (WeChat Login)

```
POST /api/v1/auth/wechat-login
Content-Type: application/json

{
  "code": "string"  // WeChat authorization code
}

Response:
{
  "success": true,
  "data": {
    "token": "string",
    "refreshToken": "string",
    "user": {
      "id": "string",
      "nickname": "string",
      "avatar": "string",
      "language": "string"
    }
  }
}
```

## 样式定制 (Style Customization)

### 主要颜色 (Primary Color)

登录按钮使用 `#17a2b8` 颜色。可以在 `<style>` 部分修改：

```scss
.login-button {
  background-color: #17a2b8;  // 修改此颜色
}
```

### 响应式断点 (Responsive Breakpoints)

页面使用 `rpx` 单位，自动适配不同屏幕尺寸。

## 常见问题 (FAQ)

### Q: 如何处理登录失败？

A: 页面会显示错误提示。用户可以重新尝试登录。

### Q: 如何修改用户协议内容？

A: 修改 `getUserAgreementContent()` 方法中的内容，或在翻译文件中修改 `login.userAgreementContent`。

### Q: 如何禁用登录按钮直到用户同意协议？

A: 页面已实现此功能。用户必须勾选协议复选框才能点击登录按钮。

## 浏览器兼容性 (Browser Compatibility)

- ✅ 微信小程序 (WeChat Mini Program)
- ✅ 支付宝小程序 (Alipay Mini Program)
- ✅ 字节跳动小程序 (ByteDance Mini Program)

## 许可证 (License)

MIT
