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

一、功能概述

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

二、涉及文件

1. 登录页面

文件路径: app/pages/login.vue

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

2. 注册页面

文件路径: app/pages/register.vue

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

三、功能详情

登录页面

1. 界面布局

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

2. 核心代码

data() {
  return {
    agreedToPolicy: true,  // 默认选中
    // ...
  }
}

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

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

3. 界面组件

<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. 核心代码

data() {
  return {
    agreedToTerms: true,  // 默认选中（已修改）
    // ...
  }
}

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

四、默认状态说明

为什么默认选中？

用户体验优化

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

合规性保障

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

法律要求

明确展示协议内容
提供便捷的协议查看途径
用户可以自主选择是否同意

五、协议页面说明

1. 用户协议

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

2. 隐私政策

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

六、交互流程

登录流程

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

注册流程

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

七、样式说明

登录页面样式

.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;
      }
    }
  }
}

注册页面样式

.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;
      }
    }
  }
}

八、错误提示

登录页面

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

注册页面

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

九、注意事项

协议更新

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

用户权益

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

合规性

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

测试建议

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

十、后续优化建议

协议版本管理

记录用户同意的协议版本
协议更新时提示用户重新确认

用户体验

添加协议预览功能（弹窗查看）
支持协议关键内容高亮显示

数据统计

统计用户协议同意率
分析用户协议查看情况

多语言支持

支持中英文切换
不同地区显示对应的法律条款

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