908 lines
42 KiB
Vue
908 lines
42 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({})
|
||
|
||
// 计算得出的收益数据
|
||
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,
|
||
}
|
||
})
|
||
|
||
// 加载价格配置
|
||
onMounted(async () => {
|
||
document.documentElement.style.scrollBehavior = 'smooth'
|
||
|
||
// 从API获取会员配置信息
|
||
try {
|
||
const { data, error } = await useApiFetch('/agent/membership/info').get().json()
|
||
|
||
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)
|
||
}
|
||
})
|
||
|
||
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/kfc8a32720024833f57'
|
||
}
|
||
|
||
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>
|