uniapp商城之用户模块【个人信息】

文章目录


前言

用户对会员信息进行更新操作,涉及到表单数据提交、图片读取、文件上传等。

一、前提准备

1.新建分包页面

2.静态结构

3.自定义导航

二、获取和渲染

登录后才可以获取用户个人信息,目前已封装请求拦截器,拦截器中自动添加了token,无需再手动添加。

1.封装API接口

2.初始化调用

3.定义类型

发现该用户详情类型定义中与用户登录的某些字段一样,将共有部分提取可进行封装,如下

4.页面渲染

三、修改用户头像

1. 调用拍照/选择图片

通过uni.chooseMedia()读取用户相册的照片或者拍照

2.获取图片路径

3.上传文件

4.更新头像

四、修改用户昵称

1.封装API接口

2.定义类型

3.点击保存调用并提示


4.同步头像昵称

在修改昵称保存后并返回到上一页

五、修改用户性别

根据单选事件获取到性别,然后提交更新

六、修改用户生日

pick组件使用@change事件收集数据。

七、修改用户所在城市

相关推荐
带娃的IT创业者3 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost4 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11064 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白4 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学5 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽5 小时前
【初学】调试 MCP Server
前端·mcp
四月_h6 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate6 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................7 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_8 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员