talk_appAmin/pages/message/minindex.vue

<template>
    <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 class="cardss">
        <up-avatar :src="avatarIcon(adUserInfo.user.avatar)" shape="square" size="145rpx"></up-avatar>
        <view style="margin-left: 24rpx;">
            <view class="cardss-1">
                <view class="text3">{{ adUserInfo.user.nickName }}</view>
              <view>{{muteDay}}</view>
                <view v-if="adUserInfo.user.userType === '00'" class="renzhen">
                    <span class="text2">已认证</span>
                </view>
            </view>
            <view class="text4">账号：{{ adUserInfo.user.userName }}</view>
            <view class="text4">地区：{{ adUserInfo.area }}</view>
            <view class="text4">学校：{{ adUserInfo.dept.parentName }}</view>
        </view>
    </view>
    <view class="cardzz">
        <view class="btn1" @click="gotoAddr(adUserInfo.user.userId,adUserInfo.user.nickName,adUserInfo.user.avatar)" >
            <image :src="tomessage" style="width: 32rpx; height: 32rpx;"></image>
            <span class="text5">发消息</span>
        </view>
        <view class="btn2" @click="toProhibition">
            <image :src="tomessageno" style="width: 32rpx; height: 32rpx;"></image>
            <span class="text5">禁言</span>
        </view>
    </view>

    <view>
        <up-popup :show="show2" :round="10" mode="bottom" @close="show2 = false">
            <view class="popup-userInfo">
                <up-avatar :src="avatarIcon(adUserInfo.user.avatar)" size="200rpx" class="avatar-1"></up-avatar>
            </view>
            <view class="cardz">
                <view class="text6">{{ adUserInfo.user.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, getMuteInfo, updateMuteEdit } from "@/api/message/adUser.js";
import { getADUserInfo } from "@/api/system/userinfo.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 tomessage = iconConfig.tomessage;
const tomessageno = iconConfig.tomessageno;
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 newUserId = ref();
const sendercont = ref([]);
const hasMuteData = ref(false);


const leftClick = () => {
    proxy.$tab.navigateBack(1)
}
onLoad((option) => {
    console.log(option);
    newUserId.value = option.userId;
    getInfo();
});
onShow(() => {
	proxy.$store.dispatch('webSockerInfo')

})

const getInfo = () => {
    getADUserInfo(newUserId.value).then(e => {
        console.log("e:", e);
        adUserInfo.value = e.data;
    })
}
const avatarIcon = (e) => {
    return QNDomain + e;
};
const toProhibition = async () => {
    const response = await getMuteInfo(newUserId.value);
    console.log(response);
    if (response.data) {
        // 如果有禁言数据，则将数据渲染到弹窗中
        muteDay.value = response.data.muteDay;
        reason.value = response.data.reason;
        hasMuteData.value = true;
    }else {
        // 如果没有禁言数据，则清空 muteDay 和 reason
        muteDay.value = '';
        reason.value = '';
        hasMuteData.value = false;
    }
    show2.value = true;
};
const muteInfo = () => {
    if (muteDay.value === '' || muteDay.value == null) {
        proxy.$modal.msgError("请输入禁言时长");
        return;
    }
    if (!reason.value || reason.value.trim() === '') {
        proxy.$modal.msgError("请输入禁言原因");
        return;
    }
    const form = {
        userId: adUserInfo.value.userId,
        muteDay: muteDay.value,
        reason: reason.value.trim(), // 移除reason两端的空格  
        status: 1,
    };
    if (hasMuteData.value) {
        // 如果有禁言数据，则调用修改禁言接口
        updateMuteEdit(form).then(e => {
            console.log(e);
            proxy.$modal.msgSuccess("禁言修改成功！");
            show2.value = false;
			location. reload()
        });
    } else {
        addFriendMute(form).then(e => {
        console.log(e);
        proxy.$modal.msgSuccess("禁言成功！");
        show2.value = false;
		location. reload()
    });
    } 
	
};

 function gotoAddr(id, name, youavatar) {
    console.log("点击了");
	const userInfo = {
	  friendid: id,
	  title: name,
	  myavatar: null,
	  youavatar: youavatar,
	};
  
	uni.setStorage({
	  key: 'userInfo',
	  data: userInfo,
	  success: function () {
		proxy.$tab.navigateTo("/pages/Friend/messagechat")
	  },
	});
  }
  
</script>

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

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

    color: #FFFFFF;
}

.cardss {
    width: 750rpx;
    height: 276rpx;
    padding-top: 32rpx;
    padding-left: 32rpx;
    display: flex;
    background-color: #ffffff;

    .cardss-1 {
        display: flex;
        align-items: center;

        .text3 {
            font-weight: 600;
            font-size: 36rpx;
            color: #333333;
        }
    }



    .text4 {
        margin-top: 24rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
    }
}

.renzhen {
    margin-left: 24rpx;
    width: 78rpx;
    height: 26rpx;
    border-radius: 13rpx 13rpx 13rpx 13rpx;
    background: #6aa2ff;
    display: flex;
    justify-content: center;
    align-items: center;

    .text2 {
        font-weight: 400;
        font-size: 18rpx;
        color: #FFFFFF;
    }
}

.cardzz {
    margin-top: 24rpx;

    .btn1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 750rpx;
        height: 80rpx;
        background-color: #ffffff;
        
        .text5 {
            font-weight: 400;
            font-size: 24rpx;
            margin-left: 12rpx;
            color: #6AA2FF;
        }
    }
    .btn2 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 750rpx;
        height: 80rpx;
        margin-top: 2rpx;
        background-color: #ffffff;
        .text5 {
            font-weight: 400;
            font-size: 24rpx;
            margin-left: 12rpx;
            color: #6AA2FF;
        }
    }
}
.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;
            }
        }
    }
}
.popup-userInfo {
    position: relative;
    /* 确保弹窗使用相对定位 */
    height: 100rpx;

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

</style>