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

news/2024/7/20 1:02:12 标签: uni-app, 微信小程序, 小程序

 图标是使用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.niftyadmin.cn/n/5385909.html

相关文章

wps电子表格(xlsx)在excel打开时,多余图形(shapes)的处理

背景&#xff1a; 1. win10, excel 打开 wps 生成的 xlsx文档&#xff1b; 2. 文档中有多余的图形,经检测为shape大类&#xff1b; 3. 文档中可见的图形可以全选后删除&#xff1b; 但是不可见部分仍然存在&#xff1b; 4. vba删除时&#xff0c;可以直接循环删除&#xff…

基于Java+小程序点餐系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

向量数据库Milvus字符串查询

因为项目需要&#xff0c;用到了向量数据库Milvus&#xff0c;刚开始都没有遇到问题&#xff0c;直到一个表的主键是字符串&#xff08;VARCHAR&#xff09;&#xff0c;在查询时刚好要以该主键作为查询条件&#xff0c;此时会出现异常&#xff0c;特此记录一下。 记住&#xf…

uniapp微信公众号H5分享

如果项目文件node_modules中没有weixin-js-sdk文件&#xff0c;则直接使用本文章提供的&#xff1b; 如果不生效&#xff0c;则在template.h5.html中引入 <script src"https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 首先引入weixin-js-…

游戏配置二级缓存一致性问题解决方案

游戏服务器进程在启动的时候&#xff0c;一般会把所有策划配置数据加载到内存里&#xff0c;将主键以及对应的记录存放在一个HashMap容器里&#xff0c;这称为一级缓存。部分功能可能还需要缓存其他数据&#xff0c;这些称为二级缓存。举个例子&#xff0c;对于如下的玩家升级表…

Python 进阶语法:JSON

1 什么是 JSON&#xff1f; 1.1 JSON 的定义 JSON 是 JavaScript Object Notation 的简写&#xff0c;字面上的意思是 JavaScript 对象标记。本质上&#xff0c;JSON 是轻量级的文本数据交换格式。轻量级&#xff0c;是拿它与另一种数据交换格式XML进行比较&#xff0c;相当轻…

nc开发刚导入项目eclipse出现莫名其妙的错误,红叉,感叹号,文件missing

解决类出现红叉 解决感叹号&#xff0c;文件missing 其他问题 右上角的视图&#xff0c;要选择java&#xff0c;如果是javaEE也会有一些文件没有展示出来。

ctfshow-web29~40-WP

web29 if(isset($_GET[c])){$c = $_GET[c];if(!preg_match("/flag/i", $c)){eval($c);}}else{highlight_file(__FILE__); } 首先先system(“ls”);查看一下文件 既然过滤了flag,那我们就fla*的形式进行匹配,结合tac命令输出flag.php文件内容