offerpai/offerpai_web
7
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

左侧菜单，邀请，设置，和会员相关

Browse Source
This commit is contained in:
xuxin
2026-07-07 23:40:20 +08:00
parent b740e0cd39
commit 851310a901
18 changed files with 2090 additions and 2169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SettingsInviteDialog.vue
+41 -41
View File
@@ -3,55 +3,55 @@
<Teleport to="body">
<div v-if="modelValue" class="settings-invite-overlay" @click="$emit('update:modelValue', false)">
<div class="settings-invite-dialog" @click.stop>
<!-- 顶部渐变区域 -->
<!-- 顶部：标题 + 关闭按钮 -->
<div class="settings-invite-dialog__header">
<!-- 皇冠图标 -->
<span class="settings-invite-dialog__crown">♕</span>
<div class="settings-invite-dialog__header-text">
<h2 class="settings-invite-dialog__title">邀请好友免费获取 7 天会员</h2>
<p class="settings-invite-dialog__subtitle">好友通过你的链接注册并完成认证，得 3 天会员</p>
</div>
<!-- 关闭按钮 -->
<span class="settings-invite-dialog__close" @click="$emit('update:modelValue', false)">✕</span>
</div>
<!-- 关闭按钮 -->
<span class="settings-invite-dialog__close" @click="$emit('update:modelValue', false)">✕</span>
<!-- 邀请链接区域 -->
<div class="settings-invite-dialog__link-box">
<span class="settings-invite-dialog__link-text">{{ inviteUrl }}</span>
<span class="settings-invite-dialog__copy-btn" @click="handleCopy">复制</span>
</div>
<!-- 内容区域 -->
<div class="settings-invite-dialog__body">
<!-- 标题 -->
<h2 class="settings-invite-dialog__title">邀请好友免费获取 7 天会员</h2>
<!-- 副标题 -->
<p class="settings-invite-dialog__subtitle">好友通过你的链接注册并完成认证，得 3 天会员</p>
<!-- 邀请链接区域 -->
<div class="settings-invite-dialog__link-box">
<span class="settings-invite-dialog__link-text">{{ inviteUrl }}</span>
<button class="settings-invite-dialog__copy-btn" @click="handleCopy">复制链接</button>
</div>
<!-- 步骤说明 -->
<div class="settings-invite-dialog__step">
<div class="settings-invite-dialog__step-circle">1</div>
<span class="settings-invite-dialog__step-text">分享专属邀请链接给好友</span>
</div>
<div class="settings-invite-dialog__step">
<div class="settings-invite-dialog__step-circle">2</div>
<span class="settings-invite-dialog__step-text">好友完成注册并通过认证</span>
</div>
<div class="settings-invite-dialog__step">
<div class="settings-invite-dialog__step-circle">3</div>
<span class="settings-invite-dialog__step-text">获得 7 天会员奖励</span>
</div>
<!-- 底部统计 + 按钮 -->
<div class="settings-invite-dialog__footer">
<div class="settings-invite-dialog__stat">
<span class="settings-invite-dialog__stat-label">已邀请</span>
<span class="settings-invite-dialog__stat-value">{{ totalFriends }}人</span>
<!-- 邀请步骤区域 -->
<div class="settings-invite-dialog__steps">
<span class="settings-invite-dialog__steps-title">邀请步骤</span>
<div class="settings-invite-dialog__steps-list">
<!-- 步骤1 -->
<div class="settings-invite-dialog__step-item">
<span class="settings-invite-dialog__step-num">1</span>
<span class="settings-invite-dialog__step-text">分享专属邀请链接给好友</span>
</div>
<div class="settings-invite-dialog__stat">
<span class="settings-invite-dialog__stat-label">累计获得</span>
<span class="settings-invite-dialog__stat-value">{{ totalDays }}天</span>
<!-- 步骤2 -->
<div class="settings-invite-dialog__step-item">
<span class="settings-invite-dialog__step-num">2</span>
<span class="settings-invite-dialog__step-text">好友完成注册并通过认证</span>
</div>
<!-- 步骤3 -->
<div class="settings-invite-dialog__step-item">
<span class="settings-invite-dialog__step-num">3</span>
<span class="settings-invite-dialog__step-text">获得 7 天会员奖励</span>
</div>
<button class="settings-invite-dialog__member-btn" @click="handleGoMember">成为正式会员→</button>
</div>
</div>
<!-- 底部：统计 + 按钮 -->
<div class="settings-invite-dialog__footer">
<div class="settings-invite-dialog__stat">
<span class="settings-invite-dialog__stat-line">已邀请：<em>{{ totalFriends }}人</em></span>
<span class="settings-invite-dialog__stat-line">累计获得：<em>{{ totalDays }}天</em></span>
</div>
<button class="settings-invite-dialog__member-btn" @click="handleGoMember">
<span>成为正式会员</span>
<span class="settings-invite-dialog__member-btn-arrow">→</span>
</button>
</div>
</div>
</div>
</Teleport>