1068 lines
44 KiB
Vue
1068 lines
44 KiB
Vue
|
<template>
|
|||
|
|
<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>
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<!-- 顶部标题区域 -->
|
|||
|
|
<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>
|
|||
|
|
<h1 class="text-3xl font-bold text-amber-800 mb-1">
|
|||
|
|
{{ isVipOrSvip ? '代理会员续费' : 'VIP代理申请' }}
|
|||
|
|
</h1>
|
|||
|
|
<p class="text-sm text-amber-700 mt-2 max-w-xs mx-auto">
|
|||
|
|
<template v-if="isVipOrSvip">
|
|||
|
|
您的会员有效期至 {{ formatExpiryTime(ExpiryTime) }}，续费后有效期至
|
|||
|
|
{{ renewalExpiryTime }}
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
平台为疯狂推广者定制的赚买计划，助您收益<span class="text-red-500 font-bold">翻倍增升</span>
|
|||
|
|
</template>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<!-- 装饰性金币图标 -->
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<span class="text-white font-bold text-xs">¥</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 选择代理类型 -->
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
<div class="flex p-6 gap-4">
|
|||
|
|
<div
|
|||
|
|
class="flex-1 border-2 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 relative transform hover:-translate-y-1"
|
|||
|
|
:class="[
|
|||
|
|
selectedType === 'vip'
|
|||
|
|
? 'border-amber-500 bg-amber-50 shadow-md'
|
|||
|
|
: 'border-gray-200 hover:border-amber-300',
|
|||
|
|
]"
|
|||
|
|
@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"
|
|||
|
|
>
|
|||
|
|
<van-icon name="success" color="#fff" size="14" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div
|
|||
|
|
class="flex-1 border-2 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 relative transform hover:-translate-y-1"
|
|||
|
|
:class="[
|
|||
|
|
selectedType === 'svip'
|
|||
|
|
? 'border-amber-500 bg-amber-50 shadow-md'
|
|||
|
|
: 'border-gray-200 hover:border-amber-300',
|
|||
|
|
]"
|
|||
|
|
@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"
|
|||
|
|
>
|
|||
|
|
<van-icon name="success" color="#fff" size="14" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 六大超值权益 -->
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<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>
|
|||
|
|
</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"
|
|||
|
|
>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
下级贡献收益
|
|||
|
|
</div>
|
|||
|
|
<p class="text-sm text-gray-600">
|
|||
|
|
下级完全收益您来定，涨多少赚多少，一单最高收益<span class="text-red-500 font-bold">10元</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 权益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"
|
|||
|
|
>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
下级提现收益
|
|||
|
|
</div>
|
|||
|
|
<p class="text-sm text-gray-600">
|
|||
|
|
下级定价标准由您定，超过标准部分收益更丰厚，一单最高多赚<span class="text-red-500 font-bold">10元</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 权益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"
|
|||
|
|
>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
转换高额奖励
|
|||
|
|
</div>
|
|||
|
|
<p class="text-sm text-gray-600">
|
|||
|
|
下级成为VIP、SVIP，高额奖励立马发放，<span class="text-red-500 font-bold">399元</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 权益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"
|
|||
|
|
>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
下级提现奖励
|
|||
|
|
</div>
|
|||
|
|
<p class="text-sm text-gray-600">下级成为SVIP，每次提现都奖励1%，坐享被动收入</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 权益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"
|
|||
|
|
>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
月度现金奖励
|
|||
|
|
</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
|
|||
|
|
>
|
|||
|
|
</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"
|
|||
|
|
>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
平台专项扶持
|
|||
|
|
</div>
|
|||
|
|
<p class="text-sm text-gray-600">一对一专属客服服务，为合作伙伴提供全方位成长赋能</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 权益对比表 -->
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
<div class="p-4 overflow-x-auto">
|
|||
|
|
<table class="w-full border-collapse">
|
|||
|
|
<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">普通代理</th>
|
|||
|
|
<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' }"
|
|||
|
|
>
|
|||
|
|
SVIP代理
|
|||
|
|
</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<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">普通代理<br />免费</td>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ vipConfig.vipCommission }}元/单
|
|||
|
|
</td>
|
|||
|
|
<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>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
最高{{ vipConfig.vipFloatingRate }}%
|
|||
|
|
</td>
|
|||
|
|
<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>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ vipConfig.monthlyRewardForTeam }}元/月
|
|||
|
|
</td>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ vipConfig.monthlyRewardForNewTeam }}元/月
|
|||
|
|
</td>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ vipConfig.vipWithdrawalLimit }}元/次
|
|||
|
|
</td>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
1次/日
|
|||
|
|
</td>
|
|||
|
|
<td
|
|||
|
|
class="border border-amber-200 p-2 text-center"
|
|||
|
|
:class="{
|
|||
|
|
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
2次/日
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 收益预估 -->
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
</h2>
|
|||
|
|
|
|||
|
|
<div class="p-4">
|
|||
|
|
<!-- 顶部收益概览 -->
|
|||
|
|
<div class="mb-6 rounded-lg overflow-hidden border border-amber-200">
|
|||
|
|
<div class="bg-gradient-to-r from-amber-100 to-amber-200 py-2 px-4 text-center font-bold text-amber-800">
|
|||
|
|
VIP与SVIP代理收益对比
|
|||
|
|
</div>
|
|||
|
|
<div class="grid grid-cols-2 divide-x divide-amber-200">
|
|||
|
|
<div class="p-4 text-center" :class="{ 'bg-amber-50': selectedType === 'vip' }">
|
|||
|
|
<div class="text-sm text-gray-600 mb-1">VIP月预计收益</div>
|
|||
|
|
<div class="text-amber-600 font-bold text-xl">{{ revenueData.vipMonthly }}元</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">年收益：{{ revenueData.vipYearly }}元</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="p-4 text-center" :class="{ 'bg-amber-50': selectedType === 'svip' }">
|
|||
|
|
<div class="text-sm text-gray-600 mb-1">SVIP月预计收益</div>
|
|||
|
|
<div class="text-red-500 font-bold text-xl">{{ revenueData.svipMonthly }}元</div>
|
|||
|
|
<div class="text-xs text-gray-500 mt-1">年收益：{{ revenueData.svipYearly }}元</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-gradient-to-r from-red-50 to-red-100 py-2 px-4 text-center text-red-600 font-medium">
|
|||
|
|
选择SVIP，相比VIP月增收益：<span class="font-bold">{{ revenueData.monthlyDifference }}元</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 详细收益表格 -->
|
|||
|
|
<div class="overflow-x-auto">
|
|||
|
|
<table class="w-full border-collapse">
|
|||
|
|
<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' }"
|
|||
|
|
>
|
|||
|
|
VIP代理
|
|||
|
|
</th>
|
|||
|
|
<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>
|
|||
|
|
</thead>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
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>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ vipConfig.monthlyRewardForTeam }}元
|
|||
|
|
</td>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ vipConfig.monthlyRewardForNewTeam }}元
|
|||
|
|
</td>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
约3,000元
|
|||
|
|
</td>
|
|||
|
|
<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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ 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',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
{{ revenueData.svipYearly }}元
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 投资回报率 -->
|
|||
|
|
<div class="mt-6 p-4 bg-gradient-to-r from-amber-50 to-amber-100 rounded-lg border border-amber-200">
|
|||
|
|
<div class="text-center mb-3 font-bold text-amber-800">投资收益分析</div>
|
|||
|
|
<div class="grid grid-cols-1 gap-4">
|
|||
|
|
<div class="p-3 bg-white rounded-lg shadow-sm">
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div class="flex-1 border-r border-amber-100 pr-3">
|
|||
|
|
<div class="text-amber-700 font-medium text-center mb-1">VIP方案</div>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="text-amber-600 text-sm">投资{{ vipConfig.price }}元</div>
|
|||
|
|
<div class="text-gray-600 text-sm">月收益{{ revenueData.vipMonthly }}元</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex-1 pl-3">
|
|||
|
|
<div class="text-red-500 font-medium text-center mb-1">SVIP方案</div>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="text-red-500 text-sm">投资{{ vipConfig.svipPrice }}元</div>
|
|||
|
|
<div class="text-gray-600 text-sm">月收益{{ revenueData.svipMonthly }}元</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 升级收益对比 -->
|
|||
|
|
<div class="p-3 bg-gradient-to-r from-red-50 to-amber-50 rounded-lg shadow-sm">
|
|||
|
|
<div class="text-center font-medium text-red-700 mb-2">SVIP升级优势分析</div>
|
|||
|
|
<div class="flex items-center justify-center gap-3">
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="text-sm text-gray-600">额外投资</div>
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<div class="transform -translate-y-px">→</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="text-sm text-gray-600">每月额外收益</div>
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<span class="transform -translate-y-px">→</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="text-sm text-gray-600">投资回收时间</div>
|
|||
|
|
<div class="text-red-600 font-bold">{{ revenueData.recoverDays }}天</div>
|
|||
|
|
</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
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 申请按钮（固定在底部） -->
|
|||
|
|
<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"
|
|||
|
|
>
|
|||
|
|
<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>
|
|||
|
|
</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"
|
|||
|
|
>
|
|||
|
|
<div class="flex items-center justify-center">
|
|||
|
|
<van-icon name="service-o" class="mr-1" />
|
|||
|
|
<span>联系客服咨询</span>
|
|||
|
|
</div>
|
|||
|
|
</button>
|
|||
|
|
<!-- 最终解释权声明 -->
|
|||
|
|
<div class="text-center text-xs text-gray-400 py-1">最终解释权归海南省学宇思网络科技有限公司所有</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Payment v-model="showPayment" :data="payData" :id="payID" type="agent_vip" @close="showPayment = false" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, reactive, computed } from 'vue'
|
|||
|
|
import { showToast } from 'vant'
|
|||
|
|
import { useAgentStore } from '@/stores/agentStore'
|
|||
|
|
import { storeToRefs } from 'pinia'
|
|||
|
|
|
|||
|
|
// 获取代理状态
|
|||
|
|
const agentStore = useAgentStore()
|
|||
|
|
const { level, ExpiryTime } = storeToRefs(agentStore)
|
|||
|
|
|
|||
|
|
// 计算是否已经是VIP或SVIP
|
|||
|
|
const isVipOrSvip = computed(() => ['VIP', 'SVIP'].includes(level.value))
|
|||
|
|
const isVip = computed(() => level.value === 'VIP')
|
|||
|
|
const isSvip = computed(() => level.value === 'SVIP')
|
|||
|
|
|
|||
|
|
// 计算续费后的到期时间
|
|||
|
|
const renewalExpiryTime = computed(() => {
|
|||
|
|
if (!ExpiryTime.value) return '未知'
|
|||
|
|
|
|||
|
|
// 从格式化字符串中提取日期部分
|
|||
|
|
const dateStr = ExpiryTime.value.split(' ')[0] // 假设格式是 "YYYY-MM-DD HH:MM:SS"
|
|||
|
|
const [year, month, day] = dateStr.split('-').map(num => parseInt(num))
|
|||
|
|
|
|||
|
|
// 创建日期对象并加一年
|
|||
|
|
const expiryDate = new Date(year, month - 1, day) // 月份从0开始，所以要-1
|
|||
|
|
expiryDate.setFullYear(expiryDate.getFullYear() + 1)
|
|||
|
|
|
|||
|
|
// 返回格式化的日期字符串
|
|||
|
|
return `${expiryDate.getFullYear()}-${String(expiryDate.getMonth() + 1).padStart(2, '0')}-${String(expiryDate.getDate()).padStart(2, '0')}`
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 按钮文字 - 根据当前状态显示不同文案
|
|||
|
|
const buttonText = computed(() => {
|
|||
|
|
if (!isVipOrSvip.value) return '立即开通' // 非会员状态
|
|||
|
|
|
|||
|
|
if (selectedType.value === 'vip') {
|
|||
|
|
if (isVip.value) return '续费VIP代理' // VIP续费VIP
|
|||
|
|
return '降级不可用' // SVIP不能降级到VIP
|
|||
|
|
} else {
|
|||
|
|
if (isSvip.value) return '续费SVIP代理' // SVIP续费SVIP
|
|||
|
|
return '升级SVIP代理' // VIP升级SVIP
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 是否可以操作按钮
|
|||
|
|
const canPerformAction = computed(() => {
|
|||
|
|
// 非会员可以开通任何会员
|
|||
|
|
if (!isVipOrSvip.value) return true
|
|||
|
|
|
|||
|
|
// VIP不能降级到普通会员
|
|||
|
|
if (isVip.value && selectedType.value === '') return false
|
|||
|
|
|
|||
|
|
// SVIP不能降级到VIP
|
|||
|
|
if (isSvip.value && selectedType.value === 'vip') return false
|
|||
|
|
|
|||
|
|
return true
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 计算按钮类名
|
|||
|
|
const buttonClass = computed(() => {
|
|||
|
|
const baseClass =
|
|||
|
|
'w-full py-4 rounded-lg font-bold text-lg shadow-lg transform transition-transform active:scale-98 relative overflow-hidden'
|
|||
|
|
|
|||
|
|
if (!canPerformAction.value) {
|
|||
|
|
return `${baseClass} bg-gray-400 text-white cursor-not-allowed`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isVip.value && selectedType.value === 'svip') {
|
|||
|
|
return `${baseClass} bg-gradient-to-r from-purple-500 to-indigo-600 text-white`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return `${baseClass} bg-gradient-to-r from-amber-500 to-amber-600 active:from-amber-600 active:to-amber-700 text-white`
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 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 revenueData = computed(() => {
|
|||
|
|
const baseOrders = 300 // 基础订单数
|
|||
|
|
const pricePerOrder = 50 // 每单价格
|
|||
|
|
const baseRevenue = baseOrders * pricePerOrder // 基础推广收益
|
|||
|
|
|
|||
|
|
const vipCommissionRevenue = baseOrders * vipConfig.vipCommission // VIP下级贡献收益
|
|||
|
|
const svipCommissionRevenue = baseOrders * vipConfig.svipCommission // SVIP下级贡献收益
|
|||
|
|
|
|||
|
|
const vipFloatingRevenue = 100 * 100 * (vipConfig.vipFloatingRate / 100) // VIP浮动收益
|
|||
|
|
const svipFloatingRevenue = 200 * 100 * (vipConfig.svipFloatingRate / 100) // SVIP浮动收益
|
|||
|
|
|
|||
|
|
const vipConversionRevenue = vipConfig.vipConversionBonus * 2 // VIP转化奖励
|
|||
|
|
const svipConversionRevenue = vipConfig.svipConversionBonus * 2 // SVIP转化奖励
|
|||
|
|
|
|||
|
|
const vipExtraRevenue = 3000 // VIP额外收益估计
|
|||
|
|
const svipExtraRevenue = 6000 // SVIP额外收益估计
|
|||
|
|
|
|||
|
|
// 平级提现奖励(只有SVIP才有)
|
|||
|
|
const withdrawReward = 20000 * (vipConfig.withdrawRatio / 100)
|
|||
|
|
|
|||
|
|
// 计算月总收益
|
|||
|
|
const vipMonthlyTotal =
|
|||
|
|
baseRevenue +
|
|||
|
|
vipCommissionRevenue +
|
|||
|
|
vipFloatingRevenue +
|
|||
|
|
vipConfig.monthlyRewardForTeam +
|
|||
|
|
vipConfig.monthlyRewardForNewTeam +
|
|||
|
|
vipConversionRevenue +
|
|||
|
|
vipExtraRevenue
|
|||
|
|
|
|||
|
|
const svipMonthlyTotal =
|
|||
|
|
baseRevenue +
|
|||
|
|
svipCommissionRevenue +
|
|||
|
|
svipFloatingRevenue +
|
|||
|
|
withdrawReward +
|
|||
|
|
vipConfig.monthlyRewardForTeam +
|
|||
|
|
vipConfig.monthlyRewardForNewTeam +
|
|||
|
|
svipConversionRevenue +
|
|||
|
|
svipExtraRevenue
|
|||
|
|
|
|||
|
|
// 计算VIP和SVIP之间的差额
|
|||
|
|
const monthlyDifference = svipMonthlyTotal - vipMonthlyTotal
|
|||
|
|
const priceDifference = vipConfig.svipPrice - vipConfig.price
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
vipMonthly: Math.round(vipMonthlyTotal),
|
|||
|
|
svipMonthly: Math.round(svipMonthlyTotal),
|
|||
|
|
vipYearly: Math.round(vipMonthlyTotal * 12),
|
|||
|
|
svipYearly: Math.round(svipMonthlyTotal * 12),
|
|||
|
|
monthlyDifference: Math.round(monthlyDifference),
|
|||
|
|
yearlyDifference: Math.round(monthlyDifference * 12),
|
|||
|
|
vipRate: Math.round(vipMonthlyTotal / vipConfig.price),
|
|||
|
|
svipRate: Math.round(svipMonthlyTotal / vipConfig.svipPrice),
|
|||
|
|
priceDifference,
|
|||
|
|
recoverDays: Math.ceil(priceDifference / (monthlyDifference / 30)),
|
|||
|
|
withdrawReward,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 加载价格配置，模拟API调用
|
|||
|
|
onMounted(async () => {
|
|||
|
|
document.documentElement.style.scrollBehavior = 'smooth'
|
|||
|
|
|
|||
|
|
// 模拟API请求获取价格
|
|||
|
|
try {
|
|||
|
|
// 未来可以在这里添加实际的API调用
|
|||
|
|
// const response = await fetch('/api/vip/prices');
|
|||
|
|
// const data = await response.json();
|
|||
|
|
// 使用API返回的数据更新vipConfig
|
|||
|
|
// Object.assign(vipConfig, data);
|
|||
|
|
|
|||
|
|
// 现在仅打印一个日志，表示已准备好加载价格
|
|||
|
|
console.log('价格配置已初始化，未来将从API加载')
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载价格配置失败', error)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const selectedType = ref('vip') // 默认选择VIP
|
|||
|
|
const showPayment = ref(false)
|
|||
|
|
const payData = ref({
|
|||
|
|
product_name: `${selectedType.value.toUpperCase()}代理`,
|
|||
|
|
sell_price: vipConfig.price,
|
|||
|
|
})
|
|||
|
|
const payID = ref('')
|
|||
|
|
|
|||
|
|
// 选择代理类型
|
|||
|
|
function selectType(type) {
|
|||
|
|
selectedType.value = type
|
|||
|
|
// 更新payData中的价格和产品名称
|
|||
|
|
payData.value = {
|
|||
|
|
product_name: `${type === 'vip' ? 'VIP' : 'SVIP'}代理`,
|
|||
|
|
sell_price: type === 'vip' ? vipConfig.price : vipConfig.svipPrice,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 申请VIP或SVIP
|
|||
|
|
async function applyVip() {
|
|||
|
|
// 如果是VIP想升级到SVIP，提示联系客服
|
|||
|
|
if (isVip.value && selectedType.value === 'svip') {
|
|||
|
|
contactService()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 如果是SVIP要降级到VIP，提示不能降级
|
|||
|
|
if (isSvip.value && selectedType.value === 'vip') {
|
|||
|
|
showToast('SVIP会员不能降级到VIP会员')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { data, error } = await useApiFetch('/agent/membership/activate')
|
|||
|
|
.post({
|
|||
|
|
type: selectedType.value.toUpperCase(),
|
|||
|
|
})
|
|||
|
|
.json()
|
|||
|
|
|
|||
|
|
if (data.value && !error.value) {
|
|||
|
|
if (data.value.code === 200) {
|
|||
|
|
if (data.value.data.id) {
|
|||
|
|
payID.value = data.value.data.id
|
|||
|
|
showPayment.value = true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 联系客服
|
|||
|
|
function contactService() {
|
|||
|
|
// 跳转到客服页面
|
|||
|
|
window.location.href = 'https://work.weixin.qq.com/kfid/kfc76b1d0f0d562777a'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatExpiryTime(expiryTimeStr) {
|
|||
|
|
if (!expiryTimeStr) return '未知'
|
|||
|
|
// 从格式化字符串中提取日期部分
|
|||
|
|
return expiryTimeStr.split(' ')[0] // 假设格式是 "YYYY-MM-DD HH:MM:SS"
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.agent-VIP-apply {
|
|||
|
|
font-family:
|
|||
|
|
system-ui,
|
|||
|
|
-apple-system,
|
|||
|
|
BlinkMacSystemFont,
|
|||
|
|
'Segoe UI',
|
|||
|
|
Roboto,
|
|||
|
|
sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes shimmer {
|
|||
|
|
0% {
|
|||
|
|
transform: translateX(-100%) skewX(-30deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
transform: translateX(200%) skewX(-30deg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.animate-shimmer {
|
|||
|
|
animation: shimmer 3s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active\:scale-98:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
</style>
|