bigDataApp/pages/equipMange/index/changepasswold.vue

<template>
	<view>
		<view style="position: fixed;z-index: 100;top: 0;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="修改密码"></uni-nav-bar>
		</view>
		<u-form :model="form" ref="uForm" class="uForm">
			<view class="uFormbg">
				<u-form-item label="原始密码" left-icon="lock" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
				 prop="name">
					<u-input v-model="form.oldpass" :clearable="clearable" input-align="right" placeholder="请输入原始密码" :type="type" @blur="oldpassblur"/>
				</u-form-item>
			</view>
			<p class="tishi" v-if="oldpassisnull">请输入原始密码!</p>
			<view class="uFormbg">
				<u-form-item label="新密码" left-icon="lock" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
				 prop="name">
					<u-input v-model="form.newpass" :clearable="clearable" input-align="right" placeholder="请输入新密码" :type="type" @blur="newpassblur"/>
				</u-form-item>
			</view>
			<p class="tishi" v-if="passisnull">请输入新密码!</p>
			<view class="uFormbg">
				<u-form-item label="确认新密码" left-icon="lock" :left-icon-style="lefticonstyle" label-width="200rpx" :border-bottom="borderbottom"
				 prop="name">
					<u-input v-model="form.newpasstwo" :clearable="clearable" input-align="right" placeholder="请再次输入新密码" :type="type" @blur="tnewpassblur"/>
				</u-form-item>
			</view>
			<p class="tishi" v-if="tpassisnull">请输入新密码</p>
			<p class="tishi" v-if="passisdif">两次输入密码不一致!</p>
		</u-form>
		<view class="confirm">
			<button @click="confirm">确定</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_info: {},
				form: {
					oldpass: '',
					newpass: '',
					newpasstwo: ''
				},
				borderbottom: false,
				clearable: false,
				lefticonstyle: {
					'color': '#57C878'
				},
				oldpassisnull:false,//旧密码为空提示
				passisdif: false,//俩次密码不一致提示
				tpassisnull:false,//第二次新密码为空提示
				passisnull:false,//第一次新密码为空提示
				type: 'password'
			}
		},
		methods: {
			clickLeft() {
				uni.navigateTo({
					url: './useroperation?item=' + JSON.stringify(this.user_info)
				})
			},
			async changepwd(data) { //分配设备
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.changepwd',
					data: {
						uid: this.user_info.uid,
						old_password: this.form.oldpass,
						new_password: this.form.newpass,
						confirm_password: this.form.newpasstwo
					}
				})
			},
			confirm(){//确定按钮
			if(!(this.passisdif&&this.tpassisnull&&this.oldpassisnull&&this.passisnull)){
					this.changepwd()
			}
				
			},
			newpassblur(){//第一次新密码框提示
				if(this.form.newpass==""){
					this.passisnull=true
				}else{
					this.passisnull=false
				}
			},
			tnewpassblur(){//第二次新密码框提示
				if(this.form.newpasstwo==""){
					this.tpassisnull=true
				}else{
					this.tpassisnull=false
					if(this.form.newpass!=this.form.newpasstwo){
						this.passisdif=true
					}else{
						this.passisdif=false
					}
				}
			},
			oldpassblur(){//原始密码框提示
				if(this.form.oldpass==""){
					this.oldpassisnull=true
				}else{
					this.oldpassisnull=false
				}
			}
		},
		onLoad(option) {
			this.user_info = JSON.parse(option.item)
		}
	}
</script>

<style lang="scss">
	.uForm {
		width: 100%;
		position: relative;
		top: 44px;

		.uFormbg {
			width: 90%;
			background-color: #f3f3f3;
			margin: 20rpx auto 0;

			.u-form-item {
				width: 90%;
				padding: 10rpx 0;
				margin: 0 auto;
			}
		}

		.tishi {
			width: 100%;
			text-align: center;
			color: red;
			font-size: 12px;
		}
	}

	.confirm {
		width: 90%;
		position: relative;
		top: 150rpx;
		left: 50%;
		margin-left: -45%;

		button {
			height: 80rpx;
			line-height: 80rpx;
			background-color: $uni-color-success;
			color: white;
		}
	}
</style>