t
This commit is contained in:
520
src/views/Me.vue
520
src/views/Me.vue
@@ -1,221 +1,326 @@
|
||||
<template>
|
||||
<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 transition-all hover:shadow-xl"
|
||||
<!-- 用户信息和资产卡片(合并) -->
|
||||
<div class="profile-section group relative rounded-xl p-0.5 transition-all hover:shadow-xl"
|
||||
:class="isAgent ? levelGradient.cardBorder : 'bg-gray-200'"
|
||||
@click="!isLoggedIn ? redirectToLogin() : null">
|
||||
<div class="relative">
|
||||
<!-- 头像容器添加overflow-hidden解决边框问题 -->
|
||||
<div class="overflow-hidden rounded-full p-0.5" :class="levelGradient.border">
|
||||
<img :src="userAvatar || getDefaultAvatar()" alt="User Avatar"
|
||||
class="h-24 w-24 rounded-full border-4 border-white" />
|
||||
</div>
|
||||
|
||||
<!-- 代理标识 -->
|
||||
<div v-if="isAgent" class="absolute -bottom-2 -right-2">
|
||||
<div class="flex items-center justify-center rounded-full px-3 py-1 text-xs font-bold text-white shadow-sm"
|
||||
:class="levelGradient.badge">
|
||||
{{ levelNames[level] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-2xl font-bold" style="color: var(--van-text-color);">
|
||||
{{
|
||||
!isLoggedIn
|
||||
? "点击登录"
|
||||
: mobile
|
||||
? maskName(mobile)
|
||||
: isWeChat
|
||||
? "微信用户"
|
||||
: "未绑定手机号"
|
||||
}}
|
||||
</h2>
|
||||
<!-- 手机号绑定提示 -->
|
||||
<template v-if="isLoggedIn && !mobile">
|
||||
<p @click.stop="showBindPhoneDialog" class="text-sm cursor-pointer hover:underline"
|
||||
style="color: var(--van-theme-primary);">
|
||||
点击绑定手机号码
|
||||
</p>
|
||||
</template>
|
||||
<p v-if="isAgent" class="text-sm font-medium" :class="levelGradient.text">
|
||||
🎖️ {{ levelText[level] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<VipBanner v-if="isAgent && (level === 'normal' || 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-6 h-6 object-contain" alt="代理报告配置" />
|
||||
<span class="text-purple-700 font-medium">代理报告配置</span>
|
||||
<div class="rounded-xl bg-white p-6">
|
||||
<!-- 上半部分:用户信息 -->
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="relative">
|
||||
<!-- 头像容器添加overflow-hidden解决边框问题 -->
|
||||
<div class="overflow-hidden rounded-full p-0.5" :class="levelGradient.border">
|
||||
<img :src="userAvatar || getDefaultAvatar()" alt="User Avatar"
|
||||
class="h-20 w-20 rounded-full border-4 border-white" />
|
||||
</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-6 h-6 object-contain" 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 v-if="isAgent" class="absolute -bottom-2 -right-2">
|
||||
<div class="flex items-center justify-center rounded-full px-3 py-1 text-xs font-bold text-white shadow-sm"
|
||||
:class="levelGradient.badge">
|
||||
{{ levelNamesMap[level] || levelNamesMap[1] }}
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 space-y-1">
|
||||
<h2 class="text-2xl font-bold" style="color: var(--van-text-color);">
|
||||
{{
|
||||
!isLoggedIn
|
||||
? "点击登录"
|
||||
: mobile
|
||||
? mobile
|
||||
: isWeChat
|
||||
? "微信用户"
|
||||
: "未绑定手机号"
|
||||
}}
|
||||
</h2>
|
||||
<!-- 手机号绑定提示 -->
|
||||
<template v-if="isLoggedIn && !mobile">
|
||||
<p @click.stop="showRegisterAgentDialog" class="text-sm cursor-pointer hover:underline"
|
||||
style="color: var(--van-theme-primary);">
|
||||
点击注册成为代理
|
||||
</p>
|
||||
</template>
|
||||
<!-- 普通用户申请成为代理提示 -->
|
||||
<template v-else-if="isLoggedIn && mobile && !isAgent">
|
||||
<p @click.stop="toRegister" class="text-sm cursor-pointer hover:underline"
|
||||
style="color: var(--van-theme-primary);">
|
||||
点击申请成为代理
|
||||
</p>
|
||||
</template>
|
||||
<p v-if="isAgent" class="font-bold" :class="levelGradient.text">
|
||||
ID: {{ agentCode }}
|
||||
</p>
|
||||
</div>
|
||||
<!-- 右侧资产信息(仅代理显示) -->
|
||||
<div v-if="isAgent" class="text-right">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">余额</div>
|
||||
<div class="text-2xl font-bold" style="color: var(--van-theme-primary);">
|
||||
¥ {{ (revenueData?.balance || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下半部分:资产详情和操作按钮(仅代理显示) -->
|
||||
<template v-if="isAgent">
|
||||
<div class="grid grid-cols-3 gap-3 mb-4 pt-4 border-t"
|
||||
style="border-color: var(--van-border-color);">
|
||||
<div class="text-center">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">累计收益</div>
|
||||
<div class="text-base font-semibold" style="color: var(--van-text-color);">
|
||||
¥ {{ (revenueData?.total_earnings || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">风险保障金</div>
|
||||
<div class="text-base font-semibold" style="color: var(--van-text-color);">
|
||||
¥ {{ (revenueData?.frozen_balance || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">累计提现</div>
|
||||
<div class="text-base font-semibold" style="color: var(--van-text-color);">
|
||||
¥ {{ (revenueData?.withdrawn_amount || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button @click.stop="toWithdraw"
|
||||
class="text-white rounded-full py-1.5 px-4 shadow-md flex items-center justify-center text-base"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark)); min-height: 36px;">
|
||||
<van-icon name="gold-coin" class="mr-1" />
|
||||
提现
|
||||
</button>
|
||||
<button @click.stop="toWithdrawDetails"
|
||||
class="bg-white/90 border rounded-full py-1.5 px-4 shadow-sm flex items-center justify-center text-base"
|
||||
style="color: var(--van-text-color-2); border-color: var(--van-border-color); min-height: 36px;">
|
||||
<van-icon name="notes" class="mr-1" />
|
||||
提现记录
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<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="toHistory">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/wdbg.png" class="w-6 h-6 object-contain" alt="我的报告" />
|
||||
<span class="text-gray-700 font-medium">我的报告</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 佣金和下级推广收益(合并) -->
|
||||
<div v-if="isAgent" class="rounded-xl shadow-lg bg-white p-5">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- 我的推广收益部分 -->
|
||||
<div class="pr-4 border-r" style="border-color: var(--van-border-color);">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center">
|
||||
<van-icon name="balance-list" class="text-lg mr-2"
|
||||
style="color: var(--color-warning);" />
|
||||
<span class="text-base font-bold" style="color: var(--van-text-color);">我的推广收益</span>
|
||||
</div>
|
||||
</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="toApiStore">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/apisd.png" class="w-6 h-6 object-contain" alt="API商店" />
|
||||
<span class="text-gray-700 font-medium">API商店</span>
|
||||
<div class="text-center mb-3">
|
||||
<div class="text-xl font-bold" style="color: var(--color-warning);">
|
||||
¥ {{ (revenueData?.commission_total || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="text-sm mt-0.5" style="color: var(--van-text-color-2);">累计总收益</div>
|
||||
</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="toBigData">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/qyfkyj.png" class="w-6 h-6 object-contain" alt="企业风控预警" />
|
||||
<span class="text-gray-700 font-medium">企业风控预警</span>
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<div class="text-center">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">今日</div>
|
||||
<div class="text-base font-semibold" style="color: var(--color-warning);">
|
||||
¥ {{ (revenueData?.commission_today || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">本月</div>
|
||||
<div class="text-base font-semibold" style="color: var(--color-warning);">
|
||||
¥ {{ (revenueData?.commission_month || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</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="toCooperation">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/swhz.png" class="w-6 h-6 object-contain" alt="商务合作" />
|
||||
<span class="text-gray-700 font-medium">商务合作</span>
|
||||
<div class="flex items-center justify-center text-sm font-semibold cursor-pointer"
|
||||
style="color: var(--color-warning);" @click="goToPromoteDetail">
|
||||
<span>查看明细</span>
|
||||
<span class="ml-1 text-base">→</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-6 h-6 object-contain" alt="用户协议" />
|
||||
<span class="text-gray-700 font-medium">用户协议</span>
|
||||
</div>
|
||||
|
||||
<!-- 下级推广收益部分 -->
|
||||
<div class="pl-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center">
|
||||
<van-icon name="gift-o" class="text-lg mr-2" style="color: var(--color-success);" />
|
||||
<span class="text-base font-bold" style="color: var(--van-text-color);">下级推广收益</span>
|
||||
</div>
|
||||
</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-6 h-6 object-contain" alt="隐私政策" />
|
||||
<span class="text-gray-700 font-medium">隐私政策</span>
|
||||
<div class="text-center mb-3">
|
||||
<div class="text-xl font-bold" style="color: var(--color-success);">
|
||||
¥ {{ (revenueData?.rebate_total || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="text-sm mt-0.5" style="color: var(--van-text-color-2);">累计总收益</div>
|
||||
</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-6 h-6 object-contain" alt="联系客服" />
|
||||
<span class="text-gray-700 font-medium">联系客服</span>
|
||||
<div class="grid grid-cols-2 gap-2 mb-3">
|
||||
<div class="text-center">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">今日</div>
|
||||
<div class="text-base font-semibold" style="color: var(--color-success);">
|
||||
¥ {{ (revenueData?.rebate_today || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm mb-1" style="color: var(--van-text-color-2);">本月</div>
|
||||
<div class="text-base font-semibold" style="color: var(--color-success);">
|
||||
¥ {{ (revenueData?.rebate_month || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</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/tcdl.png" class="w-6 h-6 object-contain" alt="退出登录" />
|
||||
<span class="text-gray-700 font-medium">退出登录</span>
|
||||
<div class="flex items-center justify-center text-sm font-semibold cursor-pointer"
|
||||
style="color: var(--color-success);" @click="goToRebateDetail">
|
||||
<span>查看明细</span>
|
||||
<span class="ml-1 text-base">→</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<div class="">
|
||||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<!-- 升级功能入口(如果不是钻石代理) -->
|
||||
<button v-if="isAgent && level !== 3"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-purple-50 transition-colors"
|
||||
@click="toUpgrade">
|
||||
<img src="@/assets/images/me/sjdl.svg" class="w-8 h-8 object-contain" alt="升级代理" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">升级代理</span>
|
||||
</button>
|
||||
<!-- 升级下级入口(仅钻石代理) -->
|
||||
<button v-if="isAgent && level === 3"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-purple-50 transition-colors"
|
||||
@click="toUpgradeSubordinate">
|
||||
<img src="@/assets/images/me/sjxj.svg" class="w-8 h-8 object-contain" alt="调整下级级别" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">调整级别</span>
|
||||
</button>
|
||||
<!-- 邀请码管理入口 -->
|
||||
<button v-if="isAgent"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors"
|
||||
@click="toInviteCodeManage">
|
||||
<img src="@/assets/images/me/yqmgl.svg" class="w-8 h-8 object-contain" alt="邀请码管理" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">邀请码管理</span>
|
||||
</button>
|
||||
<!-- 实名认证入口(所有代理) -->
|
||||
<button v-if="isAgent"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-green-50 transition-colors"
|
||||
@click="toRealNameAuth">
|
||||
<img src="@/assets/images/me/smrz.svg" class="w-8 h-8 object-contain" alt="提现" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">实名认证</span>
|
||||
</button>
|
||||
<!-- 提现入口(所有代理) -->
|
||||
<!-- <button v-if="isAgent"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors"
|
||||
@click="toWithdraw">
|
||||
<img src="@/assets/images/me/tx.svg" class="w-8 h-8 object-contain" alt="提现" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">提现</span>
|
||||
</button> -->
|
||||
<!-- 推广查询记录 -->
|
||||
<button v-if="isAgent"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors"
|
||||
@click="toAgentReport">
|
||||
<img src="@/assets/images/me/tgcxjl.svg" class="w-8 h-8 object-contain" alt="推广查询记录" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">推广查询记录</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors"
|
||||
@click="toUserAgreement">
|
||||
<img src="@/assets/images/me/yhxy.svg" class="w-8 h-8 object-contain" alt="用户协议" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">用户协议</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors"
|
||||
@click="toPrivacyPolicy">
|
||||
<img src="@/assets/images/me/yszc.svg" class="w-8 h-8 object-contain" alt="隐私政策" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">隐私政策</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-blue-50 transition-colors"
|
||||
@click="toService">
|
||||
<img src="@/assets/images/me/lxkf.svg" class="w-8 h-8 object-contain" alt="联系客服" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">联系客服</span>
|
||||
</button>
|
||||
<button v-if="isLoggedIn && !isWeChat"
|
||||
class="flex flex-col items-center justify-center gap-2 py-4 rounded-lg hover:bg-red-50 transition-colors"
|
||||
@click="handleLogout">
|
||||
<img src="@/assets/images/me/tcdl.png" class="w-8 h-8 object-contain" alt="退出登录" />
|
||||
<span class="text-xs text-gray-700 font-medium text-center">退出登录</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BindPhoneDialog />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, computed, onBeforeMount } from "vue";
|
||||
const router = useRouter();
|
||||
import { ref, computed, onBeforeMount, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import headShot from "@/assets/images/head_shot.webp";
|
||||
import { useAgentStore } from "@/stores/agentStore";
|
||||
import { useUserStore } from "@/stores/userStore";
|
||||
import { useEnv } from "@/composables/useEnv";
|
||||
import { useDialogStore } from "@/stores/dialogStore";
|
||||
import useApiFetch from "@/composables/useApiFetch";
|
||||
import { getRevenueInfo } from '@/api/agent';
|
||||
import BindPhoneDialog from "@/components/BindPhoneDialog.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const agentStore = useAgentStore();
|
||||
const userStore = useUserStore();
|
||||
const dialogStore = useDialogStore();
|
||||
const { isAgent, level, ExpiryTime } = storeToRefs(agentStore);
|
||||
const { isAgent, level, levelName, agentCode } = storeToRefs(agentStore);
|
||||
const { userName, userAvatar, isLoggedIn, mobile } = storeToRefs(userStore);
|
||||
const { isWeChat } = useEnv();
|
||||
const revenueData = ref(null);
|
||||
|
||||
const levelNames = {
|
||||
normal: "普通代理",
|
||||
"": "普通代理",
|
||||
VIP: "VIP代理",
|
||||
SVIP: "SVIP代理",
|
||||
// 等级名称映射(数字等级)
|
||||
const levelNamesMap = {
|
||||
1: "普通代理",
|
||||
2: "黄金代理",
|
||||
3: "钻石代理",
|
||||
};
|
||||
|
||||
const levelText = {
|
||||
normal: "基础代理特权",
|
||||
"": "基础代理特权",
|
||||
VIP: "高级代理特权",
|
||||
SVIP: "尊享代理特权",
|
||||
const levelTextMap = {
|
||||
1: "基础代理特权",
|
||||
2: "高级代理特权",
|
||||
3: "尊享代理特权",
|
||||
};
|
||||
|
||||
const levelGradient = computed(() => ({
|
||||
border: {
|
||||
normal: "bg-gradient-to-r from-gray-300 to-gray-400",
|
||||
"": "bg-gradient-to-r from-gray-300 to-gray-400",
|
||||
VIP: "bg-gradient-to-r from-yellow-400 to-amber-500",
|
||||
SVIP: "bg-gradient-to-r from-purple-400 to-pink-400 shadow-[0_0_15px_rgba(163,51,200,0.2)]",
|
||||
}[level.value],
|
||||
|
||||
badge: {
|
||||
normal: "bg-gradient-to-r from-gray-500 to-gray-600",
|
||||
"": "bg-gradient-to-r from-gray-500 to-gray-600",
|
||||
VIP: "bg-gradient-to-r from-yellow-500 to-amber-600",
|
||||
SVIP: "bg-gradient-to-r from-purple-500 to-pink-500",
|
||||
}[level.value],
|
||||
|
||||
text: {
|
||||
normal: "text-gray-600",
|
||||
"": "text-gray-600",
|
||||
VIP: "text-amber-600",
|
||||
SVIP: "text-purple-600",
|
||||
}[level.value],
|
||||
}));
|
||||
const levelGradient = computed(() => {
|
||||
const currentLevel = level.value || 1;
|
||||
const gradients = {
|
||||
1: {
|
||||
border: "bg-gradient-to-r from-gray-300 to-gray-400",
|
||||
badge: "bg-gradient-to-r from-gray-500 to-gray-600",
|
||||
text: "text-gray-600",
|
||||
cardBorder: "bg-gradient-to-r from-gray-300 to-gray-400",
|
||||
},
|
||||
2: {
|
||||
border: "bg-gradient-to-r from-yellow-400 to-amber-500",
|
||||
badge: "bg-gradient-to-r from-yellow-500 to-amber-600",
|
||||
text: "text-amber-600",
|
||||
cardBorder: "bg-gradient-to-r from-yellow-400 to-amber-500",
|
||||
},
|
||||
3: {
|
||||
border: "bg-gradient-to-r from-purple-400 to-pink-400 shadow-[0_0_15px_rgba(163,51,200,0.2)]",
|
||||
badge: "bg-gradient-to-r from-purple-500 to-pink-500",
|
||||
text: "text-purple-600",
|
||||
cardBorder: "bg-gradient-to-r from-purple-400 to-pink-400 shadow-[0_0_20px_rgba(163,51,200,0.3)]",
|
||||
},
|
||||
};
|
||||
return gradients[currentLevel] || gradients[1];
|
||||
});
|
||||
|
||||
const maskName = (name) => {
|
||||
if (!name || name.length < 11) return name;
|
||||
return name.substring(0, 3) + "****" + name.substring(7);
|
||||
};
|
||||
|
||||
function toHistory() {
|
||||
router.push(`/historyQuery`);
|
||||
}
|
||||
function toCooperation() {
|
||||
window.location.href = "https://www.tianyuandata.com";
|
||||
}
|
||||
function toApiStore() {
|
||||
window.location.href = "https://www.tianyuanapi.com/";
|
||||
}
|
||||
function toUserAgreement() {
|
||||
router.push(`/userAgreement`);
|
||||
}
|
||||
@@ -266,42 +371,73 @@ function handleCancelAccount() {
|
||||
|
||||
function toService() {
|
||||
window.location.href =
|
||||
"https://work.weixin.qq.com/kfid/kfc8a32720024833f57"; // 跳转到客服页面
|
||||
"https://work.weixin.qq.com/kfid/kfc82d4424e4b19e5f3"; // 跳转到客服页面
|
||||
}
|
||||
|
||||
const toVipConfig = () => {
|
||||
router.push({ name: "agentVipConfig" });
|
||||
const toUpgrade = () => {
|
||||
router.push({ name: "agentUpgrade" });
|
||||
};
|
||||
|
||||
const toVipRenewal = () => {
|
||||
router.push(`/agent/vipApply`);
|
||||
const toUpgradeSubordinate = () => {
|
||||
router.push({ name: "upgradeSubordinate" });
|
||||
};
|
||||
|
||||
function formatExpiryTime(expiryTimeStr) {
|
||||
if (!expiryTimeStr) return "未知";
|
||||
// 假设expiryTimeStr格式是 "YYYY-MM-DD HH:MM:SS"
|
||||
// 只返回日期部分 "YYYY-MM-DD"
|
||||
return expiryTimeStr.split(" ")[0];
|
||||
const toInviteCodeManage = () => {
|
||||
router.push({ name: "invitation" });
|
||||
};
|
||||
|
||||
const toRealNameAuth = () => {
|
||||
dialogStore.openRealNameAuth();
|
||||
};
|
||||
const toAgentReport = () => {
|
||||
router.push({ name: "agentPromotionQueryList" })
|
||||
}
|
||||
const toWithdraw = () => {
|
||||
router.push({ name: "withdraw" });
|
||||
};
|
||||
|
||||
const toWithdrawDetails = () => {
|
||||
router.push({ name: "withdrawDetails" });
|
||||
};
|
||||
|
||||
const goToPromoteDetail = () => {
|
||||
router.push({ name: "promoteDetails" });
|
||||
};
|
||||
|
||||
const goToRebateDetail = () => {
|
||||
router.push({ name: "rewardsDetails" });
|
||||
};
|
||||
|
||||
const getRevenueData = async () => {
|
||||
if (!isAgent.value) return;
|
||||
const { data: revenueResponse, error: revenueError } = await getRevenueInfo();
|
||||
if (revenueResponse.value?.code === 200 && !revenueError.value) {
|
||||
revenueData.value = revenueResponse.value.data;
|
||||
}
|
||||
};
|
||||
|
||||
const getDefaultAvatar = () => {
|
||||
if (!isAgent.value) return headShot;
|
||||
|
||||
switch (level.value) {
|
||||
case "normal":
|
||||
case "":
|
||||
const currentLevel = level.value || 1;
|
||||
switch (currentLevel) {
|
||||
case 1:
|
||||
return "/image/shot_nonal.png";
|
||||
case "VIP":
|
||||
case 2:
|
||||
return "/image/shot_vip.png";
|
||||
case "SVIP":
|
||||
case 3:
|
||||
return "/image/shot_svip.png";
|
||||
default:
|
||||
return headShot;
|
||||
}
|
||||
};
|
||||
|
||||
const showBindPhoneDialog = () => {
|
||||
dialogStore.openBindPhone();
|
||||
const showRegisterAgentDialog = () => {
|
||||
dialogStore.openRegisterAgent();
|
||||
};
|
||||
|
||||
const toRegister = () => {
|
||||
router.push("/register");
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
@@ -326,6 +462,12 @@ onBeforeMount(() => {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (isAgent.value) {
|
||||
getRevenueData();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user