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

news2024/11/16 0:24:36

 图标是使用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 = false
					uni.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.coloradmin.cn/o/1463223.html

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

相关文章

先进语言模型带来的变革与潜力

用户可以通过询问或交互方式与GPT-4这样的先进语言模型互动&#xff0c;开启通往知识宝库的大门&#xff0c;即时访问人类历史积累的知识、经验与智慧。像GPT-4这样的先进语言模型&#xff0c;能够将人类历史上积累的海量知识和经验整合并加以利用。通过深度学习和大规模数据训…

基于springboot+vue的知识管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

SAC8542行车记录仪解决方案

一、方案描述&#xff1a; SAC8542是高度集成的行车记录仪解决方案,主芯片为ARM Cortex A53 ,dual core, 主频高达1.2GHz&#xff0c;集成了64-bit dual-core RISC 处理器.领先的ISP及H.265/H.264/MJPEG编码器.颜色引擎&#xff0c;外置DDR3,最大容量达16Gb,速率高达2133Mbps;…

探索盲盒扭蛋机小程序开发:开启互动新纪元

在当今数字化的时代&#xff0c;小程序已经成为一种新型的应用程序形态&#xff0c;为我们的生活和工作带来了极大的便利。其中&#xff0c;盲盒扭蛋机小程序的崛起更是引领了新一轮的互动热潮。本文将深入探讨盲盒扭蛋机小程序开发的关键要素、用户体验设计以及未来的发展趋势…

我国硅胶出口量有所下降 市场集中度有望不断提升

我国硅胶出口量有所下降 市场集中度有望不断提升 硅胶又称为硅酸凝胶、氧化硅胶等&#xff0c;是一种高活性吸附材料&#xff0c;在常温常压下多表现为一种具有开放多孔结构的透明或乳白色粒状非晶态物质。相较于其它化工材料&#xff0c;硅胶具有柔软、耐高温、耐腐蚀、绝缘性…

由面试题“Redis是否为单线程”引发的思考

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

Modern C++ std::variant的5个特性+原理

1 前言 上一节《Modern C std::variant的实现原理》我们简单分析了std::variant的实现原理&#xff0c;其实要学好C编程&#xff0c;除了看优秀的代码包括标准库实现&#xff0c;读文档也是很便捷且必须的一种办法。 本节我将逐条解析文档中的五个特性&#xff0c;解析的办法有…

webstorm光标变成方块解决办法_webstorm光标变粗不能换行

webstorms光标变了 键盘上的insert是切换的快捷键&#xff0c;敲insert就可以来回切换了

C++之Easyx——图形库的基本功能(1):界面操作

最近&#xff0c;我觉得使用控制台编写游戏太没意思了&#xff01;&#xff01; 所以我开始研究图形库了~ 一、setinitmode 函数定义 void EGEAPI setinitmode(int mode, int x CW_USEDEFAULT, int y CW_USEDEFAULT); //设置初始化模式&#xff0c;mode0为普通&#xff0c…

公司网站建设费用怎么算,花销影响因素有哪些?

企业网站建设成本如何计算&#xff1f; 建立一个网站需要多少钱&#xff1f; 这个问题的答案并不容易说出来。 一般来说&#xff0c;网站建设分为模板网站和定制网站。 如果想要价格低廉&#xff0c;就选择模板建站&#xff0c;如果想要强大的推广营销功能&#xff0c;就选择定…

【数据库】达梦数据库DM8开发版安装

目录 一、达梦数据库概述 1.1 达梦数据库简介 1.2 产品特性 1.3 产品架构 二、安装前准备 2.1 新建 dmdba 用户 2.2 修改文件打开最大数 2.3 挂载镜像 2.4 新建安装目录 2.5 修改安装目录权限 三、数据库安装 3.1 命令行安装 3.2 配置环境变量 四、配置实例 4.1…

OLED透明屏厂家:开启2024年新征程

随着科技的不断进步和创新&#xff0c;OLED透明屏作为一种前沿的显示技术&#xff0c;正逐渐走进人们的视野&#xff0c;成为多个领域的焦点。在2024年2月21日这个特殊的日子&#xff0c;我们这家领先的OLED透明屏厂家正式开工&#xff0c;预示着我们将迎来一个充满机遇和挑战的…

二建过来人的大实话,信息闭塞真的很致命!

球球了&#xff0c;别像个大冤种一样&#xff0c;还没了解清楚就开始盲目的备考&#xff0c;真的会输的很惨.... 作为自信满满却一站失利的过来人&#xff0c;我有话要讲&#xff01;谁再说二建简单&#xff0c;就让她替我考 几个重要时间点&#xff1a; 报名开始&#xff1a…

Dynamo批量操作之提取族库族参数写入Excel

你好&#xff0c;我是九哥~ 今天&#xff0c;来开一个新的系列教程——Dynamo批量操作。 批量操作&#xff0c;可以说是Dynamo最擅长做的事&#xff0c;可以批量改参数值&#xff0c;批量放置族等等&#xff0c;但是批量操作起复杂的数据结构&#xff0c;还是需要一些技巧的&…

Java项目:24 基于SpringBoot+freemarker实现的人事管理系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 基于SpringBootfreemarker实现的人事管理系统分为七大模块&#xff1a;绩效考核&#xff0c;招聘管理&#xff0c;档案管理&#xff0c;工资管理&…

世界上最简单的无解问题

1990年的Cleve’s Corner专栏文章《世界上最简单的无解问题》中描述了压缩感知遇到的问题的一个简化版本。 例如&#xff0c;两个平均值为3的数字&#xff0c;这些数字是什么&#xff1f; 在我们抱怨没有足够的信息后&#xff0c;可能会回答2和4。 如果我们这样做了&#xff0c…

并发编程入门指南

文章目录 并发编程进程和线程的区别并发和并行的区别创建线程的方式线程之间的状态&#xff0c;状态之间的转换新建三个线程&#xff0c;如何保证按顺序执行wait方法和sleep的区别如何停止一个正在运行的线程synchronized关键字底层原理Monitor属于重量级锁&#xff0c;了解过锁…

Stable Diffusion 模型分享:A-Zovya RPG Artist Tools(RPG 大师工具箱)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 A-Zovya RPG Artist Tools 模型是一个针对 RPG 训练的一个模型&#xff0c;可以生成一些 R…

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

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

最新YOLOv9论文理论:使用可编程梯度信息学习您想学习的内容 | Programmable Gradient Information

YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information YOLOv9 论文地址&#xff1a;https://arxiv.org/pdf/2402.13616.pdf 摘要 当今的深度学习方法侧重于如何设计最合适的目标函数&#xff0c;以便模型的预测结果最接近真实情况。同时&…