irc_web/.svn/pristine/c2/c213cc7ff23d77303b5ee5c0b1c426e40bf50132.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:email')" prop="Email">
          <el-input v-model="password.Email" disabled />
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item :label="$t('recompose:form:role')" prop="UserType">
          <el-input v-model="password.UserType" disabled />
        </el-form-item>
        <!-- 用户名 -->
        <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: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 { initSetUserNameAndPwd } from '@/api/admin.js'
import md5 from 'js-md5'
export default {
  data() {
    return {
      password: {
        NewUserName: null,
        UserId: null
      },
      passwordFormRules: {
        NewUserName: [{ 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.password.UserId = this.$route.query.UserId
    this.password.NewUserName = this.$route.query.UserName
    this.password.Email = this.$route.query.Email
    this.password.UserType = this.$route.query.UserType
    this.password.access_token = this.$route.query.access_token
    if (!this.password.NewUserName) {
      this.$alert(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.$alert(this.$t('recompose:message:passwordDiffer'))
            return
          }
          const param = {
            NewUserName: this.password.NewUserName,
            UserId: this.password.UserId,
            NewPwd: md5(this.password.NewPassWord),
            access_token: this.password.access_token
          }
          this.loading = true
          initSetUserNameAndPwd(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>