team/tydata-webview-v2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

version temp2

Browse Source
This commit is contained in:
liangzai
2025-10-24 17:08:42 +08:00
parent c1dd5551f0
commit 1a919d57ba
193 changed files with 15044 additions and 15687 deletions
Download Patch File Download Diff File Expand all files Collapse all files

588
src/views/AgentVipApply.vue
View File

@@ -2,20 +2,20 @@
<div class="agent-VIP-apply w-full min-h-screen bg-gradient-to-b from-amber-50 via-amber-100 to-amber-50 pb-24">
<!-- 装饰元素 -->
<div
class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-amber-300 to-amber-500 rounded-bl-full opacity-20"
></div>
class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-amber-300 to-amber-500 rounded-bl-full opacity-20">
</div>
<div
class="absolute top-40 left-0 w-16 h-16 bg-gradient-to-tr from-amber-400 to-amber-600 rounded-tr-full opacity-20"
></div>
class="absolute top-40 left-0 w-16 h-16 bg-gradient-to-tr from-amber-400 to-amber-600 rounded-tr-full opacity-20">
</div>
<div
class="absolute bottom-60 right-0 w-24 h-24 bg-gradient-to-bl from-amber-300 to-amber-500 rounded-tl-full opacity-20"
></div>
class="absolute bottom-60 right-0 w-24 h-24 bg-gradient-to-bl from-amber-300 to-amber-500 rounded-tl-full opacity-20">
</div>
<!-- 顶部标题区域 -->
<div class="header relative pt-8 px-4 pb-6 text-center">
<div
class="animate-pulse absolute -top-2 left-1/2 -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-amber-300 via-amber-500 to-amber-300 rounded-full"
></div>
class="animate-pulse absolute -top-2 left-1/2 -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-amber-300 via-amber-500 to-amber-300 rounded-full">
</div>
<h1 class="text-3xl font-bold text-amber-800 mb-1">
{{ isVipOrSvip ? '代理会员续费' : 'VIP代理申请' }}
</h1>
@@ -32,15 +32,13 @@
<!-- 装饰性金币图标 -->
<div class="absolute top-6 left-4 transform -rotate-12">
<div
class="w-8 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full flex items-center justify-center shadow-lg"
>
class="w-8 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full flex items-center justify-center shadow-lg">
<span class="text-white font-bold text-xs">¥</span>
</div>
</div>
<div class="absolute top-10 right-6 transform rotate-12">
<div
class="w-6 h-6 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center shadow-lg"
>
class="w-6 h-6 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center shadow-lg">
<span class="text-white font-bold text-xs">¥</span>
</div>
</div>
@@ -50,13 +48,12 @@
<div class="card-container px-4 mb-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100 transform transition-all">
<h2
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden"
>
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
<span class="relative z-10">选择代理类型</span>
<div class="absolute inset-0 bg-amber-500 opacity-30">
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer"
></div>
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
</div>
</div>
</h2>
@@ -67,16 +64,12 @@
selectedType === 'vip'
? 'border-amber-500 bg-amber-50 shadow-md'
: 'border-gray-200 hover:border-amber-300',
]"
@click="selectType('vip')"
>
]" @click="selectType('vip')">
<div class="text-xl font-bold text-amber-700">VIP代理</div>
<div class="text-amber-600 font-bold mt-1 text-lg">{{ vipConfig.price }}{{ vipConfig.priceUnit }}</div>
<div class="mt-2 text-gray-600 text-sm">标准VIP权益</div>
<div
v-if="selectedType === 'vip'"
class="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center shadow-md"
>
<div v-if="selectedType === 'vip'"
class="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center shadow-md">
<van-icon name="success" color="#fff" size="14" />
</div>
</div>
@@ -87,16 +80,12 @@
selectedType === 'svip'
? 'border-amber-500 bg-amber-50 shadow-md'
: 'border-gray-200 hover:border-amber-300',
]"
@click="selectType('svip')"
>
]" @click="selectType('svip')">
<div class="text-xl font-bold text-amber-700">SVIP代理</div>
<div class="text-amber-600 font-bold mt-1 text-lg">{{ vipConfig.svipPrice }}{{ vipConfig.priceUnit }}</div>
<div class="mt-2 text-gray-600 text-sm">超级VIP权益</div>
<div
v-if="selectedType === 'svip'"
class="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center shadow-md"
>
<div v-if="selectedType === 'svip'"
class="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center shadow-md">
<van-icon name="success" color="#fff" size="14" />
</div>
</div>
@@ -108,26 +97,22 @@
<div class="card-container px-4 mb-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100">
<h2
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden"
>
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
<span class="relative z-10">六大超值权益</span>
<div class="absolute inset-0 bg-amber-500 opacity-30">
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer"
></div>
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
</div>
</div>
</h2>
<div class="grid grid-cols-2 gap-4 p-4">
<!-- 权益1 -->
<div
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300"
>
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
<div class="text-amber-800 font-bold mb-2 flex items-center">
<span
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2"
>1</span
>
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">1</span>
下级贡献收益
</div>
<p class="text-sm text-gray-600">
@@ -137,13 +122,10 @@
<!-- 权益2 -->
<div
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300"
>
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
<div class="text-amber-800 font-bold mb-2 flex items-center">
<span
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2"
>2</span
>
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">2</span>
下级提现收益
</div>
<p class="text-sm text-gray-600">
@@ -153,13 +135,10 @@
<!-- 权益3 -->
<div
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300"
>
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
<div class="text-amber-800 font-bold mb-2 flex items-center">
<span
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2"
>3</span
>
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">3</span>
转换高额奖励
</div>
<p class="text-sm text-gray-600">
@@ -169,13 +148,10 @@
<!-- 权益4 -->
<div
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300"
>
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
<div class="text-amber-800 font-bold mb-2 flex items-center">
<span
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2"
>4</span
>
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">4</span>
下级提现奖励
</div>
<p class="text-sm text-gray-600">下级成为SVIP，每次提现都奖励1%，坐享被动收入</p>
@@ -183,32 +159,24 @@
<!-- 权益5 -->
<div
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300"
>
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
<div class="text-amber-800 font-bold mb-2 flex items-center">
<span
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2"
>5</span
>
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">5</span>
月度现金奖励
</div>
<p class="text-sm text-gray-600">
下级每月活跃达100名额外奖励<span class="text-red-500 font-bold">50元</span>，新增15名活跃下级再得<span
class="text-red-500 font-bold"
>50元</span
>
class="text-red-500 font-bold">50元</span>
</p>
</div>
<!-- 权益6 -->
<div
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300"
>
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
<div class="text-amber-800 font-bold mb-2 flex items-center">
<span
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2"
>6</span
>
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">6</span>
平台专项扶持
</div>
<p class="text-sm text-gray-600">一对一专属客服服务，为合作伙伴提供全方位成长赋能</p>
@@ -221,13 +189,12 @@
<div class="card-container px-4 mb-8" v-if="selectedType">
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100">
<h2
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden"
>
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
<span class="relative z-10">{{ selectedType === 'vip' ? 'VIP' : 'SVIP' }}代理权益对比</span>
<div class="absolute inset-0 bg-amber-500 opacity-30">
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer"
></div>
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
</div>
</div>
</h2>
@@ -237,16 +204,12 @@
<tr class="bg-gradient-to-r from-amber-100 to-amber-200">
<th class="border border-amber-200 p-2 text-left text-amber-800">权益项目</th>
<th class="border border-amber-200 p-2 text-center text-amber-800">普通代理</th>
<th
class="border border-amber-200 p-2 text-center text-amber-800"
:class="{ 'bg-amber-200': selectedType === 'vip' }"
>
<th class="border border-amber-200 p-2 text-center text-amber-800"
:class="{ 'bg-amber-200': selectedType === 'vip' }">
VIP代理
</th>
<th
class="border border-amber-200 p-2 text-center text-amber-800"
:class="{ 'bg-amber-200': selectedType === 'svip' }"
>
<th class="border border-amber-200 p-2 text-center text-amber-800"
:class="{ 'bg-amber-200': selectedType === 'svip' }">
SVIP代理
</th>
</tr>
@@ -255,200 +218,140 @@
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">会员权益</td>
<td class="border border-amber-200 p-2 text-center">普通代理<br />免费</td>
<td
class="border border-amber-200 p-2 text-center font-bold"
:class="{
'text-amber-700 bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center font-bold" :class="{
'text-amber-700 bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.price }}{{ vipConfig.priceUnit }}
</td>
<td
class="border border-amber-200 p-2 text-center font-bold"
:class="{
'text-amber-700 bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center font-bold" :class="{
'text-amber-700 bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.svipPrice }}{{ vipConfig.priceUnit }}
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级贡献收益</td>
<td class="border border-amber-200 p-2 text-center">1元/单</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.vipCommission }}元/单
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.svipCommission }}元/单
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">自定义设置下级成本</td>
<td class="border border-amber-200 p-2 text-center">❌</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
✓
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
✓
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级价格浮动收益</td>
<td class="border border-amber-200 p-2 text-center">❌</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
最高{{ vipConfig.vipFloatingRate }}%
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
最高{{ vipConfig.svipFloatingRate }}%
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级提现奖励</td>
<td class="border border-amber-200 p-2 text-center">❌</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
❌
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.withdrawRatio }}%
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级活跃奖励</td>
<td class="border border-amber-200 p-2 text-center">❌</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.monthlyRewardForTeam }}元/月
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.monthlyRewardForTeam }}元/月
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">新增活跃奖励</td>
<td class="border border-amber-200 p-2 text-center">❌</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.monthlyRewardForNewTeam }}元/月
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.monthlyRewardForNewTeam }}元/月
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级转化奖励</td>
<td class="border border-amber-200 p-2 text-center">❌</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.vipConversionBonus }}元*10个
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.svipConversionBonus }}元*10个
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">提现次数额度</td>
<td class="border border-amber-200 p-2 text-center">800元/次</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.vipWithdrawalLimit }}元/次
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.svipWithdrawalLimit }}元/次
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">提现次数</td>
<td class="border border-amber-200 p-2 text-center">1次/日</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
}">
1次/日
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
}">
2次/日
</td>
</tr>
@@ -462,13 +365,12 @@
<div class="card-container px-4 mb-8" v-if="selectedType">
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100">
<h2
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden"
>
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
<span class="relative z-10">收益预估对比</span>
<div class="absolute inset-0 bg-amber-500 opacity-30">
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer"
></div>
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
</div>
</div>
</h2>
@@ -501,16 +403,12 @@
<thead>
<tr class="bg-gradient-to-r from-amber-100 to-amber-200">
<th class="border border-amber-200 p-2 text-left text-amber-800">收益来源</th>
<th
class="border border-amber-200 p-2 text-center text-amber-800 w-1/3"
:class="{ 'bg-amber-200': selectedType === 'vip' }"
>
<th class="border border-amber-200 p-2 text-center text-amber-800 w-1/3"
:class="{ 'bg-amber-200': selectedType === 'vip' }">
VIP代理
</th>
<th
class="border border-amber-200 p-2 text-center text-amber-800 w-1/3"
:class="{ 'bg-amber-200': selectedType === 'svip' }"
>
<th class="border border-amber-200 p-2 text-center text-amber-800 w-1/3"
:class="{ 'bg-amber-200': selectedType === 'svip' }">
SVIP代理
</th>
</tr>
@@ -518,191 +416,131 @@
<tbody>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">推广收益(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
300单×50元=15,000元
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
300单×50元=15,000元
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级贡献收益(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
300单×{{ vipConfig.vipCommission }}元=360元
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
300单×{{ vipConfig.svipCommission }}元=450元
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级价格浮动收益(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
100单×100元×{{ vipConfig.vipFloatingRate }}%=500元
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
200单×100元×{{ vipConfig.svipFloatingRate }}%=2,000元
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级提现奖励(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
-
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
{{ revenueData.withdrawReward }}元
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级活跃奖励(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.monthlyRewardForTeam }}元
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.monthlyRewardForTeam }}元
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">新增活跃奖励(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.monthlyRewardForNewTeam }}元
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.monthlyRewardForNewTeam }}元
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">下级转化奖励(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
{{ vipConfig.vipConversionBonus }}元×2个=598元
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
{{ vipConfig.svipConversionBonus }}元×2个=798元
</td>
</tr>
<tr class="hover:bg-amber-50 transition-colors">
<td class="border border-amber-200 p-2 font-medium">额外业务收益(月)</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
}">
约3,000元
</td>
<td
class="border border-amber-200 p-2 text-center"
:class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-2 text-center" :class="{
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
}">
约6,000元
</td>
</tr>
<tr class="bg-gradient-to-r from-amber-50 to-amber-100 font-bold">
<td class="border border-amber-200 p-3">月计收益</td>
<td
class="border border-amber-200 p-3 text-center text-amber-700"
:class="{
'bg-amber-50 border-amber-300': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-3 text-center text-amber-700" :class="{
'bg-amber-50 border-amber-300': selectedType === 'vip',
}">
{{ revenueData.vipMonthly }}元
</td>
<td
class="border border-amber-200 p-3 text-center text-red-500"
:class="{
'bg-amber-50 border-amber-300': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-3 text-center text-red-500" :class="{
'bg-amber-50 border-amber-300': selectedType === 'svip',
}">
{{ revenueData.svipMonthly }}元
</td>
</tr>
<tr class="bg-gradient-to-r from-amber-50 to-amber-100 font-bold">
<td class="border border-amber-200 p-3">年计收益</td>
<td
class="border border-amber-200 p-3 text-center text-amber-700"
:class="{
'bg-amber-50 border-amber-300': selectedType === 'vip',
}"
>
<td class="border border-amber-200 p-3 text-center text-amber-700" :class="{
'bg-amber-50 border-amber-300': selectedType === 'vip',
}">
{{ revenueData.vipYearly }}元
</td>
<td
class="border border-amber-200 p-3 text-center text-red-500"
:class="{
'bg-amber-50 border-amber-300': selectedType === 'svip',
}"
>
<td class="border border-amber-200 p-3 text-center text-red-500" :class="{
'bg-amber-50 border-amber-300': selectedType === 'svip',
}">
{{ revenueData.svipYearly }}元
</td>
</tr>
@@ -742,8 +580,7 @@
<div class="text-red-600 font-bold">{{ revenueData.priceDifference }}元</div>
</div>
<div
class="bg-red-500 flex-shrink-0 text-white rounded-full w-6 h-6 flex items-center justify-center"
>
class="bg-red-500 flex-shrink-0 text-white rounded-full w-6 h-6 flex items-center justify-center">
<div class="transform -translate-y-px">→</div>
</div>
<div class="text-center">
@@ -751,8 +588,7 @@
<div class="text-red-600 font-bold">{{ revenueData.monthlyDifference }}元</div>
</div>
<div
class="bg-red-500 flex-shrink-0 text-white rounded-full w-6 h-6 flex items-center justify-center"
>
class="bg-red-500 flex-shrink-0 text-white rounded-full w-6 h-6 flex items-center justify-center">
<span class="transform -translate-y-px">→</span>
</div>
<div class="text-center">
@@ -761,9 +597,8 @@
</div>
</div>
<div class="text-center text-red-500 font-medium mt-3">
额外投资{{ revenueData.priceDifference }}元，<span class="text-red-600 font-bold"
>年多赚{{ revenueData.yearlyDifference }}元</span
>
额外投资{{ revenueData.priceDifference }}元，<span class="text-red-600 font-bold">年多赚{{
revenueData.yearlyDifference }}元</span>
</div>
</div>
</div>
@@ -774,19 +609,17 @@
<!-- 申请按钮（固定在底部） -->
<div
class="fixed bottom-0 left-0 right-0 px-4 py-3 bg-gradient-to-t from-amber-100 to-transparent backdrop-blur-sm z-30"
>
class="fixed bottom-0 left-0 right-0 px-4 py-3 bg-gradient-to-t from-amber-100 to-transparent backdrop-blur-sm z-30">
<div class="flex flex-col gap-2">
<button :class="buttonClass" @click="applyVip" :disabled="!canPerformAction">
<span class="relative z-10">{{ buttonText }}</span>
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer"
></div>
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
</div>
</button>
<button
class="w-full py-3 rounded-lg font-medium text-amber-700 border border-amber-400 bg-white shadow-md active:bg-amber-50 transform transition-transform active:scale-98"
@click="contactService"
>
@click="contactService">
<div class="flex items-center justify-center">
<van-icon name="service-o" class="mr-1" />
<span>联系客服咨询</span>
@@ -875,26 +708,7 @@ const buttonClass = computed(() => {
})
// VIP价格配置
const vipConfig = reactive({
price: 399, // VIP价格
svipPrice: 599, // SVIP价格
priceUnit: '元/年',
vipCommission: 1.2, // VIP下级贡献收益(元/单)
svipCommission: 1.5, // SVIP下级贡献收益(元/单)
vipFloatingRate: 5, // VIP下级价格浮动收益率(%)
svipFloatingRate: 10, // SVIP下级价格浮动收益率(%)
vipSingleOrderProfit: 5, // VIP单个订单最高利润(元)
svipSingleOrderProfit: 10, // SVIP单个订单最高利润(元)
withdrawRatio: 1, // 下级提现奖励比率(%)
monthlyRewardForTeam: 50, // 月度团队奖励(元)
monthlyRewardForNewTeam: 50, // 月度新增团队奖励(元)
vipConversionBonus: 299, // VIP下级转化奖励(元)
svipConversionBonus: 399, // SVIP下级转化奖励(元)
vipWithdrawalLimit: 1500, // VIP提现额度(元)
svipWithdrawalLimit: 3000, // SVIP提现额度(元)
vipWithdrawalTimes: 1, // VIP日提现次数
svipWithdrawalTimes: 2, // SVIP日提现次数
})
const vipConfig = reactive({})
// 计算得出的收益数据
const revenueData = computed(() => {
@@ -956,22 +770,48 @@ const revenueData = computed(() => {
}
})
// 加载价格配置，模拟API调用
// 加载价格配置
onMounted(async () => {
document.documentElement.style.scrollBehavior = 'smooth'
// 模拟API请求获取价格
// 从API获取会员配置信息
try {
// 未来可以在这里添加实际的API调用
// const response = await fetch('/api/vip/prices');
// const data = await response.json();
// 使用API返回的数据更新vipConfig
// Object.assign(vipConfig, data);
const { data, error } = await useApiFetch('/agent/membership/info').get().json()
// 现在仅打印一个日志，表示已准备好加载价格
console.log('价格配置已初始化，未来将从API加载')
if (data.value && !error.value && data.value.code === 200) {
const configData = data.value.data
// 更新VIP配置
if (configData.vip_config) {
const vipData = configData.vip_config
vipConfig.price = vipData.price
vipConfig.vipCommission = vipData.report_commission // 直接显示，就是几元/单
vipConfig.vipFloatingRate = vipData.price_ratio * 100 // 转换为百分比
vipConfig.monthlyRewardForTeam = vipData.lower_activity_reward
vipConfig.monthlyRewardForNewTeam = vipData.new_activity_reward
vipConfig.vipConversionBonus = vipData.lower_convert_vip_reward
vipConfig.vipWithdrawalLimit = vipData.exemption_amount
}
// 更新SVIP配置
if (configData.svip_config) {
const svipData = configData.svip_config
vipConfig.svipPrice = svipData.price
vipConfig.svipCommission = svipData.report_commission // 直接显示，就是几元/单
vipConfig.svipFloatingRate = svipData.price_ratio * 100 // 转换为百分比
vipConfig.withdrawRatio = svipData.lower_withdraw_reward_ratio * 100 // 转换为百分比
vipConfig.monthlyRewardForTeam = svipData.lower_activity_reward
vipConfig.monthlyRewardForNewTeam = svipData.new_activity_reward
vipConfig.svipConversionBonus = svipData.lower_convert_svip_reward
vipConfig.svipWithdrawalLimit = svipData.exemption_amount
}
console.log('会员配置信息加载成功', configData)
} else {
console.error('获取会员配置信息失败', data.value?.msg || '未知错误')
}
} catch (error) {
console.error('加载价格配置失败', error)
console.error('加载会员配置信息失败', error)
}
})