jyy-smart-canteen-h5/pages/mine/me/changePassword.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view>
		<view class="changePw">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="80">
				<u-form-item label="旧密码:" prop="formData.oldPw" borderBottom>
					<u--input v-model="formData.oldPw" border="none" clearable :password="!oldPwShow" maxlength="16" placeholder="请输入旧密码">
						<template slot="suffix">
							<u-icon :name="oldPwShow?'eye-fill':'eye-off'" size="20" style="margin-left: 10rpx;" @click="showPw('oldPw')"></u-icon>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item label="新密码:" prop="formData.newPw" borderBottom>
					<u--input v-model="formData.newPw" border="none" clearable :password="!newPwShow" maxlength="16" placeholder="请输入新密码">
						<template slot="suffix">
							<u-icon :name="newPwShow?'eye-fill':'eye-off'" size="20" style="margin-left: 10rpx;" @click="showPw('newPw')"></u-icon>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item label="确认密码:" prop="formData.confirmPw">
					<u--input v-model="formData.confirmPw" border="none" clearable :password="!confirmPwShow" maxlength="16" placeholder="请确认密码">
						<template slot="suffix">
							<u-icon :name="confirmPwShow?'eye-fill':'eye-off'" size="20" style="margin-left: 10rpx;" @click="showPw('confirmPw')"></u-icon>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		
		
		<button class="verify-btn" @click="confirmPwClick()">修改</button>
	</view>
</template>

<script>
	import AES from '@/utils/aes';
	import {updateUserPwd} from "@/api/system/user";
	
	export default {
		data() {
			return {
				fontValue:uni.getStorageSync('fontSize') || 8,
				formData: {
					oldPw: '',
					newPw: '',
					confirmPw: ''
				},
				oldPwShow: false,
				newPwShow: false,
				confirmPwShow: false,
				rules: {
					'formData.oldPw': [
						{
								validator: (rule, value, callback) => {
									if(this.formData.oldPw == "") {
										return false
									}else{
										return true
									}
								},
								message: '旧密码填写错误，请检查'
						}
					],
					'formData.newPw': [
						{
								validator: (rule, value, callback) => {
									if(this.formData.confirmPw) {
										if(this.formData.newPw != this.formData.confirmPw) {
											callback(new Error('新密码与确认密码不一致，请检查'));
											return false
										}else{
											return true
										}
									}else{
										callback(new Error('请输入密码'));
									}
								}
						}
					],
					'formData.confirmPw': [
						{
								validator: (rule, value, callback) => {
									if(this.formData.newPw) {
										if(this.formData.newPw != this.formData.confirmPw) {
											callback(new Error('新密码与确认密码不一致，请检查'));
											return false
										}else{
											return true
										}
									}else{
										callback(new Error('请输入密码'));
									}
								}
						}
					]
				}
			}
		},
		methods: {
			showPw(type) {
				if(type == 'oldPw') {
					this.oldPwShow = !this.oldPwShow
				}else if(type == 'newPw') {
					this.newPwShow = !this.newPwShow
				}else if(type == 'confirmPw') {
					this.confirmPwShow = !this.confirmPwShow
				}
			},
			confirmPwClick() {
				this.$refs.uForm.validate().then(res => {
					let param = { 
						"oldPassword":this.formData.oldPw,
						"newPassword":this.formData.newPw
					}
					updateUserPwd(param).then(res => {
						if(res.code==200){
							uni.$u.toast('修改成功，请重新登录！')
							setTimeout(()=>{
								this.$tab.reLaunch('/pages/login')
							},1000)
							
						}else{
							uni.$u.toast(res.msg)
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.changePw {
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
}
/deep/.u-form-item__body {
	padding:  30rpx 0 !important;
}
.verify-btn {
  width: 90%;
  height: 72rpx;
  background: #FF8126;
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
	margin-top: 100rpx;

  &:disabled {
    opacity: 0.5;
  }

  &:active {
    opacity: 0.9;
  }
}
</style>