完善版本
This commit is contained in:
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<un-pages
|
||||
:show-nav-bar="true"
|
||||
nav-bar-title="个人设置"
|
||||
:show-back="true"
|
||||
:show-tab-bar="false"
|
||||
>
|
||||
<view class="profile-container">
|
||||
<!-- 设置选项 -->
|
||||
<view class="settings-section">
|
||||
<view class="section-title">账户设置</view>
|
||||
<view class="settings-list">
|
||||
<view class="setting-item" @tap="navigateToEdit">
|
||||
<view class="setting-left">
|
||||
<view class="setting-icon">
|
||||
<uni-icons type="person" size="20" color="#667eea"></uni-icons>
|
||||
</view>
|
||||
<view class="setting-content">
|
||||
<text class="setting-title">个人资料</text>
|
||||
<text class="setting-desc">修改头像、昵称、邮箱</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
|
||||
<view class="setting-item" @tap="navigateToPassword">
|
||||
<view class="setting-left">
|
||||
<view class="setting-icon">
|
||||
<uni-icons type="locked" size="20" color="#667eea"></uni-icons>
|
||||
</view>
|
||||
<view class="setting-content">
|
||||
<text class="setting-title">修改密码</text>
|
||||
<text class="setting-desc">定期更换密码保护账户安全</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 安全提示 -->
|
||||
<view class="security-tips">
|
||||
<view class="tip-header">
|
||||
<uni-icons type="info-filled" size="18" color="#ffa500"></uni-icons>
|
||||
<text class="tip-title">安全提示</text>
|
||||
</view>
|
||||
<view class="tip-content">
|
||||
<text class="tip-text">1. 请勿将密码告知他人</text>
|
||||
<text class="tip-text">2. 定期修改密码以确保账户安全</text>
|
||||
<text class="tip-text">3. 如遇异常请及时联系客服</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</un-pages>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: {}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadUserInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 加载用户信息
|
||||
loadUserInfo() {
|
||||
// 从本地存储获取用户信息
|
||||
this.userInfo = this.$store.state.user.userInfo || {}
|
||||
},
|
||||
|
||||
// 跳转到编辑资料页面
|
||||
navigateToEdit() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ucenter/profile/edit'
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到修改密码页面
|
||||
navigateToPassword() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ucenter/profile/password'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.35);
|
||||
animation: fadeInDown 0.6s ease-out;
|
||||
|
||||
.user-avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 30rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10rpx);
|
||||
|
||||
.avatar-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 60rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.user-name {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 12rpx;
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin: 20rpx 30rpx;
|
||||
animation: fadeInUp 0.6s ease-out 0.1s both;
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.setting-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.setting-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.setting-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.setting-title {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.setting-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.security-tips {
|
||||
margin: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
animation: fadeInUp 0.6s ease-out 0.2s both;
|
||||
|
||||
.tip-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tip-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tip-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 8rpx;
|
||||
padding-left: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user