新增：代理系统指南
This commit is contained in:
@@ -89,6 +89,13 @@ const router = createRouter({
|
|||||||
component: () => import("@/views/HelpGuide.vue"),
|
component: () => import("@/views/HelpGuide.vue"),
|
||||||
meta: { title: "引导指南" },
|
meta: { title: "引导指南" },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/agent/system-guide",
|
||||||
|
name: "agentSystemGuide",
|
||||||
|
component: () =>
|
||||||
|
import("@/views/AgentSystemGuide.vue"),
|
||||||
|
meta: { title: "代理系统指南" },
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/withdraw",
|
path: "/withdraw",
|
||||||
name: "withdraw",
|
name: "withdraw",
|
||||||
|
|||||||
530
src/views/AgentSystemGuide.vue
Normal file
530
src/views/AgentSystemGuide.vue
Normal file
@@ -0,0 +1,530 @@
|
|||||||
|
<template>
|
||||||
|
<div class="agent-system-guide min-h-screen" style="background-color: #f7f8fa;">
|
||||||
|
<div class="px-4 pt-6 pb-4">
|
||||||
|
<h1 class="text-2xl font-bold mb-1" style="color: var(--van-text-color);">代理系统指南</h1>
|
||||||
|
<p class="text-sm" style="color: var(--van-text-color-2);">了解代理政策、等级特权与收益计算</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="px-4 pb-6 space-y-4">
|
||||||
|
<!-- 代理政策概述 -->
|
||||||
|
<section class="bg-white rounded-lg p-4" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
|
||||||
|
<div class="flex items-center mb-3">
|
||||||
|
<div class="w-1 h-5 rounded-full mr-2" style="background-color: var(--van-theme-primary);"></div>
|
||||||
|
<h2 class="text-lg font-semibold" style="color: var(--van-text-color);">代理政策概述</h2>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2.5 text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
<p>
|
||||||
|
全能查代理系统采用三级代理体系，为合作伙伴提供多层级、多收益的推广模式。
|
||||||
|
通过推广平台产品和服务，代理可获得推广佣金、下级返佣、升级返佣等多种收益。
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
系统分为<strong>普通代理</strong>、<strong>黄金代理</strong>、<strong>钻石代理</strong>三个等级，
|
||||||
|
不同等级享有不同的权限和收益比例。
|
||||||
|
</p>
|
||||||
|
<p class="text-sm mt-2" style="color: var(--van-text-color-3);">
|
||||||
|
详细政策请查看《代理管理协议》
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 代理等级说明 -->
|
||||||
|
<section class="bg-white rounded-lg p-4" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-1 h-5 rounded-full mr-2" style="background-color: var(--van-theme-primary);"></div>
|
||||||
|
<h2 class="text-lg font-semibold" style="color: var(--van-text-color);">代理等级体系</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- 普通代理 -->
|
||||||
|
<div class="border rounded-lg p-4 mb-3" style="border-color: #e5e7eb; background-color: #fafafa;">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div
|
||||||
|
class="w-10 h-10 rounded-full bg-gray-400 flex items-center justify-center text-white font-semibold text-base mr-3">
|
||||||
|
1
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-semibold" style="color: var(--van-text-color);">普通代理</h3>
|
||||||
|
<p class="text-sm" style="color: var(--van-text-color-2);">基础代理特权</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="px-2.5 py-1 rounded-full text-sm font-medium"
|
||||||
|
style="background-color: #f3f4f6; color: #6b7280;">
|
||||||
|
入门级
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1.5 text-sm" style="color: var(--van-text-color-2);">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5">✓</span>
|
||||||
|
<span>推广产品获得推广佣金</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5">✓</span>
|
||||||
|
<span>邀请下级代理，获得下级推广返佣</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5">✓</span>
|
||||||
|
<span>查看团队统计和转化率数据</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5">✓</span>
|
||||||
|
<span>生成和管理邀请码</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5">✓</span>
|
||||||
|
<span>申请升级为黄金或钻石代理</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 黄金代理 -->
|
||||||
|
<div class="border rounded-lg p-4 mb-3" style="border-color: #fbbf24; background-color: #fffbeb;">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold text-base mr-3"
|
||||||
|
style="background: linear-gradient(135deg, #f59e0b, #d97706);">
|
||||||
|
2
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-semibold" style="color: #92400e;">黄金代理</h3>
|
||||||
|
<p class="text-sm" style="color: #b45309;">高级代理特权</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="px-2.5 py-1 rounded-full text-sm font-medium"
|
||||||
|
style="background-color: #fef3c7; color: #92400e;">
|
||||||
|
进阶级
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1.5 text-sm" style="color: var(--van-text-color-2);">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5">✓</span>
|
||||||
|
<span class="font-medium">享有普通代理所有权限</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-yellow-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>更高的推广佣金比例</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-yellow-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>更高的下级推广返佣比例</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-yellow-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>获得下级升级返佣（当普通下级升级为黄金时）</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-yellow-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>可申请升级为钻石代理</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 钻石代理 -->
|
||||||
|
<div class="border rounded-lg p-4" style="border-color: #a855f7; background-color: #faf5ff;">
|
||||||
|
<div class="flex items-center justify-between mb-3">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold text-base mr-3"
|
||||||
|
style="background: linear-gradient(135deg, #9333ea, #7c3aed);">
|
||||||
|
💎
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-base font-semibold" style="color: #6b21a8;">钻石代理</h3>
|
||||||
|
<p class="text-sm" style="color: #7c3aed;">尊享代理特权</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="px-2.5 py-1 rounded-full text-sm font-medium"
|
||||||
|
style="background-color: #e9d5ff; color: #6b21a8;">
|
||||||
|
最高级
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-1.5 text-sm" style="color: var(--van-text-color-2);">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5">✓</span>
|
||||||
|
<span class="font-medium">享有黄金代理所有权限</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-purple-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>最高推广佣金比例</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-purple-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>最高下级推广返佣比例</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-purple-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>获得下级升级返佣（当普通/黄金下级升级时）</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-purple-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span class="font-medium">可调整下级代理等级（将普通代理升级为黄金代理）</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-purple-500 mr-1.5 mt-0.5">★</span>
|
||||||
|
<span>专属客服支持</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 收益计算说明 -->
|
||||||
|
<section class="bg-white rounded-lg p-4" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-1 h-5 rounded-full mr-2" style="background-color: var(--van-theme-primary);"></div>
|
||||||
|
<h2 class="text-lg font-semibold" style="color: var(--van-text-color);">收益计算方式</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- 推广佣金 -->
|
||||||
|
<div class="rounded-lg p-3 border-l-2" style="background-color: #eff6ff; border-color: #3b82f6;">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<van-icon name="gold-coin" class="text-base mr-2" style="color: #3b82f6;" />
|
||||||
|
<h3 class="text-base font-semibold" style="color: #1e40af;">推广佣金</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm mb-2.5" style="color: var(--van-text-color-2);">
|
||||||
|
当您推广的产品被用户购买并支付成功后，您将获得推广佣金。
|
||||||
|
</p>
|
||||||
|
<div class="bg-white rounded p-2.5 text-sm">
|
||||||
|
<div class="font-medium mb-1.5" style="color: var(--van-text-color);">计算公式：</div>
|
||||||
|
<div class="mb-1.5" style="color: var(--van-text-color-2);">
|
||||||
|
推广佣金 = 订单金额 × 佣金比例
|
||||||
|
</div>
|
||||||
|
<div class="text-sm" style="color: var(--van-text-color-3);">
|
||||||
|
佣金比例根据您的代理等级和产品类型而定，等级越高，佣金比例越高
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 下级推广返佣 -->
|
||||||
|
<div class="rounded-lg p-3 border-l-2" style="background-color: #f0fdf4; border-color: #22c55e;">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<van-icon name="gift-o" class="text-base mr-2" style="color: #22c55e;" />
|
||||||
|
<h3 class="text-base font-semibold" style="color: #15803d;">下级推广返佣</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm mb-2.5" style="color: var(--van-text-color-2);">
|
||||||
|
当您的下级代理推广产品产生订单时，您将获得一定比例的返佣。
|
||||||
|
</p>
|
||||||
|
<div class="bg-white rounded p-2.5 text-sm">
|
||||||
|
<div class="font-medium mb-1.5" style="color: var(--van-text-color);">返佣规则：</div>
|
||||||
|
<ul class="space-y-1 mb-1.5" style="color: var(--van-text-color-2);">
|
||||||
|
<li>• 直接下级：获得直接下级推广订单的返佣</li>
|
||||||
|
<li>• 间接下级：获得间接下级推广订单的返佣</li>
|
||||||
|
<li>• 返佣比例根据您的代理等级而定</li>
|
||||||
|
</ul>
|
||||||
|
<div class="text-sm" style="color: var(--van-text-color-3);">
|
||||||
|
返佣金额 = 下级订单金额 × 返佣比例
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 下级升级返佣 -->
|
||||||
|
<div class="rounded-lg p-3 border-l-2" style="background-color: #faf5ff; border-color: #a855f7;">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<van-icon name="arrow-up" class="text-base mr-2" style="color: #a855f7;" />
|
||||||
|
<h3 class="text-base font-semibold" style="color: #6b21a8;">下级升级返佣</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm mb-2.5" style="color: var(--van-text-color-2);">
|
||||||
|
当您的下级代理付费升级为更高等级时，您将获得升级返佣。
|
||||||
|
</p>
|
||||||
|
<div class="bg-white rounded p-2.5 text-sm">
|
||||||
|
<div class="font-medium mb-1.5" style="color: var(--van-text-color);">返佣规则：</div>
|
||||||
|
<ul class="space-y-1 mb-1.5" style="color: var(--van-text-color-2);">
|
||||||
|
<li>• 普通代理升级为黄金代理：上级获得返佣</li>
|
||||||
|
<li>• 普通/黄金代理升级为钻石代理：上级获得返佣</li>
|
||||||
|
<li>• 返佣金额由系统配置，在升级时显示</li>
|
||||||
|
</ul>
|
||||||
|
<div class="text-sm" style="color: var(--van-text-color-3);">
|
||||||
|
只有黄金代理和钻石代理才能获得下级升级返佣
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 收益统计 -->
|
||||||
|
<div class="rounded-lg p-3 border-l-2" style="background-color: #fff7ed; border-color: #f97316;">
|
||||||
|
<div class="flex items-center mb-2">
|
||||||
|
<van-icon name="balance-list" class="text-base mr-2" style="color: #f97316;" />
|
||||||
|
<h3 class="text-base font-semibold" style="color: #c2410c;">收益统计</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded p-2.5 text-sm" style="color: var(--van-text-color-2);">
|
||||||
|
<p class="mb-1.5">您可以在"我的"页面查看详细的收益统计：</p>
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li>• <span class="font-medium">累计总收益</span>：所有收益的总和</li>
|
||||||
|
<li>• <span class="font-medium">今日收益</span>：当天的收益金额</li>
|
||||||
|
<li>• <span class="font-medium">本月收益</span>：本月的收益金额</li>
|
||||||
|
<li>• <span class="font-medium">余额</span>：可提现的金额</li>
|
||||||
|
<li>• <span class="font-medium">风险保障金</span>：冻结的保障金</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 功能玩法 -->
|
||||||
|
<section class="bg-white rounded-lg p-4" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-1 h-5 rounded-full mr-2" style="background-color: var(--van-theme-primary);"></div>
|
||||||
|
<h2 class="text-lg font-semibold" style="color: var(--van-text-color);">功能玩法</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<!-- 推广查询 -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #eff6ff; border-color: #bfdbfe;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="share-o" class="text-sm mr-1.5" style="color: #3b82f6;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #1e40af;">推广查询</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
生成推广链接，分享给用户购买查询服务，获得推广佣金
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 邀请下级 -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #f0fdf4; border-color: #bbf7d0;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="friends-o" class="text-sm mr-1.5" style="color: #22c55e;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #15803d;">邀请下级</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
通过邀请码邀请他人成为您的下级代理，获得下级推广返佣
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 团队管理 -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #faf5ff; border-color: #e9d5ff;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="manager-o" class="text-sm mr-1.5" style="color: #a855f7;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #6b21a8;">团队管理</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
查看团队统计、转化率数据，了解团队发展情况
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 升级代理 -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #fffbeb; border-color: #fde68a;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="arrow-up" class="text-sm mr-1.5" style="color: #f59e0b;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #92400e;">升级代理</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
付费升级为更高等级，享受更高佣金和返佣比例
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 邀请码管理 -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #eef2ff; border-color: #c7d2fe;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="qr" class="text-sm mr-1.5" style="color: #6366f1;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #4338ca;">邀请码管理</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
生成、查看和管理邀请码，用于邀请下级代理
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 实名认证 -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #fef2f2; border-color: #fecaca;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="passed" class="text-sm mr-1.5" style="color: #ef4444;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #b91c1c;">实名认证</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
完成实名认证后，才能申请提现收益
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 提现功能 -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #f0fdfa; border-color: #a7f3d0;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="cash" class="text-sm mr-1.5" style="color: #14b8a6;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #0d9488;">提现功能</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
将收益提现到银行卡，需要完成实名认证
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 调整级别（仅钻石） -->
|
||||||
|
<div class="rounded-lg p-3 border" style="background-color: #f5f3ff; border-color: #ddd6fe;">
|
||||||
|
<div class="flex items-center mb-1.5">
|
||||||
|
<van-icon name="setting-o" class="text-sm mr-1.5" style="color: #8b5cf6;" />
|
||||||
|
<h3 class="font-semibold text-sm" style="color: #6b21a8;">调整级别</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
<span class="font-medium" style="color: #7c3aed;">钻石代理专属</span>：可将普通下级升级为黄金代理
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 操作指南 -->
|
||||||
|
<section class="bg-white rounded-lg p-4" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-1 h-5 rounded-full mr-2" style="background-color: var(--van-theme-primary);"></div>
|
||||||
|
<h2 class="text-lg font-semibold" style="color: var(--van-text-color);">操作指南</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 如何推广报告 -->
|
||||||
|
<div class="mb-4">
|
||||||
|
<div class="flex items-center mb-2.5">
|
||||||
|
<van-icon name="share-o" class="text-base mr-2" style="color: #3b82f6;" />
|
||||||
|
<h3 class="text-base font-semibold" style="color: var(--van-text-color);">如何推广报告</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2 text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-blue-500 mr-1.5 mt-0.5 font-medium">1.</span>
|
||||||
|
<span>登录代理账户后，进入"推广"页面，选择要推广的报告类型（如个人大数据、婚恋风险、入职背调等）。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-blue-500 mr-1.5 mt-0.5 font-medium">2.</span>
|
||||||
|
<span>系统将自动生成专属推广链接，您可以将该链接分享给潜在用户。用户通过您的推广链接购买查询服务后，您即可获得推广佣金。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-blue-500 mr-1.5 mt-0.5 font-medium">3.</span>
|
||||||
|
<span>您可以在推广页面设置查询服务的售价（需在平台设定的价格范围内），售价与成本价的差额即为您的推广收益。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-blue-500 mr-1.5 mt-0.5 font-medium">4.</span>
|
||||||
|
<span>推广链接支持多种分享方式，包括复制链接、生成二维码、生成短链等，方便您在不同渠道进行推广。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-blue-500 mr-1.5 mt-0.5 font-medium">5.</span>
|
||||||
|
<span>您可以在"推广查询记录"中查看所有通过您推广链接产生的订单详情，包括订单金额、收益金额、订单状态等信息。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-blue-500 mr-1.5 mt-0.5 font-medium">6.</span>
|
||||||
|
<span>推广佣金将在用户完成支付后自动结算到您的账户余额中，您可以在"我的"页面查看收益统计。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 如何邀请下级代理 -->
|
||||||
|
<div class="border-t pt-4" style="border-color: #e5e7eb;">
|
||||||
|
<div class="flex items-center mb-2.5">
|
||||||
|
<van-icon name="friends-o" class="text-base mr-2" style="color: #22c55e;" />
|
||||||
|
<h3 class="text-base font-semibold" style="color: var(--van-text-color);">如何邀请下级代理</h3>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2 text-sm leading-relaxed" style="color: var(--van-text-color-2);">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">1.</span>
|
||||||
|
<span>登录代理账户后，进入"邀请码管理"页面，系统会为您生成专属邀请码。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">2.</span>
|
||||||
|
<span>您可以将邀请码分享给想要成为代理的用户。用户通过您的邀请码注册成为代理后，将自动成为您的下级代理。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">3.</span>
|
||||||
|
<span>当您的下级代理推广产品产生订单时，您将获得一定比例的下级推广返佣。返佣比例根据您的代理等级而定，等级越高，返佣比例越高。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">4.</span>
|
||||||
|
<span>您可以在"我的团队"页面查看所有下级代理的信息，包括直接下级和间接下级，以及团队统计数据。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">5.</span>
|
||||||
|
<span>当您的下级代理付费升级为更高等级时（如普通代理升级为黄金代理），您将获得下级升级返佣。只有黄金代理和钻石代理才能获得下级升级返佣。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">6.</span>
|
||||||
|
<span>钻石代理拥有特殊权限，可以将普通下级代理直接升级为黄金代理，无需下级代理付费。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">7.</span>
|
||||||
|
<span>您可以在"下级推广收益"中查看所有来自下级代理的返佣明细，包括推广返佣和升级返佣。</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-1.5 mt-0.5 font-medium">8.</span>
|
||||||
|
<span>邀请下级代理是扩大团队规模、增加收益的重要方式，建议您积极发展下级代理，建立稳定的推广团队。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 提现说明 -->
|
||||||
|
<section class="bg-white rounded-lg p-4" style="box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
|
||||||
|
<div class="flex items-center mb-3">
|
||||||
|
<div class="w-1 h-5 rounded-full mr-2" style="background-color: var(--van-theme-primary);"></div>
|
||||||
|
<h2 class="text-lg font-semibold" style="color: var(--van-text-color);">提现说明</h2>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-2.5 text-sm leading-relaxed">
|
||||||
|
<div class="rounded p-2.5 border-l-2" style="background-color: #fffbeb; border-color: #fbbf24;">
|
||||||
|
<p class="font-medium mb-1" style="color: #92400e;">提现条件：</p>
|
||||||
|
<ul class="space-y-0.5" style="color: #78350f;">
|
||||||
|
<li>1. 必须完成实名认证（三要素核验）</li>
|
||||||
|
<li>2. 单笔提现金额需达到 50 元及以上</li>
|
||||||
|
<li>3. 风险保障金需满足平台要求</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="rounded p-2.5 border-l-2" style="background-color: #eff6ff; border-color: #60a5fa;">
|
||||||
|
<p class="font-medium mb-1" style="color: #1e40af;">注意事项：</p>
|
||||||
|
<ul class="space-y-0.5" style="color: #1e3a8a;">
|
||||||
|
<li>• 提现到账账户的实名信息必须与实名认证信息完全一致（同一身份证/同一持卡人），否则可能提现失败或原路退回</li>
|
||||||
|
<li>• 实名认证时请务必确认使用的证件信息与后续用于收款的账户为同一人</li>
|
||||||
|
<li>• 平台会根据国家税收法律法规代扣代缴个人所得税</li>
|
||||||
|
<li>• 提现申请提交后，平台会在规定时间内处理</li>
|
||||||
|
<li>• 可在\"提现记录\"中查看提现状态</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="flex gap-2.5 pb-6">
|
||||||
|
<button v-if="!isAgent && isLoggedIn" @click="toRegister"
|
||||||
|
class="flex-1 py-2.5 rounded-lg text-white text-sm font-medium"
|
||||||
|
style="background-color: var(--van-theme-primary);">
|
||||||
|
立即注册成为代理
|
||||||
|
</button>
|
||||||
|
<button v-if="!isLoggedIn" @click="toLogin"
|
||||||
|
class="flex-1 py-2.5 rounded-lg text-white text-sm font-medium"
|
||||||
|
style="background-color: var(--van-theme-primary);">
|
||||||
|
登录后注册代理
|
||||||
|
</button>
|
||||||
|
<button v-if="isAgent && level < 3" @click="toUpgrade"
|
||||||
|
class="flex-1 py-2.5 rounded-lg text-white text-sm font-medium" style="background-color: #8b5cf6;">
|
||||||
|
升级代理等级
|
||||||
|
</button>
|
||||||
|
<button @click="toAgreement" class="px-4 py-2.5 rounded-lg border text-sm font-medium"
|
||||||
|
style="border-color: var(--van-theme-primary); color: var(--van-theme-primary);">
|
||||||
|
查看协议
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
import { useAgentStore } from "@/stores/agentStore";
|
||||||
|
import { useUserStore } from "@/stores/userStore";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const agentStore = useAgentStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const { isAgent, level } = storeToRefs(agentStore);
|
||||||
|
const { isLoggedIn } = storeToRefs(userStore);
|
||||||
|
|
||||||
|
const toRegister = () => {
|
||||||
|
router.push("/register");
|
||||||
|
};
|
||||||
|
|
||||||
|
const toLogin = () => {
|
||||||
|
router.push("/login");
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUpgrade = () => {
|
||||||
|
router.push({ name: "agentUpgrade" });
|
||||||
|
};
|
||||||
|
|
||||||
|
const toAgreement = () => {
|
||||||
|
router.push("/agentManageAgreement");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.agent-system-guide {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -45,6 +45,9 @@ function toHistory() {
|
|||||||
const toAgent = () => {
|
const toAgent = () => {
|
||||||
router.push({ path: "/promote" });
|
router.push({ path: "/promote" });
|
||||||
};
|
};
|
||||||
|
const toAgentSystemGuide = () => {
|
||||||
|
router.push({ name: "agentSystemGuide" });
|
||||||
|
};
|
||||||
|
|
||||||
const services = ref([
|
const services = ref([
|
||||||
{
|
{
|
||||||
@@ -208,6 +211,18 @@ const toBigData = () => {
|
|||||||
<div class="mt-8 rounded-2xl overflow-hidden shadow-xl" @click="toAgent">
|
<div class="mt-8 rounded-2xl overflow-hidden shadow-xl" @click="toAgent">
|
||||||
<img src="@/assets/images/index/index_b_b.png" class="w-full h-full" mode="widthFix" />
|
<img src="@/assets/images/index/index_b_b.png" class="w-full h-full" mode="widthFix" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 代理系统指南入口 -->
|
||||||
|
<div class="mt-4 box-border h-14 w-full flex items-center rounded-lg shadow-lg text-gray-700 px-4 "
|
||||||
|
@click="toAgentSystemGuide">
|
||||||
|
<div class="mr-4 h-full flex items-center justify-center">
|
||||||
|
<van-icon name="description" size="24" style="color: #8b5cf6;" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="text-gray-800 font-semibold">代理系统全面指南</div>
|
||||||
|
<div class="text-xs text-gray-500">了解代理政策、等级特权与收益计算</div>
|
||||||
|
</div>
|
||||||
|
<img src="@/assets/images/index/right.png" alt="右箭头" class="h-6 w-6" />
|
||||||
|
</div>
|
||||||
<SectionTitle title="商务合作" class="mt-4" />
|
<SectionTitle title="商务合作" class="mt-4" />
|
||||||
<div class="mt-2 rounded-xl overflow-hidden bg-white shadow-xl" @click="toCooperation">
|
<div class="mt-2 rounded-xl overflow-hidden bg-white shadow-xl" @click="toCooperation">
|
||||||
<img src="@/assets/images/index_a_banner.png" class="w-full h-full" alt="大数据服务横幅" mode="widthFix" />
|
<img src="@/assets/images/index_a_banner.png" class="w-full h-full" alt="大数据服务横幅" mode="widthFix" />
|
||||||
@@ -236,6 +251,7 @@ const toBigData = () => {
|
|||||||
.clip-right {
|
.clip-right {
|
||||||
clip-path: polygon(0 0, 0 0, 90% 100%, 0 0);
|
clip-path: polygon(0 0, 0 0, 90% 100%, 0 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-swipe {
|
.notice-swipe {
|
||||||
height: 28px;
|
height: 28px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
|
|||||||
Reference in New Issue
Block a user