fff
This commit is contained in:
246
src/pages/me.vue
Normal file
246
src/pages/me.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user