127 lines
4.3 KiB
Vue
127 lines
4.3 KiB
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>
|