uniapp微信小程序-项目实战修改密码

 图标是使用uview里面的图标,icfont也可以

以下是所有代码 

<template><view><!-- 密码三个 --><view class="password" v-for="(item,index) in userList"><view class="contentuser"><view class="user">{{item.user}}</view><view class="contentuserText"><!-- 两个框和两个眼睛 --><input v-model="passwords[index]"  maxlength=20 type="password" v-show="eyeVisible[index]" @blur="validatePassword" class="input" placeholder="请输入密码"/><input v-model="passwords[index]"   maxlength=20 type="text" v-show="!eyeVisible[index]" @blur="validatePassword" class="input" placeholder="请输入密码"/><u-icon name="eye-fill" v-if="!eyeVisible[index]" size="28"@click="togglePasswordVisibility(index)"></u-icon><u-icon name="eye-off" size="28" v-if="eyeVisible[index]"@click="togglePasswordVisibility(index)"></u-icon></view></view><view class="border"></view></view><view class="signPut" @click="signPut">更改密码</view></view>
</template>
<script>import {mapState} from 'vuex';import {putPassword}from "@/pages/utils/api.js"export default {data() {return {password:false,eyeVisible: [true, true, true], // 控制眼睛图标显示状态的数组eyefill: true,eyeoff: false,yuanmima: "12345",passwords: ["", '', ''], // 三个 input 的值分别保存在数组中,userList: [{user: "原密码",}, {user: "新密码",}, {user: "确认新密码",}]};},mounted() {},computed: {...mapState(['userExt','userPwd']),},methods: {// 密码长度要求示例:6-20位validatePassword(event) {const password = event.detail.value;if (password.length < 6 || password.length > 20) {this.password = falseuni.showToast({title: '密码长度应为6-20位',icon: 'none',duration: 2000});return;}this.password = true},togglePasswordVisibility(index) {// 使用 $set手动更新this.$set(this.eyeVisible, index, !this.eyeVisible[index]);},async signPut() {// 检查新密码和确认新密码是否匹配if (this.passwords[1] !== this.passwords[2]) {uni.showToast({title: "新密码和确认新密码不匹配",icon: "none",duration: 2000,});return;}else if(this.userPwd==this.passwords[1]){uni.showToast({title: '原密码和新密码相同无需修改',icon: 'none',duration: 2000});return}else if(this.passwords[1] == this.passwords[2]&&this.password){try{// 修改密码接口const passwordRes=await putPassword({action:"SetUpPassword",userId:this.userExt.code,OldPassword:this.passwords[0],newPassword:this.passwords[1]});if(passwordRes.Status==true){uni.showToast({title: passwordRes.Message,icon: "success",duration: 2000,});uni.reLaunch({url:"/pages/login/login"})}else{uni.showToast({title: passwordRes.Message,icon: "success",duration: 2000,});}}catch(err){console.log(err);}}else{uni.showToast({title: '密码长度应为6-20位',icon: 'none',duration: 2000});}},}}
</script><style lang="less">.input{// background-color: red;height: 100rpx;}.user {font-size: 32rpx;font-family: Inter, Inter;font-weight: 400;color: #333333;padding-left: 10rpx;}.contentuser {display: flex;// padding-right: 30rpx;box-sizing: border-box;justify-content: space-between;align-items: center;height: 116rpx;}.contentuserText {display: flex;width: 400rpx;// background-color: aqua;font-size: 28rpx;font-family: Inter, Inter;padding-right: 15rpx;font-weight: 400;color: #666666;}.border {width: 656rpx;height: 1rpx;opacity: 1;border-bottom: 0.5rpx solid #D2D2D2;}.password {box-sizing: border-box;padding-left: 40rpx;}.signPut {width: 90%;font-size: 32rpx;height: 80rpx;color: #FFFFFF;border-radius: 68rpx;margin-top: 82rpx;text-align: center;line-height: 80rpx;background-color: #F65A02;margin-left: auto;margin-right: auto;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/265174.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 热题 100 | 二叉树(二)

目录 1 543. 二叉树的直径 2 102. 二叉树的层序遍历 3 108. 将有序数组转换为二叉搜索树 菜鸟做题&#xff0c;语言是 C 1 543. 二叉树的直径 这道题和 124. 二叉树中的最大路径和 太像了 题眼&#xff1a;二叉树的 直径 是指树中任意两个节点之间 最长路径的长度 。…

软件分层(数据结构/软件逻辑上分层+举例),相连节点的概念+如何相连,为什么是层状结构(软件分层,网络协议分层+梳理协议顺序),协议分层(打电话例子)

目录 软件分层 介绍 举例 类的继承 虚拟文件系统 线程接口封装 虚拟地址空间 总结 为什么是层状的 软件分层 网络协议 原因 梳理协议顺序 相连节点 协议分层 引入 示例 实际上 逻辑上 制定出协议 软件分层 介绍 通过将软件系统划分为不同的层次,每一层都有…

常见的socket函数封装和多进程和多线程实现服务器并发

常见的socket函数封装和多进程和多线程实现服务器并发 1.常见的socket函数封装2.多进程和多线程实现服务器的并发2.1多进程服务器2.2多线程服务器2.3运行效果 1.常见的socket函数封装 accept函数或者read函数是阻塞函数&#xff0c;会被信号打断&#xff0c;我们不能让它停止&a…

人像背景分割SDK,智能图像处理

美摄科技人像背景分割SDK解决方案&#xff1a;引领企业步入智能图像处理新时代 随着科技的不断进步&#xff0c;图像处理技术已成为许多行业不可或缺的一部分。为了满足企业对于高质量、高效率人像背景分割的需求&#xff0c;美摄科技推出了一款领先的人像背景分割SDK&#xf…

自媒体博客Spimes主题源码 X7.0 | Typecho主题模版

Spimes主题专为博客、自媒体、资讯类的网站设计开发&#xff0c;自适应兼容手机、平板设备。一款简约新闻自媒体类的 Typecho 主题&#xff0c;设计上简约、干净、精致、响应式&#xff0c;后台设置更是强大而且实用的新闻自媒体类主题。 PS&#xff1a;5.0版本改动比较多&…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的生活垃圾检测与分类系统(Python+PySide6界面+训练代码)

摘要&#xff1a;本篇博客详细讲述了如何利用深度学习构建一个生活垃圾检测与分类系统&#xff0c;并且提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并进行了与前代算法YOLOv7、YOLOv6、YOLOv5的细致对比&#xff0c;展示了其在图像、视频、实时视频流和批量…

前端架构: 脚手架命令行交互核心实现之inquirer和readline的应用教程

命令行交互核心实现 核心目标&#xff1a;实现命令行行交互&#xff0c;如List命令行的交互呢比命令行的渲难度要更大&#xff0c;因为它涉及的技术点会会更多它涉及以下技术点 键盘输入的一个监听 (这里通过 readline来实现)计算命令行窗口的尺寸清屏光标的移动输出流的静默 …

网络初识(概念入门)

目录 1.局域网VS广域网 1.1局域网 1.2广域网 2.五元组 2.1 IP和端口 2.1.1 IP 2.1.2端口号 2.2协议 3.协议分层 4. TCP/IP五层模型 5.封装和分用 5.1封装 5.2分用 1.局域网VS广域网 1.1局域网 简单介绍&#xff1a;指在某一特定区域内由多台计算机组成的互联网组…

vue3个人网站电子宠物

预览 具体代码 Attack.gif Attacked.gif Static.gif Walk.gif Attack.gif Static.gif Attacked.gif Walk.gif <template><div class"pet-container" ref"petContainer"><p class"pet-msg">{{ pet.msg }}</p><img re…

vscode与vue/react环境配置

一、下载并安装VScode 安装VScode 官网下载 二、配置node.js环境 安装node.js 官网下载 会自动配置环境变量和安装npm包(npm的作用就是对Node.js依赖的包进行管理)&#xff0c;此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号&#xff1a; 配置系统变量 因为在执…

【C++进阶】STL容器--list底层剖析(迭代器封装)

目录 前言 list的结构与框架 list迭代器 list的插入和删除 insert erase list析构函数和拷贝构造 析构函数 拷贝构造 赋值重载 迭代器拷贝构造、析构函数实现问题 const迭代器 思考 总结 前言 前边我们了解了list的一些使用及其注意事项&#xff0c;今天我们进一步深入…

LeetCode53题:最大子数组和(python3)

代码思路&#xff1a; 动态规划&#xff0c;使用动态规划如果上一个数是大于0&#xff0c;则加上&#xff1b;如果小于0直接用0。这样做的好处就是最终直接是最大子数组和。 class Solution:def maxSubArray(self, nums: List[int]) -> int:for i in range(1,len(nums)):nu…

ubuntu+QT+ OpenGL环境搭建和绘图

一&#xff0c;安装OpenGL库 安装OpenGL依赖项&#xff1a;运行sudo apt install libgl1-mesa-glx命令安装OpenGL所需的一些依赖项。 安装OpenGL头文件&#xff1a;运行sudo apt install libgl1-mesa-dev命令来安装OpenGL的头文件。 安装GLUT库&#xff1a;GLUT&#xff08;Ope…

express+mysql+vue,从零搭建一个商城管理系统5--用户注册

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、新建user表二、安装bcryptjs、MD5、body-parser三、修改config/db.js四、新建config/bcrypt.js五、新建models文件夹和models/user.js五、index.js引入使用body-parser六、修改routes/user.js七、启动项…

数字化运维与AIOps

干掉传统运维的不是devops&#xff0c;不是容器化&#xff0c;而是AI。随着未来基础设施的膨胀和复杂度急剧提升&#xff0c;人类运维能力已经显得力不从心。运维最终的归宿一定是人类决策&#xff0c;AI汇报与执行。 什么是数字化运维 数字化运维是一种基于信息技术手段数字化…

【GB28181】wvp-GB28181-pro部署安装教程(Ubuntu平台)

目录 前言1 安装依赖2 安装MySQL3 安装redis4 编译ZLMediaKit代码及依赖下载编译运行&#xff08;如果要运行wvp整个项目&#xff0c;这步可以先不执行&#xff09; 5 编译wvp-pro下载源码&#xff08;建议从github上下载&#xff0c;gitee上维护有时候不是很同步&#xff09;编…

USB Micro引脚及相应原理图绘制

前言&#xff1a;博主为实现绘制USB Micro输入口原理图&#xff0c;首先在 GD32F103XX的数据手册中找到引脚的功能描述&#xff0c;找到USBDM与USBDP功能&#xff0c;分别为引脚PA11与引脚PA12。然后进行相应的原理图绘制。 * USBDM。USBDM 引脚是与通用串行总线 (Universal Se…

Python 光速入门课程

首先说一下&#xff0c;为啥小编在即PHP和Golang之后&#xff0c;为啥又要整Python&#xff0c;那是因为小编最近又拿起了 " 阿里天池 " 的东西&#xff0c;所以小编又不得不捡起来大概五年前学习的Python&#xff0c;本篇文章主要讲的是最基础版本&#xff0c;所以比…

年龄性别预测4:C/C++实现年龄性别预测和识别(含源码,可实时预测)

年龄性别预测4&#xff1a;C/C实现年龄性别预测和识别(含源码&#xff0c;可实时预测) 目录 年龄性别预测4&#xff1a;C/C实现年龄性别预测和识别(含源码&#xff0c;可实时预测) 1.年龄性别预测和识别方法 2.人脸检测方法 3.年龄性别预测和识别模型(Python) &#xff0…

prometheus+grafana监控nginx的简单实现

1.编译安装NGINX 加入编译安装nginx-module-vts模块,目的是为了获取更多的监控数据(虚拟主机&#xff0c;upstream等) nginx下载 http://nginx.org/download/nginx-1.20.2.tar.gz nginx-module-vts下载 https://github.com/vozlt/nginx-module-vts/archive/refs/tags/v0.2…