247 lines
6.5 KiB
Vue
247 lines
6.5 KiB
Vue
<template>
|
||
<view class="safe-area-top box-border min-h-screen">
|
||
<view class="flex flex-col p-4 space-y-6">
|
||
<!-- 用户信息卡片 -->
|
||
<view
|
||
class="profile-section group relative flex items-center gap-4 rounded-xl bg-white p-6 shadow-lg transition-all hover:shadow-xl"
|
||
@click="!isLoggedIn ? redirectToLogin() : null">
|
||
<view class="relative">
|
||
<!-- 头像容器添加overflow-hidden解决边框问题 -->
|
||
<view class="flex items-center justify-center overflow-hidden rounded-full p-0.5"
|
||
:class="levelGradient.border">
|
||
<image :src="userAvatar || headShot" alt="User Avatar" class="h-24 w-24 rounded-full border-4 border-white">
|
||
</image>
|
||
</view>
|
||
|
||
<!-- 代理标识 -->
|
||
<view v-if="isAgent" class="absolute -bottom-2 -right-2">
|
||
<view 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] }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="space-y-1">
|
||
<view class="text-2xl font-bold text-gray-800">
|
||
{{ isLoggedIn ? maskName(userName) : '点击登录' }}
|
||
</view>
|
||
<view v-if="isAgent" class="text-sm font-medium" :class="levelGradient.text">
|
||
🎖️ {{ levelText[level] }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<VipBanner v-if="isAgent && level === 'normal'" />
|
||
<!-- 功能菜单 -->
|
||
<view class="features-section space-y-3">
|
||
<template v-if="isAgent && ['VIP', 'SVIP'].includes(level)">
|
||
<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">
|
||
⚙️ 代理报告配置
|
||
</button>
|
||
</template>
|
||
|
||
<button class="feature-item hover:bg-blue-50" @click="toHistory">
|
||
📃 我的报告
|
||
</button>
|
||
<button class="feature-item hover:bg-blue-50" @click="toUserAgreement">
|
||
📜 用户协议
|
||
</button>
|
||
<button class="feature-item hover:bg-blue-50" @click="toService">
|
||
💬 联系客服
|
||
</button>
|
||
<button class="feature-item hover:bg-red-50 text-red-600" @click="handleLogout">
|
||
⏏️ 退出登录
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onBeforeMount } from 'vue'
|
||
import headShot from "@/static/image/head_shot.webp"
|
||
|
||
// 用户数据
|
||
const userName = ref('')
|
||
const userAvatar = ref('')
|
||
const isLoggedIn = ref(false)
|
||
|
||
// 代理数据
|
||
const isAgent = ref(false)
|
||
const level = ref('normal')
|
||
|
||
|
||
// 检查平台环境
|
||
onBeforeMount(() => {
|
||
// 从缓存获取用户信息
|
||
const token = uni.getStorageSync('token')
|
||
if (token) {
|
||
isLoggedIn.value = true
|
||
// 从缓存获取用户信息
|
||
const userInfo = uni.getStorageSync('userInfo')
|
||
console.log("userInfo", userInfo)
|
||
if (userInfo) {
|
||
userName.value = userInfo.nickName || '用户'
|
||
userAvatar.value = userInfo.avatar || ''
|
||
}
|
||
|
||
// 从缓存获取代理信息
|
||
const agentInfo = uni.getStorageSync('agentInfo')
|
||
if (agentInfo?.isAgent) {
|
||
isAgent.value = agentInfo.isAgent
|
||
level.value = agentInfo.level || 'normal'
|
||
}
|
||
}
|
||
})
|
||
|
||
const levelNames = {
|
||
normal: '普通代理',
|
||
VIP: 'VIP代理',
|
||
SVIP: 'SVIP代理'
|
||
}
|
||
|
||
const levelText = {
|
||
normal: '基础代理特权',
|
||
VIP: '高级代理特权',
|
||
SVIP: '尊享代理特权'
|
||
}
|
||
|
||
const levelGradient = computed(() => ({
|
||
border: {
|
||
'normal': 'bg-green-300',
|
||
'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-green-500',
|
||
'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-green-600',
|
||
'VIP': 'text-amber-600',
|
||
'SVIP': 'text-purple-600'
|
||
}[level.value]
|
||
}))
|
||
|
||
function maskName(name) {
|
||
if (!name || name.length < 11) return name
|
||
return name.substring(0, 3) + "****" + name.substring(7)
|
||
}
|
||
|
||
function toHistory() {
|
||
uni.navigateTo({
|
||
url: '/pages/queryHistory'
|
||
})
|
||
}
|
||
|
||
function toUserAgreement() {
|
||
uni.navigateTo({
|
||
url: '/pages/agreement?type=user'
|
||
})
|
||
}
|
||
|
||
function redirectToLogin() {
|
||
uni.navigateTo({
|
||
url: '/pages/login'
|
||
})
|
||
}
|
||
|
||
function handleLogout() {
|
||
uni.removeStorageSync('token')
|
||
uni.removeStorageSync('refreshAfter')
|
||
uni.removeStorageSync('accessExpire')
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('agentInfo')
|
||
|
||
// 重置状态
|
||
isLoggedIn.value = false
|
||
userName.value = ''
|
||
userAvatar.value = ''
|
||
isAgent.value = false
|
||
level.value = 'normal'
|
||
|
||
uni.reLaunch({
|
||
url: '/pages/index'
|
||
})
|
||
}
|
||
|
||
function toService() {
|
||
// #ifdef APP-PLUS
|
||
plus.runtime.openURL('https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9')
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
window.location.href = 'https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9'
|
||
// #endif
|
||
|
||
// #ifdef MP
|
||
uni.setClipboardData({
|
||
data: 'https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9',
|
||
success: function () {
|
||
uni.showToast({
|
||
title: '客服链接已复制，请在浏览器中打开',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
// #endif
|
||
}
|
||
|
||
function toVipConfig() {
|
||
uni.navigateTo({
|
||
url: '/pages/agentVipConfig'
|
||
})
|
||
}
|
||
</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>view:first-child {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feature-item {
|
||
transition:
|
||
transform 0.2s ease,
|
||
background 0.3s ease,
|
||
box-shadow 0.3s ease;
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
margin-right: 0.75rem;
|
||
border-radius: 0.75rem;
|
||
background-color: #ffffff;
|
||
padding: 1rem 1.5rem;
|
||
text-align: left;
|
||
color: #4b5563;
|
||
transition-property: all;
|
||
transition-duration: 300ms;
|
||
}
|
||
|
||
.feature-item:active {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
.border-gradient-to-r {
|
||
border-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)) 1;
|
||
}
|
||
|
||
.shadow-glow {
|
||
box-shadow: 0 0 8px rgba(163, 51, 200, 0.2);
|
||
}
|
||
</style>
|
||
|
||
<route lang="json">{
|
||
"layout": "home"
|
||
}</route>
|