irc_web/.svn/pristine/99/99149bd4a7d39e1c1aaca1f534ce55218e5a60b0.svn-base

<template>
  <div style="display: flex;justify-content: center">
    <div style="width: 600px;text-align: center;border: 1px solid #e6e6e6;margin-top:40px;padding:10px;">
      <div class="trial-myinfo-head" style="font-size: 30px;line-height: 120px;">
        <!-- 首次登录修改密码 -->
        {{ $t('recompose:title:init') }}
      </div>
      <el-form ref="passwordForm" v-loading="loading" label-position="right" :model="password" :rules="passwordFormRules" label-width="120px">
        <!-- 用户名 -->
        <el-form-item :label="$t('recompose:form:userName')" prop="NewUserName">
          <el-input v-model="password.NewUserName" />
        </el-form-item>
        <!-- 旧密码 -->
        <el-form-item :label="$t('recompose:form:oldPassword')" prop="OldPassWord">
          <el-input v-model="password.OldPassWord" type="password" show-password auto-complete="new-password" />
        </el-form-item>
        <!-- 新密码 -->
        <el-form-item :label="$t('recompose:form:newPassword')" prop="NewPassWord">
          <el-input v-model="password.NewPassWord" type="password" show-password auto-complete="new-password" />
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item :label="$t('recompose:form:confirmPassword')" prop="ConfirmPassWord">
          <el-input v-model="password.ConfirmPassWord" type="password" show-password auto-complete="new-password" />
        </el-form-item>
        <el-form-item style="text-align:right">
          <!-- 取消 -->
          <el-button
            size="small"
            @click="cancel"
          >
            {{ $t('recompose:button:cancel') }}
          </el-button>
          <!-- 保存 -->
          <el-button
            type="primary"
            size="small"
            @click="save"
          >
            {{ $t('recompose:button:save') }}
          </el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
import { modifyPassword } from '@/api/admin.js'
import md5 from 'js-md5'
export default {
  data() {
    return {
      password: {
        NewUserName: null
      },
      passwordFormRules: {
        NewUserName: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
        OldPassWord: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
        NewPassWord: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
          {
            required: true,
            trigger: 'blur',
            validator: this.$validatePassword
          },
        ],
        ConfirmPassWord: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
        ]
      },
      userId: null,
      loading: false
    }
  },
  mounted() {
    this.$set(this.password, 'NewUserName', this.$route.query.userName)
    if (!this.password.NewUserName) {
      // 该页面只提供给首次进入系统的用户使用
      this.$message.error(this.$t('recompose:message:warning'))
    }
  },
  methods: {
    async logout() {
      var loginType = zzSessionStorage.getItem('loginType')
      await this.$store.dispatch('user/logout')
      if (loginType) {
        this.$router.push(`/login?loginType=${loginType}`)
      } else {
        this.$router.push(`/login`)
      }
    },
    save() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
            // 两次密码输入不一致
            this.$message.error(this.$t('recompose:message:passwordDiffer'))
            return
          }
          const param = {
            NewUserName: this.password.NewUserName,
            NewPassWord: md5(this.password.NewPassWord),
            OldPassWord: md5(this.password.OldPassWord)
          }
          this.loading = true
          modifyPassword(param).then(res => {
            this.loading = false
            if (res.IsSuccess) {
              // 修改成功,请重新登录账号
              this.$message.success(this.$t('recompose:message:updatedSuccessfully'))
              setTimeout(() => {
                this.logout()
              }, 500)
            }
          }).catch(() => { this.loading = false })
        }
      })
    },
    cancel() {
      this.$refs['passwordForm'].resetFields()
    }
  }
}
</script>
<style>
  .reset-wrapper {
    padding: 20px;
  }
  .reset-wrapper .el-page-header {
    line-height: 50px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #fff;
  }
  .reset-wrapper .box-wrapper {
    width: 60%;
    margin: 20px auto;
    padding: 10px;
    color: #303133;
  }
</style>
<style scoped>
input:-webkit-autofill {
  -webkit-text-fill-color: #ededed !important;
  box-shadow: 0 0 0px 1000px transparent  inset !important;
  background-color:transparent;
  background-image: none;
  transition: background-color 50000s ease-in-out 0s;
}
input {
  background-color:transparent;
  caret-color: #fff;
}
</style>