mark-web/src/features/mark/MarkChangeProfile.vue

<template>
  <a-modal
    title="修改个人信息"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :zIndex="2000"
  >
    <a-form labelAlign="right" :labelCol="{ span: 4 }">
      <a-form-item class="tw-mb-2" :required="true" label="姓名">
        <a-input
          @keydown.stop="() => {}"
          v-model:value="user.name"
          placeholder="姓名"
        />
      </a-form-item>
      <a-form-item class="tw-mb-2" label="新密码">
        <a-input
          @keydown.stop="() => {}"
          type="password"
          v-model:value="user.password"
          placeholder="输入新密码"
        />
      </a-form-item>
      <a-form-item class="tw-mb-2" label="确认新密码">
        <a-input
          @keydown.stop="() => {}"
          type="password"
          v-model:value="user.confirmPassword"
          placeholder="再次输入新密码"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
import { changeUserInfo, doLogout } from "@/api/markPage";
import { message } from "ant-design-vue";
import { ref, defineComponent, reactive, watchEffect } from "vue";
import { store } from "./store";

interface User {
  name: string;
  password: string;
  confirmPassword: string;
}
export default defineComponent({
  name: "MarkChangeProfile",
  setup() {
    const user = reactive<User>({
      name: "",
      password: "",
      confirmPassword: "",
    });
    watchEffect(() => {
      user.name = store.setting.userName;
    });
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      if (user.name.length === 0 || user.name.length >= 30) {
        message.error({ content: "姓名长度必须在1到30之间" });
        return;
      }
      if (user.password.length !== 0 || user.confirmPassword.length !== 0) {
        if (user.password.length === 0 || user.password.length >= 16) {
          message.error({ content: "密码长度必须在1到16之间" });
          return;
        }
        if (user.password !== user.confirmPassword) {
          message.error({ content: "两次输入的密码不一致" });
          return;
        }
      }
      confirmLoading.value = true;
      changeUserInfo(user.name, user.password)
        .then(() => doLogout())
        .finally(() => {
          visible.value = false;
          confirmLoading.value = false;
        });
    };

    const handleCancel = () => {
      user.name = store.setting.userName;
      user.password = "";
      user.confirmPassword = "";
    };

    return {
      user,
      visible,
      confirmLoading,
      showModal,
      handleOk,
      handleCancel,
    };
  },
});
</script>