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" label-width="120">
			<uni-forms-item label="原密码" name="password" required>
				<input v-model="formData.password" placeholder="请输入原密码" :password="!password1" style="width:100%" />
				<!-- <uni-icons :type="password1?'eye-filled':'eye'" size="30" @click="pass1"></uni-icons> -->
			</uni-forms-item>
			<uni-forms-item label="新密码" name="newPassword" required>
				<input v-model="formData.newPassword" placeholder="请输入新密码" :password="!password2" style="width:100%" />
				<!-- <uni-icons :type="password2?'eye-filled':'eye'" size="30" @click="pass2"></uni-icons> -->
			</uni-forms-item>
			<uni-forms-item label="确认密码" name="conWord" required >
				<input v-model="formData.conWord" placeholder="请确认新密码" :password="!password3" style="width:100%" />
				<!-- <uni-icons :type="password3?'eye-filled':'eye'" size="30" @click="pass3"></uni-icons> -->
			</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 {
				showPassword: false,
				// 表单数据
				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
								}
							}
						]
					}
				},
				password1: false,
				password2: false,
				password3: false
			}
		},
		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"
				})
			},
			pass1() {
				this.password1 = !this.password1
			},
			pass2() {
				this.password2 = !this.password2
			},
			pass3() {
				this.password3 = !this.password3
			}
		}
	}
</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
	}

	::v-deep .uni-dialog-title-text {
		color: #000000
	}

	::v-deep .uni-forms-item__content {
		display: flex;
		align-items: center;
	}
	::v-deep .is-required span{
		margin-right:8rpx
	}
</style>