bigDataApp/pages/equipMange/index/changepasswold.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<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>
	</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: 54px;
		.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>