index.vue

<template>
  <div>
    <!-- ==================== 个人中心 | S -->
    <div id="UserCenter">

      <!-- ======================== 弹窗 | S -->
      <NModal v-model:show="showModal">
        <NCard title="修改密码" style="width: 600px;" closable @close="showModal = false">
          <!-- 个人中心 | S  -->
          <n-form label-align="right" ref="formRef" label-placement="left">
            <n-form-item label="登录密码" required>
              <NInput v-model:value="modifyForm.password"></NInput>
            </n-form-item>

          </n-form>
          <template #footer>
            <NSpace justify="end">
              <NButton @click="showModal = false">取消</NButton>
              <NButton @click="onModifyPassword" type="primary">确定</NButton>
            </NSpace>
          </template>
        </NCard>
      </NModal>
      <!-- ======================== 弹窗 | E -->

      <NRow>
        <NCol span="8">
          <NCard>
            <template #header>
              <div class="flex-between">
                <div>
                  <div class="title">个人中心</div>
                </div>
              </div>
            </template>

            <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 50px; ">
              <img width="200" style="width: 80px; height: 80px;" src="../../assets/yonghu_03.png" alt="" srcset="">
            </div>

            <NSpace justify="center">
              <div style="display: flex; justify-content: center; align-items: center; width: 400px;">
                <n-form label-align="right" ref="formRef" label-placement="left" style="width: 100%;">
                  <n-form-item label="用户姓名" style="width: 100%; ">
                    <div style="width: 100%; display: flex; justify-content: end;">
                      <div> {{ model?.name }}</div>
                    </div>
                  </n-form-item>

                  <n-form-item label="用户名">
                    <div style="width: 100%; display: flex; justify-content: end;">
                      <span v-if="!modifyName">{{ model.userName }} </span>
                      <NInput v-else size="small" style="width: 200px" v-model:value="model.userName" clearable />
                      <NButton style="margin-left: 5px;" text @click.stop="modifyName = !modifyName">
                        <n-icon color="#1872F0" size="17">
                          <EditArrowBack20Filled />
                        </n-icon>
                      </NButton>
                    </div>
                  </n-form-item>

                  <n-form-item label="手机号">
                    <div style="width: 100%; display: flex; justify-content: end;">
                      <span v-if="!modifyPhone">{{ model.phone }} </span>
                      <NInput v-else @click.stop="() => { }" size="small" style="width: 200px"
                        v-model:value="model.phone" clearable />
                      <NButton style="margin-left: 5px;" text @click.stop="modifyPhone = !modifyPhone">
                        <n-icon color="#1872F0" size="17">
                          <EditArrowBack20Filled />
                        </n-icon>
                      </NButton>
                    </div>
                  </n-form-item>

                  <n-form-item label="安全设置">
                    <n-button quaternary type="info" @click="showModal = true">
                      修改密码
                    </n-button>
                  </n-form-item>
                </n-form>
              </div>
            </NSpace>
            <template #footer>
              <NSpace justify="center">
                <NButton @click="onSubmit" type="primary">保存设置</NButton>
              </NSpace>
            </template>
          </NCard>
        </NCol>
      </NRow>
    </div>
    <!-- ==================== 个人中心 | E -->
  </div>
</template>


<script lang="ts" setup>
import { h, nextTick, onMounted, onUpdated, ref, watch } from 'vue';
import { NButton, NInput, NSpace, useMessage } from 'naive-ui';
import { EditArrowBack20Filled } from '@vicons/fluent';
import { localStg } from '@/utils/storage';
import { useRouter } from 'vue-router';

import {
  api_getUserInfo,
  api_modifyUserInfo,
  api_modifyUserPass
} from '@/api/index';

const message = useMessage();

const userInfo = ref('');

const router = useRouter();

const modifyForm = ref({
  id: 0,
  name: "",
  password: "",
  phone: "",
  userName: ""
});

const modifyPassword = async (val) => {
  let id = localStg.get('id');
  await api_modifyUserPass(id, val).then(res => {
    if (res.data.code === 200) {
      router.push('/login');
      localStg.remove('token');
      return message.success("修改成功!")
    }
  })
}

const onModifyPassword = () => {

  if (!modifyForm.value.password) {
    return message.error("请输入密码!")
  }

  modifyPassword(modifyForm.value.password).then(res => {
    if (res.data.code === 200) {
      return message.success("修改成功！")
    }
  })
}

const modifyUserInfo = async () => {
  let id = localStg.get('id');
  // model.value.id = id;
  const param = {
    id,
    phone: model.value.phone,
    userName: model.value.userName
  }
  // modifyForm.value.id = id;
  await api_modifyUserInfo(param).then(res => {
    if (res.data.code === 200) {
      getUserInfo();
      return message.success("修改成功!")
    }
    return message.error("修改失败!")
  });
};


const model = ref({
  age: '',
  name: '',
  phone: '',
});

const getUserInfo = async () => {
  //  获取ID
  let id = localStg.get('id');

  //  调用接口
  await api_getUserInfo(id).then(res => {
    if (res.data.code === 200) {
      model.value = res.data.data;
    }
  });
};


const showModal = ref(false);


const onSubmit = async () => {
  console.log("==================== submit", modifyForm.value)
  await modifyUserInfo();
  // modifyUserInfo();
}


const modifyPhone = ref(false);
const modifyName = ref(false);

onMounted(() => {
  getUserInfo();
});

</script>