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

文章目录


前言

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

一、前提准备

1.新建分包页面

2.静态结构

3.自定义导航

二、获取和渲染

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

1.封装API接口

2.初始化调用

3.定义类型

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

4.页面渲染

三、修改用户头像

1. 调用拍照/选择图片

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

2.获取图片路径

3.上传文件

4.更新头像

四、修改用户昵称

1.封装API接口

2.定义类型

3.点击保存调用并提示


4.同步头像昵称

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

五、修改用户性别

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

六、修改用户生日

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

七、修改用户所在城市

相关推荐
Senar1 小时前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT1 小时前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵1 小时前
01-初识前端
前端
codingandsleeping1 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码2 小时前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝2 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪3 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴3 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉3 小时前
Flutter路由模块化管理方案
前端·javascript·flutter
程序员王天3 小时前
Uniapp 自定义TabBar + 动态菜单实现教程(Vuex状态管理详解)
微信小程序·uni-app