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">
			<veiw 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> -->
			</veiw>
			<veiw class="password">
				<span>新&ensp;密&ensp;码：</span>
				<input placeholder="请输入新密码" type="text" :password="showPassword" name="input"></input>
			</veiw>
			<veiw class="password">
				<span>确认密码：</span>
				<input placeholder="请确认密码" type="text" :password="showPassword" name="input"></input>
			</veiw>
		</view>
		<view class="confirm">
			<button class="confirm-btn" @click="confirmModification()">确认修改</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword: true,
			}
		},
		methods: {
			// showPwd: function() {
			//           this.showPassword = !this.showPassword;
			//            },
			confirmModification() {

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