jy-safe-app/pages/my/subPages/editPassword.vue

<template>
	<view class='base-info'>
		<view class="flex-info">
			<view class='label-text'>旧密码</view>
			<view class="password-info">
				<!-- <u-form-item prop="originPassword"> -->
				<u--input name='originPassword' border="none" v-model="originPassword" placeholder='请输入原密码' password />
				<!-- </u-form-item>	 -->
			</view>
		</view>
		<view class="flex-info">
			<view class='label-text'>新密码</view>
			<view class="password-info">
				<!-- <u-form-item prop="newPassword"> -->
				<u--input name='newPassword' border="none" v-model="newPassword" placeholder='请输入新密码' password />
				<!-- </u-form-item> -->
			</view>
		</view>
		<view class="flex-info">
			<view class='label-text'>确认新密码</view>
			<view class="password-info">
				<!-- <u-form-item prop="matchPassword"> -->
				<u--input name='matchPassword' border="none" v-model="matchPassword" password placeholder='请确认新密码' />
				<!-- </u-form-item> -->
			</view>
		</view>
		<view class="warn-info">密码由6-15位字母和数字组成，区分大小写</view>
		<button @click="formSubmit" type="primary" class='save-btn' :disabled="buttonDis">重置密码</button>

		<show-toast></show-toast>
	</view>
</template>

<script>
	import MD5 from 'md5'
	import {
		modifyPassword
	} from '../../../services/common'
	import showToast from '../../../components/custom/show-info/show-toast.vue'

	export default {
		data() {
			return {
				actionCode: '',
				originPassword: '',
				newPassword: '',
				matchPassword: '',
				buttonDis: true,
			}
		},
		watch: {
			originPassword: function(newVal) {
				if(newVal && this.newPassword && this.matchPassword){
					this.buttonDis = false
				}else{
					this.buttonDis = true
				}
			},
			newPassword: function(newVal) {
				if(newVal && this.originPassword && this.matchPassword){
					this.buttonDis = false
				}else{
					this.buttonDis = true
				}
			},
			matchPassword: function(newVal) {
				if(newVal && this.newPassword && this.originPassword){
					this.buttonDis = false
				}else{
					this.buttonDis = true
				}
			}
		},
		methods: {
			async formSubmit() {
					const appInfoData = uni.getStorageSync('appInfo')
					const userId = appInfoData?.User?.ID || ''

					const params = {
						Keyword: userId,
						Parameter1: MD5(this.originPassword),
						Parameter2: MD5(this.newPassword)
					}
					let eeeeeee = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/;
					if (!this.originPassword) {
						this.$showToast({
							title: "请输入原密码",
							content: "",
							icon: 'fail',
							success: res => {}
						});
						return
					}
					if (!this.newPassword) {
						this.$showToast({
							title: "请输入新密码",
							content: "",
							icon: 'fail',
							success: res => {}
						});
						return
					}
					if (!this.matchPassword) {
						this.$showToast({
							title: "请确认新密码",
							content: "",
							icon: 'fail',
							success: res => {}
						});
						return
					}
					if (this.newPassword !== this.matchPassword) {
						this.$showToast({
							title: "确认密码与新密码不一致",
							content: "",
							icon: 'fail',
							success: res => {}
						});
						return
					}
					if (!eeeeeee.test(this.newPassword)) {
						this.$showToast({
							title: "请设置6-15位的密码",
							content: "至少包含字母、数字",
							icon: 'fail',
							success: res => {}
						});
						return
					}
					const res = await modifyPassword(params)
					if (res.IsSuccessful) {
						this.$showToast({
							title: "修改密码成功",
							content: "",
							icon: 'success',
							success: res => {
								uni.removeStorageSync('accessToken')
								uni.removeStorageSync('orgId')
								uni.removeStorageSync('Tenant')
								uni.removeStorageSync('appInfo')
								uni.redirectTo({
									url: '/pages/login/index'
								})
							}
						});
					}
			},
			gainAuthCodeAction() {

			}
		}
	}
</script>

<style scoped>
	.base-info {
		padding: 10px 0px;
		width: 100%;
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		background-color: #F1F2F8;

	}

	.flex-info {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		margin-bottom: 1px;
		padding: 0px 15px;
	}

	.password-info {
		/* width: 75%; */
		padding: 15px 0px;
		flex: 1;
	}

	.label-text {
		font-size: 16px;
		width: 25%;
		margin-right: 20px;
	}

	.warn-info {
		font-size: 14px;
		color: #868A93;
		margin: 5px 0px 0px 15px;
	}

	.info-form {}

	.save-btn {
		margin: 20px 15px 0px 15px;
	}
</style>