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" @click="handleUserOrders"
                        >{{ 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 handleUserOrders = () => {
    uni.redirectTo({
        url: `/pages/index/detail/user-orders?userId=${props.detail.userId}`,
    });
};
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>