<template>
<view class="container">
<!-- 顶部用户信息区域 -->
<view class="user-info-section">
<view class="avatar-container">
<image
src="/static/workbanch/banner/workbench/4.jpg"
class="avatar-image"
mode="aspectFill"
/>
<view class="avatar-frame"></view>
</view>
<!-- 用户信息 -->
<view class="user-details">
<text class="welcome-text">您好，</text>
<text class="username">{{ userName || '加载中...' }}</text>
<view class="user-meta">
<text class="user-role">{{ userRole }}</text>
<text class="user-dept">{{ userDept }}</text>
<text class="user-phone" v-if="userPhone">电话：{{ userPhone }}</text>
</view>
</view>
</view>
<!-- 功能板块区域 -->
<view class="function-section">
<!-- 重置密码按钮 -->
<view
class="function-item"
@click="handleResetPassword"
@touchstart="handleTouchStart('reset')"
@touchend="handleTouchEnd('reset')"
>
<view class="item-left">
<image
src="/static/workbanch/icons/reset-password.png"
class="item-icon"
/>
<text class="item-text">重置密码</text>
</view>
<view class="arrow-icon">›</view>
</view>
<!-- 分隔线 -->
<view class="divider"></view>
<!-- 退出登录按钮 -->
<view
class="function-item logout-item"
@click="handleLogout"
@touchstart="handleTouchStart('logout')"
@touchend="handleTouchEnd('logout')"
>
<view class="item-left">
<image
src="/static/workbanch/icons/logout.png"
class="item-icon"
/>
<text class="item-text">退出登录</text>
</view>
<view class="arrow-icon">›</view>
</view>
</view> <!-- 这里添加了function-section的结束标签 -->
<!-- 重置密码弹窗 (优化后的布局) -->
<view v-if="showResetModal" class="modal-overlay" @click.self="closeResetModal">
<view class="modal-content">
<view class="modal-header">
<text class="modal-title">重置密码</text>
<text class="modal-close" @click="closeResetModal">×</text>
</view>
<view class="input-group">
<view class="input-item">
<image src="/static/workbanch/icons/lock.png" class="input-icon" />
<input
v-model="oldPassword"
type="password"
placeholder="请输入旧密码"
class="password-input"
placeholder-style="color: #aaa;"
/>
</view>
<view class="input-item">
<image src="/static/workbanch/icons/lock.png" class="input-icon" />
<input
v-model="newPassword"
type="password"
placeholder="请输入新密码（6-20位）"
class="password-input"
placeholder-style="color: #aaa;"
/>
</view>
<view class="input-item">
<image src="/static/workbanch/icons/lock.png" class="input-icon" />
<input
v-model="confirmPassword"
type="password"
placeholder="请确认新密码"
class="password-input"
placeholder-style="color: #aaa;"
/>
</view>
</view>
<view class="modal-buttons">
<button class="cancel-btn" @click="closeResetModal">取消</button>
<button class="confirm-btn" @click="submitResetPassword">确定</button>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow, onTabItemTap } from '@dcloudio/uni-app';
// 用户信息相关
const userName = ref('');
const userRole = ref('');
const userDept = ref('');
const userPhone = ref('');
// 重置密码
const showResetModal = ref(false);
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
// 触摸状态
const touchState = ref({
reset: false,
logout: false
});
// 页面显示时加载数据
onShow(() => {
// console.log('onShow 被触发');
loadUserInfo(); // 加载用户信息
});
// tabbar 页面被点击时触发
onTabItemTap(() => {
// console.log('tabbar 页面被点击');
loadUserInfo(); // 强制刷新数据
});
const forceRefresh = true;
// 加载用户信息
const loadUserInfo = async () => {
try {
const userInfo = uni.getStorageSync('userInfo');
// console.log('本地缓存 userInfo:', userInfo);
if (!forceRefresh && userInfo && userInfo.userName) {
// 使用缓存
userName.value = userInfo.nickName || userInfo.userName || '未知用户';
userRole.value = userInfo.roles?.[0]?.roleName || '普通用户';
userDept.value = userInfo.dept?.deptName || '未分配部门';
userPhone.value = userInfo.phonenumber || '暂无电话';
} else {
// console.log('开始请求用户信息...');
const res = await uni.request({
url: 'http://172.26.26.43/dev-api/system/user/profile',
method: 'GET',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token')
}
});
// console.log('接口返回结果:', res);
if (res.statusCode === 200 && res.data.code === 200) {
const userData = res.data.data;
uni.setStorageSync('userInfo', userData);
userName.value = userData.nickName || userData.userName || '未知用户';
userRole.value = userData.roles?.[0]?.roleName || '普通用户';
userDept.value = userData.dept?.deptName || '未分配部门';
userPhone.value = userData.phonenumber || '暂无电话';
} else {
uni.showToast({ title: '获取用户信息失败', icon: 'none' });
uni.redirectTo({ url: '/pages/login/login' });
}
}
} catch (error) {
console.error('加载用户信息失败:', error);
uni.showToast({ title: '加载用户信息失败', icon: 'none' });
uni.redirectTo({ url: '/pages/login/login' });
}
};
// 处理触摸开始
const handleTouchStart = (type) => {
touchState.value[type] = true;
};
// 处理触摸结束
const handleTouchEnd = (type) => {
touchState.value[type] = false;
};
// 显示弹窗
const handleResetPassword = () => {
uni.vibrateShort(); // 震动反馈
showResetModal.value = true;
};
// 关闭弹窗
const closeResetModal = () => {
showResetModal.value = false;
};
// 提交重置密码
const submitResetPassword = async () => {
const { oldPassword: oldPass, newPassword: newPass, confirmPassword: confirmPass } = {
oldPassword: oldPassword.value,
newPassword: newPassword.value,
confirmPassword: confirmPassword.value
};
if (!oldPass || !newPass || !confirmPass) {
uni.showToast({ title: '所有密码都必须填写', icon: 'none' });
return;
}
if (newPass !== confirmPass) {
uni.showToast({ title: '新密码与确认密码不一致', icon: 'none' });
return;
}
uni.showLoading({ title: '提交中...' });
try {
const res = await uni.request({
url: 'http://172.26.26.43/dev-api/system/user/profile/updatePwd',
method: 'POST',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token'),
'Content-Type': 'application/json'
},
data: {
oldPassword: oldPass,
newPassword: newPass
}
});
uni.hideLoading();
if (res.statusCode === 200 && res.data.code === 200) {
uni.showToast({ title: '密码修改成功', icon: 'success' });
uni.removeStorageSync('token');
uni.removeStorageSync('userInfo');
setTimeout(() => {
uni.reLaunch({ url: '/pages/login/login' });
}, 1500);
} else {
uni.showToast({ title: '密码修改失败', icon: 'none' });
}
} catch (error) {
uni.hideLoading();
uni.showToast({ title: '网络请求失败', icon: 'none' });
console.error('请求失败:', error);
}
closeResetModal();
};
// 处理退出登录
const handleLogout = () => {
uni.vibrateShort(); // 添加震动反馈
uni.showModal({
title: '确认退出',
content: '您确定要退出当前账号吗？',
confirmText: '退出登录',
confirmColor: '#e74c3c',
success: (res) => {
if (res.confirm) {
// 清除用户相关数据
uni.removeStorageSync('token');
uni.removeStorageSync('userInfo');
uni.removeStorageSync('savedUsername');
// 显示退出提示
uni.showToast({
title: '已退出登录',
icon: 'success',
duration: 1500
});
// 跳转到登录页
setTimeout(() => {
uni.reLaunch({
url: '/pages/login/login'
});
}, 1500);
}
}
});
};
</script>
<style lang="scss" scoped>
.container {
padding: 20rpx;
background-color: #f5f7fa;
min-height: 100vh;
}
/* 用户信息区域样式 */
.user-info-section {
display: flex;
align-items: center;
padding: 30rpx;
margin: 20rpx 0;
background: linear-gradient(135deg, #3498db, #8e44ad);
color: white;
position: relative;
overflow: hidden;
border-radius: 24rpx;
&::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
pointer-events: none;
}
}
.user-phone {
display: block;
font-size: 24rpx;
// margin-top: 10rpx;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.2);
padding: 4rpx 12rpx;
border-radius: 20rpx;
backdrop-filter: blur(10px);
}
.avatar-container {
position: relative;
width: 120rpx;
height: 120rpx;
margin-right: 30rpx;
}
.avatar-image {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
}
.avatar-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 4rpx solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
box-sizing: border-box;
}
.user-details {
flex: 1;
}
.welcome-text {
font-size: 28rpx;
opacity: 0.9;
}
.username {
display: block;
font-size: 40rpx;
font-weight: bold;
margin: 8rpx 0;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}
.user-meta {
display: flex;
flex-wrap: wrap;
gap: 15rpx;
margin-top: 15rpx;
}
.user-role, .user-dept {
font-size: 24rpx;
background: rgba(255, 255, 255, 0.2);
padding: 4rpx 12rpx;
border-radius: 20rpx;
backdrop-filter: blur(10px);
}
/* 功能板块区域 */
.function-section {
background-color: #fff;
border-radius: 24rpx;
margin: 30rpx 40rpx; /* 左右边距增加 */
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.function-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 35rpx; /* 增加左右内边距 */
position: relative;
transition: all 0.2s ease;
/* 点击效果 - 缩放 */
&:active {
transform: scale(0.98);
background-color: #f8f8f8;
}
/* 触摸效果 - 高亮 */
&.touch-active {
background-color: #f0f9ff;
transform: scale(0.98);
.item-text {
font-weight: bold;
}
}
}
.logout-item {
.item-text {
color: #e74c3c;
}
&.touch-active {
background-color: #fff0f0;
}
}
.item-left {
display: flex;
align-items: center;
}
.item-icon {
width: 44rpx;
height: 44rpx;
margin-right: 20rpx;
transition: transform 0.2s ease;
.touch-active & {
transform: scale(1.1);
}
}
.item-text {
font-size: 32rpx;
color: #333;
transition: all 0.2s ease;
.touch-active & {
transform: translateX(5px);
}
}
.arrow-icon {
font-size: 40rpx;
color: #999;
transform: scale(1.5, 1.5);
transition: all 0.2s ease;
.touch-active & {
transform: scale(1.5, 1.5) translateX(-5px);
}
}
.divider {
height: 1rpx;
background-color: #f0f0f0;
margin: 0 35rpx; /* 与内边距一致 */
}
/* 动画效果 */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 0.3s ease;
}
/* 重置密码弹窗*/
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background-color: #fff;
width: 80%;
max-width: 600rpx;
border-radius: 24rpx;
overflow: hidden;
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { transform: translateY(100rpx); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
background-color: #f8f8f8;
border-bottom: 1rpx solid #eee;
}
.modal-title {
font-size: 34rpx;
font-weight: bold;
color: #333;
}
.modal-close {
font-size: 40rpx;
color: #999;
padding: 10rpx 20rpx;
}
.input-group {
padding: 30rpx;
}
.input-item {
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding-bottom: 15rpx;
border-bottom: 1rpx solid #eee;
&:last-child {
margin-bottom: 0;
}
}
.input-icon {
width: 36rpx;
height: 36rpx;
margin-right: 20rpx;
opacity: 0.7;
}
.password-input {
flex: 1;
height: 60rpx;
font-size: 30rpx;
color: #333;
}
.modal-buttons {
display: flex;
border-top: 1rpx solid #eee;
}
.cancel-btn, .confirm-btn {
flex: 1;
height: 90rpx;
line-height: 90rpx;
font-size: 32rpx;
border-radius: 0;
background: none;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 1rpx;
background-color: #eee;
}
}
.cancel-btn {
color: #666;
&:active {
background-color: #f8f8f8;
}
}
.confirm-btn {
color: #3498db;
font-weight: bold;
&:active {
background-color: #f0f9ff;
}
}
.confirm-btn::after {
left: 0;
}
.cancel-btn::after {
display: none;
}
</style>
我想要重置密码弹窗的输入框最右边有一个小眼睛，点击可以显示输入的具体内容
最新发布
本文解析了Font Awesome图标在不同加载状态下的HTML类变化，包括初始搜索图标、图标替换完成及加载过程中的状态切换。介绍了如何利用这些状态进行自定义样式设计，激发读者创意。
扫一扫
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
