81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<Container title="个人信息" class="container mt-24px">
|
||
|
|
<a-table :columns="columns" :data="data" :pagination="false" class="mt-16px">
|
||
|
|
<template #info="{ record }">
|
||
|
|
<a-avatar :image-url="record.head_image" :size="32" />
|
||
|
|
{{ record.name }}
|
||
|
|
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
|
||
|
|
</template>
|
||
|
|
<template #mobile="{ record }">
|
||
|
|
{{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
|
||
|
|
<icon-edit size="13" class="ml-8px" />
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
<Modal v-model:visible="infoVisible" title="修改用户信息">
|
||
|
|
<a-form :model="userInfoForm" @submit="handleSubmitUserInfo">
|
||
|
|
<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>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item field="name" label="昵称">
|
||
|
|
<a-input v-model="userInfoForm.name" placeholder="请输入昵称" />
|
||
|
|
</a-form-item>
|
||
|
|
</a-form>
|
||
|
|
</Modal>
|
||
|
|
<Modal v-model:visible="imageVisible" title="头像裁剪">
|
||
|
|
<VueCropper></VueCropper>
|
||
|
|
</Modal>
|
||
|
|
</Container>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import Container from '@/components/container.vue';
|
||
|
|
import Modal from '@/components/modal.vue';
|
||
|
|
import { ref, reactive } from 'vue';
|
||
|
|
import 'vue-cropper/dist/index.css';
|
||
|
|
import { VueCropper } from 'vue-cropper';
|
||
|
|
|
||
|
|
const userInfo = reactive({
|
||
|
|
id: 1,
|
||
|
|
name: 'Jane Doe',
|
||
|
|
head_image: '',
|
||
|
|
mobile: '13600000000',
|
||
|
|
});
|
||
|
|
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: '用户信息',
|
||
|
|
slotName: 'info',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '手机号',
|
||
|
|
slotName: 'mobile',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const data = reactive([userInfo]);
|
||
|
|
const infoVisible = ref(true);
|
||
|
|
const imageVisible = ref(false);
|
||
|
|
|
||
|
|
const userInfoForm = reactive({
|
||
|
|
name: '',
|
||
|
|
head_image: '',
|
||
|
|
});
|
||
|
|
|
||
|
|
function openEditInfoModal() {
|
||
|
|
infoVisible.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function openEditImageModal() {
|
||
|
|
imageVisible.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleSubmitUserInfo() {
|
||
|
|
console.log(123);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
|
||
|
|
</style>
|