signuptool-ui-xcx/pages/setup/NewPasswordActivity.vue

<template>
	<view>

		<RefreshView ref="mescrollRef" :hasBack="true" text="密码设置" :useDownScroll="false" :useUpScroll="false">

			<view style="margin-top: 40rpx;display: flex;flex-direction: row;align-items: center;margin-left: 30rpx;">

				<text>新密码</text>
				<view class="inputRow">
					<input type="text" :password="page.password1" maxlength="16" @input="psdText" placeholder="请输入密码"
						class="input" />
					<image :src="page.show1" mode="aspectFit" style="width: 40rpx;height: 40rpx;" @click="show(1)">
					</image>
				</view>
			</view>
			<view style="margin-top: 10rpx;display: flex;flex-direction: row;align-items: center;margin-left: 30rpx;">
				<text>确认密码</text>
				<view class="inputRow">
					<input type="text" :password="page.password2" maxlength="16" @input="rePsdText"
						placeholder="请再次输入密码" class="input" />
					<image :src="page.show2" mode="aspectFit" style="width: 40rpx;height: 40rpx;" @click="show(2)">
					</image>
				</view>
			</view>

			<view class="condition">
				<image class="condition_img" :src="page.img1" mode="aspectFit"></image>
				<text class="condition_text" :class="{'alldata':index1===1}">密码长度为8-20个字符</text>
			</view>
			<view class="condition">
				<image class="condition_img" :src="page.img2" mode="aspectFit"></image>
				<text class="condition_text" :class="{'alldata':index2===1}">密码要包含大小写字母和数字</text>
			</view>


			<view class=" btn" @click="save">
				<text class="btnText">保存</text>
			</view>

		</RefreshView>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				index1: 0,
				index2: 0,
				page: {
					"psd": "", //密码
					"rePsd": "", //确认密码,
					password1: true,
					password2: true,
					show1: "../../static/hide-password.png",
					show2: "../../static/hide-password.png",
					"img1": "../../static/login/unfinished.png",
					"img2": "../../static/login/unfinished.png",
				}
			}
		},
		methods: {
			psdText(e) {
				this.page.psd = e.detail.value
				var psdLength = this.page.psd.length;
				if (8 <= psdLength) {
					this.index1 = 1;
					this.page.img1 = "../../static/login/finished.png"
				} else {
					this.index1 = 0;
					this.page.img1 = "../../static/login/unfinished.png"
				}
				var aaa = /[a-z]/.test(e.detail.value);
				var bbb = /\d/.test(e.detail.value);
				var ccc = /[A-Z]/.test(e.detail.value);

				if (aaa == true && bbb == true && ccc == true) {

					this.index2 = 1;
					this.page.img2 = "../../static/login/finished.png"

				} else {

					this.index2 = 0;
					this.page.img2 = "../../static/login/unfinished.png"
				}
			},
			rePsdText(e) {
				this.page.rePsd = e.detail.value
			},
			show(id) {

				let _this = this
				switch (id) {
					case 1:
						this.page.password1 = !this.page.password1
						if (this.page.password1) {
							this.page.show1 = "../../static/hide-password.png"
						} else {
							this.page.show1 = "../../static/show-password.png"
						}
						break;

					case 2:
						this.page.password2 = !this.page.password2
						if (this.page.password2) {
							this.page.show2 = "../../static/hide-password.png"
						} else {
							this.page.show2 = "../../static/show-password.png"
						}
						break;

				}

			},
			save() {
				var psdLength = this.page.psd.length;
				var rePsdLength = this.page.rePsd.length;
				if (psdLength == 0) {
					this.Toast("请输入新的密码");
					return;
				}
				
				if (rePsdLength == 0) {
					this.Toast("请输入确认新密码")
					return;
				}
				
				if (!this.index1 || !this.index2) {
					this.Toast("密码不符合条件")
					return;
				}
				
				if (rePsdLength == 0) {
					this.Toast("请输入确认密码");
					return;
				}
				if (this.page.psd != this.page.rePsd) {
					this.Toast("两次输入的密码不一致");
					return;
				}

				this.HTTP({
					url: 'aos/v1/aosUserManagement/setLoginPassWord',
					method: 'PUT',
					paramsType: "FORM",
					data: {
						sysUserSid: getApp().globalData.memberSid,
						loginPassWord: this.page.psd,// 新密码
					},
					loading: true
				}).then((res) => {
					uni.navigateBack({
						delta: 2
					})
					this.Toast("密码修改成功")

				});

			}
		}
	}
</script>

<style lang="scss">
	.inputRow {
		flex: 1;
		display: flex;
		margin-left: 30rpx;
		margin-right: 50rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		border-bottom: 0.1px #F1F1F1 solid;
		align-items: center;

		.input {
			margin-left: 20rpx;
			height: 70rpx;
			flex: 1;
			font-size: 32rpx;
		}
	}

	.condition {
		display: flex;
		align-items: center;
		margin-left: 80rpx;
		margin-top: 50rpx;

		.condition_img {
			width: 35rpx;
			height: 35rpx;
		}

		.condition_text {
			margin-left: 20rpx;
		}

		.alldata {
			margin-left: 20rpx;
			color: #2fa1f0;
		}
	}

	.btn {
		display: flex;
		width: 90%;
		height: 80rpx;
		flex-direction: column;
		background-color: $uni-base-color;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;

		.btnText {
			color: #ffffff;
			font-size: 33rpx;
		}
	}
</style>