71 lines
2.4 KiB
Markdown
71 lines
2.4 KiB
Markdown
# AgreePopup 用户协议同意弹窗组件
|
||
|
||
## 组件概述
|
||
|
||
AgreePopup 是一个用于登录流程中的用户协议同意弹窗组件，用于向用户展示隐私政策和用户协议，并获取用户的同意确认。
|
||
|
||
## 功能需求
|
||
|
||
### 界面设计
|
||
- **弹窗标题**：显示"温馨提示"标题，居中显示
|
||
- **关闭按钮**：右上角显示"×"关闭按钮，点击可关闭弹窗
|
||
- **内容区域**：
|
||
- 主要说明文字："您在使用朵花温泉服务前，请仔细阅读用户隐私条款及用户注册须知，当您点击同意，即表示您已经理解并同意该条款，该条款将构成对您具有法律约束力的文件。"
|
||
- 注意事项："请您注意：如果您不同意上述用户注册须知、隐私政策或其中任何约定，请您停止注册。如您阅读并点击同意即表示您已充分阅读理解并接受其全部内容，并表明您也同意朵花温泉可以依据以上隐私政策来处理您的个人信息。"
|
||
|
||
### 交互功能
|
||
- **复选框**：
|
||
- 显示蓝色勾选框
|
||
- 文字说明："本人已仔细阅读《用户协议》和《隐私协议》，知悉并诺遵守该内容。"
|
||
- 支持点击切换选中/未选中状态
|
||
- **确认按钮**：
|
||
- 显示"我知道了"按钮
|
||
- 蓝色背景，白色文字
|
||
- 圆角设计
|
||
- 点击后触发同意事件并关闭弹窗
|
||
|
||
### 技术要求
|
||
- 使用 Vue 3 Composition API
|
||
- 支持弹窗显示/隐藏控制
|
||
- 提供事件回调：同意、关闭
|
||
- 响应式设计，适配移动端
|
||
- 使用 uni-app 框架
|
||
|
||
### 样式规范
|
||
- 弹窗背景：白色
|
||
- 圆角设计
|
||
- 文字颜色：深灰色
|
||
- 按钮：蓝色主题色
|
||
- 复选框：蓝色选中状态
|
||
- 适当的内边距和间距
|
||
|
||
### 使用场景
|
||
- 用户首次登录时显示
|
||
- 隐私政策更新后重新确认
|
||
- 注册流程中的协议确认
|
||
|
||
## 组件接口
|
||
|
||
### Props
|
||
- `visible`: Boolean - 控制弹窗显示/隐藏
|
||
- `title`: String - 弹窗标题，默认"温馨提示"
|
||
|
||
### Events
|
||
- `@agree`: 用户点击同意时触发
|
||
- `@close`: 用户关闭弹窗时触发
|
||
- `@cancel`: 用户取消操作时触发
|
||
|
||
### Methods
|
||
- `show()`: 显示弹窗
|
||
- `hide()`: 隐藏弹窗
|
||
|
||
## 文件结构
|
||
```
|
||
AgreePopup/
|
||
├── README.md # 组件说明文档
|
||
├── index.vue # 组件主文件
|
||
├── styles/
|
||
│ └── index.scss # 组件样式文件
|
||
└── images/
|
||
└── 登录授权1.png # 设计稿参考图
|
||
``` |