parking_inspection/pages/mine/changePassword/changePassword.vue

<template>
	<view class="password">
		<u--form labelPosition="left" :model="changeForm" :rules="rules" ref="changeForm">
			<u-form-item label="" prop="newPass" borderBottom labelWidth="0" :style="{'marginBottom': '30rpx'}">
				<u--input v-model="changeForm.newPass" border="none" prefixIcon="lock"
					prefixIconStyle="font-size: 40rpx;color: #638EE3" placeholder="输入新密码"
					placeholderStyle="font-size: 24rpx" password></u--input>
			</u-form-item>
			<u-form-item label="" prop="confirmPass" borderBottom labelWidth="0">
				<u--input v-model="changeForm.confirmPass" border="none" prefixIcon="lock"
					prefixIconStyle="font-size: 40rpx;color: #638EE3" placeholder="确认新密码"
					placeholderStyle="font-size: 24rpx" password></u--input>
			</u-form-item>
			<u-form-item label="" labelWidth="0">
				<view class="confirm-button">
					<u-button type="primary" text="确认" color="#638EE3" :customStyle="{borderRadius: '20rpx'}"
						@click="submitChangeForm" :loading="loading"></u-button>
				</view>
			</u-form-item>
		</u--form>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				changeForm: {
					newPass: '',
					confirmPass: ''
				},
				rules: {
					newPass: {
						type: 'string',
						required: true,
						message: '输入新密码',
						trigger: ['blur', 'change']
					},
					confirmPass: {
						type: 'string',
						required: true,
						message: '输入确认密码',
						trigger: ['blur', 'change']
					}
				},
				loading: false
			}
		},
		methods: {
			submitChangeForm() {
				this.$refs.changeForm.validate().then(res => {
					console.log(this.changeForm)
					if (this.changeForm.newPass === this.changeForm.confirmPass) {
						this.loading = true
						this.$refs.uToast.show({
							type: 'success',
							title: '提示',
							message: "修改成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
						setTimeout(() => {
							uni.$u.route({
								url: 'pages/mine/mine',
								type: 'switchTab'
							})
						}, 2000)
					} else {
						this.$refs.uToast.show({
							type: 'warning',
							title: '提示',
							message: "两次密码不一致",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/warning.png'
						})
					}
				}).catch(error => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.password {
		padding: 100rpx 68rpx;

		.confirm-button {
			width: 100%;
			margin-top: 200rpx;
		}
	}
</style>