my-resetpassword.vue

<template>
	<view class="main">
		<view class="top">
			<image @click="goBack" class="back" src="/static/discover/back.png"></image>
			<view class="title">重置密码</view>
			<span class="empty"></span>
		</view>
		<view class="content">
			<view class="password">
				<span>原&ensp;密&ensp;码：</span>
				<input placeholder="请输入原密码" @input="bindPassword" type="text" :password="showPassword"
					name="input"></input>
			</view>
			<view class="password">
				<span>新&ensp;密&ensp;码：</span>
				<input placeholder="请输入新密码" type="text" @input="bindNewPassword" :password="showPassword"
					name="input"></input>
			</view>
			<view class="password">
				<span>确认密码：</span>
				<input placeholder="请确认密码" type="text" @input="bindConfirmPassword" :password="showPassword"
					name="input"></input>
			</view>
		</view>
		<view class="confirm">
			<button class="confirm-btn" @click="confirmModification()">确认修改</button>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="提示" content="确定修改你的密码吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
				password: '',
				newPassword: '',
				confirmPassword: '',
			}
		},
		methods: {
			bindPassword(e) {
				this.password = e.detail.value;
			},
			bindNewPassword(e) {
				this.newPassword = e.detail.value;
			},
			bindConfirmPassword(e) {
				this.confirmPassword = e.detail.value;
			},
			dialogConfirm() {
				let that = this;
				let password = that.password;
				let newPassword = that.newPassword;
				let confirmPassword = that.confirmPassword;
				let updata = {};
				if (!that.isPasswordAvailable(newPassword)) {
					uni.showToast({
						title: '密码长度在8-20位！',
						icon: 'none',
						duration: 2000
					});
					return;
				} else if (!that.isConfirmPasswordAvailable(newPassword, confirmPassword)) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none',
						duration: 2000
					});
					return;
				} else {
					updata.password = password;
					updata.newPassword = newPassword;
				}
				this.Upload(updata);
				this.$refs.alertDialog.close();
			},
			dialogClose() {
				this.$refsalertDialog.close();
			},
			confirmModification() {
				this.$refs.alertDialog.open();
			},
			isPasswordAvailable(newPassword) {
				if (newPassword.length > 20 || newPassword.length < 8) {
					return false;
				} else {
					return true;
				}
			},
			isConfirmPasswordAvailable(newPassword, confirmPassword) {
				if (newPassword == confirmPassword) {
					return true;
				} else {
					return false;
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			Upload(updata) {
				uniCloud.callFunction({
						name: 'fe-my-resetpassword',
						data: {
							userId: getApp().globalData.userId,
							password: updata.password,
							newPassword: updata.newPassword
						},

					})
					.then(res => {
						uni.showToast({
							title: res.result.message,
							icon: 'none',
							duration: 2000
						});
						console.log(res);
					});
			},
			onload() {
				plus.navigator.setStatusBarBackground('#EDEEF0');
			}
		}
	}
</script>

<style>
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		font-size: 20px;
		margin-top: 15px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}

	.content {

		width: 80%;
		margin-top: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	.password {

		margin-top: 50rpx;
		height: 20%;
		display: flex;
		align-items: center;

		/* border-bottom: 1px solid #ccc; */
	}

	.password span {
		font-size: 35rpx;
	}

	.password input {
		border-bottom: 1px solid #ccc;
	}

	.confirm {
		height: 20%;
		margin-top: 20%;
	}

	.confirm-btn {
		background-color: #F1992D;
		color: #FFFFFF;
		width: 70%;
		height: 85rpx;
		line-height: 85rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 20rpx;
	}
</style>