一. 介绍uni-app：
uni-app 是基于Vue.js框架开发的一个跨平台移动应用开发框架，可以同时支持多个平台（如iOS、Android、Web等）的应用开发。采用了统一的语法和组件规范，可以大大简化跨平台开发的工作，提高开发效率。
二. 个人中心页面的功能需求：
- 用户登录和注册：实现用户登录和注册功能，包括表单验证、密码加密、用户信息存储等。
- 用户信息展示：展示用户的基本信息，例如头像、昵称、个人简介等。
- 修改用户信息：提供一种方式让用户修改个人信息，如修改头像、昵称、密码等。
- 我的收藏：展示用户收藏的内容，可以是文章、图片、视频等，同时提供取消收藏的功能。
- 我的订单：展示用户下的订单信息，包括订单编号、商品信息、订单状态等。
- 消息通知：实现消息通知功能，例如展示系统通知、私信等。
- 用户注销：提供一种方式让用户注销账号，清空用户信息并退出登录状态。
三. 页面组件的设计：
- 页面布局：采用flex布局或grid布局，对各个组件进行合理的排列。
- 头像组件：展示用户的头像图片，可以使用uni-app提供的image组件进行展示。
- 用户信息组件：展示用户的基本信息，如昵称、个人简介。可以使用text组件进行展示，并根据需要增加样式。
- 修改信息组件：提供一个按钮或者链接，进入到修改用户信息的页面。
- 收藏列表组件：展示用户收藏的内容，可以使用list组件进行实现，并配合图片、文章等相关组件展示详细信息。
- 订单列表组件：展示用户下的订单信息，可以使用list组件进行实现，并配合item组件展示详细信息。
- 消息通知组件：展示系统通知和私信等消息，可以使用list组件进行实现，并配合item组件展示详细信息。
- 注销按钮组件：提供一个按钮或链接，实现用户注销功能。
四. 数据管理和交互：
- 用户数据管理：使用uni-app提供的本地存储方法（如localStorage或uni-app的storage API）存储用户信息，并在需要的地方读取和更新用户信息。
- 用户登录和注册：使用uni-app提供的表单验证方法对用户输入进行验证，并将用户信息发送给后台服务器进行注册和登录。
- 修改用户信息：采用表单的方式获取用户输入，并将修改后的信息发送给后台服务器进行更新。
- 收藏和订单管理：将用户的收藏和订单信息存储在服务器上，在个人中心页面获取并展示相应信息。
- 消息通知：通过与后台服务器进行交互，获取系统通知和私信等消息，并在个人中心页面进行展示。
五.效果展示：
六.源码：
<template>
<view class="wrapper">
<!-- 个人资料 -->
<view>
<view class="top">
<view class="center">
<view class="center_top">
<view class="center_img" >
<!-- 这里可以放自己的静态头像 -->
<image src="/static/logo.png"></image>
<open-data type="userAvatarUrl" class="user_head"></open-data>
</view>
<view class="center_info" >
<view class="center_name">
<!-- 这里可以放自己的名称图片 -->
<view>张三</view>
</view>
<view class="center_vip">
<image class="rank_icon" src="/static/vip.png" />
<view class="vip_text">
<text>普通会员</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 统计 -->
<view class="count">
<view class="cell"> 8 <text style="color: #AAAAAA;">收藏房源</text> </view>
<view class="cell"> 14 <text style="color: #AAAAAA;">收藏店铺</text> </view>
<view class="cell"> 18 <text style="color: #AAAAAA;">关注小二</text> </view>
<view class="cell"> 84 <text style="color: #AAAAAA;">我的足迹</text> </view>
</view>
<!-- 其它 -->
<view class="extra">
<uni-list>
<uni-list-item showArrow title="联系客服" ></uni-list-item>
<uni-list-item showArrow title="意见反馈" ></uni-list-item>
<uni-list-item showArrow title="关于我们" ></uni-list-item>
</uni-list>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
computed: {
},
created(){
},
methods: {
}
};
</script>
<style scoped lang="scss">
Page {
font-size: 14px;
}
.top {
width: 100%;
height: 130px;
// background: #23EBB9;
background: #2979ff;
padding-top: 15px;
position: relative;
}
.center {
width: 95%;
height: 100px;
background: white;
display: flex;
flex-direction: column;
margin: 0 auto;
border-radius: 5px;
}
.center_top {
display: flex;
flex-direction: row;
width: 80%;
height: 80px;
margin: 0 auto;
margin-top: 20rpx;
border-bottom: 1px solid #EEEEEE;
}
.center_img {
width: 66px;
height: 66px;
border-radius: 50%;
overflow: hidden;
}
.center_img image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.center_img .user_head {
width: 100%;
height: 100%;
}
.center_info {
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-left: 30px;
}
.center_name {
font-size: 18px;
}
.center_phone {
color: #BEBEBE;
}
// .center_down {
// display: flex;
// flex-direction: row;
// width: 80%;
// height: 35px;
// margin: 0 auto;
// margin-top: 20rpx;
// }
.center_rank {
width: 50%;
height: 35px;
display: flex;
flex-direction: row;
}
.rank_text {
height: 35px;
line-height: 35px;
margin-left: 10rpx;
color: #AAAAAA;
}
.center_vip image {
width: 25px;
height: 25px;
margin-top: 15rpx;
}
.vip_icon {
width: 25px;
height: 25px;
margin-top: -10rpx;
}
.vip_text {
margin-top: -55rpx;
margin-left: 50rpx;
color: #AAAAAA;
}
.center_rank image {
width: 35px;
height: 35px;
}
.center_score {
width: 50%;
height: 35px;
display: flex;
flex-direction: row;
}
.center_score image {
width: 35px;
height: 35px;
}
.gif-wave {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: #F4F4F4;
}
.profile {
height: 375rpx;
background-color: #ea4451;
display: flex;
justify-content: center;
align-items: center;
.meta {
.avatar {
display: block;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
border: 2rpx solid #fff;
overflow: hidden;
}
.nickname {
display: block;
text-align: center;
margin-top: 20rpx;
font-size: 30rpx;
color: #fff;
}
}
}
.count {
display: flex;
margin: 0 20rpx;
height: 120rpx;
text-align: center;
border-radius: 4rpx;
background-color: #fff;
position: relative;
top: 10rpx;
.cell {
margin-top: 10rpx;
flex: 1;
padding-top: 20rpx;
font-size: 27rpx;
color: #333;
}
text {
display: block;
font-size: 24rpx;
}
}
.orders {
margin: 20rpx 20rpx 0 20rpx;
padding: 40rpx 0;
background-color: #fff;
border-radius: 4rpx;
.title {
padding-left: 20rpx;
font-size: 30rpx;
color: #333;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #eee;
margin-top: -30rpx;
}
.sorts {
padding-top: 30rpx;
text-align: center;
display: flex;
}
[class*="icon-"] {
flex: 1;
font-size: 24rpx;
&::before {
display: block;
font-size: 48rpx;
margin-bottom: 8rpx;
color: #ea4451;
}
}
}
.address {
line-height: 1;
background-color: #fff;
font-size: 30rpx;
padding: 25rpx 0 25rpx 20rpx;
margin: 10rpx 20rpx;
color: #333;
border-radius: 4rpx;
}
.extra {
margin: 10rpx 20rpx;
background-color: #fff;
border-radius: 4rpx;
.item {
line-height: 1;
padding: 25rpx 0 25rpx 20rpx;
border-bottom: 1rpx solid #eee;
font-size: 30rpx;
color: #333;
}
button {
text-align: left;
background-color: #fff;
&::after {
border: none;
border-radius: 0;
}
}
}
.icon-arrow {
position: relative;
&::before {
position: absolute;
top: 50%;
right: 20rpx;
transform: translateY(-50%);
}
}
</style>
![[Spring] 三级缓存解决循环依赖详解](https://img-blog.csdnimg.cn/76c58cfe480a4920a32de74f8b7b6ff5.png)
