<template> <view class="container"> <form @submit="formSubmit"> <view class="box"> <view class="ct_view title"> 正在修改登录密码 </view> <view class="ct_view"> 原登录密码 <view class="input_view"> <input type="text" :password="pwd" value="" placeholder="请输入登录密码" placeholder-class="pStyle" name="loginPwd" v-model="loginPwd" v-on:input = "changeColor" /> <view :class="[!pwd ? 'icon iconfont iconopeneye' : 'icon iconfont iconcloseeye']" @click="showPwd(1)"></view> </view> </view> <view class="ct_view"> 新登录密码 <view class="input_view"> <input type="text" :password="newPwd" value="" placeholder="请输入新登录密码" placeholder-class="pStyle" name="loginNewPwd" v-model="loginNewPwd" v-on:input = "changeColor" /> <view :class="[!newPwd ? 'icon iconfont iconopeneye' : 'icon iconfont iconcloseeye']" @click="showPwd(2)"></view> </view> </view> <view class="ct_view"> 确认新登录密码 <view class="input_view"> <input type="text" :password="confirmPwd" value="" placeholder="请输入新登录密码" placeholder-class="pStyle" name="confirmLPwd" v-model="confirmLPwd" v-on:input = "changeColor" /> <view :class="[!confirmPwd ? 'icon iconfont iconopeneye' : 'icon iconfont iconcloseeye']" @click="showPwd(3)"></view> </view> </view> </view> <button form-type="submit" :class="btnColor ? '' : 'active'">确定</button> </form> </view> </template>
<script> export default { components: { }, data() { return { pwd: true, newPwd: true, confirmPwd: true, loginPwd:'', loginNewPwd:'', confirmLPwd:'', btnColor:true } }, methods: {
//填完表单控制按钮颜色 changeColor(){ if(this.loginPwd.length >=1 && this.loginNewPwd.length >=1 && this.confirmLPwd.length >=1){ this.btnColor = false; }else{ this.btnColor = true; } }, showPwd(cur) { switch (cur){ case 1: this.pwd = !this.pwd; break; case 2: this.newPwd = !this.newPwd; break; case 3: this.confirmPwd = !this.confirmPwd; break; default: break; } }, formSubmit(e){ let res = e.detail.value if(res.loginNewPwd !== res.confirmLPwd){ uni.showToast({ icon:'none', title:'确认新密码不一致', duration:2000 }) }else{ uni.showToast({ icon:'none', title:'修改成功', duration:2000, success() { uni.navigateTo({ url:'../../login/login' }) } }) } } }, } </script>
<style> page{ background: #101324; border-top: 1upx solid #2A304A; } .title{ color: #9BABCF !important; } .box{ width: 698upx; margin: 20upx auto; } .ct_view{ width: 698upx; padding: 20upx 0; margin: 0 auto; font-size: 24upx; color: #FFFFFF; line-height: 50upx; border-bottom: 1upx solid #303650; } .pStyle{ font-size: 28upx; color: #919CA7; } input{ font-size: 28upx; color: #FFFFFF; } .input_view{ display: flex; align-items: center; justify-content: space-between; } button{ width: 650upx; height: 98upx; font-size: 30upx; color: #FFFFFF; margin: 100upx auto; background: #9BABCF; line-height: 98upx; border-radius: 50upx; } .active{ background-color: #00AFFE; } </style>
