微信小程序云开发——实现 线上注册，登录的逻辑，并保存账号到云数据库（ 四 ）：修改密码

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

继上一章节柚子完成了登录的逻辑代码已经好久了，都给忘了，这一章节补上修改密码逻辑代码，修改密码相对注册登录就简单多了，很好理解，直接上代码吧：

下面是柚子写的登录页面，仅供参考：

wxml:

<view class="container">
  <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/login_bg.jpg"></image>
</view>
<view class="login_box">
  <view class="section">
    <input password='true' placeholder="请输入原始密码" value='{{old_pass}}' placeholder-class="color" bindblur='old_pass' />
    <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
  </view>
  <view class="section">
    <input password='true' placeholder="请输入新密码" value='{{pass1}}' placeholder-class="color" bindblur='pass1' />
    <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
  </view>
  <view class="section">
    <input password='true' placeholder="请确认新密码" value='{{pass2}}' placeholder-class="color" bindblur='pass2' />
    <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
  </view>
  <button class="login" type="primary" bindtap="confirm">确定</button>
</view>

wxss:

/* pages/login/login.wxss */
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.container image {
  width: 100%;
  height: 100%;
}
.login_box{
  width: 90%;
  position: absolute;
  top: 15%;
  left: 5%;
}
.section{
  width: 100%;
  border-bottom: 4rpx solid #FFF;
  margin-top: 40rpx;
  position: relative;
}
.section input{
  height: 100rpx;
  color: #FFF;
  box-sizing: border-box;
  padding-left: 80rpx;
  font-size: 36rpx;
}
.section image{
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  top: 20rpx;
  left: 10rpx;
}
.color{
  color: #FFF;
}
.login{
  margin-top: 200rpx;
}

app.wxss

/**app.wxss**/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
} 

大致样子是这样的：

js代码： 

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    old_pass: '',
    pass1: '',
    pass2: ''
  },
  old_pass(e) {
    this.setData({
      old_pass: e.detail.value
    })
  },
  pass1(e) {
    this.setData({
      pass1: e.detail.value
    })
  },
  pass2(e) {
    this.setData({
      pass2: e.detail.value
    })
  },
  confirm() {
    var that = this
    // 重置密码接口
    db.collection('login').doc(wx.getStorageSync('userId')).get().then(res => {
      if (res.data.pass1 == that.data.old_pass) {
        db.collection('login').doc(wx.getStorageSync('userId')).update({
          data: {
            pass1: that.data.pass1,
            pass2: that.data.pass2
          },
          success: function(res) {
            if (res.errMsg == 'document.update:ok') {
              wx.showToast({
                title: '重置成功',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                wx.navigateBack({
                  delta: 1
                })
              }, 1000)
            }
          }
        })
      } else {
        wx.showToast({
          title: '原始密码输入错误',
          icon: 'none',
          duration: 2000
        })
      }
    })
  },
})

就这些了，看不懂的可以留言咨询，希望能帮助到你。