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

<template>
  <div class="bg-#fff rounded-8px w-100% py-0 px-20px mt-24px pb-24px">
    <div class="title-row">
      <span class="title">个人信息</span>
    </div>
    <Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
      <Table.Column title="用户信息" dataIndex="info">
        <template #customRender="{ record }">
          <div class="pt-3px pb-3px">
            <a-avatar :image-url="record.head_image" :size="32" />
            {{ record.name || '-' }}
            <icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
          </div>
        </template>
      </Table.Column>
      <Table.Column title="手机号" dataIndex="mobile">
        <template #customRender="{ record }">
          {{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
          <icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
        </template>
      </Table.Column>
      <template #emptyText>
        <NoData />
      </template>
    </Table>
    <Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
      <Form
        class="form"
        :rules="rules"
        :model="userInfoForm"
        :label-col-props="{ span: 3, offset: 0 }"
        :wrapper-col-props="{ span: 21, offset: 0 }"
      >
        <FormItem name="head_image" label="头像">
          <div class="flex items-center">
            <a-avatar :image-url="userInfoForm.file_url" :size="48" />
            <span class="upload-button" @click="triggerFileInput">
              <input
                ref="uploadInputRef"
                accept="image/*"
                type="file"
                style="display: none"
                @change="handleFileChange"
              />
              <Button><icon-upload />上传新头像</Button>
            </span>
          </div>
        </FormItem>
        <FormItem name="name" label="昵称">
          <Input v-model:value="userInfoForm.name" placeholder="请输入昵称" />
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model:open="imageVisible" centered title="头像裁剪">
      <VueCropper></VueCropper>
    </Modal>
    <Modal v-model:open="mobileVisible" centered title="修改手机号" @ok="handleUpdateMobile">
      <Form
        ref="formRef"
        :model="form"
        class="form"
        :rules="formRules"
        labelAlign="right"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 20 }"
      >
        <FormItem required name="mobile" label="新手机号">
          <Input v-model:value="form.mobile" size="small" placeholder="请输入新的手机号" />
        </FormItem>
        <FormItem required name="captcha" label="获取验证码">
          <Input v-model:value="form.captcha" size="small" placeholder="请输入验证码">
            <template #suffix>
              <span v-if="countdown <= 0" @click="sendCaptcha">发送验证码</span>
              <span v-else>{{ countdown }}s</span>
            </template>
          </Input>
        </FormItem>
      </Form>
      <PuzzleVerification
        :show="verificationVisible"
        @submit="handleVerificationSubmit"
        @cancel="verificationVisible = false"
      />
    </Modal>
  </div>
</template>
<script setup lang="ts">
import { Button, Form, FormItem, Input, Table } from 'ant-design-vue';
import Container from '@/components/container.vue';
import Modal from '@/components/modal.vue';
import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';
import { ref, reactive } from 'vue';
import 'vue-cropper/dist/index.css';
import { VueCropper } from 'vue-cropper';
import { sendUpdateMobileCaptcha, updateMobile, fetchImageUploadFile, updateMyInfo } from '@/api/all';
import axios from 'axios';
import { useUserStore } from '@/stores';

const store = useUserStore();
const userInfo = computed(() => {
  return store.userInfo ?? {};
});

const columns = [
  {
    title: '用户信息',
    slotName: 'info',
  },
  {
    title: '手机号',
    slotName: 'mobile',
  },
];

const infoVisible = ref(false);
const imageVisible = ref(false);
const mobileVisible = ref(false);
const verificationVisible = ref(false);
const timer = ref();
const countdown = ref(0);
const formRef = ref();
const isSendCaptcha = ref(false);
const uploadInputRef = ref();

const dataSource = computed(() => {
  return userInfo.value ? [userInfo.value] : [];
});

// 表单校验规则
const formRules = {
  mobile: [
    {
      validator: (_rule: any, value: string) => {
        if (!value) {
          return Promise.reject('请填写手机号');
        }
        if (!/^1[3-9]\d{9}$/.test(value)) {
          return Promise.reject('手机号格式不正确');
        }
        return Promise.resolve();
      },
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  captcha: [
    {
      required: true,
      validator: (rule, value) => {
        if (!value) {
          return Promise.reject('请填写验证码');
        }
        if (!/^\d{6}$/.test(value)) {
          return Promise.reject('验证码必须是6位数字');
        }
        return Promise.resolve();
      },

      trigger: ['blur', 'change'],
    },
  ],
};

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

const userInfoForm = reactive({
  name: '',
  head_image: '',
  file_url: '',
});

function triggerFileInput() {
  uploadInputRef.value.click();
}

function openEditInfoModal() {
  infoVisible.value = true;
}

async function handleFileChange(event: Event) {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (file) {
    const fileExtension = getFileExtension(file.name);
    const { data } = await fetchImageUploadFile({
      suffix: fileExtension,
    });
    const { upload_url, file_name, file_url } = data;

    const blob = new Blob([file], { type: file.type });
    await axios.put(upload_url, blob, {
      headers: { 'Content-Type': file.type },
    });
    userInfoForm.head_image = file_name;
    userInfoForm.file_url = file_url;
  }
}
function openEditImageModal() {
  imageVisible.value = true;
}

function openEditMobileModal() {
  mobileVisible.value = true;
}

async function handleSubmitUserInfo() {
  await updateMyInfo(userInfoForm);
  AMessage.success('修改成功！');
}

async function sendCaptcha() {
  try {
    const result = await formRef.value.validateField('mobile');
    if (result === true || result === undefined) {
      verificationVisible.value = true;
      isSendCaptcha.value = true;
    }
    AMessage.error('请填写正确的手机号！');
  } catch (error) {
    console.log('手机号验证失败:', error);
  }
}

function beginCountdown() {
  timer.value = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer.value);
      timer.value = null;
    }
  }, 1000);
}

async function handleVerificationSubmit() {
  await sendUpdateMobileCaptcha({ mobile: form.mobile });
  AMessage.success('发送成功');
  verificationVisible.value = false;
  countdown.value = 60;
  beginCountdown();
}

async function handleUpdateMobile() {
  if (!isSendCaptcha.value) {
    AMessage.error('请先获取验证码！');
    return false;
  }
  const res = await formRef.value.validate();
  if (res === true || res === undefined) {
    await updateMobile(form);
    AMessage.success('修改成功！');
  }
}

function getFileExtension(filename: string): string {
  const match = filename.match(/\.([^.]+)$/);
  return match ? match[1].toLowerCase() : '';
}
</script>
<style scoped lang="scss">
.form {
  margin-top: 13px;
  :deep(.arco-row) {
    align-items: center;
  }
  :deep(.arco-form-item-label) {
    font-family: $font-family-medium;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
  }
  :deep(.arco-input-wrapper) {
    background: white;
    border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
    font-family: $font-family-medium;
    font-weight: 400;
    font-size: 14px;
    padding: 4px 12px;
    input::placeholder {
      font-family: $font-family-medium;
      font-weight: 400;
      font-size: 14px;
      color: var(--Text-4, rgba(147, 148, 153, 1));
    }
  }
  :deep(.arco-input-disabled) {
    background: var(--BG-200, rgba(242, 243, 245, 1));
    border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
    .arco-input:disabled {
      font-family: $font-family-medium;
      font-weight: 400;
      font-size: 14px;
    }
  }
  :deep(.arco-input-focus) {
    border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
    box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.2);
  }
}
.upload-button {
  width: 104px;
  height: 24px;
  margin-left: 12px;
  :deep(.arco-btn) {
    width: 104px;
    height: 24px;
    border-radius: 4px;
    padding: 2px 12px;
    border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
    font-family: $font-family-medium;
    font-weight: 400;
    font-size: 12px;
    vertical-align: middle;
    color: var(--Text-2, rgba(60, 64, 67, 1));
  }
}
.title-row {
  display: flex;
  height: 64px;
  padding: 10px 0 2px 0;
  align-items: center;
  .title {
    color: var(--Text-1, #211f24);
    font-family: $font-family-medium;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
  }
}
</style>