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://xiahunao.cn/news/2799298.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

从源码解析Kruise(K8S)原地升级原理

从源码解析Kruise原地升级原理 本文从源码的角度分析 Kruise 原地升级相关功能的实现。 本篇Kruise版本为v1.5.2。 Kruise项目地址: https://github.com/openkruise/kruise 更多云原生、K8S相关文章请点击【专栏】查看&#xff01; 原地升级的概念 当我们使用deployment等Wor…

区块链游戏解说:什么是 Planet IX

作者&#xff1a;lesleyfootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;Planet IX Dashboard 什么是 Planet IX Planet IX&#xff0c;一个由原生 IX TOKEN 推动的 Web3 玩赚平台。作为一款 GameFi 策略游戏&#xff0c; Planet IX 上的每项资…

抠人像可抠头发丝的模型-软语义分割(Semantic Human Matting)

软语义分割&#xff08;Semantic Human Matting&#xff09; 一、Semantic Human Matting原理二、Semantic Human Matting 项目文件介绍三、数据集介绍及下载地址四、训练流程五、项目代码下载地址 哔哩哔哩详细解说&#xff08;进主页看全集&#xff09;&#xff1a; https://…

极狐GitLab 如何重置管理员密码

在之前安装极狐GitLab 的文章中提到&#xff0c;极狐GitLab 安装成功后&#xff0c;初始登录密码会放在 /etc/gitlab/initial_root_password 文件下&#xff0c;用户可以使用初始用户名 root 及文件内的初始密码即可登录极狐GitLab 实例。 但是有些情况下&#xff0c;可能会发…

Sui主网升级至V1.18.1版本

Sui主网现已升级至V1.18.1版本&#xff0c;同时Sui协议升级至36版本。其他升级要点如下所示&#xff1a; #15794 解析错误不再停止编译&#xff0c;并且后续编译阶段的诊断信息也可能包含在编译结果中&#xff0c;所以开发者可能会看到比以前更多的编译器诊断信息。 #12337 …

基于springboot + vue实现的前后端分离-酒店管理系统

项目介绍 基于springboot vue实现的酒店管理系统一共有酒店管理员和用户这两种角色。 管理员功能 登录&#xff1a;管理员可以通过登录功能进入系统&#xff0c;确保只有授权人员可以访问系统。用户管理&#xff1a;管理员可以添加、编辑和删除酒店的用户&#xff0c;包括前…

线性代数:向量组及其线性相关性

目录 向量组 向量组的线性表示 向量组等价 相关定理 向量组的线性相关性 定理 向量组 向量组的线性表示 向量组等价 相关定理 向量组的线性相关性 定理

物联网在智慧景区中的应用:提升游客体验与运营效率

目录 一、物联网技术概述 二、物联网在智慧景区中的应用 1、智能门票系统 2、智能导览系统 3、智能安全监控系统 4、智能环保系统 三、物联网在智慧景区中提升游客体验 1、提高游览便捷性 2、个性化服务体验 3、提升游客安全感 四、物联网在智慧景区中提升运营效率 …

职业技能鉴定服务中心前端静态页面(官网+证书查询)

有个朋友想做职业技能培训&#xff0c;会发证书&#xff0c;证书可以在自己网站可查。想做一个这样的网站&#xff0c;而且要特别土&#xff0c;一眼看上去像xxx官方网站&#xff0c;像jsp .net技术开发的网站。用htmlcssjquery还原了这样子一个前端页面&#xff0c;这里分享给…

【嵌入式学习】QT-Day2-Qt基础

1> 思维导图 https://lingjun.life/wiki/EmbeddedNote/20QT 2>登录界面优化 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff…

聚道云软件连接器:高科技企业财务自动化,提升效率准确性!

客户介绍&#xff1a; 某互联信息技术有限公司是一家专业从事信息技术服务的高科技企业&#xff0c;在业内享有较高的知名度和影响力。近年来&#xff0c;公司业务快速发展&#xff0c;对信息化建设提出了更高的要求。 客户痛点&#xff1a; 在传统情况下&#xff0c;该公司的…

CSS3中盒子居中

&#xff08;1&#xff09;利用定位&#xff08;子绝父相&#xff09;、margin-left、和margin-top实现 &#xff08;2&#xff09;利用定位&#xff08;子绝父相&#xff09;、transfrom属性实现 &#xff08;3&#xff09;利用flex布局实现盒子居中

C#算法(12)—对图像像素做X/Y方向的偏移

我们在上位机开发领域有时候需要对获取的图像的像素做整体的偏移,比如所有像素在X方向上偏移几个像素,或者所有像素在Y方向上偏移几个像素,本文就是开发了像素整体偏移算法来解决这个问题。 public partial class Form1 : Form{public Form1(){InitializeComponent()

亿道丨三防平板电脑厂商哪家好丨麒麟系统三防平板PAD

随着科技的飞速发展&#xff0c;人们对于移动设备的需求越来越高。然而&#xff0c;在不同的行业应用场景下&#xff0c;常规的智能平板往往无法满足特殊的工作要求。&#xff0c;亿道三防平板&#xff0c;将高可靠性与卓越性能高度结合&#xff0c;为各行各业提供卓越的移动解…

Python Web开发记录 Day1:HTML

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、HTML1、前端引入和HTML标签①前端引入②浏览…

Java SourceDataLine 播放MP3音频 显示频谱

Java SourceDataLine 播放MP3音频 显示频谱 1 添加依赖2 快速傅里叶变换2.1 FFT.java2.2 Complex.java 3 音频播放3.1 Player.java3.1 XPlayer.java 4 显示频谱5 结果 项目Value音频格式 添加依赖*.wav(JDK 原生支持)*.pcm(JDK 原生支持)*.au(JDK 原生支持)*.aiff(JDK 原生支持…

算法-搜索二维矩阵 II

1、题目来源 240. 搜索二维矩阵 II - 力扣&#xff08;LeetCode&#xff09; 2、题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#x…

电路设计(25)——4位数字频率计的multism仿真及PCB设计

1.设计要求 使用4位数码管&#xff0c;显示输入信号的频率。完成功能仿真后&#xff0c;用AD软件&#xff0c;画出原理图以及PCB。 2.电路设计 输入信号的参数为&#xff1a; 可见&#xff0c;输入为168HZ&#xff0c;测量值为170HZ&#xff0c;误差在可接受的范围内。 3.PCB设…

【紫光同创国产FPGA教程】——(盘古EU22K开发板/PGL22G第三章)数码管静态显示实验例程

本原创教程由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处&#xff08;www.meyesemi.com) 适用于板卡型号&#xff1a; 紫光同创PGL22G开发平台&#xff08;盘古EU 22K&#xff09; 仅需一根TypcC线&#xff0…

Flink Sql 自定义实现 kudu connector

Flink Sql 自定义实现 kudu connector 原理实现 众所周知啊&#xff0c;flinksql 中与其他的存储做数据的传输连接的时候&#xff0c;是需要有独特的连接器的&#xff0c;mysql redis es hbase kudu &#xff0c;不同的存储他们自己使用的协议与操作都不一样&#xff0c;所以需…