irc_web/src/views/recompose/index.vue

<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="$i18n.locale === 'en' ? '180px' : '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
          class="my_new_pwd"
          :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'
import { mapMutations } from 'vuex'
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.$alert(this.$t('recompose:message:warning'))
    }
  },
  methods: {
    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
    async logout() {
      var loginType = zzSessionStorage.getItem('loginType')
      await this.$store.dispatch('user/resetData')
      if (loginType) {
        this.$router.push(`/login?loginType=${loginType}`)
      } else {
        this.$router.push(`/login`)
      }
      if (!this.$i18n.locale) {
        //this.$i18n.locale = 'zh'
        //this.setLanguage('zh')
      }
      this.$updateDictionary()
    },
    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,
            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>
::v-deep .is-error {
  margin-bottom: 40px;
}
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;
}
::v-deep .is-error.my_new_pwd {
  margin-bottom: 45px;
}
</style>