YXGJ/components/userList.vue

<template>
    <view>
        <view class="item" v-for="item in list" :key="item.sys_enterprise_hrid" hover-class="navigator-hover"
            @click="itemClick(item)">
            <u--image
                :src="item.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'"
                :width="tovw(44)" :height="tovw(44)" shape="circle">
                <template v-slot:loading>
                    <u-loading-icon color="red"></u-loading-icon>
                </template>
            </u--image>
            <view class="content">
                <view class="title u-line-1">
                    {{ item.name }}
                </view>
                <view v-if="item.rolenames" class="row u-line-1">
                    {{ item.rolenames }}
                </view>
                <view class="row">
                    <text class="iconfont icon-dianhua-hui" />
                    {{ item.phonenumber }}
                </view>
                <view class="row u-line-1">
                    <text class="iconfont icon-morenmendian" />
                    {{ item.storenames || '--' }}
                </view>
                <view class="row">
                    状态：
                    <text :style="{ color: item.status == '启用' ? '#009270' : '#E3041F' }">
                        {{ item.status }}
                    </text>
                </view>
            </view>
            <view v-if="isDelete" class="iconfont icon-shanchu detele" @click.stop="deleteItem(item)" />
        </view>
    </view>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: []
        },
        onClick: {
            type: Function
        },
        isDelete: {
            type: Boolean,
            default: false
        },
        onDelete: {
            type: Function
        },
    },
    methods: {
        itemClick(item) {
            this.$emit("onClick", item)
        },
        deleteItem(item) {
            this.$emit("onDelete", item)
        }
    },
}
</script>

<style lang="scss" scoped>
.item {
    position: relative;
    width: 355px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    margin: 0 auto 10px;
    display: flex;

    .content {
        margin-left: 10px;

        .title {
            line-height: 24px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 16px;
            color: #333333;

        }

        .row {
            margin-top: 5px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #888888;

            .iconfont {
                margin-right: 5px;
            }
        }
    }

    .detele {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 10px;
        color: #999999;
        font-size: 14px;
    }
}

.item:last-child {
    margin-bottom: 0;
}
</style>