tydata-webview-v2/src/views/AgentVipApply.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>