nxdt-uniapp/pages/mine/pwd/index.vue

<template>
  <view>
    <Navbar title="修改密码" />
    <u-cell-group :border="false">
      <u-cell icon="/static/images/imgs/password.png" title="密码" :border="false" />
      <div class="ipt">
        <u-input
          placeholder="请输入原密码"
          border="none"
          v-model="user.oldPassword"
          :password="showOldPsw"
          clearable
          maxlength="26"
          @blur="verify"
        >
          <template slot="suffix">
            <u-icon :name="showOldPsw ? unLook : look" size="18" @click="showOldPsw = !showOldPsw" />
          </template>
        </u-input>
      </div>
      <div class="line"><u-line></u-line></div>

      <u-cell icon="/static/images/imgs/password.png" title="新密码" :border="false" />
      <div class="ipt">
        <u-input
          placeholder="请输入新密码"
          border="none"
          v-model="user.newPassword"
          :password="showNewPsw"
          clearable
          maxlength="26"
          @blur="verify"
        >
          <template slot="suffix">
            <u-icon :name="showNewPsw ? unLook : look" size="18" @click="showNewPsw = !showNewPsw" />
          </template>
        </u-input>
      </div>
      <div class="line"><u-line></u-line></div>

      <u-cell icon="/static/images/imgs/password.png" title="确认新密码" :border="false" />
      <div class="ipt">
        <u-input
          placeholder="请再次输入新密码"
          border="none"
          v-model="user.confirmPassword"
          :password="showConfirmPsw"
          clearable
          maxlength="26"
          @blur="verify"
        >
          <template slot="suffix">
            <u-icon :name="showConfirmPsw ? unLook : look" size="18" @click="showConfirmPsw = !showConfirmPsw" />
          </template>
        </u-input>
      </div>
      <div class="line"><u-line></u-line></div>

      <!-- 提示 -->
      <div class="hint">
        <p>注意：密码必须包含大写字母，小写字母，数字，特殊符号，四种至少包含三种，且密码长度为8-26位之间。</p>
      </div>
    </u-cell-group>

    <div class="sub-btn">
      <u-button type="primary" shape="circle" text="提交" style="margin-bottom: 20px" @click="submit" />
      <u-button shape="circle" text="取消" @click="goBack" />
    </div>
  </view>
</template>

<script>
import { updateUserPwd } from '@/api/system/user'
import { logout } from '@/api/login'
import { regPassword } from '@/utils/regular'
import { decryptCBC } from '@/utils/aescbc'

export default {
  data() {
    return {
      isLoading: false,
      showOldPsw: true,
      showNewPsw: true,
      showConfirmPsw: true,
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      look: '/static/images/imgs/look.png',
      unLook: '/static/images/imgs/un-look.png',
      // 通过验证
      isVerify: false
    }
  },
  mounted() {},
  methods: {
    // 失去焦点 校验
    verify() {
      if (!this.user.oldPassword) {
        this.$u.toast('原密码不能为空')
        this.isVerify = false
        return
      }
      if (!this.user.newPassword) {
        this.$u.toast('新密码不能为空')
        this.isVerify = false
        return
      }
      if (!regPassword(this.user.newPassword)) {
        this.$u.toast('请输入正确的密码格式')
        this.isVerify = false
        return
      }
      if (!this.user.confirmPassword) {
        this.$u.toast('确认密码不能为空')
        this.isVerify = false
        return
      }
      if (this.user.newPassword !== this.user.confirmPassword) {
        this.$u.toast('两次密码输入不一致')
        this.isVerify = false
        return
      }
      this.isVerify = true
    },
    goBack() {
      uni.navigateBack()
    },
    submit() {
      this.verify()
      if (!this.isVerify) return
      if (this.isLoading) return
      this.isLoading = true
      uni.showLoading({
        title: '加载中'
      })
      updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
        this.$modal.msgSuccess('修改成功')
        // 关闭加载
        uni.hideLoading()
        // 退出登录
        this.$store.dispatch('LogOut').then(res => {
          uni.reLaunch({ url: '/pages/login' })
          setTimeout(() => {
            this.isLoading = false
          }, 1000)
        })
      }).catch((err) => {
        console.log('🚀 ~ updateUserPwd ~ err:', err)
        setTimeout(() => {
          this.isLoading = false
          uni.hideLoading()
        }, 500)
      })
    }
  }
}
</script>

<style lang="scss">
.item {
  padding: 0 8px;
}
.line {
  margin: 0 15px 15px;
}
.hint {
  margin: 0 15px;
  font-weight: 400;
  font-size: 12px;
  color: rgba(15, 39, 75, 0.6);
  p::before {
    content: '注意：';
    color: #e31414;
  }
}
.sub-btn {
  height: 50vh;
  margin: 0 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.ipt {
  height: 30px;
  margin: 0 15px;
}
</style>