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

<template>
  <Container title="个人信息" class="container mt-24px">
    <a-table :columns="columns" :data="data" :pagination="false" class="mt-16px">
      <template #info="{ 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>
      <template #mobile="{ record }">
        {{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
        <icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
      </template>
    </a-table>
    <Modal v-model:visible="infoVisible" title="修改用户信息" @ok="handleSubmitUserInfo">
      <a-form
        class="form"
        :model="userInfoForm"
        :label-col-props="{ span: 3, offset: 0 }"
        :wrapper-col-props="{ span: 21, offset: 0 }"
      >
        <a-form-item field="head_image" label="头像">
          <div class="flex item-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"
              />
              <a-button><icon-upload />上传新头像</a-button>
            </span>
          </div>
        </a-form-item>
        <a-form-item field="name" label="昵称">
          <a-input v-model.trim="userInfoForm.name" placeholder="请输入昵称" />
        </a-form-item>
      </a-form>
    </Modal>
    <Modal v-model:visible="imageVisible" title="头像裁剪">
      <VueCropper></VueCropper>
    </Modal>
    <Modal v-model:visible="mobileVisible" title="修改手机号" @ok="handleUpdateMobile">
      <a-form
        ref="formRef"
        :model="form"
        class="form"
        :rules="formRules"
        :label-col-props="{ span: 5, offset: 0 }"
        :wrapper-col-props="{ span: 19, offset: 0 }"
        label-align="left"
      >
        <a-form-item required field="mobile" label="新手机号">
          <a-input v-model.trim="form.mobile" size="small" placeholder="请输入新的手机号" />
        </a-form-item>
        <a-form-item required field="captcha" label="获取验证码">
          <a-input v-model.trim="form.captcha" size="small" placeholder="请输入验证码">
            <template #suffix>
              <span v-if="countdown <= 0" @click="sendCaptcha">发送验证码</span>
              <span v-else>{{ countdown }}s</span>
            </template>
          </a-input>
        </a-form-item>
      </a-form>
      <PuzzleVerification
        :show="verificationVisible"
        @submit="handleVerificationSubmit"
        @cancel="verificationVisible = false"
      />
    </Modal>
  </Container>
</template>
<script setup lang="ts">
import Container from '@/components/container.vue';
import Modal from '@/components/modal.vue';
import PuzzleVerification from '@/views/components/login/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 = store.getUserInfo();

const columns = [
  {
    title: '用户信息',
    slotName: 'info',
  },
  {
    title: '手机号',
    slotName: 'mobile',
  },
];
const data = reactive([userInfo]);
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 formRules = {
  mobile: [
    {
      required: true,
      message: '请填写手机号',
      trigger: ['blur', 'change'],
    },
    {
      validator: (value: string, callback: (error?: string) => void) => {
        if (!/^1[3-9]\d{9}$/.test(value)) {
          callback('手机号格式不正确');
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change'],
    },
  ],
  captcha: [
    {
      required: true,
      message: '请填写验证码',
      trigger: ['blur', 'change'],
    },
    {
      validator: (value: string, callback: (error?: string) => void) => {
        if (!/^\d{6}$/.test(value)) {
          callback('验证码必须是6位数字');
        } else {
          callback();
        }
      },
      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 res = await fetchImageUploadFile({
      suffix: fileExtension,
    });
    const blob = new Blob([file], { type: file.type });
    await axios.put(res.upload_url, blob, {
      headers: { 'Content-Type': file.type },
    });
    userInfoForm.head_image = res.file_name;
    userInfoForm.file_url = res.file_url;
  }
}
function openEditImageModal() {
  imageVisible.value = true;
}

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

async function handleSubmitUserInfo() {
  await updateMyInfo(userInfoForm);
  store.setUserName(userInfoForm.name);
  store.setUserHeadImage(userInfoForm.file_url);
  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);
    store.setUserMobile(form.mobile);
    AMessage.success('修改成功！');
  }
}

function getFileExtension(filename: string): string {
  const match = filename.match(/\.([^.]+)$/);
  return match ? match[1].toLowerCase() : '';
}
</script>
<style scoped lang="less">
.form {
  margin-top: 13px;
  :deep(.arco-row) {
    align-items: center;
  }
  :deep(.arco-form-item-label) {
    font-family: Alibaba PuHuiTi, serif;
    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: Alibaba PuHuiTi, serif;
    font-weight: 400;
    font-size: 14px;
    padding: 4px 12px;
    input::placeholder {
      font-family: Alibaba PuHuiTi, serif;
      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: Alibaba PuHuiTi, serif;
      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: Alibaba PuHuiTi, serif;
    font-weight: 400;
    font-size: 12px;
    vertical-align: middle;
    color: var(--Text-2, rgba(60, 64, 67, 1));
  }
}
</style>