SOURCE

<template>
  <div class="page-changePassword page-height-full">
    <div class="page-content">
      <sub-title />
      <div class="page-content-spacing page-content-double-spacing">
        <template v-if="getIsFirstLogin">
          <notice :title="noticeTitle" />
        </template>
        <div class="page-detail-form-spacing page-detail-form">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="145px" onsubmit="return false;">
            <el-form-item label="用户名">
              <el-input
                v-model="getUserName"
                autocomplete="off"
                auto-complete="new-password"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="原密码" prop="oldPass">
              <el-input
                type="password"
                autocomplete="off"
                auto-complete="new-password"
                v-model="ruleForm.oldPass"
                placeholder="请输入密码"
                minlength="8"
                maxlength="20"
                @copy.prevent.native
                @paste.prevent.native
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
              <el-input
                type="password"
                autocomplete="off"
                auto-complete="new-password"
                v-model="ruleForm.newPass"
                placeholder="8-20位必须包含数字、大小写字母、特殊字符"
                minlength="8"
                maxlength="20"
                @copy.prevent.native
                @paste.prevent.native
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input
                type="password"
                autocomplete="off"
                auto-complete="new-password"
                v-model="ruleForm.checkPass"
                placeholder="8-20位必须包含数字、大小写字母、特殊字符"
                minlength="8"
                maxlength="20"
                @copy.prevent.native
                @paste.prevent.native
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="verificationCode">
              <el-input
                ref="verifycode"
                v-model="ruleForm.verificationCode"
                @input="ruleForm.verificationCode=ruleForm.verificationCode.replace(/[^a-z0-9]/g,'')"
                autocomplete="off"
                placeholder="请输入验证码"
                minlength="4"
                maxlength="4"
                clearable
              ></el-input>
              <verifycode v-model="refresh" @change="changeVerifycode" />
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm" plain v-goBack>取消</el-button>
              <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Notice from '@/components/Notice'
import SubTitle from '@/components/SubTitle'
import Verifycode from '@/components/Verifycode'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'ChangePassword',
  components: {
    SubTitle,
    Notice,
    Verifycode
  },
  data () {
    var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&amp;*()_+`\-={}:";'&lt;&gt;?,.\\/]).{8,20}$/
    
    var reg1 = /^(?![0-9]+$)[a-z0-9A-Z]{8,20}$/ // 用户名
    var reg2 = /^[A-Za-z0-9\u4e00-\u9fa5]{0,20}$/ // 昵称
    var reg3 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'?,.\\/<>\s]).{8,20}$/  // 密码
    var reg4 =  /^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/g // 邮箱
    var reg5 = /^1[3456789]\d{9}$/ // 手机号  /^1[0-9]\d{9}$/ 
    // 字母开头+字母或者数字 /^[a-z]+[a-z0-9]{7,19}$/ 
    // 正整数或者小数 /^\d{1,}((\.\d{1,})|(\d{0,}))$/
    // 不超过100位，可包含中文、英文、数字、中英文逗号句号引号、{}、/     /^[\u4e00-\u9fa5A-Za-z0-9,\\.，。'‘’“”"//\\{\\}/]{1,100}$/
    
    var validateOldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('旧密码不能为空'))
      }
      callback()
    }
    var validateNewPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('新密码不能为空'))
      }
      if (value.length < 8 || value.length > 20 || !reg.test(value)) {
        return callback(new Error('8-20位必须包含数字、大小写字母、特殊字符'))
      }
      if (this.ruleForm.checkPass && value !== this.ruleForm.checkPass) {
        return callback(new Error('两次输入密码不一致!'))
      }
      callback()
    }
    var validateCheckPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('重复密码不能为空'))
      }
      if (value.length < 8 || value.length > 20 || !reg.test(value)) {
        return callback(new Error('8-20位必须包含数字、大小写字母、特殊字符'))
      }
      if (value !== this.ruleForm.newPass) {
        return callback(new Error('两次输入密码不一致!'))
      }
      callback()
    }
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('验证码不能为空'))
      }
      if (value.length < 4) {
        return callback(new Error('请输入4位验证码'))
      }
      callback()
    }
    return {
      noticeTitle: '你好！首次登录需重置密码。',
      ruleForm: {
        oldPass: '',
        newPass: '',
        checkPass: '',
        verificationCode: ''
      },
      rules: {
        oldPass: [
          { validator: validateOldPass, trigger: 'blur', required: true }
        ],
        newPass: [
          { validator: validateNewPass, trigger: 'blur', required: true }
        ],
        checkPass: [
          { validator: validateCheckPass, trigger: 'blur', required: true }
        ],
        verificationCode: [
          { validator: checkCode, trigger: 'blur', required: true }
        ]
      },
      refresh: false,
      loading: false
    }
  },
  computed: {
    ...mapGetters(['getUserName', 'getIsFirstLogin']),
    getParams () {
      const {
        ruleForm: {
          oldPass,
          newPass,
          checkPass,
          verificationCode
        }
      } = this
      return {
        passwd: oldPass,
        rePasswd: newPass,
        secPasswd: checkPass,
        verificationCode
      }
    }
  },
  methods: {
    ...mapActions(['getModPword', 'logout', 'setUserLogout']),
    changeVerifycode () {
      const { setVerifycode } = this
      setVerifycode()
    },
    // 设置验证码输入框：清空并聚焦
    setVerifycode () {
      const { $refs } = this
      this.ruleForm.verificationCode = ''
      this.$nextTick(() => {
        $refs.verifycode && $refs.verifycode.$el.querySelector('input').focus()
      })
    },
    async setModPword () {
      const { getModPword, getParams, loading, setUserLogout, setVerifycode } = this
      if (!loading) {
        this.loading = true
        const { resultCode, resultInfo } = await getModPword(getParams)
        if (resultCode === '000000') {
          this.$message.success('密码更改成功')
          setUserLogout()
          this.$nextTick(() => {
            location.reload()
          })
        } else {
          if (resultCode) {
            setVerifycode()
            this.refresh = true
          }
          this.$message.warning(resultInfo)
        }
        this.loading = false
      }
    },
    // 校验状态
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.setModPword()
        } else {
          return false
        }
      })
    },
    // 重置
    resetForm () {
      this.$refs['ruleForm'].resetFields()
    }
  },
  mounted () {
  },
  watch: {
    'ruleForm.verificationCode': {
      handler (val) {
        this.ruleForm.verificationCode = `${val}`.replace(/[^a-zA-Z0-9]/g, '').slice(0, 4)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
</style>