# 登录注册协议同意功能说明

## 一、功能概述

在登录和注册界面添加了用户协议和隐私政策的同意选项，确保用户在使用系统前已阅读并同意相关条款，符合应用合规要求。

## 二、涉及文件

### 1. 登录页面
**文件路径**: `app/pages/login.vue`

**修改内容**:
- 新增 `agreedToPolicy` 数据属性，默认值为 `true`（默认选中）
- 添加协议同意复选框组件
- 添加 `onAgreementChange` 方法处理复选框状态变更
- 修改 `handleLogin` 方法，增加协议同意校验
- 优化样式布局，协议复选框位于登录按钮上方

### 2. 注册页面
**文件路径**: `app/pages/register.vue`

**修改内容**:
- 修改 `agreedToTerms` 默认值为 `true`（原为 `false`）
- 保持原有的协议同意功能和校验逻辑

## 三、功能详情

### 登录页面

#### 1. 界面布局
```
┌─────────────────────────┐
│    Logo + 标题          │
├─────────────────────────┤
│    账号输入框           │
│    密码输入框           │
│    验证码输入框         │
├─────────────────────────┤
│ ☑ 我已阅读并同意       │
│   《用户协议》和       │
│   《隐私政策》         │
├─────────────────────────┤
│    【登录】按钮         │
└─────────────────────────┘
```

#### 2. 核心代码
```javascript
data() {
  return {
    agreedToPolicy: true,  // 默认选中
    // ...
  }
}

// 协议同意状态变更
onAgreementChange(e) {
  this.agreedToPolicy = e.detail.value.length > 0
}

// 登录验证
async handleLogin() {
  if (!this.agreedToPolicy) {
    this.$modal.msgError("请先阅读并同意用户协议和隐私政策")
    return
  }
  // ... 其他验证逻辑
}
```

#### 3. 界面组件
```vue
<view class="agreement-checkbox">
  <checkbox-group @change="onAgreementChange">
    <label class="checkbox-label">
      <checkbox :checked="agreedToPolicy" :value="agreedToPolicy" color="#007AFF" />
      <text class="agreement-text">
        <text class="text-grey1">我已阅读并同意</text>
        <text @click.stop="handleUserAgrement" class="text-blue agreement-link">《用户协议》</text>
        <text class="text-grey1">和</text>
        <text @click.stop="handlePrivacy" class="text-blue agreement-link">《隐私政策》</text>
      </text>
    </label>
  </checkbox-group>
</view>
```

### 注册页面

#### 1. 界面布局
```
┌─────────────────────────┐
│    Logo + 标题          │
├─────────────────────────┤
│    账号输入框           │
│    密码输入框           │
│    确认密码输入框       │
│    验证码输入框         │
├─────────────────────────┤
│ ☑ 我已阅读并同意       │
│   《用户服务协议》和   │
│   《隐私政策》         │
├─────────────────────────┤
│    【注册】按钮         │
└─────────────────────────┘
```

#### 2. 核心代码
```javascript
data() {
  return {
    agreedToTerms: true,  // 默认选中（已修改）
    // ...
  }
}

// 注册验证
async handleRegister() {
  // ... 其他验证
  if (!this.agreedToTerms) {
    this.$modal.msgError("请先阅读并同意用户服务协议和隐私政策")
    return
  }
  // ...
}
```

## 四、默认状态说明

### 为什么默认选中？

1. **用户体验优化**
   - 减少用户操作步骤
   - 避免用户因忘记勾选而无法登录/注册
   - 符合大多数用户的使用习惯

2. **合规性保障**
   - 复选框仍然可见，用户可以主动取消
   - 协议链接可点击查看，信息透明
   - 用户有充分的知情权和选择权

3. **法律要求**
   - 明确展示协议内容
   - 提供便捷的协议查看途径
   - 用户可以自主选择是否同意

## 五、协议页面说明

### 1. 用户协议
**路径**: `/pages/mine/user-agreement/index`
- 详细说明用户权利和义务
- 服务条款和使用规范
- 支持匿名访问（已配置白名单）

### 2. 隐私政策
**路径**: `/pages/mine/privacy-policy/index`
- 个人信息收集说明
- 信息使用和存储规则
- 用户权益保护措施
- 支持匿名访问（已配置白名单）

## 六、交互流程

### 登录流程
```mermaid
graph TD
    A[打开登录页] --> B[协议默认选中]
    B --> C{输入账号密码}
    C --> D{点击登录}
    D --> E{检查协议是否同意}
    E -->|未同意| F[提示:请先同意协议]
    E -->|已同意| G[验证账号密码]
    G --> H[登录成功]
    
    B --> I[点击协议链接]
    I --> J[查看协议详情]
    J --> B
```

### 注册流程
```mermaid
graph TD
    A[打开注册页] --> B[协议默认选中]
    B --> C{输入注册信息}
    C --> D{点击注册}
    D --> E{检查协议是否同意}
    E -->|未同意| F[提示:请先同意协议]
    E -->|已同意| G[验证注册信息]
    G --> H[注册成功]
    
    B --> I[点击协议链接]
    I --> J[查看协议详情]
    J --> B
```

## 七、样式说明

### 登录页面样式
```scss
.agreement-checkbox {
  margin: 30rpx 0 20rpx 0;
  padding: 0 20rpx;
  
  .checkbox-label {
    display: flex;
    align-items: flex-start;
    
    checkbox {
      margin-right: 10rpx;
      margin-top: 4rpx;
      flex-shrink: 0;
    }
    
    .agreement-text {
      flex: 1;
      line-height: 1.8;
      font-size: 24rpx;
      
      .text-grey1 {
        color: #888;
      }
      
      .text-blue {
        color: #007AFF;
        margin: 0 5rpx;
      }
    }
  }
}
```

### 注册页面样式
```scss
.agreement-section {
  margin: 30rpx 0;
  
  .agreement-label {
    display: flex;
    align-items: flex-start;
    
    checkbox {
      margin-right: 15rpx;
      transform: scale(0.9);
      flex-shrink: 0;
    }
    
    .agreement-text {
      flex: 1;
      font-size: 26rpx;
      color: #666;
      line-height: 2;
      text-align: left;
      
      .agreement-link {
        color: #007AFF;
        text-decoration: underline;
      }
    }
  }
}
```

## 八、错误提示

### 登录页面
- **未同意协议**: "请先阅读并同意用户协议和隐私政策"
- **账号为空**: "请输入您的账号"
- **密码为空**: "请输入您的密码"
- **验证码为空**: "请输入验证码"

### 注册页面
- **未同意协议**: "请先阅读并同意用户服务协议和隐私政策"
- **账号为空**: "请输入您的账号"
- **密码为空**: "请输入您的密码"
- **确认密码为空**: "请再次输入您的密码"
- **密码不一致**: "两次输入的密码不一致"
- **验证码为空**: "请输入验证码"

## 九、注意事项

1. **协议更新**
   - 协议内容更新时，需同步更新协议页面
   - 建议在协议页面显示更新日期

2. **用户权益**
   - 用户可以随时取消勾选
   - 取消后无法登录/注册
   - 协议链接始终可点击查看

3. **合规性**
   - 确保协议内容完整、准确
   - 提供清晰的协议查看途径
   - 保障用户知情权和选择权

4. **测试建议**
   - 测试默认选中状态
   - 测试取消选中后的登录/注册流程
   - 测试协议链接跳转功能
   - 测试不同设备的显示效果

## 十、后续优化建议

1. **协议版本管理**
   - 记录用户同意的协议版本
   - 协议更新时提示用户重新确认

2. **用户体验**
   - 添加协议预览功能（弹窗查看）
   - 支持协议关键内容高亮显示

3. **数据统计**
   - 统计用户协议同意率
   - 分析用户协议查看情况

4. **多语言支持**
   - 支持中英文切换
   - 不同地区显示对应的法律条款

---

**文档版本**: v1.0  
**创建日期**: 2025-01-XX  
**最后更新**: 2025-01-XX  
**维护人员**: 系统管理员