feat(personal-info): 优化个人信息页面功能
- 添加修改手机号功能 - 实现头像上传和裁剪 - 优化用户信息编辑界面 - 增加表单验证和错误提示 - 实现验证码发送和倒计时功能
This commit is contained in:
@ -8,32 +8,73 @@
|
||||
</template>
|
||||
<template #mobile="{ record }">
|
||||
{{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
|
||||
<icon-edit size="13" class="ml-8px" />
|
||||
<icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
|
||||
</template>
|
||||
</a-table>
|
||||
<Modal v-model:visible="infoVisible" title="修改用户信息">
|
||||
<a-form :model="userInfoForm" @submit="handleSubmitUserInfo">
|
||||
<Modal v-model:visible="infoVisible" title="修改用户信息" @ok="handleSubmitUserInfo">
|
||||
<a-form :model="userInfoForm">
|
||||
<a-form-item field="head_image" label="头像">
|
||||
<a-avatar :image-url="userInfoForm.head_image" :size="48" />
|
||||
<a-upload action="/" />
|
||||
<a-button @click="openEditImageModal"><icon-upload />上传新头像</a-button>
|
||||
<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="userInfoForm.name" placeholder="请输入昵称" />
|
||||
<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: 6, offset: 0 }"
|
||||
:wrapper-col-props="{ span: 18, 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 { VueCropper } from 'vue-cropper';
|
||||
import { sendUpdateMobileCaptcha, updateMobile, fetchImageUploadFile, updateMyInfo } from '@/api/all';
|
||||
import axios from 'axios';
|
||||
|
||||
const userInfo = reactive({
|
||||
id: 1,
|
||||
@ -53,28 +94,201 @@ const columns = [
|
||||
},
|
||||
];
|
||||
const data = reactive([userInfo]);
|
||||
const infoVisible = ref(true);
|
||||
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) {
|
||||
console.log('已选择的文件:', 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 handleSubmitUserInfo() {
|
||||
console.log(123);
|
||||
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="less">
|
||||
|
||||
.form {
|
||||
: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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user