crm-mobile/pages_personal/resetPwd.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="修改登录密码" />

      <view class="tips">
        修改密码后，需重新登录应用
      </view>

      <view class="container">
        <view class="form">
          <view class="cell">
            <view class="cell-title">
              原密码
            </view>
            <view class="cell-body">
              <input
                v-model="form.oldPassword"
                type="text"
                :maxlength="20"
                :password="!checkedStatus"
                placeholder="请输入原密码"
                placeholder-class="wk-placehoder placeholder"
                class="input-core">
              <!-- <text
								v-if="focusFlag.oldPassword && form.oldPassword"
								class="wk wk-close-fill"
								@click="handleClear('oldPassword')" /> -->
            </view>
          </view>

          <view class="cell">
            <view class="cell-title">
              新密码
            </view>
            <view class="cell-body">
              <input
                v-model="form.newPassword"
                type="text"
                :maxlength="20"
                :password="!checkedStatus"
                placeholder="请输入新密码，由6-20位字母、数字组成"
                placeholder-class="wk-placehoder placeholder"
                class="input-core">
            </view>
          </view>

          <view class="cell">
            <view class="cell-title">
              确认密码
            </view>
            <view class="cell-body">
              <input
                v-model="form.confirmPassword"
                type="text"
                :maxlength="20"
                :password="!checkedStatus"
                placeholder="请确认新密码"
                placeholder-class="wk-placehoder placeholder"
                class="input-core">
            </view>
          </view>

          <view class="checkbox-cell" @tap.stop="changeTaskStatus">
            <view
              :class="{over: checkedStatus}"
              class="checkbox">
              <span v-if="checkedStatus" class="icon wk wk-check" />
            </view>
            <text class="checkbox-label">
              显示密码
            </text>
          </view>
        </view>

        <view class="submit" @click="handleSubmit">
          确认修改
        </view>
      </view>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        type="warning"
        @confirm="handleDialogConfirm" />
    </uni-popup>
  </view>
</template>

<script>
  import { UpdatePassword } from 'API/admin'

  import WkFieldInput from '@/components/wk-form/wk-field-input.vue'

  import { mapGetters } from 'vuex'

  export default {
    name: 'ResetPassword',
    data() {
      return {
        form: {
          oldPassword: null,
          newPassword: null,
          confirmPassword: null,
        },

        focusFlag: {
          oldPassword: false,
          newPassword: false,
          confirmPassword: false
        },

        dialogMsg: '',

        checkedStatus: false
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'user/userInfo'
      })
    },
    methods: {
      changeTaskStatus() {
        this.checkedStatus = !this.checkedStatus
      },

      changeFocusFlag(type, val = false) {
        this.$set(this.focusFlag, type, val)
      },

      handleClear(type) {
        console.log('handleClear', this.form)
        this.$set(this.form, type, '')
        this.$set(this.focusFlag, type, true)
      },

      handleSubmit() {
        if (!this.form.oldPassword) {
          this.$toast('原密码不能为空！')
          return
        }
        const pwdReg = /^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/
        if (!pwdReg.test(this.form.newPassword)) {
          this.$toast('密码由6到20位数字、字母组成')
          return
        }
        if (this.form.newPassword !== this.form.confirmPassword) {
          this.$toast('两次密码不一致请重新输入！')
          return
        }

        this.dialogMsg = '您确定要修改登录密码吗？'
        this.$refs.popup.open()
      },

      handleDialogConfirm(next) {
        next()
        let params = {
          id: this.userInfo.userId,
          oldPwd: this.form.oldPassword,
          newPwd: this.form.newPassword,
        }
        UpdatePassword(params).then(() => {
          this.$toast('修改成功，即将跳转重新登录')
          setTimeout(() => {
            this.$Router.reLaunch('/pages/login/index')
          }, 3000)
        }).catch()
      }
    }
  }
</script>

<style scoped lang="scss">
.placeholder {
  font-size: 24rpx;
  color: $light;
}
.main-container {
  flex: 1;

  .tips {
    width: 100%;
    height: 76rpx;
    line-height: 76rpx;
    font-size: $wk-font-sm;
    color: $gray;
    background-color: #EBEEF1;
    padding: 0 45rpx;
  }

  .container {
    flex: 1;
    background-color: white;
    .form {
      padding: 0 45rpx;
      margin-top: 15rpx;
      .cell {
        margin-bottom: 20rpx;
        .cell-title {
          width: 100%;
          font-size: $wk-font-base;
          margin-bottom: 15rpx;
        }
        .cell-body {
          position: relative;
          .input-core {
            width: 100%;
            height: 80rpx;
            font-size: 28rpx;
            border: 1rpx solid #D2D2D2;
            border-radius: 8rpx;
            padding: 0 28rpx;
          }
          .wk-close-fill {
            position: absolute;
            top: 50%;
            right: 18rpx;
            transform: translateY(-50%);
            color: $light;
            font-size: $wk-font-base;
          }
        }
      }

      .checkbox-cell {
        width: 180rpx;
        @include left;
        .checkbox {
          width: 32rpx;
          height: 32rpx;
          margin-right: 15rpx;
          border: 1rpx solid #ccc;
          border-radius: 6rpx;
          overflow: hidden;
          @include center;
          .icon {
            font-size: $wk-font-mini;
            line-height: 1;
            color: white;
          }
          &.over {
            background-color: $theme-color;
            border-color: $theme-color;
          }
        }
        .checkbox-label {
          font-size: $wk-font-base;
        }
      }
    }

    .submit {
      width: 650rpx;
      height: 85rpx;
      text-align: center;
      font-size: 34rpx;
      line-height: 85rpx;
      color: white;
      background-color: $theme-color;
      border-radius: 16rpx;
      margin: 110rpx auto 0;
    }
  }
}
</style>