version temp2
This commit is contained in:
@@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BaseReport :feature="feature" :reportData="reportData" :reportParams="reportParams" :reportName="reportName"
|
||||
:reportDateTime="reportDateTime" :isEmpty="isEmpty" :isDone="isDone" />
|
||||
:reportDateTime="reportDateTime" :isEmpty="isEmpty" :isDone="isDone" isExample />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -49,6 +49,7 @@ const onLoad = () => {
|
||||
}
|
||||
|
||||
function toDetail(item) {
|
||||
if (item.query_state != "success") return
|
||||
router.push({ path: '/report', query: { orderId: item.order_id } });
|
||||
}
|
||||
|
||||
@@ -61,6 +62,8 @@ function stateText(state) {
|
||||
return '查询成功'
|
||||
case 'failed':
|
||||
return '查询失败'
|
||||
case 'refunded':
|
||||
return '已退款'
|
||||
default:
|
||||
return '未知状态'
|
||||
}
|
||||
@@ -75,6 +78,8 @@ function statusClass(state) {
|
||||
return 'status-success'
|
||||
case 'failed':
|
||||
return 'status-failed'
|
||||
case 'refunded':
|
||||
return 'status-refunded'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
@@ -83,25 +88,18 @@ function statusClass(state) {
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-4 p-4">
|
||||
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><van-cell
|
||||
v-for="item in reportList" :key="item.id" @click="toDetail(item)" class="card mb-4">
|
||||
<div class=" text-gray-600 flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>状态:</div>
|
||||
<div class="rounded-xl px-2 py-1" :class="[statusClass(item.query_state)]">
|
||||
{{ stateText(item.query_state) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>报告类型</div>
|
||||
<div>{{ item.product_name }}</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>查询时间:</div>
|
||||
<div>{{ item.create_time }}</div>
|
||||
</div>
|
||||
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
||||
<div v-for="item in reportList" :key="item.id" @click="toDetail(item)"
|
||||
class="bg-white rounded-lg shadow-sm p-4 mb-4 relative cursor-pointer">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-xl text-black mb-1">{{ item.product_name }}</div>
|
||||
<div class="text-sm text-[#999999]">{{ item.create_time }}</div>
|
||||
</div>
|
||||
</van-cell>
|
||||
<div class="absolute top-0 right-0 rounded-bl-lg rounded-tr-lg px-2 py-[1px] text-white text-sm font-medium"
|
||||
:class="[statusClass(item.query_state)]">
|
||||
{{ stateText(item.query_state) }}
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
|
||||
</div>
|
||||
@@ -109,17 +107,22 @@ function statusClass(state) {
|
||||
|
||||
<style scoped>
|
||||
.status-pending {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
background-color: #1FBE5D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
background-color: #EB3C3C;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-refunded {
|
||||
background-color: #999999;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
174
src/views/Me.vue
174
src/views/Me.vue
@@ -2,7 +2,7 @@
|
||||
<div class="box-border min-h-screen">
|
||||
<div class="flex flex-col p-4 space-y-6">
|
||||
<!-- 用户信息卡片 -->
|
||||
<div class="profile-section group relative flex items-center gap-4 rounded-xl bg-white p-6 shadow-lg transition-all hover:shadow-xl"
|
||||
<div class="profile-section group relative flex items-center gap-4 rounded-xl bg-white p-6 transition-all hover:shadow-xl"
|
||||
@click="!isLoggedIn ? redirectToLogin() : null">
|
||||
<div class="relative">
|
||||
<!-- 头像容器添加overflow-hidden解决边框问题 -->
|
||||
@@ -22,14 +22,14 @@
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-2xl font-bold" style="color: var(--van-text-color);">
|
||||
{{
|
||||
!isLoggedIn
|
||||
? "点击登录"
|
||||
: mobile
|
||||
? maskName(mobile)
|
||||
: isWeChat
|
||||
? "微信用户"
|
||||
: "未绑定手机号"
|
||||
}}
|
||||
!isLoggedIn
|
||||
? "点击登录"
|
||||
: mobile
|
||||
? maskName(mobile)
|
||||
: isWeChat
|
||||
? "微信用户"
|
||||
: "未绑定手机号"
|
||||
}}
|
||||
</h2>
|
||||
<!-- 手机号绑定提示 -->
|
||||
<template v-if="isLoggedIn && !mobile">
|
||||
@@ -45,49 +45,95 @@
|
||||
</div>
|
||||
<VipBanner v-if="isAgent && (level === 'normal' || level === '')" />
|
||||
<!-- 功能菜单 -->
|
||||
<div class="features-section space-y-3">
|
||||
<template v-if="isAgent && ['VIP', 'SVIP'].includes(level)">
|
||||
<div class="">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<template v-if="isAgent && ['VIP', 'SVIP'].includes(level)">
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-purple-50 transition-colors border-b border-gray-100"
|
||||
@click="toVipConfig">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/dlbgpz.png" class="w-5 h-5" alt="代理报告配置" />
|
||||
<span class="text-purple-700 font-medium">代理报告配置</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-amber-50 transition-colors border-b border-gray-100"
|
||||
@click="toVipRenewal">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/xfhy.png" class="w-5 h-5" alt="代理会员" />
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-amber-700 font-medium">续费代理会员</span>
|
||||
<span class="text-xs text-gray-500">有效期至 {{ formatExpiryTime(ExpiryTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
class="feature-item bg-gradient-to-r from-purple-200/80 to-pink-200/80 hover:from-purple-300/80 hover:to-pink-300/80 text-purple-700"
|
||||
@click="toVipConfig">
|
||||
⚙️ 代理报告配置
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toHistory">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/wdbg.png" class="w-5 h-5" alt="我的报告" />
|
||||
<span class="text-gray-700 font-medium">我的报告</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="feature-item bg-gradient-to-r from-amber-200/80 to-yellow-200/80 hover:from-amber-300/80 hover:to-yellow-300/80 text-amber-700"
|
||||
@click="toVipRenewal">
|
||||
🎖️ 续费代理会员
|
||||
<span class="text-xs text-gray-500 ml-1">有效期至 {{ formatExpiryTime(ExpiryTime) }}</span>
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toApiStore">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/yhxy.png" class="w-5 h-5" alt="API商店" />
|
||||
<span class="text-gray-700 font-medium">API商店</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
</template>
|
||||
<button class="feature-item hover:bg-blue-50" @click="toHistory">
|
||||
📃 我的报告
|
||||
</button>
|
||||
<button class="feature-item hover:bg-blue-50" @click="toApiStore">
|
||||
🏪 API商店
|
||||
</button>
|
||||
<button class="feature-item hover:bg-blue-50" @click="toCooperation">
|
||||
🤝 商务合作
|
||||
</button>
|
||||
<button class="feature-item hover:bg-blue-50" @click="toUserAgreement">
|
||||
📜 用户协议
|
||||
</button>
|
||||
<button class="feature-item hover:bg-blue-50" @click="toPrivacyPolicy">
|
||||
🔒 隐私政策
|
||||
</button>
|
||||
<button class="feature-item hover:bg-blue-50" @click="toService">
|
||||
💬 联系客服
|
||||
</button>
|
||||
<!-- <button
|
||||
v-if="isLoggedIn"
|
||||
class="feature-item hover:bg-red-50 text-red-600"
|
||||
@click="handleCancelAccount"
|
||||
>
|
||||
📴 注销账号
|
||||
</button> -->
|
||||
<button v-if="isLoggedIn && !isWeChat" class="feature-item hover:bg-red-50"
|
||||
style="color: var(--van-theme-primary);" @click="handleLogout">
|
||||
⏏️ 退出登录
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toCooperation">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/yhxy.png" class="w-5 h-5" alt="商务合作" />
|
||||
<span class="text-gray-700 font-medium">商务合作</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toUserAgreement">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/yhxy.png" class="w-5 h-5" alt="用户协议" />
|
||||
<span class="text-gray-700 font-medium">用户协议</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toPrivacyPolicy">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/yszc.png" class="w-5 h-5" alt="隐私政策" />
|
||||
<span class="text-gray-700 font-medium">隐私政策</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors"
|
||||
@click="toService">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/lxkf.png" class="w-5 h-5" alt="联系客服" />
|
||||
<span class="text-gray-700 font-medium">联系客服</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button v-if="isLoggedIn && !isWeChat"
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-red-50 transition-colors"
|
||||
@click="handleLogout">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/yhxy.png" class="w-5 h-5" alt="退出登录" />
|
||||
<span class="text-red-600 font-medium">退出登录</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -271,34 +317,4 @@ onBeforeMount(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-section {
|
||||
background: linear-gradient(135deg, #ffffff 50%, rgba(236, 253, 245, 0.3));
|
||||
border: 1px solid rgba(209, 213, 219, 0.2);
|
||||
}
|
||||
|
||||
.profile-section .relative>div:first-child {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
transition: transform 0.2s ease, background 0.3s ease, box-shadow 0.3s ease;
|
||||
@apply flex w-full items-center shadow space-x-3 rounded-xl bg-white px-6 py-4 text-left text-gray-700 transition-all duration-300 hover:scale-[1.02] hover:shadow-md focus:outline-none;
|
||||
}
|
||||
|
||||
.feature-item:active {
|
||||
transform: scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
|
||||
.border-gradient-to-r {
|
||||
border-image: linear-gradient(to right,
|
||||
var(--tw-gradient-from),
|
||||
var(--tw-gradient-to)) 1;
|
||||
}
|
||||
|
||||
.shadow-glow {
|
||||
filter: drop-shadow(0 0 8px rgba(163, 51, 200, 0.2));
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -30,9 +30,9 @@
|
||||
<span class="text-gray-600">支付类型</span>
|
||||
<span class="text-gray-800">{{
|
||||
paymentType === "agent_vip"
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="paymentType === 'agent_vip'" class="text-center text-gray-600 mb-4">恭喜你成为高级代理会员，享受更多权益</div>
|
||||
@@ -40,9 +40,9 @@
|
||||
<div class="action-buttons grid grid-cols-1 gap-4">
|
||||
<van-button block type="primary" class="rounded-lg" @click="handleNavigation">
|
||||
{{
|
||||
paymentType === "agent_vip"
|
||||
? "查看会员权益"
|
||||
: "查看查询结果"
|
||||
paymentType === "agent_vip"
|
||||
? "查看会员权益"
|
||||
: "查看查询结果"
|
||||
}}
|
||||
</van-button>
|
||||
</div>
|
||||
@@ -72,9 +72,9 @@
|
||||
<span class="text-gray-600">支付类型</span>
|
||||
<span class="text-gray-800">{{
|
||||
paymentType === "agent_vip"
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">订单状态</span>
|
||||
@@ -118,9 +118,9 @@
|
||||
<p class="text-sm mt-1">
|
||||
已等待
|
||||
{{
|
||||
Math.floor(
|
||||
(pollingCount * getPollingInterval) / 1000
|
||||
)
|
||||
Math.floor(
|
||||
(pollingCount * getPollingInterval) / 1000
|
||||
)
|
||||
}}
|
||||
秒
|
||||
</p>
|
||||
@@ -135,9 +135,9 @@
|
||||
<span class="text-gray-600">支付类型</span>
|
||||
<span class="text-gray-800">{{
|
||||
paymentType === "agent_vip"
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">订单状态</span>
|
||||
@@ -383,6 +383,15 @@ onBeforeMount(async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 检测是否为 iOS 浏览器且没有上级页面
|
||||
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
const hasHistory = window.history.length > 1;
|
||||
|
||||
if (isIOS && !hasHistory) {
|
||||
// iOS 浏览器且没有上级页面，关闭当前标签页
|
||||
window.close();
|
||||
return;
|
||||
}
|
||||
// 首次检查支付状态
|
||||
await checkPaymentStatus();
|
||||
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
<template>
|
||||
<BaseReport
|
||||
v-if="queryState === 'success'"
|
||||
:order-id="orderId"
|
||||
:order-no="orderNo"
|
||||
:feature="feature"
|
||||
:reportData="reportData"
|
||||
:reportParams="reportParams"
|
||||
:reportName="reportName"
|
||||
:reportDateTime="reportDateTime"
|
||||
:isEmpty="isEmpty"
|
||||
:isDone="isDone"
|
||||
/>
|
||||
<BaseReport v-if="queryState === 'success'" :order-id="orderId" :order-no="orderNo" :feature="feature"
|
||||
:reportData="reportData" :reportParams="reportParams" :reportName="reportName" :reportDateTime="reportDateTime"
|
||||
:isEmpty="isEmpty" :isDone="isDone" />
|
||||
<div v-else-if="queryState === 'pending'" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>报告生成中，请稍候...</p>
|
||||
@@ -41,13 +32,13 @@ onBeforeMount(() => {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
orderNo.value = query.get("out_trade_no");
|
||||
orderId.value = query.get("order_id");
|
||||
|
||||
|
||||
|
||||
|
||||
if (!orderNo.value && !orderId.value) {
|
||||
orderId.value = route.query.orderId;
|
||||
orderNo.value = route.query.orderNo;
|
||||
}
|
||||
|
||||
|
||||
if (!orderId.value && !orderNo.value) return;
|
||||
|
||||
getReport();
|
||||
@@ -76,6 +67,8 @@ const getReport = async () => {
|
||||
if (data.value.code === 200) {
|
||||
queryState.value = data.value.data.query_state;
|
||||
if (queryState.value === "success") {
|
||||
feature.value = data.value.data.product;
|
||||
|
||||
reportData.value = data.value.data.query_data.sort((a, b) => {
|
||||
return a.feature.sort - b.feature.sort;
|
||||
});
|
||||
@@ -146,6 +139,7 @@ const getReport = async () => {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
||||
@@ -1,56 +1,36 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<van-nav-bar
|
||||
title="天远数据"
|
||||
left-arrow
|
||||
@click-left="goHome"
|
||||
fixed
|
||||
placeholder
|
||||
safe-area-inset-topxc z
|
||||
>
|
||||
<template #right>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="!bg-blue-500 !border-blue-500"
|
||||
@click="goHome"
|
||||
>
|
||||
首页
|
||||
</van-button>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<van-nav-bar title="天远数据" left-arrow @click-left="goHome" fixed placeholder safe-area-inset-topxc z>
|
||||
<template #right>
|
||||
<van-button type="primary" size="small" class="!bg-blue-500 !border-blue-500" @click="goHome">
|
||||
首页
|
||||
</van-button>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
|
||||
<BaseReport
|
||||
v-if="queryState === 'success' && !isExpired"
|
||||
:isShare="true"
|
||||
:feature="feature"
|
||||
:reportData="reportData"
|
||||
:reportParams="reportParams"
|
||||
:reportName="reportName"
|
||||
:reportDateTime="reportDateTime"
|
||||
:isEmpty="isEmpty"
|
||||
:isDone="isDone"
|
||||
/>
|
||||
<div v-else-if="queryState === 'pending'" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>报告生成中，请稍候...</p>
|
||||
</div>
|
||||
<div v-else-if="isExpired" class="expired-container">
|
||||
<div class="expired-content">
|
||||
<van-icon name="clock-o" size="48" color="#999" />
|
||||
<h2 class="text-xl font-bold text-gray-700 mt-4">
|
||||
分享链接已过期
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-2">
|
||||
该分享链接已超过7天有效期，请重新获取分享链接
|
||||
</p>
|
||||
<BaseReport v-if="queryState === 'success' && !isExpired" :isShare="true" :feature="feature"
|
||||
:reportData="reportData" :reportParams="reportParams" :reportName="reportName"
|
||||
:reportDateTime="reportDateTime" :isEmpty="isEmpty" :isDone="isDone" />
|
||||
<div v-else-if="queryState === 'pending'" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>报告生成中，请稍候...</p>
|
||||
</div>
|
||||
<div v-else-if="isExpired" class="expired-container">
|
||||
<div class="expired-content">
|
||||
<van-icon name="clock-o" size="48" color="#999" />
|
||||
<h2 class="text-xl font-bold text-gray-700 mt-4">
|
||||
分享链接已过期
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-2">
|
||||
该分享链接已超过7天有效期，请重新获取分享链接
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4" v-else-if="queryState === 'failed'">
|
||||
<LEmpty />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4" v-else-if="queryState === 'failed'">
|
||||
<LEmpty />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LEmpty from "@/components/LEmpty.vue";
|
||||
@@ -121,6 +101,7 @@ const getReport = async (linkId) => {
|
||||
reportData.value = data.value.data.query_data.sort((a, b) => {
|
||||
return a.feature.sort - b.feature.sort;
|
||||
});
|
||||
feature.value = data.value.data.product;
|
||||
reportParams.value = data.value.data.query_params;
|
||||
reportName.value = data.value.data.product_name;
|
||||
reportDateTime.value = data.value.data.create_time;
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<script setup>
|
||||
const router = useRouter();
|
||||
import { storeToRefs } from "pinia";
|
||||
import SectionTitle from "@/components/SectionTitle.vue";
|
||||
|
||||
const agentStore = useAgentStore();
|
||||
const { isAgent } = storeToRefs(agentStore);
|
||||
import personalDataIcon from "@/assets/images/personal_data_bg.png";
|
||||
import companyIcon from "@/assets/images/index_icon_6.png";
|
||||
import loanCheckIcon from "@/assets/images/loan_check_bg.png";
|
||||
import personalDataIcon from "@/assets/images/index/personal_data_bg.png";
|
||||
import companyIcon from "@/assets/images/index/company_bg.png";
|
||||
import loanCheckIcon from "@/assets/images/index/loan_check_bg.png";
|
||||
function toInquire(name) {
|
||||
router.push(`/inquire/${name}`);
|
||||
}
|
||||
@@ -43,136 +44,120 @@ const services = ref([
|
||||
name: "personalData",
|
||||
subtitle: "深度检测报告",
|
||||
bg: personalDataIcon,
|
||||
bgColor: "bg-indigo-400",
|
||||
position:
|
||||
"rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg",
|
||||
goColor: "#A22525",
|
||||
},
|
||||
{
|
||||
title: "小微企业",
|
||||
name: "companyinfo",
|
||||
subtitle: "信用报告",
|
||||
bg: companyIcon,
|
||||
bgColor: "bg-purple-400",
|
||||
position:
|
||||
"rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg",
|
||||
goColor: "#6B9DF9",
|
||||
},
|
||||
{
|
||||
title: "贷前背调",
|
||||
name: "preloanbackgroundcheck",
|
||||
subtitle: "风险评估",
|
||||
bg: loanCheckIcon,
|
||||
bgColor: "bg-pink-400",
|
||||
position:
|
||||
"rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg",
|
||||
goColor: "#E1A0E4",
|
||||
},
|
||||
]);
|
||||
function toCooperation() {
|
||||
window.location.href = "https://www.tianyuandata.com";
|
||||
}
|
||||
|
||||
const noticeText = ref([]);
|
||||
|
||||
function toHistory() {
|
||||
router.push(`/historyQuery`);
|
||||
}
|
||||
const toBigData = () => {
|
||||
window.location.href = "https://www.tybigdata.com/";
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="box-border min-h-screen">
|
||||
<div class="relative p-4">
|
||||
<img class="h-full w-full rounded-xl overflow-hidden" src="@/assets/images/banner.png" />
|
||||
<img class="h-full w-full rounded-xl overflow-hidden" src="@/assets/images/index/banner.png" />
|
||||
</div>
|
||||
<div class="px-4 pb-2">
|
||||
<div class="px-4 pb-2 mt-6">
|
||||
<!-- 第一行 -->
|
||||
<div class="grid grid-cols-4 gap-3 mb-3">
|
||||
<div class="text-center" @click="toInvitation">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_xj.svg" alt="邀请好友" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toInvitation">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/yqhy.png" alt="邀请好友" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">邀请好友</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">邀请好友</div>
|
||||
</div>
|
||||
<div class="text-center" @click="toAgentVipApply">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_cwhy.svg" alt="成为会员" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toAgentVipApply">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/cwhy.png" alt="成为会员" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">成为会员</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">成为会员</div>
|
||||
</div>
|
||||
<div class="text-center" @click="toHelp">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_bz.svg" alt="帮助中心" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toHelp">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/bzzx.png" alt="帮助中心" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">帮助中心</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">帮助中心</div>
|
||||
</div>
|
||||
<div class="text-center" @click="toHistory">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_bg.svg" alt="我的报告" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toHistory">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/wdbg.png" alt="我的报告" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">我的报告</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">我的报告</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行 -->
|
||||
<div class="grid grid-cols-4 gap-3">
|
||||
<div class="text-center" @click="toService">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_lxkf.svg" alt="联系客服" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toService">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/lxkf.png" alt="联系客服" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">联系客服</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">联系客服</div>
|
||||
</div>
|
||||
<div class="text-center" @click="toIncome">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_srmx.svg" alt="收入明细" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toIncome">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/srmx.png" alt="收入明细" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">收入明细</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">收入明细</div>
|
||||
</div>
|
||||
<div class="text-center" @click="toWithdraw">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_wytx.svg" alt="我要提现" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toWithdraw">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/wytx.png" alt="我要提现" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">我要提现</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">我要提现</div>
|
||||
</div>
|
||||
<div class="text-center" @click="toPromote">
|
||||
<div
|
||||
class="h-16 w-16 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center mx-auto">
|
||||
<img src="@/assets/images/icon_tg.svg" alt="推广报告" class="w-12 h-12" />
|
||||
<div class="text-center flex flex-col justify-center items-center" @click="toPromote">
|
||||
<div class="h-16 w-16">
|
||||
<img src="@/assets/images/index/tgbg.png" alt="推广报告" class="h-16 w-16" />
|
||||
</div>
|
||||
<div class="text-center mt-1 font-bold text-sm">推广报告</div>
|
||||
<div class="text-center mt-2 text-sm text-[#666666]">推广报告</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative p-4 pb-4 pt-2">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
|
||||
<div class="relative p-4 pb-4 pt-2 mt-6">
|
||||
<SectionTitle title="查询服务" />
|
||||
<div class="grid grid-cols-2 gap-6 my-4" style="grid-template-rows: repeat(2, 1fr);">
|
||||
<template v-for="(service, index) in services" :key="index">
|
||||
<div class="relative flex flex-col px-4 py-2 shadow-lg min-h-24" :class="[
|
||||
service.position,
|
||||
service.bgColor,
|
||||
service.title === '个人大数据' ? 'row-span-2' : '',
|
||||
]" :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
|
||||
@click="toInquire(service.name)">
|
||||
<div class="relative flex flex-col px-4 py-2 rounded-xl min-h-24"
|
||||
:class="index === 0 ? 'row-span-2' : ''"
|
||||
:style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
|
||||
@click=" toInquire(service.name)">
|
||||
<div class="min-h-18 flex flex-col items-start px-1">
|
||||
<div class="mt-1 max-w-max text-left text-gray-600 font-bold text-md"
|
||||
:class="[service.title === '个人大数据' ? 'text-lg' : '']">
|
||||
<div class="mt-1 max-w-max text-left text-gray-600 font-bold text-md">
|
||||
{{ service.title }}
|
||||
</div>
|
||||
<div class="max-w-max text-left text-xs text-gray-600">
|
||||
<div>{{ service.subtitle }}</div>
|
||||
</div>
|
||||
<div class="mt-2 rounded-2xl px-2 text-xs text-white" :class="[service.bgColor]">
|
||||
GO >
|
||||
<div class="mt-2 rounded-lg px-1 text-sm text-white shadow-xl w-max flex items-center"
|
||||
:style="`background-color: ${service.goColor}`">
|
||||
GO
|
||||
<img src="@/assets/images/index/go_icon.png" alt="右箭头"
|
||||
class="ml-0.5 h-4 w-4 inline-block align-middle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<SectionTitle title="其他服务" class="mt-8" />
|
||||
<div class="mb-6 mt-6 py-4 flex flex-col items-center justify-center rounded-3xl from-blue-500 to-sky-400 bg-gradient-to-b text-center text-lg text-white line-height-12 shadow-xl"
|
||||
@click="toCooperation">
|
||||
<div class="flex items-center text-xl">
|
||||
@@ -183,13 +168,16 @@ const toBigData = () => {
|
||||
<div class="mt-4 rounded-2xl overflow-hidden" @click="toBigData">
|
||||
<img src="@/assets/images/index_b_banner.png" class="w-full h-full" mode="widthFix" />
|
||||
</div>
|
||||
<div class="mt-4 box-border h-14 w-full flex items-center rounded-xl bg-white px-4 text-gray-700 shadow-xl"
|
||||
<div class="mt-4 box-border h-14 w-full flex items-center rounded-lg shadow-lg bg-white text-gray-700 pr-4"
|
||||
@click="toHistory">
|
||||
<img class="mr-4 h-10 w-10" src="@/assets/images/bg_icon.png" mode="widthFix" />
|
||||
<div class="">
|
||||
<div class="font-bold">我的历史查询记录</div>
|
||||
<div class="text-xs">查询记录有效期为30天</div>
|
||||
<div class="mr-4 h-full flex items-center justify-center">
|
||||
<img class="h-full" src="@/assets/images/index/bg_icon.png" mode="widthFix" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-gray-800">我的历史查询记录</div>
|
||||
<div class="text-xs text-gray-500">查询记录有效期为30天</div>
|
||||
</div>
|
||||
<img src="@/assets/images/index/right.png" alt="右箭头" class="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user