-
BINpages/images/bj.png
-
BINpages/images/fkjy.png
-
BINpages/images/gywm.png
-
BINpages/images/smrz.png
-
BINpages/images/sz.png
-
BINpages/images/wdxx.png
-
BINpages/images/wz.png
-
10pages/login/login.js
-
55pages/map/map.js
-
3pages/map/map.wxml
-
3pages/map/map.wxss
-
493pages/personal/personal.js
-
201pages/personal/personal.wxml
-
815pages/personal/personal.wxss
-
174pagesA/pages/wzai/wzai.js
-
3pagesA/pages/wzai/wzai.json
-
24pagesA/pages/wzai/wzai.wxml
-
56pagesA/pages/wzai/wzai.wxss
-
13utils/api.js
|
After Width: 200 | Height: 200 | Size: 3.3 KiB |
|
After Width: 200 | Height: 200 | Size: 4.5 KiB |
|
After Width: 200 | Height: 200 | Size: 3.8 KiB |
|
After Width: 200 | Height: 200 | Size: 4.3 KiB |
|
After Width: 200 | Height: 200 | Size: 6.5 KiB |
|
After Width: 200 | Height: 200 | Size: 6.5 KiB |
|
After Width: 200 | Height: 200 | Size: 4.2 KiB |
@ -1,330 +1,265 @@ |
|||||
Page({ |
Page({ |
||||
data: { |
data: { |
||||
|
// 用户信息
|
||||
|
avatarUrl: '', |
||||
userInfo: { |
userInfo: { |
||||
avatar: '/assets/images/avatar.png', |
|
||||
nickname: '用户昵称', |
|
||||
phone: '138****8888', |
|
||||
isVerified: false, |
|
||||
isDoctor: false |
|
||||
|
nickName: '', |
||||
|
userId: '', |
||||
|
isVerified: false |
||||
}, |
}, |
||||
|
|
||||
// 功能模块
|
|
||||
modules: [ |
|
||||
{ |
|
||||
id: 'info', |
|
||||
icon: 'user-circle', |
|
||||
name: '个人管理', |
|
||||
items: [ |
|
||||
{ |
|
||||
id: 'profile', |
|
||||
name: '信息管理', |
|
||||
desc: '查看和编辑个人信息', |
|
||||
icon: 'profile', |
|
||||
badge: 0, |
|
||||
arrow: true |
|
||||
}, |
|
||||
{ |
|
||||
id: 'realname', |
|
||||
name: '实名认证', |
|
||||
desc: '通过输入身份信息', |
|
||||
icon: 'shield-check', |
|
||||
badge: 0, |
|
||||
arrow: true, |
|
||||
status: '未认证', // 认证状态
|
|
||||
statusColor: 'text-orange' |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
id: 'security', |
|
||||
icon: 'lock', |
|
||||
name: '账户安全', |
|
||||
items: [ |
|
||||
{ |
|
||||
id: 'security_settings', |
|
||||
name: '账户安全', |
|
||||
desc: '设置账户密码和安全问题', |
|
||||
icon: 'settings', |
|
||||
badge: 0, |
|
||||
arrow: true |
|
||||
}, |
|
||||
{ |
|
||||
id: 'feedback', |
|
||||
name: '反馈建议', |
|
||||
desc: '向平台提交反馈和建议', |
|
||||
icon: 'message', |
|
||||
badge: 3, // 未读回复数
|
|
||||
arrow: true |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
id: 'notification', |
|
||||
icon: 'bell', |
|
||||
name: '消息通知', |
|
||||
items: [ |
|
||||
{ |
|
||||
id: 'notifications', |
|
||||
name: '消息通知', |
|
||||
desc: '问诊、问答、订单等消息', |
|
||||
icon: 'notification', |
|
||||
badge: 5, // 未读消息数
|
|
||||
arrow: true |
|
||||
}, |
|
||||
{ |
|
||||
id: 'privacy', |
|
||||
name: '隐私设置', |
|
||||
desc: '管理个人信息可见性', |
|
||||
icon: 'eye-off', |
|
||||
badge: 0, |
|
||||
arrow: true |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
{ |
|
||||
id: 'support', |
|
||||
icon: 'help-circle', |
|
||||
name: '帮助与支持', |
|
||||
items: [ |
|
||||
{ |
|
||||
id: 'about', |
|
||||
name: '关于我们', |
|
||||
desc: '了解平台信息', |
|
||||
icon: 'info', |
|
||||
badge: 0, |
|
||||
arrow: true |
|
||||
}, |
|
||||
{ |
|
||||
id: 'service', |
|
||||
name: '客服中心', |
|
||||
desc: '7x24小时在线服务', |
|
||||
icon: 'headphones', |
|
||||
badge: 0, |
|
||||
arrow: true |
|
||||
}, |
|
||||
{ |
|
||||
id: 'agreement', |
|
||||
name: '用户协议', |
|
||||
desc: '查看平台使用条款', |
|
||||
icon: 'file-text', |
|
||||
badge: 0, |
|
||||
arrow: true |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
], |
|
||||
|
|
||||
// 统计数据
|
|
||||
stats: [ |
|
||||
{ |
|
||||
id: 'consultation', |
|
||||
name: '我的问诊', |
|
||||
value: '12', |
|
||||
icon: 'stethoscope', |
|
||||
color: '#07c160' |
|
||||
}, |
|
||||
{ |
|
||||
id: 'orders', |
|
||||
name: '我的订单', |
|
||||
value: '8', |
|
||||
icon: 'shopping-bag', |
|
||||
color: '#ff6b6b' |
|
||||
}, |
|
||||
{ |
|
||||
id: 'favorites', |
|
||||
name: '我的收藏', |
|
||||
value: '23', |
|
||||
icon: 'heart', |
|
||||
color: '#ff9f43' |
|
||||
}, |
|
||||
{ |
|
||||
id: 'coupons', |
|
||||
name: '我的优惠券', |
|
||||
value: '3', |
|
||||
icon: 'tag', |
|
||||
color: '#2e86de' |
|
||||
} |
|
||||
], |
|
||||
|
|
||||
// 快捷操作
|
|
||||
quickActions: [ |
|
||||
{ |
|
||||
id: 'health_record', |
|
||||
name: '健康档案', |
|
||||
icon: 'file-medical', |
|
||||
color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' |
|
||||
}, |
|
||||
{ |
|
||||
id: 'appointment', |
|
||||
name: '预约挂号', |
|
||||
icon: 'calendar', |
|
||||
color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' |
|
||||
}, |
|
||||
{ |
|
||||
id: 'medicine', |
|
||||
name: '我的药箱', |
|
||||
icon: 'pill', |
|
||||
color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' |
|
||||
}, |
|
||||
{ |
|
||||
id: 'report', |
|
||||
name: '检查报告', |
|
||||
icon: 'clipboard', |
|
||||
color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' |
|
||||
} |
|
||||
], |
|
||||
|
// 弹窗状态
|
||||
|
showFeedbackModal: false, |
||||
|
showNicknameModal: false, |
||||
|
showToast: false, |
||||
|
|
||||
// 系统信息
|
|
||||
systemInfo: { |
|
||||
version: '2.1.0', |
|
||||
lastLogin: '2024-01-15 14:30' |
|
||||
} |
|
||||
|
// 反馈相关
|
||||
|
feedbackContent: '', |
||||
|
canSubmit: false, |
||||
|
isSubmitting: false, |
||||
|
|
||||
|
// 编辑相关
|
||||
|
newNickname: '', |
||||
|
// 提示信息
|
||||
|
toastText: '' |
||||
}, |
}, |
||||
|
|
||||
onLoad() { |
onLoad() { |
||||
this.loadUserInfo() |
|
||||
this.checkNotifications() |
|
||||
|
this.loadUserInfo(); |
||||
}, |
}, |
||||
|
|
||||
onShow() { |
onShow() { |
||||
// 每次显示页面时刷新数据
|
|
||||
this.refreshData() |
|
||||
|
|
||||
}, |
}, |
||||
|
|
||||
// 加载用户信息
|
// 加载用户信息
|
||||
loadUserInfo() { |
loadUserInfo() { |
||||
// 模拟API调用
|
|
||||
|
// 从缓存获取用户信息
|
||||
|
const userInfo = wx.getStorageSync('userInfo'); |
||||
|
const avatarUrl = wx.getStorageSync('avatarUrl'); |
||||
|
|
||||
|
if (userInfo) { |
||||
|
this.setData({ |
||||
|
userInfo, |
||||
|
avatarUrl |
||||
|
}); |
||||
|
} else { |
||||
|
// 首次使用,生成默认用户信息
|
||||
|
const defaultUserInfo = { |
||||
|
nickName: '微信用户', |
||||
|
isVerified: false |
||||
|
}; |
||||
|
|
||||
|
wx.setStorageSync('userInfo', defaultUserInfo); |
||||
|
this.setData({ userInfo: defaultUserInfo }); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
// 选择头像
|
||||
|
onChooseAvatar(e) { |
||||
|
const { avatarUrl } = e.detail; |
||||
|
|
||||
|
// 显示加载
|
||||
|
wx.showLoading({ |
||||
|
title: '更新中...', |
||||
|
mask: true |
||||
|
}); |
||||
|
|
||||
|
// 模拟上传过程
|
||||
setTimeout(() => { |
setTimeout(() => { |
||||
|
this.setData({ avatarUrl }); |
||||
|
|
||||
|
// 保存到缓存
|
||||
|
wx.setStorageSync('avatarUrl', avatarUrl); |
||||
|
|
||||
|
wx.hideLoading(); |
||||
|
this.showToast('头像更新成功'); |
||||
|
}, 800); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 编辑昵称
|
||||
|
editNickname() { |
||||
this.setData({ |
this.setData({ |
||||
'userInfo.nickname': '张小凡', |
|
||||
'userInfo.phone': '138****5678', |
|
||||
'userInfo.isVerified': true, |
|
||||
'userInfo.isDoctor': false |
|
||||
}) |
|
||||
}, 500) |
|
||||
|
showNicknameModal: true, |
||||
|
newNickname: this.data.userInfo.nickName |
||||
|
}); |
||||
}, |
}, |
||||
|
|
||||
// 检查通知
|
|
||||
checkNotifications() { |
|
||||
// 模拟检查未读消息
|
|
||||
const updatedModules = this.data.modules.map(module => { |
|
||||
return { |
|
||||
...module, |
|
||||
items: module.items.map(item => { |
|
||||
if (item.id === 'notifications') { |
|
||||
return { ...item, badge: Math.floor(Math.random() * 10) } |
|
||||
|
hideNicknameModal() { |
||||
|
this.setData({ showNicknameModal: false }); |
||||
|
}, |
||||
|
|
||||
|
onNicknameInput(e) { |
||||
|
this.setData({ newNickname: e.detail.value }); |
||||
|
}, |
||||
|
|
||||
|
saveNickname() { |
||||
|
const newNickname = this.data.newNickname.trim(); |
||||
|
|
||||
|
if (!newNickname) { |
||||
|
this.showToast('昵称不能为空'); |
||||
|
return; |
||||
} |
} |
||||
return item |
|
||||
}) |
|
||||
|
|
||||
|
if (newNickname.length > 20) { |
||||
|
this.showToast('昵称不能超过20个字符'); |
||||
|
return; |
||||
} |
} |
||||
}) |
|
||||
|
|
||||
this.setData({ modules: updatedModules }) |
|
||||
}, |
|
||||
|
// 更新用户信息
|
||||
|
const updatedUserInfo = { |
||||
|
...this.data.userInfo, |
||||
|
nickName: newNickname |
||||
|
}; |
||||
|
|
||||
// 刷新数据
|
|
||||
refreshData() { |
|
||||
// 刷新统计数据
|
|
||||
const updatedStats = this.data.stats.map(stat => ({ |
|
||||
...stat, |
|
||||
value: String(Math.floor(Math.random() * 20) + 5) |
|
||||
})) |
|
||||
|
this.setData({ |
||||
|
userInfo: updatedUserInfo, |
||||
|
showNicknameModal: false |
||||
|
}); |
||||
|
|
||||
this.setData({ stats: updatedStats }) |
|
||||
|
// 保存到缓存
|
||||
|
wx.setStorageSync('userInfo', updatedUserInfo); |
||||
|
|
||||
|
this.showToast('昵称修改成功'); |
||||
}, |
}, |
||||
|
|
||||
// 点击用户头像区域
|
|
||||
onTapUserInfo() { |
|
||||
|
// 查看问诊消息
|
||||
|
goToConsultation() { |
||||
wx.navigateTo({ |
wx.navigateTo({ |
||||
url: '/pages/profile/edit-profile' |
|
||||
}) |
|
||||
|
url: '' |
||||
|
}); |
||||
}, |
}, |
||||
|
|
||||
// 点击统计项
|
|
||||
onTapStat(e) { |
|
||||
const { id } = e.currentTarget.dataset |
|
||||
const urls = { |
|
||||
consultation: '/pages/consultation/my-consultation', |
|
||||
orders: '/pages/order/my-orders', |
|
||||
favorites: '/pages/favorites/favorites', |
|
||||
coupons: '/pages/coupon/my-coupons' |
|
||||
} |
|
||||
|
// 查看问答消息
|
||||
|
goToQA() { |
||||
|
wx.navigateTo({ |
||||
|
url: '' |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
if (urls[id]) { |
|
||||
wx.navigateTo({ url: urls[id] }) |
|
||||
|
// 实名认证
|
||||
|
goToAuth() { |
||||
|
if (this.data.userInfo.isVerified) { |
||||
|
this.showToast('您已完成实名认证'); |
||||
|
return; |
||||
} |
} |
||||
|
|
||||
|
wx.navigateTo({ |
||||
|
url: '/pages/auth/realname' |
||||
|
}); |
||||
}, |
}, |
||||
|
|
||||
// 点击快捷操作
|
|
||||
onTapQuickAction(e) { |
|
||||
const { id } = e.currentTarget.dataset |
|
||||
const urls = { |
|
||||
health_record: '/pages/health/record', |
|
||||
appointment: '/pages/appointment/list', |
|
||||
medicine: '/pages/medicine/medicine-box', |
|
||||
report: '/pages/report/list' |
|
||||
} |
|
||||
|
// 显示反馈弹窗
|
||||
|
showFeedback() { |
||||
|
this.setData({ |
||||
|
showFeedbackModal: true, |
||||
|
feedbackContent: '', |
||||
|
canSubmit: false, |
||||
|
isSubmitting: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
if (urls[id]) { |
|
||||
wx.navigateTo({ url: urls[id] }) |
|
||||
} |
|
||||
|
hideFeedback() { |
||||
|
this.setData({ showFeedbackModal: false }); |
||||
}, |
}, |
||||
|
|
||||
// 点击功能项
|
|
||||
onTapMenuItem(e) { |
|
||||
const { moduleid, itemid } = e.currentTarget.dataset |
|
||||
console.log('点击:', moduleid, itemid) |
|
||||
|
|
||||
// 根据不同的itemid跳转到不同页面
|
|
||||
const pageMap = { |
|
||||
profile: '/pages/profile/edit-profile', |
|
||||
realname: '/pages/auth/realname-auth', |
|
||||
security_settings: '/pages/security/settings', |
|
||||
feedback: '/pages/feedback/feedback', |
|
||||
notifications: '/pages/notification/notification-center', |
|
||||
privacy: '/pages/privacy/settings', |
|
||||
about: '/pages/about/about', |
|
||||
service: '/pages/service/customer-service', |
|
||||
agreement: '/pages/agreement/user-agreement' |
|
||||
} |
|
||||
|
// 反馈内容输入
|
||||
|
onFeedbackInput(e) { |
||||
|
const content = e.detail.value; |
||||
|
const canSubmit = content.trim().length > 0; |
||||
|
|
||||
|
this.setData({ |
||||
|
feedbackContent: content, |
||||
|
canSubmit |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 提交反馈
|
||||
|
submitFeedback() { |
||||
|
if (!this.data.canSubmit || this.data.isSubmitting) return; |
||||
|
|
||||
if (pageMap[itemid]) { |
|
||||
wx.navigateTo({ url: pageMap[itemid] }) |
|
||||
|
const content = this.data.feedbackContent.trim(); |
||||
|
if (content.length < 5) { |
||||
|
this.showToast('请填写详细的反馈内容'); |
||||
|
return; |
||||
} |
} |
||||
|
|
||||
|
this.setData({ isSubmitting: true }); |
||||
|
|
||||
|
// 模拟提交到服务器
|
||||
|
setTimeout(() => { |
||||
|
console.log('提交反馈:', content); |
||||
|
|
||||
|
this.setData({ |
||||
|
isSubmitting: false, |
||||
|
showFeedbackModal: false |
||||
|
}); |
||||
|
|
||||
|
this.showToast('感谢您的反馈!'); |
||||
|
|
||||
|
// 这里应该是实际的API调用
|
||||
|
// wx.request({
|
||||
|
// url: 'https://your-api.com/feedback',
|
||||
|
// method: 'POST',
|
||||
|
// data: { content },
|
||||
|
// success: (res) => {
|
||||
|
// this.showToast('提交成功');
|
||||
|
// },
|
||||
|
// complete: () => {
|
||||
|
// this.setData({
|
||||
|
// isSubmitting: false,
|
||||
|
// showFeedbackModal: false
|
||||
|
// });
|
||||
|
// }
|
||||
|
// });
|
||||
|
}, 1500); |
||||
|
}, |
||||
|
|
||||
|
// 关于我们
|
||||
|
goToAbout() { |
||||
|
wx.navigateTo({ |
||||
|
url: '/pages/about/index' |
||||
|
}); |
||||
}, |
}, |
||||
|
|
||||
// 设置
|
// 设置
|
||||
onTapSettings() { |
|
||||
|
goToSettings() { |
||||
wx.navigateTo({ |
wx.navigateTo({ |
||||
url: '/pages/settings/settings' |
|
||||
}) |
|
||||
|
url: '/pages/settings/index' |
||||
|
}); |
||||
}, |
}, |
||||
|
|
||||
// 退出登录
|
|
||||
onLogout() { |
|
||||
wx.showModal({ |
|
||||
title: '提示', |
|
||||
content: '确定要退出登录吗?', |
|
||||
success: (res) => { |
|
||||
if (res.confirm) { |
|
||||
// 清除登录状态
|
|
||||
wx.removeStorageSync('token') |
|
||||
wx.removeStorageSync('userInfo') |
|
||||
|
|
||||
// 跳转到登录页
|
|
||||
wx.reLaunch({ |
|
||||
url: '/pages/login/login' |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
}) |
|
||||
|
// 显示提示
|
||||
|
showToast(text) { |
||||
|
this.setData({ |
||||
|
toastText: text, |
||||
|
showToast: true |
||||
|
}); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
this.setData({ showToast: false }); |
||||
|
}, 2000); |
||||
|
}, |
||||
|
|
||||
|
// 下拉刷新
|
||||
|
onPullDownRefresh() { |
||||
|
this.loadUserInfo(); |
||||
|
this.checkUnreadMessages(); |
||||
|
|
||||
|
setTimeout(() => { |
||||
|
wx.stopPullDownRefresh(); |
||||
|
this.showToast('刷新成功'); |
||||
|
}, 1000); |
||||
}, |
}, |
||||
|
|
||||
// 分享
|
// 分享
|
||||
onShareAppMessage() { |
onShareAppMessage() { |
||||
return { |
return { |
||||
title: '健康管理,从这里开始', |
|
||||
path: '/pages/index/index' |
|
||||
} |
|
||||
|
title: '健康守护 - 您的个人健康中心', |
||||
|
path: '/pages/personal-center/index' |
||||
|
}; |
||||
} |
} |
||||
}) |
|
||||
|
}); |
||||
@ -1,147 +1,142 @@ |
|||||
<view class="personal-center"> |
<view class="personal-center"> |
||||
<!-- 顶部背景 --> |
|
||||
<view class="header-bg"></view> |
|
||||
|
<!-- 用户信息区域 --> |
||||
|
<view class="user-section fade-in"> |
||||
|
<view class="user-card"> |
||||
|
<!-- 头像 --> |
||||
|
<button class="avatar-btn" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"> |
||||
|
<image class="avatar" src="{{avatarUrl || '/pages/images/tx.png'}}" mode="aspectFill"></image> |
||||
|
</button> |
||||
|
|
||||
<!-- 用户信息卡片 --> |
|
||||
<view class="user-card" bindtap="onTapUserInfo"> |
|
||||
|
<!-- 用户信息 --> |
||||
<view class="user-info"> |
<view class="user-info"> |
||||
<view class="avatar-section"> |
|
||||
<image class="avatar" src="{{userInfo.avatar || '/assets/images/avatar-default.png'}}" mode="aspectFill"></image> |
|
||||
<view class="avatar-badge" wx:if="{{userInfo.isVerified}}"> |
|
||||
<text class="iconfont icon-check-circle"></text> |
|
||||
</view> |
|
||||
|
<view class="nickname-section" bindtap="editNickname"> |
||||
|
<text class="nickname">{{userInfo.nickName || '微信用户'}}</text> |
||||
|
<image src="/pages/images/bj.png"></image> |
||||
</view> |
</view> |
||||
|
|
||||
<view class="user-details"> |
|
||||
<view class="user-name"> |
|
||||
<text class="name">{{userInfo.nickname || '点击登录'}}</text> |
|
||||
<text class="iconfont icon-edit" wx:if="{{userInfo.nickname}}"></text> |
|
||||
|
<view class="user-meta"> |
||||
|
<view class="auth-tag {{userInfo.isVerified ? 'verified' : ''}}" bindtap="goToAuth"> |
||||
|
<text>{{userInfo.isVerified ? '已认证' : '未认证'}}</text> |
||||
</view> |
</view> |
||||
|
|
||||
<view class="user-phone"> |
|
||||
<text class="iconfont icon-phone"></text> |
|
||||
<text>{{userInfo.phone || '未绑定手机号'}}</text> |
|
||||
</view> |
</view> |
||||
|
|
||||
<view class="user-tags"> |
|
||||
<view class="tag" wx:if="{{userInfo.isDoctor}}"> |
|
||||
<text class="iconfont icon-stethoscope"></text> |
|
||||
<text>医生认证</text> |
|
||||
</view> |
|
||||
<view class="tag" wx:if="{{userInfo.isVerified}}"> |
|
||||
<text class="iconfont icon-shield-check"></text> |
|
||||
<text>已实名</text> |
|
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
|
<!-- 消息通知 --> |
||||
|
<view class="section-card fade-in-delay-1"> |
||||
|
<view class="section-header"> |
||||
|
<text class="section-title">消息通知</text> |
||||
</view> |
</view> |
||||
|
|
||||
<view class="card-arrow"> |
|
||||
<text class="iconfont icon-chevron-right"></text> |
|
||||
|
<view class="message-row"> |
||||
|
<view class="message-item" bindtap="goToConsultation"> |
||||
|
<view class="message-icon-wrapper"> |
||||
|
<image class="message-icon" src="/pages/images/wz.png" mode=""></image> |
||||
</view> |
</view> |
||||
|
<text class="message-label">问诊消息</text> |
||||
</view> |
</view> |
||||
|
|
||||
<!-- 统计数据 --> |
|
||||
<view class="stats-grid"> |
|
||||
<view |
|
||||
wx:for="{{stats}}" |
|
||||
wx:key="id" |
|
||||
class="stat-item" |
|
||||
bindtap="onTapStat" |
|
||||
data-id="{{item.id}}" |
|
||||
> |
|
||||
<view class="stat-icon" style="color: {{item.color}};"> |
|
||||
<text class="iconfont icon-{{item.icon}}"></text> |
|
||||
|
<view class="divider"></view> |
||||
|
|
||||
|
<view class="message-item" bindtap="goToQA"> |
||||
|
<view class="message-icon-wrapper"> |
||||
|
<image class="message-icon" src="/pages/images/wdxx.png" mode=""></image> |
||||
|
</view> |
||||
|
<text class="message-label">问答消息</text> |
||||
</view> |
</view> |
||||
<view class="stat-value">{{item.value}}</view> |
|
||||
<view class="stat-name">{{item.name}}</view> |
|
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
<!-- 快捷操作 --> |
|
||||
<view class="quick-actions"> |
|
||||
<view class="section-title"> |
|
||||
<text class="iconfont icon-zap"></text> |
|
||||
<text>快捷操作</text> |
|
||||
|
<!-- 功能列表 --> |
||||
|
<view class="section-card fade-in-delay-2"> |
||||
|
<view class="function-list"> |
||||
|
<!-- 实名认证 --> |
||||
|
<view class="function-item" bindtap="goToAuth"> |
||||
|
<view class="item-left"> |
||||
|
<image class="item-icon" src="/pages/images/smrz.png"></image> |
||||
|
<text class="item-title">实名认证</text> |
||||
</view> |
</view> |
||||
<view class="actions-grid"> |
|
||||
<view |
|
||||
wx:for="{{quickActions}}" |
|
||||
wx:key="id" |
|
||||
class="action-item" |
|
||||
bindtap="onTapQuickAction" |
|
||||
data-id="{{item.id}}" |
|
||||
> |
|
||||
<view class="action-icon" style="background: {{item.color}};"> |
|
||||
<text class="iconfont icon-{{item.icon}}"></text> |
|
||||
|
<view class="item-status {{userInfo.isVerified ? 'verified' : ''}}"> |
||||
|
{{userInfo.isVerified ? '已认证' : '去认证'}} |
||||
</view> |
</view> |
||||
<view class="action-name">{{item.name}}</view> |
|
||||
</view> |
</view> |
||||
|
|
||||
|
<!-- 反馈建议 --> |
||||
|
<view class="function-item" bindtap="showFeedback"> |
||||
|
<view class="item-left"> |
||||
|
<image class="item-icon" src="/pages/images/fkjy.png"></image> |
||||
|
<text class="item-title">反馈建议</text> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
<!-- 功能模块 --> |
|
||||
<view class="modules"> |
|
||||
<block wx:for="{{modules}}" wx:key="id"> |
|
||||
<view class="module-section"> |
|
||||
<view class="section-title"> |
|
||||
<text class="iconfont icon-{{item.icon}}"></text> |
|
||||
<text>{{item.name}}</text> |
|
||||
|
<!-- 关于我们 --> |
||||
|
<view class="function-item" bindtap="goToAbout"> |
||||
|
<view class="item-left"> |
||||
|
<image class="item-icon" src="/pages/images/gywm.png"></image> |
||||
|
<text class="item-title">关于我们</text> |
||||
|
</view> |
||||
</view> |
</view> |
||||
|
|
||||
<view class="module-items"> |
|
||||
<view |
|
||||
wx:for="{{item.items}}" |
|
||||
wx:key="id" |
|
||||
class="module-item" |
|
||||
bindtap="onTapMenuItem" |
|
||||
data-moduleid="{{moduleId}}" |
|
||||
data-itemid="{{item.id}}" |
|
||||
> |
|
||||
|
<!-- 设置 --> |
||||
|
<view class="function-item" bindtap="goToSettings"> |
||||
<view class="item-left"> |
<view class="item-left"> |
||||
<view class="item-icon"> |
|
||||
<text class="iconfont icon-{{item.icon}}"></text> |
|
||||
|
<image class="item-icon" src="/pages/images/sz.png"></image> |
||||
|
<text class="item-title">设置</text> |
||||
</view> |
</view> |
||||
<view class="item-info"> |
|
||||
<view class="item-name">{{item.name}}</view> |
|
||||
<view class="item-desc">{{item.desc}}</view> |
|
||||
<view |
|
||||
class="item-status {{item.statusColor || ''}}" |
|
||||
wx:if="{{item.status}}" |
|
||||
> |
|
||||
{{item.status}} |
|
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
<view class="item-right"> |
|
||||
<view class="badge" wx:if="{{item.badge > 0}}"> |
|
||||
{{item.badge > 99 ? '99+' : item.badge}} |
|
||||
|
|
||||
|
|
||||
|
<!-- 反馈建议弹窗 --> |
||||
|
<view class="feedback-modal {{showFeedbackModal ? 'show' : ''}}"> |
||||
|
<view class="modal-mask" bindtap="hideFeedback"></view> |
||||
|
<view class="modal-content"> |
||||
|
<view class="modal-header"> |
||||
|
<text class="modal-title">反馈建议</text> |
||||
|
<view class="modal-close" bindtap="hideFeedback"> |
||||
|
<image src="/icons/close.png"></image> |
||||
</view> |
</view> |
||||
<text class="iconfont icon-chevron-right" wx:if="{{item.arrow}}"></text> |
|
||||
</view> |
</view> |
||||
|
|
||||
|
<view class="modal-body"> |
||||
|
<textarea class="feedback-input" placeholder="请输入您的反馈或建议..." placeholder-class="placeholder" value="{{feedbackContent}}" bindinput="onFeedbackInput" maxlength="200" auto-height></textarea> |
||||
|
<view class="char-count"> |
||||
|
<text class="current">{{feedbackContent.length}}</text> |
||||
|
<text class="total">/200</text> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
|
<view class="modal-footer"> |
||||
|
<button class="submit-btn {{canSubmit ? 'active' : ''}}" bindtap="submitFeedback" disabled="{{!canSubmit}}"> |
||||
|
{{isSubmitting ? '提交中...' : '提交'}} |
||||
|
</button> |
||||
</view> |
</view> |
||||
</block> |
|
||||
</view> |
</view> |
||||
|
|
||||
<!-- 底部操作 --> |
|
||||
<view class="bottom-actions"> |
|
||||
<view class="system-info"> |
|
||||
<text>版本 {{systemInfo.version}}</text> |
|
||||
<text>最后登录 {{systemInfo.lastLogin}}</text> |
|
||||
</view> |
</view> |
||||
|
|
||||
<view class="action-buttons"> |
|
||||
<button class="btn btn-setting" bindtap="onTapSettings"> |
|
||||
<text class="iconfont icon-settings"></text> |
|
||||
<text>设置</text> |
|
||||
</button> |
|
||||
<button class="btn btn-logout" bindtap="onLogout"> |
|
||||
<text class="iconfont icon-log-out"></text> |
|
||||
<text>退出登录</text> |
|
||||
</button> |
|
||||
|
<!-- 修改昵称弹窗 --> |
||||
|
<view class="nickname-modal {{showNicknameModal ? 'show' : ''}}"> |
||||
|
<view class="modal-mask" bindtap="hideNicknameModal"></view> |
||||
|
<view class="modal-content"> |
||||
|
<view class="modal-header"> |
||||
|
<text class="modal-title">修改昵称</text> |
||||
|
</view> |
||||
|
<view class="modal-body"> |
||||
|
<input class="nickname-input" type="text" placeholder="请输入昵称" value="{{newNickname}}" bindinput="onNicknameInput" maxlength="10" /> |
||||
|
<text class="input-tip">最多10个字符</text> |
||||
|
</view> |
||||
|
<view class="modal-footer"> |
||||
|
<button class="cancel-btn" bindtap="hideNicknameModal">取消</button> |
||||
|
<button class="confirm-btn" bindtap="saveNickname">确定</button> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 提示信息 --> |
||||
|
<view class="toast {{showToast ? 'show' : ''}}"> |
||||
|
<text>{{toastText}}</text> |
||||
|
</view> |
||||
</view> |
</view> |
||||
@ -1,441 +1,596 @@ |
|||||
.personal-center { |
|
||||
|
.personal-center{ |
||||
min-height: 100vh; |
min-height: 100vh; |
||||
background: linear-gradient(to bottom, #f5f7fa 0%, #e4e8f0 100%); |
|
||||
padding-bottom: 120rpx; |
|
||||
} |
|
||||
|
background: linear-gradient(180deg, #86D8D0 0%, #a9dfda 30%, #cfe9e7 60%, #ECF8F7 90%); |
||||
|
} |
||||
|
|
||||
/* 顶部背景 */ |
|
||||
.header-bg { |
|
||||
height: 300rpx; |
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
z-index: 1; |
|
||||
border-radius: 0 0 40rpx 40rpx; |
|
||||
|
|
||||
|
/* 淡入动画 */ |
||||
|
.fade-in { |
||||
|
animation: fadeIn 0.6s ease forwards; |
||||
|
opacity: 0; |
||||
|
transform: translateY(20rpx); |
||||
|
} |
||||
|
|
||||
|
.fade-in-delay-1 { |
||||
|
animation: fadeIn 0.6s 0.2s ease forwards; |
||||
|
opacity: 0; |
||||
|
transform: translateY(20rpx); |
||||
|
} |
||||
|
|
||||
|
.fade-in-delay-2 { |
||||
|
animation: fadeIn 0.6s 0.4s ease forwards; |
||||
|
opacity: 0; |
||||
|
transform: translateY(20rpx); |
||||
|
} |
||||
|
|
||||
|
.fade-in-delay-3 { |
||||
|
animation: fadeIn 0.6s 0.6s ease forwards; |
||||
|
opacity: 0; |
||||
|
transform: translateY(20rpx); |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeIn { |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
} |
} |
||||
|
} |
||||
|
|
||||
/* 用户信息卡片 */ |
|
||||
.user-card { |
|
||||
position: relative; |
|
||||
z-index: 2; |
|
||||
|
/* 用户信息区域 */ |
||||
|
.user-section { |
||||
|
padding: 40rpx 30rpx 30rpx; |
||||
|
} |
||||
|
|
||||
|
.user-card { |
||||
background: white; |
background: white; |
||||
margin: 40rpx; |
|
||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||
padding: 40rpx; |
|
||||
box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.15); |
|
||||
|
padding: 40rpx 30rpx; |
||||
|
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08); |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: space-between; |
|
||||
animation: slideUp 0.6s ease; |
|
||||
} |
|
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
.user-info { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
.user-card:active { |
||||
|
transform: scale(0.99); |
||||
|
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
.avatar-section { |
|
||||
|
.avatar-btn { |
||||
position: relative; |
position: relative; |
||||
margin-right: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.avatar { |
|
||||
width: 120rpx; |
width: 120rpx; |
||||
height: 120rpx; |
height: 120rpx; |
||||
|
margin-right: 30rpx; |
||||
|
flex-shrink: 0; |
||||
|
padding: 0; |
||||
|
background: transparent; |
||||
|
border: none; |
||||
border-radius: 50%; |
border-radius: 50%; |
||||
border: 6rpx solid white; |
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
|
} |
||||
|
|
||||
.avatar-badge { |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
right: 0; |
|
||||
background: #07c160; |
|
||||
width: 36rpx; |
|
||||
height: 36rpx; |
|
||||
|
.avatar-btn::after { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
border-radius: 50%; |
border-radius: 50%; |
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
border: 3rpx solid white; |
|
||||
} |
|
||||
|
border: 4rpx solid white; |
||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
.avatar-badge .iconfont { |
|
||||
color: white; |
|
||||
font-size: 20rpx; |
|
||||
} |
|
||||
|
|
||||
.user-details { |
|
||||
|
.user-info { |
||||
flex: 1; |
flex: 1; |
||||
} |
|
||||
|
} |
||||
|
|
||||
.user-name { |
|
||||
|
.nickname-section { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
margin-bottom: 10rpx; |
|
||||
} |
|
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
.user-name .name { |
|
||||
|
.nickname { |
||||
font-size: 36rpx; |
font-size: 36rpx; |
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
margin-right: 15rpx; |
|
||||
} |
|
||||
|
font-weight: 700; |
||||
|
color: #1e293b; |
||||
|
margin-right: 20rpx; |
||||
|
max-width: 300rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
.user-name .iconfont { |
|
||||
color: #667eea; |
|
||||
font-size: 28rpx; |
|
||||
} |
|
||||
|
|
||||
.user-phone { |
|
||||
|
|
||||
|
.nickname-section image { |
||||
|
width: 26rpx; |
||||
|
height: 26rpx; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
|
||||
|
.user-meta { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
font-size: 26rpx; |
|
||||
color: #666; |
|
||||
margin-bottom: 15rpx; |
|
||||
} |
|
||||
|
flex-wrap: wrap; |
||||
|
gap: 16rpx; |
||||
|
} |
||||
|
|
||||
.user-phone .iconfont { |
|
||||
margin-right: 10rpx; |
|
||||
font-size: 24rpx; |
|
||||
} |
|
||||
|
|
||||
.user-tags { |
|
||||
display: flex; |
|
||||
gap: 15rpx; |
|
||||
} |
|
||||
|
|
||||
.user-tags .tag { |
|
||||
background: rgba(102, 126, 234, 0.1); |
|
||||
padding: 6rpx 15rpx; |
|
||||
border-radius: 20rpx; |
|
||||
font-size: 22rpx; |
|
||||
color: #667eea; |
|
||||
|
.auth-tag { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
} |
|
||||
|
padding: 6rpx 12rpx; |
||||
|
background: #fef3c7; |
||||
|
border-radius: 16rpx; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
.user-tags .tag .iconfont { |
|
||||
font-size: 20rpx; |
|
||||
margin-right: 5rpx; |
|
||||
} |
|
||||
|
.auth-tag.verified { |
||||
|
background: #d1fae5; |
||||
|
} |
||||
|
|
||||
.card-arrow .iconfont { |
|
||||
color: #ccc; |
|
||||
font-size: 32rpx; |
|
||||
} |
|
||||
|
.auth-tag:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
/* 统计数据 */ |
|
||||
.stats-grid { |
|
||||
display: grid; |
|
||||
grid-template-columns: repeat(4, 1fr); |
|
||||
gap: 20rpx; |
|
||||
margin: 30rpx 40rpx; |
|
||||
animation: fadeIn 0.8s ease 0.2s both; |
|
||||
} |
|
||||
|
.auth-tag image { |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
margin-right: 6rpx; |
||||
|
} |
||||
|
|
||||
.stat-item { |
|
||||
|
.auth-tag text { |
||||
|
font-size: 22rpx; |
||||
|
color: #92400e; |
||||
|
} |
||||
|
|
||||
|
.auth-tag.verified text { |
||||
|
color: #065f46; |
||||
|
} |
||||
|
|
||||
|
/* 卡片样式 */ |
||||
|
.section-card { |
||||
background: white; |
background: white; |
||||
|
margin: 0 30rpx 30rpx; |
||||
border-radius: 20rpx; |
border-radius: 20rpx; |
||||
padding: 30rpx 0; |
|
||||
text-align: center; |
|
||||
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05); |
|
||||
transition: all 0.3s ease; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
overflow: hidden; |
||||
} |
|
||||
|
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
.section-header { |
||||
|
padding: 30rpx 30rpx 20rpx; |
||||
|
border-bottom: 1rpx solid #f1f5f9; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
.stat-item::before { |
|
||||
|
.section-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #1e293b; |
||||
|
position: relative; |
||||
|
padding-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title::before { |
||||
content: ''; |
content: ''; |
||||
position: absolute; |
position: absolute; |
||||
top: 0; |
|
||||
left: 0; |
left: 0; |
||||
right: 0; |
|
||||
height: 4rpx; |
|
||||
background: var(--item-color); |
|
||||
opacity: 0; |
|
||||
transition: opacity 0.3s ease; |
|
||||
} |
|
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
width: 6rpx; |
||||
|
height: 24rpx; |
||||
|
background: linear-gradient(135deg, #667eea, #764ba2); |
||||
|
border-radius: 3rpx; |
||||
|
} |
||||
|
|
||||
.stat-item:active { |
|
||||
transform: translateY(-5rpx); |
|
||||
box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.1); |
|
||||
} |
|
||||
|
|
||||
.stat-item:active::before { |
|
||||
opacity: 1; |
|
||||
} |
|
||||
|
|
||||
.stat-icon .iconfont { |
|
||||
font-size: 44rpx; |
|
||||
margin-bottom: 15rpx; |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
.stat-value { |
|
||||
font-size: 36rpx; |
|
||||
font-weight: 700; |
|
||||
color: #333; |
|
||||
margin-bottom: 5rpx; |
|
||||
} |
|
||||
|
|
||||
.stat-name { |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
} |
|
||||
|
|
||||
/* 快捷操作 */ |
|
||||
.quick-actions { |
|
||||
margin: 30rpx 40rpx; |
|
||||
animation: fadeIn 0.8s ease 0.4s both; |
|
||||
} |
|
||||
|
|
||||
.section-title { |
|
||||
|
/* 消息行 */ |
||||
|
.message-row { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
font-size: 30rpx; |
|
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
margin-bottom: 30rpx; |
|
||||
} |
|
||||
|
|
||||
.section-title .iconfont { |
|
||||
margin-right: 15rpx; |
|
||||
font-size: 32rpx; |
|
||||
color: #667eea; |
|
||||
} |
|
||||
|
padding: 30rpx; |
||||
|
} |
||||
|
|
||||
.actions-grid { |
|
||||
display: grid; |
|
||||
grid-template-columns: repeat(4, 1fr); |
|
||||
gap: 20rpx; |
|
||||
} |
|
||||
|
.message-item { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
.action-item { |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
.message-item:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
.action-icon { |
|
||||
width: 90rpx; |
|
||||
height: 90rpx; |
|
||||
border-radius: 50%; |
|
||||
margin: 0 auto 20rpx; |
|
||||
|
.message-icon-wrapper { |
||||
|
position: relative; |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
margin-bottom: 16rpx; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
color: white; |
|
||||
font-size: 40rpx; |
|
||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); |
|
||||
transition: transform 0.3s ease; |
|
||||
} |
|
||||
|
background: #f8fafc; |
||||
|
border-radius: 50%; |
||||
|
border: 1rpx solid #e2e8f0; |
||||
|
} |
||||
|
|
||||
.action-item:active .action-icon { |
|
||||
transform: scale(0.95); |
|
||||
} |
|
||||
|
.message-icon { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
} |
||||
|
|
||||
.action-name { |
|
||||
font-size: 24rpx; |
|
||||
color: #666; |
|
||||
} |
|
||||
|
|
||||
/* 功能模块 */ |
|
||||
.modules { |
|
||||
margin: 30rpx 40rpx; |
|
||||
animation: fadeIn 0.8s ease 0.6s both; |
|
||||
} |
|
||||
|
.message-label { |
||||
|
font-size: 26rpx; |
||||
|
color: #475569; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
.module-section { |
|
||||
background: white; |
|
||||
border-radius: 20rpx; |
|
||||
padding: 30rpx; |
|
||||
margin-bottom: 30rpx; |
|
||||
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05); |
|
||||
} |
|
||||
|
.divider { |
||||
|
width: 1rpx; |
||||
|
height: 60rpx; |
||||
|
background: #e2e8f0; |
||||
|
margin: 0 40rpx; |
||||
|
} |
||||
|
|
||||
.module-items { |
|
||||
margin-top: 20rpx; |
|
||||
} |
|
||||
|
/* 功能列表 */ |
||||
|
.function-list { |
||||
|
padding: 0 30rpx 20rpx; |
||||
|
} |
||||
|
|
||||
.module-item { |
|
||||
|
.function-item { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
padding: 30rpx 0; |
padding: 30rpx 0; |
||||
border-bottom: 1rpx solid #f0f0f0; |
|
||||
transition: background-color 0.2s ease; |
|
||||
} |
|
||||
|
|
||||
.module-item:active { |
|
||||
background-color: #f8f9fa; |
|
||||
} |
|
||||
|
border-bottom: 1rpx solid #f1f5f9; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
.module-item:last-child { |
|
||||
|
.function-item:last-child { |
||||
border-bottom: none; |
border-bottom: none; |
||||
} |
|
||||
|
} |
||||
|
|
||||
.item-left { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
.function-item:active { |
||||
|
background: #f8fafc; |
||||
|
border-radius: 12rpx; |
||||
|
} |
||||
|
|
||||
.item-icon { |
|
||||
width: 60rpx; |
|
||||
height: 60rpx; |
|
||||
border-radius: 15rpx; |
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
||||
|
.item-left { |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
|
||||
margin-right: 25rpx; |
|
||||
} |
|
||||
|
} |
||||
|
|
||||
.item-icon .iconfont { |
|
||||
color: white; |
|
||||
|
.item-icon { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
margin-right: 20rpx; |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
font-size: 30rpx; |
font-size: 30rpx; |
||||
} |
|
||||
|
color: #1e293b; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
.item-info { |
|
||||
flex: 1; |
|
||||
} |
|
||||
|
|
||||
.item-name { |
|
||||
font-size: 30rpx; |
|
||||
color: #333; |
|
||||
margin-bottom: 8rpx; |
|
||||
} |
|
||||
|
.item-status { |
||||
|
font-size: 26rpx; |
||||
|
color: #f59e0b; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
.item-desc { |
|
||||
font-size: 24rpx; |
|
||||
color: #999; |
|
||||
margin-bottom: 5rpx; |
|
||||
} |
|
||||
|
.item-status.verified { |
||||
|
color: #10b981; |
||||
|
} |
||||
|
|
||||
.item-status { |
|
||||
font-size: 22rpx; |
|
||||
padding: 4rpx 12rpx; |
|
||||
border-radius: 12rpx; |
|
||||
background: rgba(255, 107, 107, 0.1); |
|
||||
display: inline-block; |
|
||||
} |
|
||||
|
|
||||
.text-orange { |
|
||||
color: #ff9f43; |
|
||||
background: rgba(255, 159, 67, 0.1); |
|
||||
} |
|
||||
|
.function-item:active .arrow { |
||||
|
opacity: 0.8; |
||||
|
transform: translateX(4rpx); |
||||
|
} |
||||
|
|
||||
.item-right { |
|
||||
|
|
||||
|
|
||||
|
/* 反馈弹窗 */ |
||||
|
.feedback-modal { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 1000; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
} |
|
||||
|
justify-content: center; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
.badge { |
|
||||
background: #ff6b6b; |
|
||||
color: white; |
|
||||
font-size: 20rpx; |
|
||||
min-width: 36rpx; |
|
||||
|
.feedback-modal.show { |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
.modal-mask { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0, 0, 0, 0.5); |
||||
|
backdrop-filter: blur(4rpx); |
||||
|
} |
||||
|
|
||||
|
.modal-content { |
||||
|
position: relative; |
||||
|
width: 90%; |
||||
|
max-width: 660rpx; |
||||
|
background: white; |
||||
|
border-radius: 24rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.2); |
||||
|
transform: translateY(100rpx); |
||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
} |
||||
|
|
||||
|
.feedback-modal.show .modal-content { |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
|
||||
|
.modal-header { |
||||
|
padding: 40rpx 40rpx 20rpx; |
||||
|
border-bottom: 1rpx solid #f1f5f9; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.modal-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 700; |
||||
|
color: #1e293b; |
||||
|
} |
||||
|
|
||||
|
.modal-close { |
||||
|
width: 36rpx; |
||||
height: 36rpx; |
height: 36rpx; |
||||
border-radius: 18rpx; |
|
||||
|
border-radius: 50%; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
padding: 0 8rpx; |
|
||||
margin-right: 15rpx; |
|
||||
} |
|
||||
|
background: #f1f5f9; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.modal-close:active { |
||||
|
background: #e2e8f0; |
||||
|
transform: scale(0.9); |
||||
|
} |
||||
|
|
||||
.item-right .iconfont { |
|
||||
color: #ccc; |
|
||||
|
.modal-close image { |
||||
|
width: 18rpx; |
||||
|
height: 18rpx; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
/* 反馈输入框 */ |
||||
|
.modal-body { |
||||
|
padding: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.feedback-input { |
||||
|
width: 100%; |
||||
|
min-height: 240rpx; |
||||
|
padding: 24rpx; |
||||
|
box-sizing: border-box; |
||||
|
background: #f8fafc; |
||||
|
border: 2rpx solid #e2e8f0; |
||||
|
border-radius: 16rpx; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
} |
|
||||
|
line-height: 1.5; |
||||
|
color: #1e293b; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
/* 底部操作 */ |
|
||||
.bottom-actions { |
|
||||
margin: 30rpx 40rpx; |
|
||||
animation: fadeIn 0.8s ease 0.8s both; |
|
||||
} |
|
||||
|
.feedback-input:focus { |
||||
|
border-color: #667eea; |
||||
|
background: white; |
||||
|
box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1); |
||||
|
} |
||||
|
|
||||
.system-info { |
|
||||
text-align: center; |
|
||||
|
.placeholder { |
||||
|
color: #94a3b8; |
||||
|
} |
||||
|
|
||||
|
.char-count { |
||||
|
text-align: right; |
||||
|
margin-top: 12rpx; |
||||
font-size: 24rpx; |
font-size: 24rpx; |
||||
color: #999; |
|
||||
margin-bottom: 40rpx; |
|
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
|
||||
gap: 10rpx; |
|
||||
} |
|
||||
|
justify-content: flex-end; |
||||
|
align-items: baseline; |
||||
|
gap: 4rpx; |
||||
|
} |
||||
|
|
||||
.action-buttons { |
|
||||
display: flex; |
|
||||
gap: 20rpx; |
|
||||
} |
|
||||
|
.char-count .current { |
||||
|
color: #1e293b; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
.btn { |
|
||||
flex: 1; |
|
||||
|
.char-count .total { |
||||
|
color: #94a3b8; |
||||
|
} |
||||
|
|
||||
|
.modal-footer { |
||||
|
padding: 0 40rpx 40rpx; |
||||
|
} |
||||
|
|
||||
|
.submit-btn { |
||||
|
width: 100%; |
||||
height: 88rpx; |
height: 88rpx; |
||||
|
background: #e2e8f0; |
||||
border-radius: 44rpx; |
border-radius: 44rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #94a3b8; |
||||
|
border: none; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.submit-btn.active { |
||||
|
background: linear-gradient(135deg, #667eea, #764ba2); |
||||
|
color: white; |
||||
|
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3); |
||||
|
} |
||||
|
|
||||
|
.submit-btn.active:active { |
||||
|
transform: scale(0.98); |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
|
||||
|
.submit-btn[disabled] { |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
|
||||
|
/* 昵称修改弹窗 */ |
||||
|
.nickname-modal { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 1000; |
||||
display: flex; |
display: flex; |
||||
align-items: center; |
align-items: center; |
||||
justify-content: center; |
justify-content: center; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.nickname-modal.show { |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
.nickname-modal .modal-content { |
||||
|
width: 600rpx; |
||||
|
background: white; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2); |
||||
|
transform: scale(0.8); |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.nickname-modal.show .modal-content { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
|
||||
|
.nickname-modal .modal-header { |
||||
|
padding: 40rpx 40rpx 20rpx; |
||||
|
border-bottom: 1rpx solid #f1f5f9; |
||||
|
} |
||||
|
|
||||
|
.nickname-modal .modal-body { |
||||
|
padding: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.nickname-input { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background: #f8fafc; |
||||
|
border: 2rpx solid #e2e8f0; |
||||
|
border-radius: 12rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #1e293b; |
||||
|
text-align: center; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.nickname-input:focus { |
||||
|
border-color: #667eea; |
||||
|
background: white; |
||||
|
box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1); |
||||
|
} |
||||
|
|
||||
|
.input-tip { |
||||
|
display: block; |
||||
|
font-size: 24rpx; |
||||
|
color: #94a3b8; |
||||
|
text-align: center; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.nickname-modal .modal-footer { |
||||
|
padding: 0 40rpx 40rpx; |
||||
|
display: flex; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.cancel-btn, |
||||
|
.confirm-btn { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
font-weight: 500; |
font-weight: 500; |
||||
border: none; |
|
||||
transition: all 0.3s ease; |
transition: all 0.3s ease; |
||||
} |
|
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
.btn:active { |
|
||||
transform: scale(0.98); |
|
||||
} |
|
||||
|
.cancel-btn { |
||||
|
background: #f1f5f9; |
||||
|
color: #64748b; |
||||
|
} |
||||
|
|
||||
.btn-setting { |
|
||||
background: white; |
|
||||
color: #667eea; |
|
||||
border: 2rpx solid #667eea; |
|
||||
} |
|
||||
|
.cancel-btn:active { |
||||
|
background: #e2e8f0; |
||||
|
} |
||||
|
|
||||
.btn-logout { |
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); |
|
||||
|
.confirm-btn { |
||||
|
background: linear-gradient(135deg, #667eea, #764ba2); |
||||
color: white; |
color: white; |
||||
box-shadow: 0 10rpx 20rpx rgba(255, 107, 107, 0.3); |
|
||||
} |
|
||||
|
box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3); |
||||
|
} |
||||
|
|
||||
.btn .iconfont { |
|
||||
margin-right: 10rpx; |
|
||||
|
.confirm-btn:active { |
||||
|
transform: scale(0.98); |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
|
||||
|
/* 提示信息 */ |
||||
|
.toast { |
||||
|
position: fixed; |
||||
|
top: 150rpx; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%) translateY(-100rpx); |
||||
|
background: rgba(30, 41, 59, 0.9); |
||||
|
backdrop-filter: blur(20rpx); |
||||
|
color: white; |
||||
|
padding: 20rpx 40rpx; |
||||
|
border-radius: 12rpx; |
||||
font-size: 28rpx; |
font-size: 28rpx; |
||||
} |
|
||||
|
|
||||
/* 动画效果 */ |
|
||||
@keyframes slideUp { |
|
||||
from { |
|
||||
opacity: 0; |
opacity: 0; |
||||
transform: translateY(30rpx); |
|
||||
} |
|
||||
to { |
|
||||
opacity: 1; |
|
||||
transform: translateY(0); |
|
||||
} |
|
||||
} |
|
||||
|
visibility: hidden; |
||||
|
transition: all 0.3s ease; |
||||
|
z-index: 1001; |
||||
|
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); |
||||
|
} |
||||
|
|
||||
@keyframes fadeIn { |
|
||||
from { |
|
||||
opacity: 0; |
|
||||
} |
|
||||
to { |
|
||||
|
.toast.show { |
||||
opacity: 1; |
opacity: 1; |
||||
} |
|
||||
} |
|
||||
|
|
||||
/* 响应式调整 */ |
|
||||
@media (max-width: 375px) { |
|
||||
.user-card, |
|
||||
.stats-grid, |
|
||||
.quick-actions, |
|
||||
.modules, |
|
||||
.bottom-actions { |
|
||||
margin-left: 30rpx; |
|
||||
margin-right: 30rpx; |
|
||||
} |
|
||||
} |
|
||||
|
visibility: visible; |
||||
|
transform: translateX(-50%) translateY(0); |
||||
|
} |
||||
@ -1,5 +1,4 @@ |
|||||
{ |
{ |
||||
"navigationBarTitleText":"AI问诊", |
|
||||
"navigationStyle": "custom", |
|
||||
|
"navigationBarTitleText":"AI智能问诊", |
||||
"usingComponents": {} |
"usingComponents": {} |
||||
} |
} |
||||