当前位置： 首页 > news >正文

uni-app个人中心

news 2025/8/16 1:34:20

一. 介绍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提供的表单验证方法对用户输入进行验证，并将用户信息发送给后台服务器进行注册和登录。
  • 修改用户信息：采用表单的方式获取用户输入，并将修改后的信息发送给后台服务器进行更新。
  • 收藏和订单管理：将用户的收藏和订单信息存储在服务器上，在个人中心页面获取并展示相应信息。
  • 消息通知：通过与后台服务器进行交互，获取系统通知和私信等消息，并在个人中心页面进行展示。

五.效果展示：

在这里插入图片描述

六.源码：

<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>
http://www.lryc.cn/news/95760.html

相关文章：

  • 只需3步，使用Stable Diffusion无限生产AI数字人视频
  • Mysql执行计划字段解释
  • Linux -- 线程
  • Android：实时更新时间
  • 24 鼠标常用事件
  • 了解 3DS MAX 3D摄像机跟踪设置：第 4 部分
  • nginx吞吐量调优
  • Python操作Excel文件，修改Excel样式（openpyxl）
  • AutoSAR系列讲解（实践篇）7.6-实验：配置SWCRTE（下）
  • 【node】使用express+gitee搭建图床，并解决防盗链问题
  • 蕨型叶分形
  • DevOps系列文章之 Git知识大全
  • JVM理论（六）执行引擎--垃圾回收
  • 贪心算法重点内容
  • 基于深度学习的高精度交通信号灯检测系统（PyTorch+Pyside6+YOLOv5模型）
  • 【3D目标检测】DSVT-2023CVPR
  • 我在VScode学Python（Python函数，Python模块导入）
  • 【目标跟踪】1、基础知识
  • 33. 搜索旋转排序数组
  • 接口自动化测试要做什么？8个步骤讲的明明白白（小白也能看懂系列）
  • Flutter 自定义 虚线 分割线
  • Java毕业设计—爱宠医院管理系统设计与实现
  • AI时代带来的图片造假危机，该如何解决
  • 【动态规划】简单多状态
  • 科技资讯|苹果计划本月推出Vision Pro头显开发套件，电池有重大更新
  • k8s 将pod节点上的文件拷贝到本地
  • Git简介与工作原理：了解Git的基本概念、版本控制系统和分布式版本控制的工作原理
  • java篇 类的进阶0x02：方法重载
  • Android11 相机拍照权限，以及解决resolveActivity返回null
  • MAXENT模型的生物多样性教程