talk_appAmin/pages/message/adUser.vue

<template>
    <view class="work-container">
        <view>
            <!-- 顶部导航栏 -->
            <u-navbar leftText=" " title=" " :placeholder="true" leftIconColor="#ffffff" leftIconSize="30"
            @leftClick="leftClick"
                :safeAreaInsetTop="true" :bgColor="bgColor">
                <template #center>
                    <view class="text1">用户管理</view>
                </template>
            </u-navbar>
        </view>
        <!-- 列表信息 -->
        <view v-for="(item, index) in adUserInfo" :key="index" class="listInfo" @click="toInfo(item)">
            <view class="flex justifyCenter alignCenter">
                <up-avatar :src="avatarIcon(item.avatar)" size="35"></up-avatar>
                <view class="nameInfo">
                    <view class="text2">{{ item.nickName }}</view>
                    <view class="text3" v-if="item.remarks == null">[签名]这个人很懒什么都没留下</view>
                    <view class="text3" v-else>[签名]{{ item.remarks }}</view>
                </view>
            </view>
            <view v-if="!item.isMuted" class="prohi-1" @click="toProhibition(item)">
                <view class="text4">禁言</view>
            </view>
            <view v-else class="prohi-2">
                <view class="text5">禁言中</view>
            </view>
        </view>
    </view>
    <view>
        <up-popup :show="show2" :round="10" mode="bottom" @close="show2 = false">
            <view class="popup-userInfo">
                <up-avatar :src="avatarIcon(show2UserInfo.avatar)" size="200rpx" class="avatar-1"></up-avatar>
            </view>
            <view class="cardz">
                <view class="text6">{{ show2UserInfo.nickName }}</view>
            </view>
            <view class="cardx">
                <view class="flex ">
                    <view>请输入禁言时长:</view>
                    <up-input v-model="muteDay" @change="change" type="number" fontSize="28rpx" color="#333333"
                        :customStyle="{
                backgroundColor: '#F4F5F6',
                borderRadius: '8rpx',
                width: '438rpx',
                height: '50rpx',
                marginLeft: '42rpx'
            }">
                        <template #suffix>天</template>
                    </up-input>
                </view>
                <view class="flex " style="margin-top: 32rpx;">
                    <view>请输入禁言原因:</view>
                    <up-textarea v-model="reason" placeholder="输入禁言原因以方便告知用户" type="number" fontSize="28rpx"
                        color="#333333" :customStyle="{
                backgroundColor: '#F4F5F6',
                borderRadius: '8rpx',
                width: '438rpx',
                height: '200rpx',
                marginLeft: '42rpx'
            }">

                    </up-textarea>
                </view>
                <view class="btnInfo">
                    <view class="btn1" @click="show2 = false">
                        <view class="text7">取消</view>
                    </view>
                    <view class="btn2" @click="muteInfo">
                        <view class="text8">禁言</view>
                    </view>
                </view>
            </view>
        </up-popup>
    </view>
</template>
<script setup>
import { getADUser, addFriendMute, stateMute } from "@/api/message/adUser.js";
import fileUpload from './../common/file/fileUpload/index.vue';
import cropping from './../common/file/fileUpload/Cropping.vue';
import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';

const { proxy } = getCurrentInstance();
const store = useStore();
const imagesrc = ref();
const show1 = ref(false);
const iconConfig = proxy.iconConfig;
const adUser = iconConfig.adUser;
const fileTypeInfo1 = ref("image");
const fileTypeInfo2 = ref("video");
const ProhibitionOpen = ref(true);
const show2 = ref(false);
const show2UserInfo = ref({});
const QNDomain = store.state.user.QNDomain;
const bgColor = ref('#6AA2FF');
const adUserInfo = ref([]);
const reason = ref();
const muteDay = ref();


const leftClick = () => {
    proxy.$tab.navigateBack(1)
}
onLoad(() => {
    getList();
});

const getList = async () => {
    try {
        const response = await getADUser();
        const userInfoList = response.data;

        // 获取每个用户的禁言状态并存储在用户对象中
        const userMuteStatusPromises = userInfoList.map(async user => {
            const form = { userId: user.userId };
            const muteStatus = await stateMute(form);
            return { ...user, isMuted: muteStatus };
        });

        adUserInfo.value = await Promise.all(userMuteStatusPromises);
        console.log("用户信息：", adUserInfo.value);
    } catch (error) {
        console.error("获取用户列表失败:", error);
    }
};

const avatarIcon = (e) => {
    return QNDomain + e;
};

const toProhibition = (e) => {
    show2UserInfo.value = e;
    show2.value = true;
};

const muteInfo = () => {
    if (muteDay.value === '' || muteDay.value == null) {
        proxy.$modal.msgError("请输入禁言时长");
        return;
    }
    if (reason.value === '' || reason.value == null) {
        proxy.$modal.msgError("请输入禁言原因");
        return;
    }
    const form = {
        userId: show2UserInfo.value.userId,
        muteDay: muteDay.value,
        reason: reason.value,
        status: 1,
    };
    addFriendMute(form).then(e => {
        console.log(e);
        proxy.$modal.msgSuccess("禁言成功！");
		getList();
        show2.value = false;
    });
};
const toInfo = (item) =>{
    proxy.$tab.navigateTo("/pages/message/minindex?userId="+item.userId);
}

</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
}

.text1 {
    font-weight: 600;
    font-size: 36rpx;

    color: #FFFFFF;
}

.listInfo {
    width: 750rpx;
    height: 108rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 32rpx;
    padding-right: 32rpx;

    .nameInfo {
        display: flex;
        flex-direction: column;
        margin-left: 26rpx;

        .text2 {
            font-weight: 400;
            font-size: 30rpx;
            color: #000000;

        }

        .text3 {
            font-weight: 400;
            font-size: 20rpx;
            color: #939393;
        }
    }

}

.prohi-1 {
    width: 96rpx;
    height: 40rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    background: #6aa2ff;
    display: flex;
    justify-content: center;
    align-items: center;

    .text4 {
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
    }
}

.prohi-2 {
    width: 96rpx;
    height: 40rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    background: #f4f5f6;
    display: flex;
    justify-content: center;
    align-items: center;

    .text5 {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
    }
}

.popup-userInfo {
    position: relative;
    /* 确保弹窗使用相对定位 */
    height: 100rpx;

    .avatar-1 {
        position: absolute;
        /* 头像使用绝对定位 */
        top: -100rpx;
        /* 根据实际需要，上移头像 */
        left: 50%;
        /* 水平居中对齐 */
        transform: translateX(-50%);
        /* 偏移自身宽度的一半，以真正实现水平居中 */
        z-index: 10;
        /* 确保在其他内容之上 */
    }
}

.cardz {
    height: 54rpx;
    text-align: center;
    margin-top: 22rpx;

    .text6 {
        font-weight: 600;
        font-size: 30rpx;
        color: #333333;
    }
}

.cardx {
    height: 526rpx;
    width: 684rpx;
    margin: 0 auto;

    .btnInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 48rpx;
        padding-right: 22rpx;
        padding-left: 22rpx;

        .btn1 {
            width: 300rpx;
            height: 80rpx;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            background: #f4f5f6;
            display: flex;
            justify-content: center;
            align-items: center;

            .text7 {
                font-weight: 400;
                font-size: 30rpx;
                color: #999999;
            }
        }

        .btn2 {
            width: 300rpx;
            height: 80rpx;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            background: #6aa2ff;
            display: flex;
            justify-content: center;
            align-items: center;
            .text8 {
                font-weight: 400;
                font-size: 30rpx;
                color: #FFFFFF;
            }
        }
    }
}
</style>