smartai2dian0/src/views/SettingsPassword.vue

<template>
  <div>
    <a-form ref="ref_form" :model="form" :style="{ width: '900px' }">
      <a-form-item field="password_current" :label="$t('settings.current_password')" required>
        <a-input-password
          v-model="form.password_current"
          :placeholder="$t('settings.placeholder_cur_password')"
          allow-clear
        >
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item field="password_new_1" :label="$t('settings.new_password')" required>
        <a-input-password
          v-model="form.password_new_1"
          :placeholder="$t('settings.placeholder_new1_password')"
          allow-clear
        >
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item field="password_new_2" :label="$t('settings.confirm_password')" required>
        <a-input-password
          v-model="form.password_new_2"
          :placeholder="$t('settings.placeholder_new2_password')"
          allow-clear
        >
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <div class="setting-password-btn-container">
          <a-space>
            <a-button class="submit-btn">{{ $t('settings.btn_cancel') }} </a-button>

            <a-button
              class="submit-btn"
              type="primary"
              html-type="submit"
              :loading="loading"
              @click="handleUpdatePassword"
              >{{ $t('settings.btn_submit') }}
            </a-button>
          </a-space>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

import { Message } from '../3rd-libs/arco-vue-libs';

import { changeUserPassword } from '../apis/login';
import { encrypt } from '../utils/jsencrypt';

const router = useRouter();
const i18n = useI18n();

const form = reactive({
  password_current: '',
  password_new_1: '',
  password_new_2: ''
});

const loading = ref(false);

const handleUpdatePassword = () => {
  const pre = form.password_current;
  const new_1 = form.password_new_1;
  const new_2 = form.password_new_2;

  if (!pre || !new_1 || !new_2) {
    return;
  }

  if (new_1 !== new_2) {
    // console.log('新密码两次输入不一致，请确认后再修改');
    const msg = i18n.t('settings.warning_not_match');

    Message.error(msg);
    return;
  }

  const pre_pswd = encrypt(pre); // 加密后的旧密码
  const new_pswd = encrypt(new_1); // 加密后的新密码

  loading.value = true;
  changeUserPassword(pre_pswd, new_pswd)
    .then((res) => {
      // {"code":200,"msg":"user pwd change success","data":{}}

      const code = res.code / 1;

      if (code === 200) {
        // 成功: 清空原先的值
        form.password_current = '';
        form.password_new_1 = '';
        form.password_new_2 = '';
        const msg = i18n.t('settings.update_success');
        Message.success(msg);
      } else {
        // 失败
        const msg = i18n.t('settings.update_fail');
        Message.warning(msg);
      }

      loading.value = false;
    })
    .catch((err) => {
      console.log(err, 'flag-njsdfjsau345jkdsfljfjsklaj->>');
      Message.error(err.msg);
      loading.value = false;
    });
};
</script>

<style scoped>
.setting-password-btn-container {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
}
</style>