lingji-work-fe/src/views/components/management/person/index.vue

<template>
  <div class="bg-#fff rounded-16px w-100% p-36px person-wrap">
    <p class="title mb-32px">个人信息</p>
    <div class="flex items-center">
      <Upload
        action="/"
        :showUploadList="false"
        accept="image/*"
        v-if="dataSource"
        :customRequest="handleUpload"
        class="mr-60px relative cursor-pointer"
      >
        <Avatar :src="dataSource.head_image" :size="100" v-if="dataSource.head_image" />
        <div v-else class="w-100 h-100 rounded-50% bg-#6D4CFE flex items-center justify-center">
          <span class="color-#FFF text-46px font-400">{{ dataSource.mobile?.slice(-3) }}</span>
        </div>
        <img :src="icon1" width="20" height="20" class="absolute right-5px bottom-4px" />
      </Upload>
      <div class="flex-1 flex h-68px">
        <div class="flex flex-1">
          <span class="cts mr-4p">昵称：</span>
          <span class="cts !color-#211F24 bold !font-500 mr-12px">{{ dataSource.name || '-' }}</span>
          <Button type="text" size="small" class="!p-0 !h-22px m-0" @click="openChangeNameModal">编辑</Button>
        </div>
        <div class="flex-1">
          <div class="flex items-center mb-24px">
            <span class="cts mr-4px w-56px">手机号：</span>
            <span class="cts !color-#211F24 bold !font-500 mr-12px">{{ mobileLabel }}</span>
            <Button type="text" size="small" class="!p-0 !h-22px m-0" @click="openChangeMobileModal">更改</Button>
          </div>
          <div class="flex items-center">
            <span class="cts mr-4px w-56px">密码：</span>
            <span
              class="!bg-#211F24 bold !font-500 w-6px h-6px rounded-50% mr-2px"
              v-for="(item, index) in new Array(10).fill(0)"
              :key="index"
            ></span>
            <Button type="text" size="small" class="!p-0 !h-22px ml-10px" @click="openChangePasswordModal">更改</Button>
          </div>
        </div>
      </div>
    </div>

    <ChangePasswordModal ref="changePasswordModalRef" />
    <ChangeNameModal ref="changeNameModalRef" />
    <ChangeMobileModal ref="changeMobileModalRef" />
  </div>
</template>
<script setup lang="ts">
import { Avatar, Button, Upload, message } from 'ant-design-vue';
import ChangePasswordModal from './components/change-password-modal/index.vue';
import ChangeNameModal from './components/change-name-modal/index.vue';
import ChangeMobileModal from './components/change-mobile-modal/index.vue';

import { reactive, ref } from 'vue';
import axios from 'axios';
import { fetchImageUploadFile, updateMyInfo } from '@/api/all';
import { useUserStore } from '@/stores';

import icon1 from './img/icon1.png';

const store = useUserStore();
const changePasswordModalRef = ref(null);
const changeNameModalRef = ref(null);
const changeMobileModalRef = ref(null);
const formRef = ref();

const dataSource = computed(() => {
  return store.userInfo;
});
const mobileLabel = computed(() => {
  const _mobile = dataSource.value.mobile;
  if (!_mobile) return '-';
  return _mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
});

// const form = reactive({
//   mobile: '',
//   captcha: '',
// });

const openChangeNameModal = () => {
  changeNameModalRef.value.open(dataSource.name);
};
const openChangeMobileModal = () => {
  changeMobileModalRef.value.open();
};
const openChangePasswordModal = () => {
  changePasswordModalRef.value.open(dataSource.value.mobile);
};

const getFileExtension: string = (filename: string) => {
  const match = filename.match(/\.([^.]+)$/);
  return match ? match[1].toLowerCase() : '';
};

const handleUpload = async (option) => {
  const { file } = option;
  try {
    if (file) {
      const fileExtension = getFileExtension(file.name);
      const { data } = await fetchImageUploadFile({
        suffix: fileExtension,
      });
      const { upload_url, file_url } = data;

      const blob = new Blob([file], { type: file.type });
      await axios.put(upload_url, blob, {
        headers: { 'Content-Type': file.type },
      });

      const { code } = await updateMyInfo({ head_image: file_url });
      if (code === 200) {
        message.success('修改成功');
        store.userInfo.head_image = file_url;
      }
    }
  } catch (error) {
    message.error('上传失败');
  }
};
</script>

<style scoped lang="scss">
@import './style.scss';
</style>