uniapp-sample-scan/pages/user/modify-password.vue

<template>
	<view style="padding: 20rpx;">
		<view style="padding: 30rpx;background-color: white;border-radius:50rpx">
			<u--form labelPosition="left" :model="passwordInfo" ref="uForm" labelWidth='120'>
				<u-form-item label="原密码:" prop="oldPassword" borderBottom ref="uItem" :required="true" >
					<u--input v-model="passwordInfo.oldPassword" password clearable border="none" placeholder="请输入原密码"></u--input>
				</u-form-item>
				<u-form-item label="新密码:" prop="newPassword" borderBottom ref="uItem" :required="true">
					<u--input v-model="passwordInfo.newPassword" password clearable border="none" placeholder="请输入新密码"></u--input>
				</u-form-item>
				<u-form-item label="新密码确认:" prop="newPasswordConfirm" borderBottom ref="uItem" :required="true">
					<u--input v-model="passwordInfo.newPasswordConfirm" password clearable border="none" placeholder="请重复新密码"></u--input>
				</u-form-item>
				<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
			</u--form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		modifyPassword
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				passwordInfo: {
					id: null,
					oldPassword: '',
					newPassword: '',
					newPasswordConfirm: ''
				},
				rules: {
					'oldPassword': {
						type: 'string',
						required: true,
						message: '请填写原密码',
						trigger: ['blur', 'change']
					},
					'newPassword': {
						type: 'string',
						required: true,
						message: '请填写新密码',
						trigger: ['blur', 'change']
					},
					'newPasswordConfirm': {
						type: 'string',
						required: true,
						message: '请确认新密码',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(val => {
					modifyPassword(this.passwordInfo).then(res => {
						if (res.success) {
							this.$refs.uToast.show({
								type: 'success',
								message: "密码修改成功",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
							setTimeout(()=>{
								this.logout()
							}, 1000)
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: res.message,
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							})
						}
					})
				})
			},
			logout() {
				this.$store.dispatch("LogOut").then(res => {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(option) {
			const userId = option.userId
			this.passwordInfo.id = userId
		},
	}
</script>

<style>
</style>