512 lines
14 KiB
Vue
512 lines
14 KiB
Vue
<template>
|
||
<view class="mine-container">
|
||
<!--顶部个人信息栏-->
|
||
<view class="header-section">
|
||
<view class="header-content">
|
||
<view class="user-section">
|
||
<view class="avatar-wrapper">
|
||
<view class="avatar-gradient">
|
||
<view class="avatar-inner">
|
||
<uni-icons type="person-filled" size="48" color="#ffffff"></uni-icons>
|
||
</view>
|
||
</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="list" 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="chatboxes" 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="contact" 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="compose" 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="star" size="24" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<text class="action-text">给个好评</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="menu-section">
|
||
<view class="section-title">
|
||
<view class="title-bar"></view>
|
||
<text class="title-text">账户管理</text>
|
||
</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 class="title-bar"></view>
|
||
<text class="title-text">帮助与支持</text>
|
||
</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 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 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 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
background-color: #f5f7fa;
|
||
min-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.mine-container {
|
||
width: 100%;
|
||
background-color: #f5f7fa;
|
||
|
||
.header-section {
|
||
padding: 160rpx 32rpx 80rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
|
||
&::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: center;
|
||
|
||
.user-section {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
|
||
.avatar-wrapper {
|
||
position: relative;
|
||
margin-right: 24rpx;
|
||
|
||
.avatar-gradient {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: conic-gradient(
|
||
from 0deg,
|
||
transparent 0deg,
|
||
rgba(255, 255, 255, 0.3) 90deg,
|
||
transparent 180deg
|
||
);
|
||
animation: rotate 3s linear infinite;
|
||
}
|
||
|
||
.avatar-inner {
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
border-radius: 56rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: -40rpx;
|
||
padding: 60rpx 32rpx 32rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
|
||
.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;
|
||
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 3rpx;
|
||
margin-right: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.title-text {
|
||
color: #7f8c8d;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.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);
|
||
}
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% {
|
||
transform: translate(-50%, -50%) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes rotate {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|