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

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

article 2025/2/8 4:23:37

文章目录

  • 前言
  • 一、前提准备
    • 1.新建分包页面
    • 2.静态结构
    • 3.自定义导航
  • 二、获取和渲染
    • 1.封装API接口
    • 2.初始化调用
    • 3.定义类型
    • 4.页面渲染
  • 三、修改用户头像
    • 1. 调用拍照/选择图片
    • 2.获取图片路径
    • 3.上传文件
    • 4.更新头像
  • 四、修改用户昵称
    • 1.封装API接口
    • 2.定义类型
    • 3.点击保存调用并提示
    • 4.同步头像昵称
  • 五、修改用户性别
  • 六、修改用户生日
  • 七、修改用户所在城市
    • 在这里插入图片描述 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/5ba874c1c79e446cb63593d8e06d0fb2.png)

前言

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

一、前提准备

在这里插入图片描述

1.新建分包页面

在这里插入图片描述

2.静态结构

在这里插入图片描述

3.自定义导航

在这里插入图片描述

二、获取和渲染

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

1.封装API接口

在这里插入图片描述

2.初始化调用

在这里插入图片描述

3.定义类型

在这里插入图片描述
发现该用户详情类型定义中与用户登录的某些字段一样，将共有部分提取可进行封装，如下
在这里插入图片描述

4.页面渲染

在这里插入图片描述

三、修改用户头像

1. 调用拍照/选择图片

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

2.获取图片路径

3.上传文件

4.更新头像

在这里插入图片描述

四、修改用户昵称

1.封装API接口

在这里插入图片描述

2.定义类型

在这里插入图片描述

3.点击保存调用并提示

在这里插入图片描述
在这里插入图片描述

4.同步头像昵称

在修改昵称保存后并返回到上一页
在这里插入图片描述
在这里插入图片描述

五、修改用户性别

根据单选事件获取到性别，然后提交更新
在这里插入图片描述
在这里插入图片描述

六、修改用户生日

pick组件使用@change事件收集数据。
在这里插入图片描述
在这里插入图片描述

七、修改用户所在城市

在这里插入图片描述
在这里插入图片描述


http://www.kler.cn/a/535958.html

相关文章：

  • MLA 架构
  • arm 下 多线程访问同一变量 ，使用原子操作 性能差问题
  • langchain教程-2.prompt
  • Redis --- 使用GEO实现经纬度距离计算
  • NSS-DAY2
  • 【创建模式-单例模式（Singleton Pattern）】
  • 【如何将pdf颜色模式由rgb转换为cmyk模式】
  • QT 窗口A覆盖窗口B时，窗口B接受不到鼠标事件
  • AJAX 详细教程
  • 导入了fastjson2的依赖，但却无法使用相关API的解决方案
  • 二、0-1搭建springboot+vue3前后端分离-登录页面
  • 【Redis实战】投票功能
  • 深度剖析思科安全产品的特征以及技术特点
  • 【DeepSeek】DeepSeek小模型蒸馏与本地部署深度解析DeepSeek小模型蒸馏与本地部署深度解析
  • 【Elasticsearch】multi terms aggregation
  • 蓝桥杯字串简写（二分）
  • 火语言RPA--JSON提取
  • Go语言中的高阶函数
  • 【MySQL】centos 7 忘记数据库密码
  • Maven 构建生命周期与阶段详解
  • Redis存储⑤Redis五大数据类型之 List 和 Set。
  • Java面试场景题分享
  • stm32生成hex文件详解
  • 如何在 Kivy 中从按钮更新选项卡内容
  • 【重生之学习C语言----水仙花篇】
  • PostgreSQL：数据库迁移与版本控制