epidemic_store/pages/changepass/changepass.vue

<template>
	<view class="user-content">
		<!-- 自定义导航 -->
		<view class="navbar-box">
			<u-navbar
			    title="修改密码"
				@leftClick="leftClick"
			    :safeAreaInsetTop="true"
			>
			</u-navbar>
		</view>
		
		<!-- 修改表单 -->
		<view class="from-box">
			<u-form
				labelPosition="left"
				:model="form"
				:rules="rules"
				ref="uForm">
				<u-form-item prop="password" leftIcon="lock-open" labelWidth="40rpx">
				   <u-input
					    v-model="form.password"
						type="text"
					    placeholder="原密码"
					    :border="true"
						clearable
				    ></u-input>
				</u-form-item>
				<u-form-item prop="newPassword" leftIcon="lock-fill" labelWidth="40rpx">
				   <u-input
					    v-model="form.newPassword"
						type="password"
					    placeholder="新密码"
					    :border="true"
						:password="newPassword"
						clearable
				    ></u-input>
				</u-form-item>
				<u-form-item prop="repNewPassword" leftIcon="lock-fill" labelWidth="40rpx">
				   <u-input
					    v-model="form.repNewPassword"
						type="password"
					    placeholder="验证新密码"
					    :border="true"
						:password="repNewPassword"
						clearable
				    ></u-input>
				</u-form-item>
			</u-form>
			<view class="btn-box">
				<u-button @click="submit" type="error">修改</u-button>
			</view>
		</view>
		
		<!-- 请求加载框 -->
		<!-- <u-overlay :show="overlayShow">
			<view class="warp">
				<view class="rect">
					<u-loading-icon color="#fff"></u-loading-icon>
				</view>
			</view>
		</u-overlay> -->
		<u-mask :show="overlayShow">
			<view class="warp">
				<view class="rect">
					<u-loading mode="circle" size="120"></u-loading>
				</view>
			</view>
		</u-mask>
		
		<u-modal
			    :show="userShow"
			   	title="错误提示" 
				@confirm="confirm"
			   	:content='content' ></u-modal>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				password: true,
				newPassword: true,
				repNewPassword: true,
				content: '登录错误',
				overlayShow: false,
				tipShow: false,
				userShow: false,
				content: '',
				form: {
					password: '',
					newPassword: '',
					repNewPassword: '',
				},
				rules: {
					'password': [
					    {
					   	    type: 'string',
					   	    required: true,
					   	    message: '请填写密码',
					     	trigger: ['blur', 'change']
					    },
						{
							min: 6,
							max: 12,
							message: '密码在6-12个字符之间'
						},   
					],
					'newPassword': [
					    {
					   	    type: 'string',
					   	    required: true,
					   	    message: '请填写新密码',
					     	trigger: ['blur', 'change']
					    },
						{
							min: 6,
							max: 12,
							message: '密码在6-12个字符之间'
						},   
					],
					'repNewPassword': [
					    {
					   	    type: 'string',
					   	    required: true,
					   	    message: '请填写验证新密码',
					     	trigger: ['blur', 'change']
					    },
						{
							min: 6,
							max: 12,
							message: '密码在6-12个字符之间'
						},   
						{
							validator: (rule, value, callback) => {
								return this.form.newPassword === this.form.repNewPassword
							},
							message: '两次密码不一致'
						},
					]
				},
			}
		},
		onReady() {
			// 设置表单校验规则
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			// 返回事件
			leftClick() {
				let canNavBack = getCurrentPages();  
				  if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				  } else {  
				    history.back();  
				  }
			},
			// 密码查看事件
			passwordEven(type) {
				this[type] = !this[type]
			},
			// 登录表单提交验证
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.overlayShow = true
						this.updateLeaderPwd()
					} else {
						uni.$u.toast('校验失败')
					}
				});
			},
			
			confirm() {
				this.userShow = false
			},
			
			// 修改登录密码接口
			async updateLeaderPwd() {
				let passwordMap = {
					password: this.form.password,
					newPassword: this.form.newPassword
				}
				const {code, data, msg} = await this.$u.api.updateLeaderPwd(passwordMap)
				this.overlayShow = false
				if (code === 200) {
					uni.$u.toast('密码修改成功,3s后跳转登录页！')
					setTimeout(() => {
						uni.navigateTo({
						    url: '/pages/login/login'
						});
					}, 3000)
				} else {
					this.userShow = true
					this.content = msg
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-content{
		padding-top: 120rpx;
		.from-box{
			padding: 0 20rpx;
			.u-form-item{
				margin-top: 20rpx;
			}
			.u-form-item /deep/ .u-form-item__body{
				padding: 20rpx 15rpx;
			}
			.u-input{
				
			}
			.u-form-item /deep/ .u-form-item__body__right__message{
				margin-left: 54rpx !important;
				margin-top: 10rpx;
			}
			
		}
		.btn-box{
			width: 80%;
			margin: auto;
			margin-top: 120rpx;
			
		}
		.btn-box /deep/ .u-button--error{
			background-color: #E32F2F;
			border-radius: 0;
			border-radius: 10rpx;
		}
		
		.warp {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
			}
		
			.rect {
				width: 120rpx;
				height: 120rpx;
			}
	}
</style>