info.vue

<template>
    <div class="tw-flex">
        <a-form-model layout="vertical" style="flex: 0 0 400px">
            <a-form-model-item label="用户账户">
                <a-input disabled :value="loginId" />
            </a-form-model-item>
            <a-form-model-item label="姓名">
                <a-input v-model="form.userName" />
            </a-form-model-item>
            <a-form-model-item label="固定电话">
                <a-input v-model="form.fixedPhone" />
            </a-form-model-item>
            <a-form-model-item label="移动电话">
                <a-input v-model="form.mobilePhone" />
            </a-form-model-item>
            <a-form-model-item label="电子邮箱">
                <a-input v-model="form.userEmail" />
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" :loading="loading" @click="update">更新信息</a-button>
            </a-form-model-item>
        </a-form-model>
        <div style="flex: 0 0 300px" class="tw-flex tw-flex-col tw-items-center ">
            <div>头像</div>
            <img
                style="width: 100px;height: 100px"
                class="tw-max-w-full tw-max-h-full tw-rounded-full tw-my-4"
                :src="userAvatar"
            />
            <my-upload v-model="form.userAvatar" />
        </div>
    </div>
</template>

<script>
import { updateUserInfoApi } from '@/api';
import { getUserInfo, setUserInfoByRequest } from '@/utils';

export default {
    data: () => ({
        form: {
            userName: '',
            mobilePhone: '',
            fixedPhone: '',
            userEmail: '',
            userAvatar: '',
        },
        loading: false,
        loginId: '',
    }),
    computed: {
        userAvatar() {
            return this.form.userAvatar ? `${this.$fileUrl}${this.form.userAvatar}` : null;
        },
    },
    mounted() {
        const userInfo = getUserInfo();
        this.form.userName = userInfo.userName;
        this.form.fixedPhone = userInfo.fixedPhone;
        this.form.mobilePhone = userInfo.mobilePhone;
        this.form.userEmail = userInfo.userEmail;
        this.form.userAvatar = userInfo.userAvatar;
        this.loginId = userInfo.loginId;
    },

    methods: {
        async update() {
            this.loading = true;
            await updateUserInfoApi(this.form);
            this.$message.success('更新成功');
            await setUserInfoByRequest();
            this.loading = false;
            setTimeout(() => {
                location.reload();
            });
        },
    },
};
</script>