yogaApp/pages/user/pwdset.vue

<template>
	<view class="page">
		<view class="grace-idcard-main">
			<view class="con">
				
				<view class="icon">
					<view class="iltxt">请输入旧密码</view>
					<uni-easyinput class="itxt" v-model="pwdold" type="password" @blur="mmhandleBlur" placeholder="请输入6-20位新密码" />
				</view>
				
				<view class="icon">
					<view class="iltxt">请输入新密码</view>
					<uni-easyinput class="itxt" v-model="pwd" type="password" @blur="mmhandleBlur" placeholder="请输入6-20位新密码" />
				</view>
				
				<view class="icon">
					<view class="iltxt">再次输入密码</view>
					<uni-easyinput class="itxt" v-model="pwdagain" type="password" @blur="mmhandleBlur" placeholder="请输入6-20位新密码" />
				</view>
				<view style="margin-top:30rpx;margin-bottom:130rpx; text-align: left;">
					<text class="text-gray text-df" style="line-height: 40rpx;">
						密码必须是6-20位字符至少包括英文字母、数字、特殊符号（除空格）中2种以上。
					</text>
				</view>
				
				<view style="margin-top:60rpx; height: 120rpx;">
					<button type="primary" class="btn" @click="gotosubmit" >确认</button>
				</view>
			
			</view>
		</view>
		
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		
	</view>
</template>
<script>
	import { myCache } from '../../utils/utils.js';
export default {
	data() {
		return {
			openId:"",
			phone:"",
			userid:"",
			pwdold:"",
			pwd:'',
			pwdagain:'',
			msgType :'success',
			messageText:'', //错误提示框
		};
	},
	onLoad() {},
	onShow() {
		this.openId = myCache('openId');
		var user = myCache('user');
		this.userid = user.userid? user.userid:'';
		this.phone = user.userphone;
		if(this.userid==""||this.userid=="0"){
			uni.navigateTo({
				url: `/pages/login/login`
			});
		}
	},
	methods: {
		messageToggle(type,msg) {
			this.msgType = type;
			this.messageText = msg;
			this.$refs.message.open();
		},
		// 判断密码是否合规
		mmhandleBlur(e){
			console.log(e)
			if(e.detail.value&&!this.checkMM(e.detail.value)){
				//'密码必须是由6-20位长度的字母、数字组成，请核实！',
				this.messageToggle('error','密码必须是6-20位字符至少包括英文、数字、特殊符号中2种以上，请核实！')
			}
		},
		// 校验密码
		checkMM(mm) {
		 if (!(/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/.test(mm))) {
		   // if (!(/((^(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z_\W]{8,20}$))/.test(mm))) {
		    return false;
		  }
		  return true;
		},
		async gotosubmit() {
			 
			if(!this.pwdold){
				this.messageToggle('warn','请输入旧密码！');
				return false;
			}
			if(!this.pwd){
				this.messageToggle('warn','请输入新密码！');
				return false;
			}
			if(!this.pwdagain){
				this.messageToggle('warn','请输入确认密码！');
				return false;
			}
			if(this.pwd!==this.pwdagain){
				this.messageToggle('warn','两次输入密码不一致，请核实！');
				return false;
			}
			uni.showLoading({
				title: '数据提交中...'
			}); 
			const {data: res} = await uni.$http.post('/api/my/modifyMyInformation', {id:this.userid,password:this.pwdold,newPassword:this.pwdagain});
			console.log(res)
			if(res&&res.success){
				uni.showToast({
					title: '密码已修改！',
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 2000);
			}
			else{
				uni.showToast({
					title: '密码修改失败！请重试',
					icon: 'error',
					duration: 2000
				}) 
			}
		}
	}
};
</script>
<style lang="less" scoped>
.page{
	background: #FFF !important;
	height: 100vh;
}
::v-deep .uni-easyinput__content-input{
	font-size: 30rpx !important;
}
::v-deep .uni-easyinput__placeholder-class {
	font-size: 30rpx !important;
}
.icon{
	margin-top: 50rpx;
	margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		.iltxt{
			line-height: 44rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-bottom: 40rpx;
			display: flex;
			flex: 1;
		}
		.itxt{
			display: flex;
			flex: 1;
			font-size: 28rpx;
		}
	}
	
.btn{
		margin: 60rpx 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		height: 80rpx;
		line-height: 80rpx;
		background: #89965f;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
}
.btn:after{
	border:none;
}
.grace-idcard-main {
	margin: 50rpx 30rpx;
}
 
</style>