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>
|