uni-app个人中心

电玩女神 2023-10-13 23:33 30阅读 0赞

#### 一. 介绍uni-app： ####

uni-app 是基于Vue.js框架开发的一个跨平台移动应用开发框架，可以同时支持多个平台（如iOS、Android、Web等）的应用开发。采用了统一的语法和组件规范，可以大大简化跨平台开发的工作，提高开发效率。

#### 二. 个人中心页面的功能需求： ####

1.  用户登录和注册：实现用户登录和注册功能，包括表单验证、密码加密、用户信息存储等。
2.  用户信息展示：展示用户的基本信息，例如头像、昵称、个人简介等。
3.  修改用户信息：提供一种方式让用户修改个人信息，如修改头像、昵称、密码等。
4.  我的收藏：展示用户收藏的内容，可以是文章、图片、视频等，同时提供取消收藏的功能。
5.  我的订单：展示用户下的订单信息，包括订单编号、商品信息、订单状态等。
6.  消息通知：实现消息通知功能，例如展示系统通知、私信等。
7.  用户注销：提供一种方式让用户注销账号，清空用户信息并退出登录状态。

#### 三. 页面组件的设计： ####

*  页面布局：采用flex布局或grid布局，对各个组件进行合理的排列。
 *  头像组件：展示用户的头像图片，可以使用uni-app提供的image组件进行展示。
 *  用户信息组件：展示用户的基本信息，如昵称、个人简介。可以使用text组件进行展示，并根据需要增加样式。
 *  修改信息组件：提供一个按钮或者链接，进入到修改用户信息的页面。
 *  收藏列表组件：展示用户收藏的内容，可以使用list组件进行实现，并配合图片、文章等相关组件展示详细信息。
 *  订单列表组件：展示用户下的订单信息，可以使用list组件进行实现，并配合item组件展示详细信息。
 *  消息通知组件：展示系统通知和私信等消息，可以使用list组件进行实现，并配合item组件展示详细信息。
 *  注销按钮组件：提供一个按钮或链接，实现用户注销功能。

#### 四. 数据管理和交互： ####

*  用户数据管理：使用uni-app提供的本地存储方法（如localStorage或uni-app的storage API）存储用户信息，并在需要的地方读取和更新用户信息。
 *  用户登录和注册：使用uni-app提供的表单验证方法对用户输入进行验证，并将用户信息发送给后台服务器进行注册和登录。
 *  修改用户信息：采用表单的方式获取用户输入，并将修改后的信息发送给后台服务器进行更新。
 *  收藏和订单管理：将用户的收藏和订单信息存储在服务器上，在个人中心页面获取并展示相应信息。
 *  消息通知：通过与后台服务器进行交互，获取系统通知和私信等消息，并在个人中心页面进行展示。

#### 五.效果展示： ####

![在这里插入图片描述][bef4f3cc110b48c3a166de3caff37879.png]

#### 六.源码： ####

<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>

[bef4f3cc110b48c3a166de3caff37879.png]: https://img-blog.csdnimg.cn/bef4f3cc110b48c3a166de3caff37879.png