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.hqwc.cn/news/483504.html

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

相关文章

U盘出现问题的解决回顾-包括重要数据保留-格式化-取消写保护?

你好&#xff0c;这是一个老u盘的修复过程记录&#xff0c;如果有帮助就最好了。 问题 老u盘几周前还用过&#xff0c;但是昨天一插突然就坏了。 问题截图如下&#xff1a; 开始定位错误 好吧其实第一反应是拔掉u盘重新插&#xff0c;不行&#xff0c;然后重启电脑试试&#…

jmeter下载base64加密版pdf文件

一、何为base64加密版pdf文件 如下图所示&#xff0c;接口jmeter执行后&#xff0c;返回一串包含大小写英文字母、数字、、/、的长字符串&#xff0c;直接另存为pdf文件后&#xff0c;文件有大小&#xff0c;但是打不开&#xff1b;另存为doc文件后&#xff0c;打开可以看到和…

【Java从入门到精通】Java条件语句

Java 条件语句 if...else Java 中的条件语句允许程序根据条件的不同执行不同的代码块。 一个 if 语句包含一个布尔表达式和一条或多条语句。 语法 if 语句的语法如下&#xff1a; if(布尔表达式) {//如果布尔表达式为true将执行的语句 } 如果布尔表达式的值为 true&…

【虚拟仿真】Unity3D中实现3DUI,并且实现Button、InputField、Toggle等事件绑定

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 最近在项目中需要用到3DUI的展示,之前一般会用TextMeshPro进行展示: 但是,后面又需要添加按钮、Toggle等…

el-table同时固定左列和右列时,出现错误情况

最近遇到一个问题,就是需求是要求表格同时固定序号列和操作列,我们用的是饿了么组件库的el-table,如下图,出现了错误情况: 解决方法就是使用doLayout方法: 如果使用了keep-alive,可以在activated里执行doLayout方法: activated() {this.$nextTick(() => {this.$ref…

小程序端学习

P2 创建Uni-app 分离窗口 一样的Ctrl S P3 细节知识点 创建新的小程序页面

计算机网络Day03--物理层

信道复用技术 频分复用 时分复用 统计时分复用 频分复用&#xff08;FDM&#xff09; 最基本 将整个宽带分为多份&#xff0c;用户在分配到一定的频带后&#xff0c;在通信过程中自始至终都使用这个频带 所有的用户在同一时间占用不同的带宽资源&#xff0c;以并行的方式工…

掌握BeautifulSoup4:爬虫解析器的基础与实战【第91篇—BeautifulSoup4】

掌握BeautifulSoup4&#xff1a;爬虫解析器的基础与实战 网络上的信息浩如烟海&#xff0c;而爬虫技术正是帮助我们从中获取有用信息的重要工具。在爬虫过程中&#xff0c;解析HTML页面是一个关键步骤&#xff0c;而BeautifulSoup4正是一款功能强大的解析器&#xff0c;能够轻…

【王道数据结构】【chapter6图】【P234t3】

试设计一个算法&#xff0c;判断一个无向图G是否为一棵树&#xff0c;如果是一棵树&#xff0c;则算法返回true&#xff0c;否则返回false&#xff08;思路看书&#xff0c;不同于书的是我们这里采用bfs&#xff09; #include <iostream> #include <stdio.h> #incl…

基于ArcGIS Pro SDK的MVVM架构

示例结果展示 文件夹创建 相对于原始C#&#xff0c;少了Command文件夹里的类。该文件中的RelayCommand使用 ArcGIS.Desktop.Framework Properties属性配置&#xff0c;主要用于设置执行程序路径&#xff08;自带文件夹&#xff09; DarkImages用于存放深色图片&#xff08;自…

docker pullpush 生成镜像文件并push 到阿里云

pull docker docker pull ultralytics/ultralytics # 拉取yolov8的镜像仓库 docker run -it ultralytics/ultralytics # 运行镜像 conda create -n gsafety python3.8 # 创建环境 source activate gsafety # 激活环境 pip install -i https://pypi.tuna.tsinghua.edu.cn/simp…

安卓开发:挑战每天发布一个封装类02--Wav录音封装类AudioChannel 1.0

简介 库名称&#xff1a;AudioChannel 版本:1.0 由于项目需求录音并base64编码存到服务器中&#xff0c;就顺手改装了一个别人的封装类 原封装类地址:Android AudioRecord音频录制wav文件输出 - 简书 (jianshu.com) 描述&#xff1a;此封装类基于AudioRecord实现wav的音频…