Web_TracerMethodology/pages/resetInfo/resetInfo.vue

<template>
	<view class="form">
		<view class="formContent">
			   <view class="row noBorder">
			   	   <view class="label">用户名：</view>
				   <input class="formInput" type="text" :value="userId"  disabled />
			   </view>
			   <view class="row noBorder">
			   	   <view class="label">姓名：</view>
			   				   <input class="formInput" type="text" :value="name"  disabled />
			   </view>
			   <view class="row">
			   	   <view class="label">新密码：</view>
			   	   <input class="formInput" type="text" password @input="e=>onKeyInput(e,'password')" />
			   </view>
			   <view class="row">
			   	   <view class="label">确认新密码：</view>
			   	   <input class="formInput" type="text" password  @input="e=>onKeyInput(e,'confirmPassword')" />
			   </view>
		</view>
		<button type="primary" class="commitBtn" @click="commitHandle">确认修改</button>
		
		<tm-modal v-if="showModal">
			<view class="modalContent">
				<view class="inner">
					  <image class="normalTipIcon" src="/static/normalTipIcon.png" ></image>
					  <view class="tipText">
					  	{{modalText}}
					  </view>
					  <view class="comfirmBtn" @click="goback">确定</view>
				</view>
			</view>
		</tm-modal>
	</view>
</template>

<script>
	import encryption from "../../utils/crypto.js";
	export default {
		data() {
			return {
				showModal:false,
				userId:'',
				name:'',
				password:'',
				confirmPassword:'',
				modalText:'',
				ifCompleted:false
			};
		},
		onLoad(){
			// console.log(window.location.host);
			this.name  = uni.getStorageSync('name');
			this.userId  = uni.getStorageSync('code');
		
		},
		mounted() {
		
		},
		methods: {
			commitHandle(){
				console.log(this.password,this.confirmPassword);
				if(this.password&&this.confirmPassword){
					if(this.password != this.confirmPassword){
						this.modalText = '两次密码输入不一致！';
						this.showModal = true;
						return;
					}
					
					this.$store.dispatch({
						type: 'resetInfo/commActions',
						payload: {
							key: 'reSetPsdName',
							data: {
								password: encryption(this.password),
								confirmPassword: encryption(this.confirmPassword)
							}
						}
					}).then(data=>{
						 if(data){
							   this.ifCompleted = true;
							   this.modalText = '密码修改成功，前往重新登录！';
							   this.showModal = true
						 }
					})
				}else {
					this.modalText = '请完整填写表单信息！';
					this.showModal = true
				}	
			},
			logOut() {
				this.$store.dispatch({
					type: 'home/commActions',
					payload: {
						key: 'logout',
					}
				}).then((data)=>{
					if(data){
						uni.removeStorageSync('hiId');
						uni.removeStorageSync('permissions');
						uni.removeStorageSync('token');
						uni.removeStorageSync('code');
						uni.removeStorageSync('nowPermission');
						uni.removeStorageSync('id');
						uni.removeStorageSync('name');
						// uni.setStorageSync('hospSign', this.hospSign);
						
						uni.redirectTo({
							url: `/pages/login/login?hospSign=${uni.getStorageSync('hospSign')}`
						});
					}
				});
			},
			onKeyInput(e,key){
				 // console.log({e,key});
				 if(key=='password'){
					 this.password = e.target.value;
				 }
				 if(key=='confirmPassword'){
				 	 this.confirmPassword = e.target.value;
				 }
			},
			goback(){
				if(this.ifCompleted){
					   this.showModal = false;
					   this.logOut();
				}else {
					   this.showModal = false
				}
			}
		}
	}
</script>

<style lang="less">
	.form {
		position: relative;
		padding-top: 15rpx;
		height: 100vh;
		background: #F5F6FA;
		.formContent {
			padding: 28rpx;
			margin-top: 10rpx;
			border-radius: 5rpx;
			background-color: #FFFFFF;
			.row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 0 10rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				border: 0.62rpx solid #DADEE6;
				.label {
					font-size: 27rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
				}
				.formInput {
					height: 80rpx;
					font-size: 27rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
				}
				&.noBorder {
					border:none;
				}
				&:first-child {
					margin-bottom: 0;
				}
			}
		}
		.commitBtn {
			position: fixed;
			bottom:0rpx;
			width: 100%;
			height: 75rpx;
			line-height: 75rpx;
			margin:0 auto;
			font-size: 25rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
            border-radius: 0;
			// margin: 0 20rpx;
		}
        .modalContent {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 100vh;
			.inner {
				// position: relative;
				display: flex;
				flex-direction: column;
				// justify-content: center;
				align-items: center;
				width: 562.5rpx;
				height: 361.25rpx;
				margin: 0 auto;
				top:50%;
				padding-top: 50rpx;
				background: #FFFFFF;
				border-radius: 15rpx;
				.normalTipIcon {
					width: 80rpx;
					height:80rpx;
					margin-bottom: 28.75rpx;
				}
				.tipText {
					display: flex;
					justify-content:center;
					align-items: center;
					width: 427.5rpx;
					height: 95rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
					line-height: 31.25rpx;
					margin-bottom: 39.37rpx;
				}
				.comfirmBtn {
					width: 100%;
					height: 75rpx;
					line-height: 75rpx;
					text-align: center;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					background: #3377FF;
				}
			}
		}
	}
</style>