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

文章目录


前言

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

一、前提准备

1.新建分包页面

2.静态结构

3.自定义导航

二、获取和渲染

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

1.封装API接口

2.初始化调用

3.定义类型

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

4.页面渲染

三、修改用户头像

1. 调用拍照/选择图片

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

2.获取图片路径

3.上传文件

4.更新头像

四、修改用户昵称

1.封装API接口

2.定义类型

3.点击保存调用并提示


4.同步头像昵称

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

五、修改用户性别

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

六、修改用户生日

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

七、修改用户所在城市

相关推荐
web打印社区30 分钟前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗31 分钟前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长41 分钟前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅2 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_2 小时前
Chrome开发者工具
前端·chrome
YiHanXii2 小时前
this 输出题
前端·javascript·1024程序员节
楊无好2 小时前
React中ref
前端·react.js
程琬清君2 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪1002 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔662 小时前
flutter实现web端实现效果
前端·flutter