|
|
@@ -1,8 +1,13 @@
|
|
|
<template>
|
|
|
<view class="mine-container">
|
|
|
|
|
|
+ <!-- 顶部用户信�区域 -->
|
|
|
<view class="user-header">
|
|
|
- <StatusBarPlaceholder></StatusBarPlaceholder>
|
|
|
+ <StatusBarPlaceholder></StatusBarPlaceholder>
|
|
|
+
|
|
|
+ <!-- 背景装饰 -->
|
|
|
+ <view class="header-bg-decoration"></view>
|
|
|
+
|
|
|
<view class="header-content">
|
|
|
<view class="user-info">
|
|
|
<view class="avatar-wrapper">
|
|
|
@@ -10,22 +15,24 @@
|
|
|
</view>
|
|
|
<view class="user-details">
|
|
|
<view class="name-row">
|
|
|
- <text class="user-name">Àƽ</text>
|
|
|
- <text class="user-role">123dasfjsal </text>
|
|
|
+ <text class="user-name">赵建平</text>
|
|
|
+ <text class="user-role">销售��</text>
|
|
|
</view>
|
|
|
- <text class="company-name">浙江舒å�šç‰¹ç½‘ç»œç§‘æŠæœ‰é™�å…¬å�¸</text>
|
|
|
+ <text class="company-name">浙江舒�特网络科有�公�</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="qr-btn">
|
|
|
- <uni-icons type="qrcode" size="24" color="#ffffff"></uni-icons>
|
|
|
+ <view class="qr-btn" @click="showCard">
|
|
|
+ <uni-icons type="qrcode" size="28" color="#ffffff"></uni-icons>
|
|
|
<text class="qr-text">我的�片</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 线索数� -->
|
|
|
+ <!-- 线索数��片 -->
|
|
|
<view class="data-card">
|
|
|
- <view class="card-title">线索数�</view>
|
|
|
+ <view class="card-header">
|
|
|
+ <text class="card-title">线索数�</text>
|
|
|
+ </view>
|
|
|
<view class="data-row">
|
|
|
<view class="data-item">
|
|
|
<text class="data-value">1,266</text>
|
|
|
@@ -42,9 +49,12 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 客户数� -->
|
|
|
+ <!-- 客户数��片 -->
|
|
|
<view class="data-card">
|
|
|
- <view class="card-title">客户数�</view>
|
|
|
+ <view class="card-header">
|
|
|
+ <text class="card-title">客户数�</text>
|
|
|
+ <uni-icons type="eye" size="20" color="#999999"></uni-icons>
|
|
|
+ </view>
|
|
|
<view class="data-row">
|
|
|
<view class="data-item">
|
|
|
<text class="data-value">1,088</text>
|
|
|
@@ -61,9 +71,12 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 商机数� -->
|
|
|
+ <!-- 商机数��片 -->
|
|
|
<view class="data-card">
|
|
|
- <view class="card-title">商机数�</view>
|
|
|
+ <view class="card-header">
|
|
|
+ <text class="card-title">商机数�</text>
|
|
|
+ <uni-icons type="eye" size="20" color="#999999"></uni-icons>
|
|
|
+ </view>
|
|
|
<view class="data-row">
|
|
|
<view class="data-item">
|
|
|
<text class="data-value">1,366</text>
|
|
|
@@ -83,22 +96,36 @@
|
|
|
<!-- 功能�� -->
|
|
|
<view class="menu-card">
|
|
|
<view class="menu-item" @click="navigateTo('guide')">
|
|
|
- <uni-icons type="help" size="20" color="#667eea"></uni-icons>
|
|
|
+ <view class="menu-icon-wrapper">
|
|
|
+ <uni-icons type="help" size="22" color="#667eea"></uni-icons>
|
|
|
+ </view>
|
|
|
<text class="menu-text">使用指�</text>
|
|
|
<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
|
|
|
</view>
|
|
|
<view class="menu-divider"></view>
|
|
|
<view class="menu-item" @click="navigateTo('service')">
|
|
|
- <uni-icons type="paperclip" size="20" color="#667eea"></uni-icons>
|
|
|
+ <view class="menu-icon-wrapper">
|
|
|
+ <uni-icons type="paperclip" size="22" color="#667eea"></uni-icons>
|
|
|
+ </view>
|
|
|
<text class="menu-text">�系客�</text>
|
|
|
<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
|
|
|
</view>
|
|
|
<view class="menu-divider"></view>
|
|
|
<view class="menu-item" @click="navigateTo('about')">
|
|
|
- <uni-icons type="gear" size="20" color="#667eea"></uni-icons>
|
|
|
+ <view class="menu-icon-wrapper">
|
|
|
+ <uni-icons type="gear" size="22" color="#667eea"></uni-icons>
|
|
|
+ </view>
|
|
|
<text class="menu-text">关于我们</text>
|
|
|
<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
|
|
|
</view>
|
|
|
+ <view class="menu-divider"></view>
|
|
|
+ <view class="menu-item logout-item" @click="handleLogout">
|
|
|
+ <view class="menu-icon-wrapper">
|
|
|
+ <uni-icons type="closeempty" size="22" color="#ff4d4f"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <text class="menu-text logout-text">退出登录</text>
|
|
|
+ <uni-icons type="right" size="16" color="#cccccc"></uni-icons>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -106,13 +133,60 @@
|
|
|
<script setup>
|
|
|
import { ref ,onMounted} from 'vue'
|
|
|
import StatusBarPlaceholder from "@/components/status-bar-placeholder/index.vue"
|
|
|
+import { logout } from '@/api/login.js'
|
|
|
|
|
|
const navigateTo = (page) => {
|
|
|
uni.showToast({
|
|
|
- title: `功能å¼å�‘ä¸ï¼{page}`,
|
|
|
+ title: ``,
|
|
|
icon: 'none'
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
+// 显示�片
|
|
|
+const showCard = () => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '我的�片',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+// ��出登��const handleLogout = () => {
|
|
|
+ uni.showModal({
|
|
|
+ title: '�示',
|
|
|
+ content:'缺人�退出登录�?',
|
|
|
+ success: async (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ try {
|
|
|
+ // 调用��出登录接�� await logout({})
|
|
|
+
|
|
|
+ // 清除本地å˜å‚¨
|
|
|
+ uni.removeStorageSync('token')
|
|
|
+ uni.removeStorageSync('userInfo')
|
|
|
+ uni.removeStorageSync('code')
|
|
|
+
|
|
|
+ // �示�功
|
|
|
+ uni.showToast({
|
|
|
+ title: '�作�功',
|
|
|
+ icon: 'success'
|
|
|
+ })
|
|
|
+
|
|
|
+ // 延迟跳转到登录页
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ }, 1500)
|
|
|
+ } catch (error) {
|
|
|
+ console.error('退出登录失败', error)
|
|
|
+ uni.showToast({
|
|
|
+ title: '退出登录失败,请�试',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -121,32 +195,50 @@ const navigateTo = (page) => {
|
|
|
background: #f5f6f8;
|
|
|
}
|
|
|
|
|
|
-// 顶部用户信��片
|
|
|
+// 顶部用户信�区域
|
|
|
.user-header {
|
|
|
- background: linear-gradient(180deg, #5B86F5 0%, #36D1DC 100%);
|
|
|
- padding: 40rpx;
|
|
|
+ background: linear-gradient(135deg, #4A90E2 0%, #6FB3F2 50%, #87CEEB 100%);
|
|
|
+ padding: 0 40rpx 160rpx;
|
|
|
padding-top: calc(var(--status-bar-height) + 20rpx);
|
|
|
position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ // 背景光晕装饰
|
|
|
+ .header-bg-decoration {
|
|
|
+ position: absolute;
|
|
|
+ top: -100rpx;
|
|
|
+ right: -100rpx;
|
|
|
+ width: 400rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
|
|
|
.header-content {
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
.user-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 32rpx;
|
|
|
+ flex: 1;
|
|
|
|
|
|
.avatar-wrapper {
|
|
|
flex-shrink: 0;
|
|
|
margin-right: 24rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
.avatar {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
border-radius: 50%;
|
|
|
- border: 4rpx solid rgba(255, 255, 255, 0.3);
|
|
|
+ border: 4rpx solid rgba(255, 255, 255, 0.4);
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
|
+ background: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -162,39 +254,46 @@ const navigateTo = (page) => {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 600;
|
|
|
color: #ffffff;
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.user-role {
|
|
|
font-size: 22rpx;
|
|
|
- color: rgba(255, 255, 255, 0.9);
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- padding: 4rpx 12rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: rgba(255, 255, 255, 0.25);
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
border-radius: 20rpx;
|
|
|
- margin-left: 12rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.company-name {
|
|
|
font-size: 24rpx;
|
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
|
+ color: rgba(255, 255, 255, 0.85);
|
|
|
display: block;
|
|
|
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.qr-btn {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
- padding: 12rpx 24rpx;
|
|
|
+ padding: 16rpx 20rpx;
|
|
|
border-radius: 24rpx;
|
|
|
- align-self: flex-start;
|
|
|
+ backdrop-filter: blur(10rpx);
|
|
|
+ border: 1rpx solid rgba(255, 255, 255, 0.3);
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.qr-text {
|
|
|
- font-size: 22rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
color: #ffffff;
|
|
|
- margin-left: 8rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -202,15 +301,22 @@ const navigateTo = (page) => {
|
|
|
// 数��片
|
|
|
.data-card {
|
|
|
background: #ffffff;
|
|
|
- margin: 20rpx;
|
|
|
+ margin: 20rpx 40rpx;
|
|
|
padding: 32rpx;
|
|
|
border-radius: 24rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
|
|
|
+ .card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.card-title {
|
|
|
font-size: 28rpx;
|
|
|
- color: #666666;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
}
|
|
|
|
|
|
.data-row {
|
|
|
@@ -222,12 +328,14 @@ const navigateTo = (page) => {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
flex: 1;
|
|
|
+ position: relative;
|
|
|
|
|
|
.data-value {
|
|
|
font-size: 40rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333333;
|
|
|
margin-bottom: 12rpx;
|
|
|
+ font-family: DIN, 'DIN Alternate', sans-serif;
|
|
|
}
|
|
|
|
|
|
.data-label {
|
|
|
@@ -239,8 +347,15 @@ const navigateTo = (page) => {
|
|
|
color: #ff6b35;
|
|
|
}
|
|
|
|
|
|
- &:not(:last-child) {
|
|
|
- border-right: 1rpx solid #f0f0f0;
|
|
|
+ &:not(:last-child)::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 1rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -249,7 +364,7 @@ const navigateTo = (page) => {
|
|
|
// 功能��
|
|
|
.menu-card {
|
|
|
background: #ffffff;
|
|
|
- margin: 20rpx;
|
|
|
+ margin: 20rpx 40rpx;
|
|
|
padding: 0 32rpx;
|
|
|
border-radius: 24rpx;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
|
@@ -259,11 +374,21 @@ const navigateTo = (page) => {
|
|
|
align-items: center;
|
|
|
padding: 32rpx 0;
|
|
|
|
|
|
+ .menu-icon-wrapper {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: rgba(102, 126, 234, 0.08);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
.menu-text {
|
|
|
flex: 1;
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
- margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -271,5 +396,19 @@ const navigateTo = (page) => {
|
|
|
height: 1rpx;
|
|
|
background: #f0f0f0;
|
|
|
}
|
|
|
+
|
|
|
+ // ï¿½ï¿½å‡ºç™»å½•æ ·ï¿½ï¿½ .logout-item {
|
|
|
+ .menu-icon-wrapper {
|
|
|
+ background: rgba(255, 77, 79, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-text {
|
|
|
+ color: #ff4d4f;
|
|
|
+
|
|
|
+ &.logout-text {
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|