read_opc/reado-app/pages/user/edit-password/index.vue

<template>
	<view class="container">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top">
			<uni-forms-item label="原密码" name="password" required>
				<input v-model="formData.password" placeholder="请输入原密码" password />
			</uni-forms-item>
			<uni-forms-item label="新密码" name="newPassword" required>
				<input v-model="formData.newPassword" placeholder="请输入新密码" password />
			</uni-forms-item>
			<uni-forms-item label="确认密码" name="conWord" required>
				<input v-model="formData.conWord" placeholder="请确认新密码" password />
			</uni-forms-item>
		</uni-forms>
		<u-button @click="submit" class="submit" type="primary">提交</u-button>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="base" title="系统提示" placeholder="请输入内容" @confirm="confirm">
				修改成功，是否重新登录？
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		encrypt
	} from '@/utils/jsencrypt.js'
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					password: null,
					newPassword: null,
					conWord: null
				},
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入原密码',
						}, ]
					},
					newPassword: {
						rules: [{
								required: true,
								errorMessage: '请输入新密码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (data.password === data.newPassword) {
										callback('不能和与原密码相同')
									}
									return true
								}
							}
						]
					},
					conWord: {
						rules: [{
								required: true,
								errorMessage: '请确认新密码',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (data.conWord !== data.newPassword) {
										callback('必须与新密码相同')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					this.$store.dispatch('user/updatePassword', this.formData).then(req => {
						if (req.data.code === 200) {
							this.$refs.inputDialog.open()
						} else {
							uni.showToast({
								title: req.data.msg,
								duration: 2000,
								icon: "error"
							});
						}
					})
				}).catch(err => {

				})
			},
			confirm() {
				uni.redirectTo({
					url: "/pages/login/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.submit {
		width: 400rpx;
		margin-top: 60rpx
	}

	::v-deep .uni-input-placeholder {
		font-size: 12px
	}

	::v-deep .uni-input-input {
		border-bottom: 1px solid #959595
	}
</style>