my-resetpassword.vue

<template>
	<view class="main">
		<!-- <view class="return">
			<view class="return-btn" @click="goBack"></view>
			<text>重置密码</text>
		</view> -->
		<view class="top">
			<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
			<view class="title">重置密码</view>
			<span class="empty"></span>
		</view>
		<view class="content">
			<view class="password">
				<span>原&ensp;密&ensp;码：</span>
				<input placeholder="请输入原密码" type="text" :password="showPassword" name="input"></input>
				<!-- <text :class="[!showPassword ?'cuIcon-attentionfill' : 'cuIcon-attentionforbidfill']" class="text-gray"  @click="showPwd" ></text> -->
				<!-- <input type="safe-password" :value="originalPassword" :valplaceholder='请输入原密码'></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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
				password:'1223',
				newPassword: '',
				confirmPassword: '',
			}
		},
		methods: {
			bindNewPassword(e) {
				this.newPassword = e.detail.value;
			},
			bindConfirmPassword(e) {
				this.confirmPassword = e.detail.value;
			},
			// showPwd: function() {
			//           this.showPassword = !this.showPassword;
			//            },
			confirmModification() {

				uni.showModal({
					title: '温馨提示', //提示标题
					content: '确认修改密码吗', //提示内容
					showCancel: true, //是否显示取消按钮
					success: res => {
						if (res.confirm) { //confirm为ture，代表用户点击确定
							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);
						} else if (res.cancel) { //cancel为ture，代表用户点击取消
							console.log('点击了取消按钮');
						}
					}
				})
			},

			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:'6450da43e1a35c371b3699cc',password:updata.password,newPassword:updata.newPassword}
				})
				.then(res => {
					console.log(res);
				});						
			},
			onload() {
				plus.navigator.setStatusBarBackground('#EDEEF0');
			}
		}
	}
</script>

<style>
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		/* background-color: #EDEEF0; */
	}

	.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: 10px;
		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>