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="`${$fileUrl}${form.userAvatar}`"
            />
            <my-upload v-model="form.userAvatar" />
        </div>
    </div>
</template>

<script>
import { updateUserInfoApi } from '@/api';

export default {
    data: () => ({
        form: {
            userName: '',
            mobilePhone: '',
            fixedPhone: '',
            userEmail: '',
            userAvatar: '',
        },
        loading: false,
    }),
    computed: {
        loginId() {
            return this.$store.state.userInfo.loginId;
        },
    },
    watch: {
        '$store.state.userInfo'(userInfo) {
            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;
        },
    },
    methods: {
        async update() {
            this.loading = true;
            await updateUserInfoApi(this.form);
            this.loading = false;
            this.$store.commit('setUserInfo', { ...this.$store.state.userInfo, ...this.form });
            this.$message.success('更新成功');
        },
    },
};
</script>