480 lines
14 KiB
Vue
480 lines
14 KiB
Vue
<template>
|
||
<view class="mine-container" :style="{ height: `${windowHeight}px` }">
|
||
<!--顶部个人信息栏-->
|
||
<view class="header-section">
|
||
<view class="header-content">
|
||
<view class="user-section">
|
||
<view class="avatar-wrapper" @click="handleToAvatar">
|
||
<view v-if="!avatar" class="avatar-placeholder">
|
||
<uni-icons type="person-filled" size="40" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<image v-if="avatar" :src="avatar" class="user-avatar" mode="aspectFill"></image>
|
||
<view class="avatar-badge"></view>
|
||
</view>
|
||
<view class="user-details">
|
||
<view v-if="!name" @click="handleToLogin" class="login-prompt">
|
||
<text class="login-text">点击登录</text>
|
||
<uni-icons type="right" size="16" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<view v-if="name" class="user-name-section">
|
||
<text class="user-name">{{ name }}</text>
|
||
<view class="user-tag">会员</view>
|
||
</view>
|
||
<view v-if="name" class="user-id">ID: {{ userId }}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="handleToInfo" class="settings-btn">
|
||
<uni-icons type="gear-filled" size="24" color="#ffffff"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content-section">
|
||
<view class="quick-actions">
|
||
<view class="action-card" @click="handleJiaoLiuQun">
|
||
<view class="action-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||
<uni-icons type="chat-filled" size="24" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="action-text">官方公众号</text>
|
||
</view>
|
||
<view class="action-card" @click="handleService">
|
||
<view class="action-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
||
<uni-icons type="email-filled" size="24" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="action-text">在线客服</text>
|
||
</view>
|
||
<view class="action-card" @click="handleBuilding">
|
||
<view class="action-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
|
||
<uni-icons type="chatbubble-filled" size="24" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="action-text">反馈社区</text>
|
||
</view>
|
||
<view class="action-card" @click="handleUs">
|
||
<view class="action-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
||
<uni-icons type="heart-filled" size="24" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="action-text">点赞我们</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-section">
|
||
<view class="section-title">账户管理</view>
|
||
<view class="menu-card">
|
||
<view class="menu-item" @click="handleToEditInfo">
|
||
<view class="item-left">
|
||
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||
<uni-icons type="person" size="20" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="menu-text">编辑资料</text>
|
||
</view>
|
||
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
|
||
</view>
|
||
<view class="menu-divider"></view>
|
||
<view class="menu-item" @click="handleToSetting">
|
||
<view class="item-left">
|
||
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
||
<uni-icons type="gear" size="20" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="menu-text">应用设置</text>
|
||
</view>
|
||
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-section">
|
||
<view class="section-title">帮助与支持</view>
|
||
<view class="menu-card">
|
||
<view class="menu-item" @click="handleHelp">
|
||
<view class="item-left">
|
||
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
||
<uni-icons type="help" size="20" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="menu-text">常见问题</text>
|
||
</view>
|
||
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
|
||
</view>
|
||
<view class="menu-divider"></view>
|
||
<view class="menu-item" @click="handleAbout">
|
||
<view class="item-left">
|
||
<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
|
||
<uni-icons type="info" size="20" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="menu-text">关于我们</text>
|
||
</view>
|
||
<uni-icons type="right" size="16" color="#c0c4cc"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- <view>
|
||
<uni-popup ref="popup" type="dialog">
|
||
<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
|
||
title="通知" content="确定注销并退出系统吗"
|
||
@confirm="dialogConfirm"
|
||
@close="dialogClose">
|
||
</uni-popup-dialog>
|
||
</uni-popup>
|
||
</view> -->
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
import config from '@/config.js'
|
||
import useUserStore from '@/store/modules/user'
|
||
const userStore = useUserStore()
|
||
const name = userStore.name;
|
||
const userId = computed(() => userStore.userId || '');
|
||
const version = config.appInfo.version;
|
||
const baseUrl = config.baseUrl;
|
||
|
||
const avatar = computed(() => {
|
||
if (!userStore.avatar) return '';
|
||
// 如果头像路径已经是完整URL，直接返回
|
||
if (userStore.avatar.startsWith('http')) return userStore.avatar;
|
||
// 否则拼接baseUrl
|
||
return baseUrl + userStore.avatar;
|
||
});
|
||
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
|
||
const popup = ref(null);
|
||
function handleToInfo() {
|
||
uni.navigateTo({
|
||
url: '/pages_mine/pages/info/index'
|
||
});
|
||
};
|
||
function handleToEditInfo() {
|
||
uni.navigateTo({
|
||
url: '/pages_mine/pages/info/edit'
|
||
});
|
||
};
|
||
function handleToSetting() {
|
||
uni.navigateTo({
|
||
url: '/pages_mine/pages/setting/index'
|
||
});
|
||
};
|
||
function handleToLogin() {
|
||
uni.reLaunch({
|
||
url: '/pages/login'
|
||
});
|
||
};
|
||
function handleToAvatar() {
|
||
uni.navigateTo({
|
||
url: '/pages_mine/pages/avatar/index'
|
||
});
|
||
};
|
||
function handleLogout() {
|
||
popup.value.open();
|
||
};
|
||
function dialogConfirm() {
|
||
//console.log('----------------点击确认------------')
|
||
|
||
userStore.logOut().then(() => {
|
||
uni.reLaunch({
|
||
url: '/pages/login'
|
||
});
|
||
})
|
||
};
|
||
function dialogClose() {
|
||
//console.log('点击关闭')
|
||
};
|
||
function handleHelp() {
|
||
uni.navigateTo({
|
||
url: '/pages_mine/pages/help/index'
|
||
});
|
||
};
|
||
function handleAbout() {
|
||
uni.navigateTo({
|
||
url: '/pages_mine/pages/about/index'
|
||
});
|
||
};
|
||
function handleJiaoLiuQun() {
|
||
uni.showToast({
|
||
title: 'intc126',
|
||
mask: false,
|
||
icon: "none",
|
||
duration: 5000
|
||
});
|
||
};
|
||
function handleBuilding() {
|
||
uni.showToast({
|
||
title: '谢谢反馈~',
|
||
mask: false,
|
||
icon: "none",
|
||
duration: 1000
|
||
});
|
||
}
|
||
function handleService() {
|
||
uni.showToast({
|
||
title: '请电联或加客服微信：17753252359',
|
||
mask: false,
|
||
icon: "none",
|
||
duration: 5000
|
||
});
|
||
}
|
||
function handleUs() {
|
||
uni.showToast({
|
||
title: '谢谢点赞！',
|
||
mask: false,
|
||
icon: "none",
|
||
duration: 1000
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.mine-container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-color: #f5f7fa;
|
||
|
||
.header-section {
|
||
padding: 60rpx 32rpx 120rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -20%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||
animation: pulse 15s infinite;
|
||
}
|
||
|
||
.header-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.user-section {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
.avatar-wrapper {
|
||
position: relative;
|
||
margin-right: 24rpx;
|
||
|
||
.avatar-placeholder {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
|
||
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.avatar-badge {
|
||
position: absolute;
|
||
bottom: 4rpx;
|
||
right: 4rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
|
||
border-radius: 12rpx;
|
||
border: 3rpx solid #ffffff;
|
||
}
|
||
}
|
||
|
||
.user-details {
|
||
flex: 1;
|
||
|
||
.login-prompt {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16rpx 24rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 40rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
|
||
.login-text {
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.user-name-section {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
|
||
.user-name {
|
||
color: #ffffff;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.user-tag {
|
||
padding: 4rpx 16rpx;
|
||
background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
|
||
border-radius: 20rpx;
|
||
color: #ffffff;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
.user-id {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.settings-btn {
|
||
padding: 16rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-section {
|
||
margin-top: -80rpx;
|
||
padding: 0 32rpx 32rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.quick-actions {
|
||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 24rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-bottom: 32rpx;
|
||
|
||
.action-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.action-icon {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16rpx;
|
||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.12);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.action-text {
|
||
color: #2c3e50;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-section {
|
||
margin-bottom: 32rpx;
|
||
|
||
.section-title {
|
||
color: #7f8c8d;
|
||
font-size: 28rpx;
|
||
padding: 0 0 20rpx 0;
|
||
margin-left: 16rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: '';
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 3rpx;
|
||
margin-right: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.menu-card {
|
||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 24rpx;
|
||
transition: background-color 0.3s ease;
|
||
|
||
&:active {
|
||
background-color: rgba(0, 0, 0, 0.02);
|
||
}
|
||
|
||
.item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.menu-icon-wrapper {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.menu-text {
|
||
color: #2c3e50;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-divider {
|
||
height: 1rpx;
|
||
background-color: #e8edf3;
|
||
margin: 0 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
transform: scale(1) rotate(0deg);
|
||
}
|
||
50% {
|
||
transform: scale(1.1) rotate(180deg);
|
||
}
|
||
}
|
||
</style>
|