有关密码框都加上小眼睛控制密码显隐

pages/upDateInfo/upDateInfo.js

@@ -13,59 +13,54 @@ Page({
       oldpassword: '', // 旧密码
       password: '', // 新密码
       confirmpassword: '', // 确认新密码
-      // count: 60, // 倒计时秒
       rsaPublicKey: '', // 公钥
     },
-    // showGetCaptcha: true
+    showOld: true,
+    typeOld: 'password',
+    show: true, // 默认显示的是闭眼睛
+    showVerify: true,
+    type: 'password',
+    typeVerify: 'password'
+  },
+  showPasswordOld(){
+    if(this.data.showOld){ // 显示睁开眼睛的时候 type="text"
+      this.setData({
+        typeOld: 'text',
+        showOld: false
+      })
+    }else{
+      this.setData({
+        typeOld: 'password',
+        showOld: true
+      })
+    }
+  },
+  showPassword(){
+    if(this.data.show){ // 显示睁开眼睛的时候 type="text"
+      this.setData({
+        type: 'text',
+        show: false
+      })
+    }else{
+      this.setData({
+        type: 'password',
+        show: true
+      })
+    }
+  },
+  showPasswordVerify(){
+    if(this.data.showVerify){ // 显示睁开眼睛的时候 type="text"
+      this.setData({
+        typeVerify: 'text',
+        showVerify: false
+      })
+    }else{
+      this.setData({
+        typeVerify: 'password',
+        showVerify: true
+      })
+    }
   },
-
-  // // 获取验证码
-  // getVerCode() {
-  //   if (/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.data.form.phone)) {
-  //     UserApi.sendCode({
-  //       phone: this.data.form.phone
-  //     }).then(res => {
-  //       // 获取成功，倒计时 start
-  //       if (res.success) {
-  //         this.countDown()
-  //       } else {
-  //         wx.showToast({
-  //           title: '获取验证码失败',
-  //           icon: 'error',
-  //           duration: 2000
-  //         })
-  //       }
-  //     })
-  //   } else {
-  //     wx.showToast({
-  //       title: '请输入正确的手机号',
-  //       icon: 'none',
-  //       duration: 2000
-  //     })
-  //   }
-  // },
-  // 倒计时
-  // countDown() {
-  //   if (countdown === 0) {
-  //     this.setData({
-  //       showGetCaptcha: true
-  //     })
-  //     countdown = 60;
-  //     return;
-  //   } else {
-  //     this.setData({
-  //       showGetCaptcha: false
-  //     })
-  //     countdown--;
-  //     this.setData({
-  //       count: countdown
-  //     })
-  //   }
-  //   setTimeout(() => {
-  //     this.countDown()
-  //   }, 1000)
-  //   // 倒计时 end
-  // },
   // 提交
   formSubmit(e) {
     if(!e.detail.value.oldpassword){

pages/upDateInfo/upDateInfo.wxml

@@ -4,27 +4,25 @@
     <view class="form-item">
       <view class="text-label">旧密码</view>
       <view class="text-value">
-        <input name="oldpassword" value="{{oldpassword}}" type="password" placeholder="请输入旧密码" />
+        <input name="oldpassword" value="{{oldpassword}}" type="{{typeOld}}" placeholder="请输入旧密码" />
+        <image src="../../assets/images/show.png" class="show" wx:if="{{!showOld}}" bindtap="showPasswordOld"></image>
+        <image src="../../assets/images/none.png" class="show" wx:if="{{showOld}}" bindtap="showPasswordOld"></image>
       </view>
     </view>
-    <!-- <view class="form-item">
-      <view class="text-label">验证码</view>
-      <view class="text-value">
-        <input name="verifyCode" value="{{verifyCode}}" placeholder="请输入验证码" />
-      </view>
-      <view wx:if="{{showGetCaptcha}}" class="captcha" bindtap="getVerCode">获取验证码</view>
-      <view wx:else="{{showGetCaptcha}}" class="captcha count">{{count}}</view>
-    </view> -->
     <view class="form-item">
       <view class="text-label">新密码</view>
       <view class="text-value">
-        <input name="password" value="{{password}}" type="password" placeholder="请输入新密码" />
+        <input name="password" value="{{password}}" type="{{type}}" placeholder="请输入新密码" />
+        <image src="../../assets/images/show.png" class="show" wx:if="{{!show}}" bindtap="showPassword"></image>
+        <image src="../../assets/images/none.png" class="show" wx:if="{{show}}" bindtap="showPassword"></image>
       </view>
     </view>
     <view class="form-item">
       <view class="text-label">确认新密码</view>
       <view class="text-value">
-        <input name="confirmpassword" value="{{confirmpassword}}" type="password" placeholder="请确认新密码" />
+        <input name="confirmpassword" value="{{confirmpassword}}" type="{{typeVerify}}" placeholder="请确认新密码" />
+        <image src="../../assets/images/show.png" class="show" wx:if="{{!showVerify}}" bindtap="showPasswordVerify"></image>
+        <image src="../../assets/images/none.png" class="show" wx:if="{{showVerify}}" bindtap="showPasswordVerify"></image>
       </view>
     </view>
     <view class="btn-area">

pages/upDateInfo/upDateInfo.wxss

@@ -5,3 +5,14 @@
 .text-label {
   width: 80px !important;
 }
+.text-value{
+  position: relative;
+}
+.show{
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  z-index: 9;
+}