修改小程序
This commit is contained in:
@@ -1,88 +1,584 @@
|
||||
// pages/profile/profile.js
|
||||
const auth = require('../../utils/auth.js')
|
||||
const app = getApp();
|
||||
const apiService = require('../../utils/api.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
userInfo: {},
|
||||
menuItems: [
|
||||
statusBarHeight: 0,
|
||||
loading: true,
|
||||
|
||||
// 用户信息
|
||||
userInfo: {
|
||||
id: '',
|
||||
username: '',
|
||||
name: '',
|
||||
avatar: '/images/avatar.png',
|
||||
phone: '',
|
||||
email: '',
|
||||
department: '',
|
||||
position: '',
|
||||
lastLoginTime: ''
|
||||
},
|
||||
|
||||
// 统计数据
|
||||
statistics: {
|
||||
totalFarmers: 0,
|
||||
totalChecks: 0,
|
||||
totalAlerts: 0,
|
||||
totalTasks: 0
|
||||
},
|
||||
|
||||
// 快捷操作
|
||||
quickActions: [
|
||||
{
|
||||
key: 'settings',
|
||||
title: '设置',
|
||||
icon: '⚙️',
|
||||
path: ''
|
||||
id: 'farmer_manage',
|
||||
title: '养殖户管理',
|
||||
icon: 'farmer',
|
||||
color: '#1890ff',
|
||||
path: '/pages/farmer/farmer'
|
||||
},
|
||||
{
|
||||
key: 'about',
|
||||
title: '关于',
|
||||
icon: 'ℹ️',
|
||||
path: ''
|
||||
id: 'data_stats',
|
||||
title: '数据统计',
|
||||
icon: 'chart',
|
||||
color: '#52c41a',
|
||||
path: '/pages/statistics/statistics'
|
||||
},
|
||||
{
|
||||
key: 'help',
|
||||
title: '帮助',
|
||||
icon: '❓',
|
||||
path: ''
|
||||
id: 'notification',
|
||||
title: '消息通知',
|
||||
icon: 'notification',
|
||||
color: '#fa8c16',
|
||||
path: '/pages/notification/notification'
|
||||
},
|
||||
{
|
||||
key: 'feedback',
|
||||
title: '反馈',
|
||||
icon: '💬',
|
||||
path: ''
|
||||
id: 'settings',
|
||||
title: '系统设置',
|
||||
icon: 'settings',
|
||||
color: '#722ed1',
|
||||
path: '/pages/settings/settings'
|
||||
}
|
||||
],
|
||||
|
||||
// 功能菜单
|
||||
menuList: [
|
||||
{
|
||||
id: 'profile_edit',
|
||||
title: '个人资料',
|
||||
icon: 'user',
|
||||
arrow: true,
|
||||
path: '/pages/profile/edit/edit'
|
||||
},
|
||||
{
|
||||
id: 'password_change',
|
||||
title: '修改密码',
|
||||
icon: 'lock',
|
||||
arrow: true,
|
||||
path: '/pages/profile/password/password'
|
||||
},
|
||||
{
|
||||
id: 'notification_settings',
|
||||
title: '通知设置',
|
||||
icon: 'bell',
|
||||
arrow: true,
|
||||
path: '/pages/profile/notification/notification'
|
||||
},
|
||||
{
|
||||
id: 'about',
|
||||
title: '关于我们',
|
||||
icon: 'info',
|
||||
arrow: true,
|
||||
path: '/pages/profile/about/about'
|
||||
},
|
||||
{
|
||||
id: 'help',
|
||||
title: '帮助中心',
|
||||
icon: 'help',
|
||||
arrow: true,
|
||||
path: '/pages/profile/help/help'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
|
||||
loadUserInfo() {
|
||||
const userInfo = auth.getUser()
|
||||
// 获取状态栏高度
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
this.setData({
|
||||
userInfo: userInfo || {}
|
||||
})
|
||||
statusBarHeight: systemInfo.statusBarHeight
|
||||
});
|
||||
|
||||
// 检查登录状态
|
||||
this.checkLoginStatus();
|
||||
},
|
||||
|
||||
handleMenuTap(e) {
|
||||
const { key } = e.currentTarget.dataset
|
||||
|
||||
switch (key) {
|
||||
case 'settings':
|
||||
wx.showToast({
|
||||
title: '设置功能待实现',
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
case 'about':
|
||||
wx.showToast({
|
||||
title: '关于功能待实现',
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
case 'help':
|
||||
wx.showToast({
|
||||
title: '帮助功能待实现',
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
case 'feedback':
|
||||
wx.showToast({
|
||||
title: '反馈功能待实现',
|
||||
icon: 'none'
|
||||
})
|
||||
break
|
||||
onShow() {
|
||||
// 每次显示页面时刷新数据
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
// 检查登录状态
|
||||
checkLoginStatus() {
|
||||
const token = wx.getStorageSync('token');
|
||||
if (!token) {
|
||||
wx.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
handleLogout() {
|
||||
wx.showModal({
|
||||
title: '确认退出',
|
||||
content: '确定要退出登录吗？',
|
||||
// 加载用户数据
|
||||
async loadUserData() {
|
||||
try {
|
||||
// 从本地存储获取用户信息
|
||||
const userInfo = wx.getStorageSync('userInfo');
|
||||
if (userInfo) {
|
||||
this.setData({
|
||||
userInfo: {
|
||||
...this.data.userInfo,
|
||||
...userInfo
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 模拟从服务器获取最新数据
|
||||
await this.fetchUserProfile();
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载用户数据失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取用户资料
|
||||
fetchUserProfile() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// 模拟API返回的用户数据
|
||||
const profileData = {
|
||||
name: '张管理员',
|
||||
department: '宁夏畜牧管理局',
|
||||
position: '高级管理员',
|
||||
lastLoginTime: this.formatTime(new Date())
|
||||
};
|
||||
|
||||
this.setData({
|
||||
userInfo: {
|
||||
...this.data.userInfo,
|
||||
...profileData
|
||||
}
|
||||
});
|
||||
|
||||
resolve();
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
|
||||
// 刷新统计数据
|
||||
async refreshStats() {
|
||||
try {
|
||||
const stats = await this.fetchStatsData();
|
||||
this.setData({ statsData: stats });
|
||||
} catch (error) {
|
||||
console.error('刷新统计数据失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取统计数据
|
||||
fetchStatsData() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const stats = {
|
||||
todayCheck: Math.floor(Math.random() * 20) + 5,
|
||||
totalFarmers: Math.floor(Math.random() * 50) + 150,
|
||||
totalAlerts: Math.floor(Math.random() * 10),
|
||||
completedTasks: Math.floor(Math.random() * 20) + 20
|
||||
};
|
||||
resolve(stats);
|
||||
}, 300);
|
||||
});
|
||||
},
|
||||
|
||||
// 头像点击
|
||||
onAvatarTap() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['查看头像', '更换头像'],
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
auth.logout()
|
||||
if (res.tapIndex === 0) {
|
||||
this.viewAvatar();
|
||||
} else if (res.tapIndex === 1) {
|
||||
this.changeAvatar();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 查看头像
|
||||
viewAvatar() {
|
||||
if (this.data.userInfo.avatar) {
|
||||
wx.previewImage({
|
||||
urls: [this.data.userInfo.avatar]
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '暂无头像',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 更换头像
|
||||
changeAvatar() {
|
||||
wx.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
|
||||
// 模拟上传头像
|
||||
wx.showLoading({ title: '上传中...' });
|
||||
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
'userInfo.avatar': tempFilePath
|
||||
});
|
||||
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '头像更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 菜单项点击
|
||||
onMenuItemTap(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
|
||||
switch (id) {
|
||||
case 'personal_info':
|
||||
this.editPersonalInfo();
|
||||
break;
|
||||
case 'change_password':
|
||||
this.changePassword();
|
||||
break;
|
||||
case 'notification_settings':
|
||||
this.openNotificationSettings();
|
||||
break;
|
||||
case 'work_report':
|
||||
this.viewWorkReport();
|
||||
break;
|
||||
case 'help_feedback':
|
||||
this.openHelpFeedback();
|
||||
break;
|
||||
case 'about':
|
||||
this.showAbout();
|
||||
break;
|
||||
default:
|
||||
wx.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 编辑个人信息
|
||||
editPersonalInfo() {
|
||||
wx.showModal({
|
||||
title: '个人信息',
|
||||
content: '此功能将跳转到个人信息编辑页面',
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
// 修改密码
|
||||
changePassword() {
|
||||
wx.showModal({
|
||||
title: '修改密码',
|
||||
content: '请输入原密码和新密码',
|
||||
editable: true,
|
||||
placeholderText: '请输入原密码',
|
||||
success: (res) => {
|
||||
if (res.confirm && res.content) {
|
||||
wx.showModal({
|
||||
title: '新密码',
|
||||
content: '请输入新密码',
|
||||
editable: true,
|
||||
placeholderText: '请输入新密码',
|
||||
success: (newRes) => {
|
||||
if (newRes.confirm && newRes.content) {
|
||||
wx.showLoading({ title: '修改中...' });
|
||||
|
||||
setTimeout(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '密码修改成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 消息设置
|
||||
openNotificationSettings() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['推送通知', '声音提醒', '震动提醒', '免打扰时间'],
|
||||
success: (res) => {
|
||||
const settings = ['推送通知', '声音提醒', '震动提醒', '免打扰时间'];
|
||||
wx.showToast({
|
||||
title: `${settings[res.tapIndex]}设置`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 工作报告
|
||||
viewWorkReport() {
|
||||
wx.showModal({
|
||||
title: '工作报告',
|
||||
content: `本月检查: ${this.data.statsData.todayCheck * 30}次\n管理养殖户: ${this.data.statsData.totalFarmers}户\n处理告警: ${this.data.statsData.totalAlerts * 10}次\n完成任务: ${this.data.statsData.completedTasks * 5}个`,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
// 帮助反馈
|
||||
openHelpFeedback() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['使用帮助', '问题反馈', '联系客服'],
|
||||
success: (res) => {
|
||||
const actions = ['使用帮助', '问题反馈', '联系客服'];
|
||||
if (res.tapIndex === 2) {
|
||||
wx.makePhoneCall({
|
||||
phoneNumber: '400-123-4567'
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: `${actions[res.tapIndex]}功能开发中`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 关于应用
|
||||
showAbout() {
|
||||
wx.showModal({
|
||||
title: '关于应用',
|
||||
content: '宁夏智慧牧场政府端\n版本: v1.0.0\n更新时间: 2024-01-15\n\n智慧畜牧管理系统，助力现代化养殖业发展',
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
// 快捷操作点击
|
||||
onQuickActionTap(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
|
||||
switch (id) {
|
||||
case 'scan_qr':
|
||||
this.scanQRCode();
|
||||
break;
|
||||
case 'emergency_report':
|
||||
this.emergencyReport();
|
||||
break;
|
||||
case 'data_export':
|
||||
this.exportData();
|
||||
break;
|
||||
case 'system_settings':
|
||||
this.systemSettings();
|
||||
break;
|
||||
default:
|
||||
wx.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 扫码检查
|
||||
scanQRCode() {
|
||||
wx.scanCode({
|
||||
success: (res) => {
|
||||
wx.showModal({
|
||||
title: '扫码结果',
|
||||
content: `扫码内容: ${res.result}`,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({
|
||||
title: '扫码失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 紧急上报
|
||||
emergencyReport() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['疫情报告', '设备故障', '安全事故', '其他紧急情况'],
|
||||
success: (res) => {
|
||||
const types = ['疫情报告', '设备故障', '安全事故', '其他紧急情况'];
|
||||
wx.showModal({
|
||||
title: '紧急上报',
|
||||
content: `上报类型: ${types[res.tapIndex]}\n请描述具体情况`,
|
||||
editable: true,
|
||||
placeholderText: '请输入详细描述',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
wx.showLoading({ title: '上报中...' });
|
||||
|
||||
setTimeout(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '上报成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 数据导出
|
||||
exportData() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['养殖户数据', '检查记录', '告警记录', '统计报表'],
|
||||
success: (res) => {
|
||||
const types = ['养殖户数据', '检查记录', '告警记录', '统计报表'];
|
||||
|
||||
wx.showLoading({ title: '导出中...' });
|
||||
|
||||
setTimeout(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: `${types[res.tapIndex]}导出成功`,
|
||||
icon: 'success'
|
||||
});
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 系统设置
|
||||
systemSettings() {
|
||||
wx.showActionSheet({
|
||||
itemList: ['清除缓存', '检查更新', '重置设置'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
this.clearCache();
|
||||
} else if (res.tapIndex === 1) {
|
||||
this.checkUpdate();
|
||||
} else if (res.tapIndex === 2) {
|
||||
this.resetSettings();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 清除缓存
|
||||
clearCache() {
|
||||
wx.showModal({
|
||||
title: '清除缓存',
|
||||
content: '确定要清除应用缓存吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
wx.showLoading({ title: '清除中...' });
|
||||
|
||||
setTimeout(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '缓存清除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 检查更新
|
||||
checkUpdate() {
|
||||
wx.showLoading({ title: '检查中...' });
|
||||
|
||||
setTimeout(() => {
|
||||
wx.hideLoading();
|
||||
wx.showModal({
|
||||
title: '检查更新',
|
||||
content: '当前已是最新版本',
|
||||
showCancel: false
|
||||
});
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
// 重置设置
|
||||
resetSettings() {
|
||||
wx.showModal({
|
||||
title: '重置设置',
|
||||
content: '确定要重置所有设置吗？此操作不可恢复',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
wx.showLoading({ title: '重置中...' });
|
||||
|
||||
setTimeout(() => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '设置重置成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
onLogout() {
|
||||
wx.showModal({
|
||||
title: '退出登录',
|
||||
content: '确定要退出当前账号吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 清除本地存储
|
||||
wx.removeStorageSync('token');
|
||||
wx.removeStorageSync('userInfo');
|
||||
|
||||
wx.showToast({
|
||||
title: '已退出登录',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 跳转到登录页
|
||||
setTimeout(() => {
|
||||
wx.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const hour = date.getHours().toString().padStart(2, '0');
|
||||
const minute = date.getMinutes().toString().padStart(2, '0');
|
||||
const second = date.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
|
||||
@@ -1,36 +1,93 @@
|
||||
<!--pages/profile/profile.wxml-->
|
||||
<view class="profile-container">
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-section">
|
||||
<view class="user-avatar">
|
||||
<image src="/images/avatar.png" class="avatar-img" />
|
||||
</view>
|
||||
<view class="container">
|
||||
<!-- 状态栏 -->
|
||||
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
|
||||
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card">
|
||||
<view class="user-info">
|
||||
<view class="username">{{userInfo.name || '管理员'}}</view>
|
||||
<view class="user-role">{{userInfo.role || '系统管理员'}}</view>
|
||||
<view class="user-phone">{{userInfo.phone || '13800138000'}}</view>
|
||||
<view class="avatar-container" bindtap="onAvatarTap">
|
||||
<image wx:if="{{userInfo.avatar}}" class="avatar" src="{{userInfo.avatar}}" mode="aspectFill" />
|
||||
<view wx:else class="avatar-placeholder">
|
||||
<text class="avatar-text">{{userInfo.name.charAt(0)}}</text>
|
||||
</view>
|
||||
<view class="avatar-badge">📷</view>
|
||||
</view>
|
||||
|
||||
<view class="user-details">
|
||||
<view class="user-name">{{userInfo.name}}</view>
|
||||
<view class="user-account">账号: {{userInfo.account}}</view>
|
||||
<view class="user-department">{{userInfo.department}}</view>
|
||||
<view class="user-position">{{userInfo.position}}</view>
|
||||
<view class="last-login">最后登录: {{userInfo.lastLoginTime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 统计数据 -->
|
||||
<view class="stats-section">
|
||||
<view class="section-title">今日数据</view>
|
||||
<view class="stats-grid">
|
||||
<view class="stat-item">
|
||||
<view class="stat-number">{{statsData.todayCheck}}</view>
|
||||
<view class="stat-label">今日检查</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-number">{{statsData.totalFarmers}}</view>
|
||||
<view class="stat-label">管理养殖户</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-number">{{statsData.totalAlerts}}</view>
|
||||
<view class="stat-label">待处理告警</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-number">{{statsData.completedTasks}}</view>
|
||||
<view class="stat-label">完成任务</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="quick-actions-section">
|
||||
<view class="section-title">快捷操作</view>
|
||||
<view class="quick-actions">
|
||||
<view
|
||||
wx:for="{{quickActions}}"
|
||||
wx:key="id"
|
||||
class="quick-action-item"
|
||||
style="background-color: {{item.color}}20;"
|
||||
bindtap="onQuickActionTap"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<view class="quick-action-icon" style="color: {{item.color}};">{{item.icon}}</view>
|
||||
<view class="quick-action-title">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<view class="menu-section">
|
||||
<view
|
||||
wx:for="{{menuItems}}"
|
||||
wx:key="key"
|
||||
class="menu-item"
|
||||
data-key="{{item.key}}"
|
||||
bindtap="handleMenuTap"
|
||||
>
|
||||
<view class="menu-icon">{{item.icon}}</view>
|
||||
<view class="menu-title">{{item.title}}</view>
|
||||
<view class="menu-arrow">></view>
|
||||
<view class="section-title">功能设置</view>
|
||||
<view class="menu-list">
|
||||
<view
|
||||
wx:for="{{menuItems}}"
|
||||
wx:key="id"
|
||||
class="menu-item"
|
||||
bindtap="onMenuItemTap"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<view class="menu-icon">{{item.icon}}</view>
|
||||
<view class="menu-content">
|
||||
<view class="menu-title">{{item.title}}</view>
|
||||
<view class="menu-desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<view wx:if="{{item.arrow}}" class="menu-arrow">></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-section">
|
||||
<button class="logout-btn" bindtap="handleLogout">
|
||||
退出登录
|
||||
</button>
|
||||
<button class="logout-btn" bindtap="onLogout">退出登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,61 +1,200 @@
|
||||
/* pages/profile/profile.wxss */
|
||||
.profile-container {
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.user-section {
|
||||
background: #fff;
|
||||
padding: 60rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.status-bar {
|
||||
background-color: #2c5aa0;
|
||||
}
|
||||
|
||||
/* 用户信息卡片 */
|
||||
.user-card {
|
||||
background: linear-gradient(135deg, #2c5aa0 0%, #4a7bc8 100%);
|
||||
padding: 40rpx 30rpx 30rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
background: #f0f0f0;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
.avatar-placeholder {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.avatar-badge {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.username {
|
||||
.user-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.user-phone {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
.user-account {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
background: #fff;
|
||||
.user-department {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.user-position {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.last-login {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 统计数据 */
|
||||
.stats-section {
|
||||
background-color: white;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 20rpx;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: #2c5aa0;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 快捷操作 */
|
||||
.quick-actions-section {
|
||||
background-color: white;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.quick-action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.quick-action-item:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.quick-action-icon {
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.quick-action-title {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 功能菜单 */
|
||||
.menu-section {
|
||||
background-color: white;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
transition: background 0.3s;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-item:last-child {
|
||||
@@ -63,41 +202,60 @@
|
||||
}
|
||||
|
||||
.menu-item:active {
|
||||
background: #f8f9fa;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 32rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
width: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.menu-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 退出登录 */
|
||||
.logout-section {
|
||||
padding: 30rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
background-color: #ff4757;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
background-color: #ff3742;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user