79 lines
2.8 KiB
Markdown
79 lines
2.8 KiB
Markdown
## 实现计划
|
||
|
||
### 1. 分析现有代码结构
|
||
- 定位邀请信息区域：`invitation-section` 类名的 `div`
|
||
- 现有内容包括：邀请人数、邀请码卡片、邀请相关列表
|
||
- 将在 `invitation-related-section` 后添加新的邀请规则区域
|
||
|
||
### 2. 设计HTML结构
|
||
在 `invitation-related-section` 后添加新的邀请规则区域：
|
||
```html
|
||
<div class="invitation-rules">
|
||
<h3>邀请规则</h3>
|
||
|
||
<!-- 免费会员邀请规则 - 始终显示 -->
|
||
<div class="role-rules free-rules">
|
||
<h4>免费会员邀请规则</h4>
|
||
<ul>
|
||
<li>每成功邀请 1 名用户注册：</li>
|
||
<ul>
|
||
<li>奖励 300 积分</li>
|
||
</ul>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 达人会员邀请规则 - 始终显示 -->
|
||
<div class="role-rules creator-rules">
|
||
<h4>达人会员邀请规则</h4>
|
||
<p>当达人邀请码成功邀请 1 名新用户注册：</p>
|
||
<ol>
|
||
<li>拥有免费会员全部权限</li>
|
||
<li>额外具备带货佣金能力</li>
|
||
<li>立即奖励 300 积分</li>
|
||
<li>建立绑定关系（达人 ←→ 用户）</li>
|
||
<li>被邀请用户后续下单：</li>
|
||
<li>达人可获得 15% 佣金</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- 成为达人会员模块 - 仅免费会员可见 -->
|
||
<div v-if="userData.role === 'free'" class="upgrade-creator-section">
|
||
<h4>成为达人会员</h4>
|
||
<div class="qr-code-container">
|
||
<!-- QR码占位 -->
|
||
<div class="qr-placeholder">达人会员二维码</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
### 3. 添加CSS样式
|
||
- 为 `invitation-rules` 添加容器样式，保持与现有模块一致
|
||
- 为 `role-rules` 添加基础样式，区分免费会员和达人会员规则
|
||
- 为不同类型的列表（ul/ol）添加自定义样式
|
||
- 为成为达人会员模块添加样式，包含二维码容器
|
||
- 支持浅色和暗色主题
|
||
|
||
### 4. 样式设计要点
|
||
- 保持与现有设计语言一致，使用紫色主题色
|
||
- 免费会员规则使用蓝色调，达人会员规则使用紫色调
|
||
- 添加适当的间距、圆角和边框
|
||
- 列表项使用自定义项目符号增强视觉效果
|
||
- 二维码容器添加占位样式
|
||
- 支持响应式设计
|
||
|
||
### 5. 实现步骤
|
||
1. 在模板中添加邀请规则HTML结构，同时展示两个规则
|
||
2. 添加条件判断，仅对免费会员显示成为达人会员模块
|
||
3. 在CSS部分添加对应的样式
|
||
4. 确保支持暗色主题
|
||
5. 检查响应式设计在不同屏幕尺寸下的表现
|
||
|
||
### 6. 预期效果
|
||
- 同时展示免费会员和达人会员的邀请规则
|
||
- 清晰区分两个规则区块
|
||
- 仅免费会员能看到成为达人会员的二维码模块
|
||
- 整体设计与现有界面风格统一
|
||
- 支持深色模式切换
|
||
|
||
这个实现将清晰地向所有用户展示完整的邀请规则，同时根据用户角色提供个性化的升级入口。 |