renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 修改昵称，修改手机号

Browse Source
This commit is contained in:
rd
2025-09-11 18:16:05 +08:00
parent fd4c26f716
commit 465cb2fcad
9 changed files with 675 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/views/components/management/person/index.vue
View File

@ -1,26 +1,55 @@
<template>
<div class="bg-#fff rounded-16px w-100% p-36px">
<div class="bg-#fff rounded-16px w-100% p-36px person-wrap">
<p class="title mb-32px">个人信息</p>
<Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
<Table.Column title="用户信息" dataIndex="info">
<template #customRender="{ record }">
<div class="pt-3px pb-3px">
<Avatar :src="record.head_image" :size="32" />
{{ record.name || '-' }}
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
<div class="flex items-center">
<div class="mr-60px relative cursor-pointer" @click="openEditInfoModal">
<Avatar :src="dataSource.head_image" :size="100" />
<img :src="icon1" width="20" height="20" class="absolute right-5px bottom-4px" />
</div>
<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">{{ mobile }}</span>
<Button type="text" size="small" class="!p-0 !h-22px m-0" @click="openChangeMobileModal">更改</Button>
</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>
<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">更改</Button>
</div>
</div>
</div>
</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">-->
<!-- <Avatar :src="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"
@ -80,21 +109,38 @@
@cancel="verificationVisible = false"
/>
</Modal>
<SafetyVerificationModal
ref="safetyVerificationModalRef"
@success="handleVerifySuccess"
@cancel="handleVerifyCancel"
/>
<ChangeNameModal ref="changeNameModalRef" />
<ChangeMobileModal ref="changeMobileModalRef" />
</div>
</template>
<script setup lang="ts">
import { Button, Form, FormItem, Input, Table, message, Avatar } from 'ant-design-vue';
import Container from '@/components/container.vue';
import { Avatar, Button, Form, FormItem, Input, message } from 'ant-design-vue';
import Modal from '@/components/modal.vue';
import PuzzleVerification from '@/views/login/components/PuzzleVerification.vue';
import { ref, reactive } from 'vue';
import SafetyVerificationModal from './components/safety-verification-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 'vue-cropper/dist/index.css';
import { VueCropper } from 'vue-cropper';
import { sendUpdateMobileCaptcha, updateMobile, fetchImageUploadFile, updateMyInfo } from '@/api/all';
import { fetchImageUploadFile, sendUpdateMobileCaptcha, updateMobile, updateMyInfo } from '@/api/all';
import axios from 'axios';
import { useUserStore } from '@/stores';
import icon1 from './img/icon1.png';
const store = useUserStore();
const safetyVerificationModalRef = ref(null);
const changeNameModalRef = ref(null);
const changeMobileModalRef = ref(null);
// const userInfo = computed(() => {
// return store.userInfo ?? {};
// });
@ -120,12 +166,16 @@ const formRef = ref();
const isSendCaptcha = ref(false);
const uploadInputRef = ref();
// console.log(userInfo.value)
const dataSource = computed(() => {
return !isEmpty(store.userInfo) ? [store.userInfo] : [];
return store.userInfo;
});
const mobile = computed(() => {
const _mobile = dataSource.value.mobile;
if (!_mobile) return '-';
return _mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
});
console.log(dataSource.value)
console.log(store.userInfo);
// 表单校验规则
const formRules = {
@ -199,13 +249,13 @@ async function handleFileChange(event: Event) {
userInfoForm.file_url = file_url;
}
}
function openEditImageModal() {
imageVisible.value = true;
}
function openEditMobileModal() {
mobileVisible.value = true;
}
const openChangeNameModal = () => {
changeNameModalRef.value.open(dataSource.name);
};
const openChangeMobileModal = () => {
changeMobileModalRef.value.open();
};
async function handleSubmitUserInfo() {
await updateMyInfo(userInfoForm);
@ -261,17 +311,23 @@ function getFileExtension(filename: string): string {
}
</script>
<style scoped lang="scss">
@import './style.scss';
</style>
<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));
@ -279,6 +335,7 @@ function getFileExtension(filename: string): string {
font-weight: 400;
font-size: 14px;
padding: 4px 12px;
input::placeholder {
font-family: $font-family-medium;
font-weight: 400;
@ -286,24 +343,29 @@ function getFileExtension(filename: string): string {
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;
@ -317,6 +379,7 @@ function getFileExtension(filename: string): string {
color: var(--Text-2, rgba(60, 64, 67, 1));
}
}
.title {
color: var(--Text-1, #211f24);
font-family: $font-family-medium;