qimall/backend/views/components/common/com-user-info.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-ellipsis');
?>
<template id="com-user-info">
    <div class="user-box">
        <div class="user" @click="handleClick">
            <div class="user-avatar">
                <template v-if="user && user.avatar_url">
                    <el-avatar :src="user.avatar_url"></el-avatar>
                </template>
                <template v-else>
                    <el-avatar src="/resources/img/common/default-avatar.png"></el-avatar>
                </template>
            </div>
            <div class="user-info" v-if="user && user.id">
                <template v-if="isOverflowHidden">
                    <com-ellipsis :line="1" :text="user.nickname + ''"></com-ellipsis>
                </template>
                <template v-else>
                    <div class="nickname">{{ user.nickname }}</div>
                </template>
                <div>{{ user.mobile }}</div>
            </div>
            <div class="user-info" v-else>
                <div class="nickname delete">用户已删除</div>
            </div>
        </div>
    </div>
</template>

<script>
    Vue.component('com-user-info', {
        template: '#com-user-info',
        props: {
            user: Object,
            isToUserDetail: {
                type: Boolean,
                default: true,
            },
            isOverflowHidden: {
                type: Boolean,
                default: false,
            },
        },
        methods: {
            handleClick() {
                if (!this.isToUserDetail) {
                    return
                }
                if (!this.user.id) {
                    return;
                }

                navigateTo({
                    r: 'mall/user/user-detail',
                    id: this.user.id,
                });
            },
        }
    })
</script>

<style>
    .user-box {
        display: inline-block;
    }

    .user {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .user-info {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .nickname {
        font-weight: 900;
    }

    .delete {
        color: #909399;
        font-style: italic;
    }
</style>