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

ops/2025/2/7 6:47:34/

文章目录

  • 前言
  • 一、前提准备
    • 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.ppmy.cn/ops/156368.html

相关文章

python中的lambda function(ChatGPT回答)

Python 中的 lambda 函数是一个匿名函数,它没有名字,通常用于定义简单的、一次性使用的函数。它可以接受任意数量的参数,但只能有一个表达式,并且该表达式的结果就是返回值。 lambda 函数的语法是: lambda 参数1, 参…

基于HTML生成网页有什么优势

在互联网时代,网页是人们获取信息、交流互动的重要窗口,而基于HTML生成网页,是搭建网络大厦的关键。HTML语法简洁直观,标签和属性语义明确,新手也能迅速上手,创建包含基础元素的网页,极大降低了…

25寒假算法刷题 | Day1 | LeetCode 240. 搜索二维矩阵 II,148. 排序链表

目录 240. 搜索二维矩阵 II题目描述题解 148. 排序链表题目描述题解 240. 搜索二维矩阵 II 点此跳转题目链接 题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性: 每行的元素从左到右升序排列。每列的元素从上到…

Springboot中使用Elasticsearch(部署+使用+讲解 最完整)

目录 引言 一、docker中安装Elasticsearch 1、创建es专有的网络 2、开放端口 3、在es-net网络上安装es和kibana 4、可能出现的问题 5、测试 6、安装IK分词器 7、测试IK分词器 二、结合业务实战 1、准备依赖 2、配置yml 3、读取yml配置 4、准备es配置类 5、编写测…

使用Cline+deepseek实现VsCode自动化编程

要在Visual Studio Code (VS Code)中实现自动化编程,特别是使用 Cline 和 Deepseek, 你需要先了解这两个工具的基本概念和功能。Cine 可能是一个打字错误或特定领域的工具 名称,而 Deepseek 可能指的是类似于深度学习模型或某种特定的代码搜索工具。这…

如何安装LangChain软件包

前言 LangChain是一个强大的框架,用于构建使用大型语言模型(LLMs)的应用程序。它提供了一系列软件包和工具,帮助开发人员将LLMs集成到他们的工作流程中。然而,由于其模块化设计,LangChain生态系统可能会让…

Spring Boot 实例解析:配置文件占位符

随机数: 使用 random 函数,可以指定随机数和随机数范围占位符获取之前配置的值,如果没有可以指定默认值 Profile: 多 Profile 文件: 在主配置文件编写的时候,文件名可以是 application-{profile}.…

Java-日期计算(计算上个月对应的时间段,计算去年对应的时间段)

根据给定的开始时间2024.3.19结束时间2024.3.30,计算出上个月对应的时间2024.2.19, 2024.2.30,注意闰年闰月处理 在计算上个月对应的时间段时,需要注意处理闰年和月份天数不同的情况。具体来说,如果给定的 结束时间是3月30日,而上个月是2月,那么2月没有30日,应该调…