68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { toRefs } from 'vue';
|
|
|
|
import { Button, Form, Input, notification } from 'ant-design-vue';
|
|
|
|
import { selfUpdate } from '#/api';
|
|
|
|
const props = defineProps({
|
|
// 这里可以定义父组件传递的属性
|
|
userInfo: {
|
|
type: Object,
|
|
default: () => ({
|
|
username: '',
|
|
email: '',
|
|
phone: '',
|
|
address: '',
|
|
}),
|
|
},
|
|
});
|
|
const { userInfo } = toRefs(props);
|
|
|
|
// 表单提交方法
|
|
const handleSubmit = async () => {
|
|
const res = await selfUpdate({
|
|
name: userInfo.value.name,
|
|
phone: userInfo.value.phone,
|
|
email: userInfo.value.email,
|
|
address: userInfo.value.address,
|
|
});
|
|
if (res.code === 200) {
|
|
notification.success({
|
|
message: '修改成功',
|
|
description: '用户信息已更新',
|
|
duration: 3,
|
|
});
|
|
} else {
|
|
notification.error({
|
|
message: '修改失败',
|
|
description: res.msg,
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Form
|
|
:model="userInfo"
|
|
layout="vertical"
|
|
@finish="handleSubmit"
|
|
class="p-4"
|
|
style="max-width: 500px; margin: 0 auto"
|
|
>
|
|
<Form.Item label="用户名">
|
|
<Input v-model:value="userInfo.name" />
|
|
</Form.Item>
|
|
<Form.Item label="邮箱" name="email">
|
|
<Input v-model:value="userInfo.email" />
|
|
</Form.Item>
|
|
<Form.Item label="联系电话">
|
|
<Input v-model:value="userInfo.phone" />
|
|
</Form.Item>
|
|
<Form.Item label="地址">
|
|
<Input v-model:value="userInfo.address" />
|
|
</Form.Item>
|
|
<Button type="primary" html-type="submit">保存修改</Button>
|
|
</Form>
|
|
</template>
|