wurenji-xcx/pages/main/set/changePassword.vue

<template>
	<view>
		<view :style="{width: '100%', height: windowHeight + 'px'}"></view>
		<view style="display: flex;height: 88rpx;line-height: 88rpx;padding: 10rpx 20rpx;">
			<view v-if="!passTitle" style="display: flex;">
				<u-icon name="arrow-left" @click="navigateBack"></u-icon>
			</view>
			<view style="flex: 1;text-align: center;font-size: 30rpx;font-weight: 700;margin-right: 40rpx;">
				修改密码
			</view>
		</view>
		<view class="passWorld">
			<view class="mian">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth='80'>
					<u-form-item label="旧密码" prop="password" borderBottom ref="item1">
						<view class="passwordbox">
							<u-input :password-icon="true" :password="type=='password'" class="input-box"
								v-model="userInfo.password" placeholder="请输入密码" border="none">
								<template slot="suffix">
									<u-icon size="16" @click="changetype('type')"
										:name="type!='password'?'eye-off':'eye-fill'">
									</u-icon>
								</template>
							</u-input>
						</view>
					</u-form-item>
					<u-form-item label="新密码" prop="newPassword" borderBottom ref="item1">
						<view class="passwordbox">
							<u-input :password-icon="true" :password="type2=='password'" class="input-box"
								v-model="userInfo.newPassword" placeholder="请输入新密码" border="none">
								<template slot="suffix">
									<u-icon size="16" @click="changetype('type2')"
										:name="type2!='password'?'eye-off':'eye-fill'">
									</u-icon>
								</template>
							</u-input>
						</view>
					</u-form-item>
					<u-form-item label="确认新密码" prop="confirmPassword" borderBottom ref="item1">
						<view class="passwordbox">

							<u-input :password-icon="true" :password="type3=='password'" class="input-box"
								v-model="userInfo.confirmPassword" placeholder="请确认新密码" border="none">
								<template slot="suffix">
									<u-icon size="16" @click="changetype('type3')"
										:name="type3!='password'?'eye-off':'eye-fill'">
									</u-icon>
								</template>
							</u-input>
						</view>
					</u-form-item>
				</u--form>
			</view>
			<u-toast ref="uToast"></u-toast>
			<view class="button" @click="surePass">
				确定
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					password: "",
					username: uni.getStorageSync('userInfo').username,
					newPassword: "",
					confirmPassword: "",
					token: uni.getStorageSync('token')
				},
				type: 'password',
				type2: 'password',
				type3: 'password',
				passTitle: '',
				rules: {
					password: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'change'
					}],
					newPassword: [{
						validator: (rule, value, callback) => {
							if (!value) {
								return callback(new Error('请确认新密码'));
							}
							// 	/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&.#-？!])[A-Za-z\d@$!%*?&.#-？!]{6,18}$/;
							const passwordRegex = RegExp(uni.getStorageSync('passwordReg'))
							if (!passwordRegex.test(value)) {
								return callback(new Error('规则：6-18位，含大小写字母、数字、特殊符号(@$!%*?&.#-)'));
							}
							callback();
						},
						trigger: 'change'
					}, ],
					confirmPassword: [{
						validator: (rule, value, callback) => {
							if (!value) {
								return callback(new Error('请确认新密码'));
							}
							if (value != this.userInfo.newPassword) {
								return callback(new Error('两次密码输入不一致'));
							}
							callback();
						},
						trigger: 'change'
					}],
				},

				windowHeight: uni.getWindowInfo().statusBarHeight,
			}
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules)
		},
		onBackPress(options) {
			// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
			if (options.from == 'backbutton') {
				let changePassword = uni.getStorageSync('changePassword')
				return changePassword;
			} else if (options.from == 'navigateBack') {
				return false;
			}
		},
		created() {
			let title = true;
			if (uni.getStorageSync('changePassword') == true) {
				return title = false
			}
			if (!title) {
				this.passTitle = false
			}
		},
		methods: {
			navigateBack() {
				uni.navigateBack();
			},
			changetype(e) {
				if (this[e] == 'password') {
					this[e] = 'text'
				} else {
					this[e] = 'password'
				}
			},
			surePass() {
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					this.$api.to_http(`/sys/user/password`,
						this.userInfo, "POST").then((res) => {
						if (res.data.code != 0) {
							return uni.$u.toast(res.data.msg)
						}    
						uni.setStorageSync('changePassword', true);
						uni.$u.toast('修改成功')
						setTimeout(() => {
							uni.removeStorageSync('changePassword');
							uni.removeStorageSync('token');
							uni.removeStorageSync('passwordReg');
							uni.removeStorageSync('userInfo');
							uni.redirectTo({
								url: '/pages/login/login'
							})
						}, 500)
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>
<style>
	.login .uni-checkbox-input {
		width: 36rpx !important;
		height: 36rpx;
	}
</style>
<style lang="less" scoped>
	.passWorld {
		background: #fff;
		position: absolute;
		min-height: 100%;
		width: 100%;
		box-sizing: border-box;
		padding: 2rem;

		.passwordbox {
			position: relative;
			width: 100%;

			.icion {
				position: absolute;
				right: 0rpx;
				top: 25rpx;
				z-index: 1;
			}
		}

		.button {
			background: #2561ef;
			color: #fff;
			padding: 0.5rem;
			text-align: center;
			border-radius: 0.5rem;
			margin-top: 3rem;
		}
	}
</style>