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

文章目录


前言

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

一、前提准备

1.新建分包页面

2.静态结构

3.自定义导航

二、获取和渲染

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

1.封装API接口

2.初始化调用

3.定义类型

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

4.页面渲染

三、修改用户头像

1. 调用拍照/选择图片

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

2.获取图片路径

3.上传文件

4.更新头像

四、修改用户昵称

1.封装API接口

2.定义类型

3.点击保存调用并提示


4.同步头像昵称

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

五、修改用户性别

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

六、修改用户生日

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

七、修改用户所在城市

相关推荐
心.c24 分钟前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript
爱分享的程序员31 分钟前
前端面试专栏-前沿技术:31.Serverless与云原生开发
前端·javascript·面试
姜 萌@cnblogs1 小时前
Saga Reader 0.9.9 版本亮点:深入解析核心新功能实现
前端·ai·rust
gnip2 小时前
实现elementplus官网主题切换特效
前端·css
Darling02zjh2 小时前
HTML5
前端·html·html5
成长ing121382 小时前
闪白效果
前端·cocos creator
Lazy_zheng2 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
张元清2 小时前
什么是React并发模式中的Tearing(撕裂)
前端·面试
AndyLaw2 小时前
统计字符数错一半,我被 length 坑了两次
前端·javascript
关羽的小刀2 小时前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端