eta_front/src/components/questionMsgDia.vue

<template>
    <el-popover
        placement="bottom"
        width="404"
        trigger="hover"
        popper-class="question-msg-pop"
        @show="handleShow"
        @hide="handleShow"
    >
        <div class="question-msg-pop-content">
            <div style="font-size:16px">待处理消息（{{list.length}}）</div>
            <div class="list-box">
                <div class="item" v-for="item in list" :key="item.CommentId" @click="goDetail(item)">
                    <img class="avatar" :src="item.HeadImgUrl?item.HeadImgUrl:'~@/assets/img/icons/msg-inner.png'" alt="">
                    <div style="overflow:hidden">
                        <div class="title">{{item.Content}}</div>
                        <div class="time">{{item.CreateTime}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div slot="reference" style="position:relative;cursor: pointer;marginRight:26px" >
            <div v-if="isshow">
                <img src="~@/assets/img/icons/msg.png" alt="" style="height:32px;marginTop:6px;">
                <span style="width:8px;height:8px;borderRadius:50%;background:#f00;display:block;position:absolute;right:-4px;top:3px;" v-show="list.length>0"></span>
            </div>
        </div>
    </el-popover>
</template>

<script>
import { interactiveInterface } from '@/api/api.js'
export default {
    data() {
        return {
            list:[],
            isshow:false,
        }
    },
    created(){
        this.getList()
    },
    methods: {
        handleShow(){
            this.getList()
        },
        async getList(){
            const res=await interactiveInterface.getAllNoticeList()
            if(res.Ret===200){
                const arr=res.Data.List||[]
                this.isshow=res.Data.IsShow
                this.list=arr
            }
        },

        goDetail(item){
            // if(this.$route.path=='/messageboard'){
            //     this.$router.push({
            //         query:{
            //             from:'notice',
            //             reportid:item.ReportId||0
            //         }
            //     })
            //     setTimeout(() => {
            //         this.$router.go(0)
            //     }, 300);
            // }else{
            //     this.$router.push({
            //         path:'/messageboard',
            //         query:{
            //             from:'notice',
            //             reportid:item.ReportId||0
            //         }
            //     })
            // }
            
            // 去到留言管理页面
            if(this.$route.path=='/ybComment'){
                this.$router.go(0)
            }else{
                this.$router.push('/ybComment')
            }
            
        }
    },
}
</script>

<style lang="scss">
.question-msg-pop{
    padding: 20px;
}    
</style>
<style lang="scss" scoped>

.question-msg-pop-content{
    min-width: 404px !important;
    .list-box{
        margin-top: 20px;
        border-top: 1px solid #DCDFE6;
        min-height: 400px;
        max-height: 600px;
        overflow-y: auto;
        .item{
            display: flex;
            margin: 17px 0;
            cursor: pointer;
            align-items: center;
            // &::before{
            //     content: '';
            //     display: block;
            //     width: 40px;
            //     height: 40px;
            //     background-image: url('~@/assets/img/icons/msg-inner.png');
            //     background-size: cover;
            //     flex-shrink: 0;
            //     margin-right: 15px;
            // }
            .avatar{
                width: 40px;
                height: 40px;
                object-fit: cover;
                margin-right: 15px;
            }
            .title{
                font-size: 16px;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .time{
                color: #999;
                font-size: 12px;
            }
        }
    }
}
</style>