shuhi-app/pages/index/detail/components/UserInfoCard.vue

<template>
    <view class="user-info-card bg-white mt-16">
        <view class="header">
            <text style="color: #666;">{{ detail.orderTime }}</text>
            <text @click="showModal = true" class="color-green">[查看订单日志]</text>
        </view>
        <view class="content flex flex-j-b">
            <image :src="detail.imgPath" class="user-image" />

            <view class="flex flex-a-e flex-1 ml-12">
                <view class="flex flex-d flex-1">
                    <text class="color-green">{{ formattedName }}<text style="color: #e99d42;">(所有单)</text></text>
                    <text class="common-text" style="margin-top: 10rpx;">共卖出{{ detail.totalNum }}本书</text>
                    <text class="common-text">来自{{ detail.sendSsq }}</text>
                    <text class="common-text" style="margin-top: 10rpx;">用户状态: <text :class="statusClass">{{
                        detail.userStatus == 1 ? '正常' :
                            detail.userStatus == 2 ? '黑名单' : '-'
                            }}</text></text>
                </view>

                <text style="min-width: 160rpx;" @click="toggleBlacklist" class="color-red">[{{ blacklistAction
                    }}]</text>
            </view>
        </view>

        <u-modal v-model:show="showModal" title="订单日志" :showCancelButton="false" confirmText="关闭"
            @confirm="showModal = false" class="log-modal">

            <view class="log-container">
                <view class="log-header">
                    <text>描述</text>
                    <text>操作人</text>
                    <text>时间</text>
                </view>
                <view class="log-item" v-for="(log, index) in detail.logVoList" :key="index">
                    <text class="log-item-content">{{ log.statusName }}</text>
                    <text class="log-item-name">{{ log.createName }}</text>
                    <text class="log-item-time">{{ log.createTime }}</text>
                </view>
            </view>

        </u-modal>

        <u-modal v-model:show="showBlacklistModal" title="拉黑用户" :showCancelButton="true" confirmText="提交"
            cancelText="取消" @confirm="confirmBlacklist" @cancel="showBlacklistModal = false">
            <textarea class="reason-textarea" placeholder="请输入拉黑原因..." autoHeight bg-color="#f8f8f8"
                border-radius="10rpx" v-model="reason" height="100px"></textarea>
        </u-modal>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
    detail: {
        type: Object,
        default: () => ({})
    }
});

const formattedName = computed(() => {
    return props.detail?.userNick?.charAt(0) + '**';
});

const statusClass = computed(() => {
    return props.detail.userStatus == 1 ? 'color-green' : 'color-red';
});

const blacklistAction = computed(() => {
    return props.detail.userStatus == 1 ? '加入黑名单' : '移除黑名单';
});

const showModal = ref(false);
const showBlacklistModal = ref(false);
const reason = ref('');

const toggleBlacklist = () => {
    showBlacklistModal.value = true;
};

const confirmBlacklist = () => {
    let apiStr = props.detail.userStatus == 1 ? '/app/appUser/setUserBlack' : 'app/appUser/removeUserBlack';
    uni.$u.http.post(apiStr, {
        userId: props.detail.userId,
        reason: reason.value
    }).then(res => {
        if (res.code == 200) {
            uni.$u.toast('操作成功');
            showBlacklistModal.value = false;
            props.detail.userStatus = props.detail.userStatus == 1 ? 2 : 1;
        } else {
            uni.$u.toast(res.msg);
        }
    });
};
</script>

<style lang="scss" scoped>
.user-info-card {
    .header {
        display: flex;
        justify-content: space-between;
        padding: 24rpx 30rpx;
        border-bottom: 1rpx solid #e6e6e6;
    }

    .content {
        padding: 15px;
        border-bottom: 1rpx solid #e6e6e6;

        .user-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }

    .log-container {
        max-height: 60vh;
        overflow-y: auto;
        background: #fff;
        width: 100%;
    }

    .log-header {
        display: flex;
        padding: 20rpx;
        background: #f2f2f2;
        font-size: 28rpx;
        color: #333;
        text-align: center;

        text:nth-child(1) {
            flex: 1.2;
            flex-shrink: 0;
        }
        text:nth-child(2),
        text:nth-child(3) {
            flex: 1;
            flex-shrink: 0;
        }
    }

    .log-item {
        display: flex;
        padding: 20rpx;
        border-bottom: 1px solid #f2f2f2;
        font-size: 28rpx;
        color: #666;

        .log-item-content {
            flex: 1.2;
            text-align: center;
            flex-shrink: 0;
        }
        .log-item-name,
        .log-item-time {
            flex: 1;
            text-align: center;
            flex-shrink: 0;
        }

        &:last-child {
            border-bottom: none;
        }
    }

    :deep(.u-modal__content) {
        padding: 20rpx !important;
    }

    :deep(.reason-textarea .uni-textarea-wrapper) {
        background-color: #f8f8f8;
        border-radius: 10rpx;
        padding: 20rpx;
        box-sizing: border-box;
        min-height: 100px;
        .uni-textarea-textarea,
        .uni-textarea-placeholder {
            padding: 10rpx 20rpx;
        }
    }
}
</style>