admin_home/src/views/notice/complaintDetail.vue

<template>
    <div class="mainBox">
        <div class="layerBox">
            <tableTitle :name="tableDivTitle" />
            <el-row>
                <template>
                    <!-- 在此位置下面写 -->
                    <div class="article-detail">
                        <div class="article-card">
                            <div class="article-title">
                                {{ dataInfo.title }}
                            </div>
                            <div class="article-meta">
                                <div class="left">
                                    <span>投诉地区：北京市-大兴区</span>
                                    <span>投诉类型：公安</span>
                                </div>
                                <span class="happenTime">发生日期：2023-08-01 10:00:00</span>
                            </div>
                            <el-divider> </el-divider>
                            <div class="detail_title">
                                <div class="title">
                                    事件描述:
                                </div>
                            </div>
                            <div class="background-color">
                                <div class="article-author">
                                    <div class="article_box">
                                        <div class="article_panel" :class="{ collapsed: !isExpanded }">
                                            <div v-html="dataInfo.content"></div>
                                        </div>
                                        <span class="article_panel_btn" v-if="showReadMoreBtn && !isExpanded"
                                            @click="toggleExpand">
                                            阅读全文
                                            <i class="el-icon-arrow-down"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div>我的要求:</div>
                            <div class="background-color">
                                <div class="article-author">
                                    <div class="article_box">
                                        <div class="article_panel" :class="{ collapsed: !isExpanded }">
                                            <div v-html="dataInfo.content"></div>
                                        </div>
                                        <span class="article_panel_btn" v-if="showReadMoreBtn && !isExpanded"
                                            @click="toggleExpand">
                                            阅读全文
                                            <i class="el-icon-arrow-down"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment-section">
                            <div class="box_1 clearfix">
                                <div class="box_in">附件:</div>
                            </div>

                            <!-- <div class="comment-list">
                                <div class="comment_li" v-for="(per_obj, keys) in replyList" :key="keys">
                                    <el-avatar class="comment_li_img" :src="per_obj.avatar" />
                                    <div class="comment_li_name">{{ per_obj.nickname }}：</div>
                                    <div class="comment_li_text">
                                        {{ per_obj.content }}
                                    </div>
                                    <div class="comment_li_time">{{ per_obj.created_at }}</div>
                                </div>
                            </div> -->
                            <!-- <div class="alignBox">
                                <el-row>
                                    <el-col :span="24">
                                        <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange" :page-size="5"
                                            layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
                                    </el-col>
                                </el-row>
                            </div> -->
                            <div class="comment-actions">
                                <el-button type="info" @click="goBack">返回</el-button>
                                <!-- <el-button type="info" plain>信息按钮</el-button> -->
                                <!-- <el-button type="primary" @click="viewGroupChat">查看群聊</el-button> -->
                            </div>
                        </div>
                    </div>
                </template>
            </el-row>
        </div>

    </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle';
//引入公用样式
import '@/styles/global.less';
import InputTag from '@/components/InputTag'
import { getTopicDataInfo, getTopicReply } from '@/api/chat'
import emitter from '@/eventBus';

export default {
    components: {
        tableTitle,//表格标题
        InputTag
    },
    data() {
        let self = this;
        return {
            id: '',
            dataInfo: {},
            isExpanded: false, // btn添加展开状态
            showReadMoreBtn: false,
            //1.列表和分页相关 start ------------------------------------------------------------>
            tableDivTitle: "通知详情",
            getApiData: {
                page: 1,//当前是第几页
                pageSize: 5,//一共多少条
            },
            allCount: 0,//总条数
            replyList: [],
            currentGroupId: null
        }
    },
    methods: {
        //1.4 列表内容分页
        //直接跳转
        handleSizeChange(val) {
            this.getApiData.page = val;
            this.getTopicReplyList();
        },
        //1.5 点击分页
        handleCurrentChange(val) {
            this.getApiData.page = val;
            this.getTopicReplyList();
        },
        toggleExpand() { // 添加切换方法

            this.isExpanded = true;
        },
        checkPanelHeight() {
            this.$nextTick(() => {
                const panel = this.$el.querySelector('.article_panel');
                if (panel) {
                    this.showReadMoreBtn = panel.scrollHeight > 270;
                }
            });
        },
        getDataINfo() {
            getTopicDataInfo({
                id: self.id
            }).then(data => {
                // this.loading=false;
                console.log("返回数据", data.data);
                this.dataInfo = data.data;
                console.log("赋值：", self.dataInfo)

            })
        },
        getTopicReplyList() {
            getTopicReply({
                id: self.id,
                page: this.getApiData.page,
                page_size: this.getApiData.pageSize
            }).then(data => {
                this.replyList = data.data.data;
                this.allCount = data.data.total;

            })
        },
        goBack() {
            this.$router.back();
        },
        viewGroupChat() {
            console.log('[businessDistrictDetail] 触发 view-group-chat 事件，id1:', this.dataInfo);
            emitter.emit('view-group-chat', this.dataInfo);
        },
        handleViewGroupChat(ids) {
            console.log('[businessDistrictDetail] 收到 view-group-chat 事件，id2:', ids);
            // 这里一般不需要监听自己发的事件，除非有特殊需求
        },

        getMainData() {
            let data = {
                id: 41
            };
            this.$store.dispatch('news/getNoticeInfo', data).then(res => {
                console.log('详情数据', res);
                this.dataInfo = res.data;
            })
        },
    },
    mounted() {
        // 1.获取详情数据
        self.id = this.$route.query.id + '';
        this.getDataINfo();
        this.getTopicReplyList();
        this.checkPanelHeight();
        // 可选：如果你需要监听（一般只在调试时用）
        emitter.on('view-group-chat', this.handleViewGroupChat);
        this.getMainData();
    },
    beforeDestroy() {
        emitter.off('view-group-chat', this.handleViewGroupChat);
    },
    // watch: {
    //     'dataInfo.content': function () {
    //         this.checkPanelHeight();
    //     }
    // }
}
</script>

<style scoped lang="less">
.article-detail {
    // padding: 24px;
    // background: #f5f7fa;
    min-height: 100vh;

    .article-card {
        margin-bottom: 24px;
        padding: 24px 0px;
        background: #fff;

        .article-title {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 28px;
            color: #333333;
            display: flex;
            align-items: center;

            .article-tag {
                margin-left: 30px;
            }
        }

        .article-meta {
            margin-top: 31px;
            color: #888;
            font-size: 16px;
            display: block;
            height: 40px;

            .left {
                float: left;
            }

            .article-link {
                margin-left: 12px;
            }

            .happenTime {
                float: right;
                margin-right: 20px;
            }
        }


        .detail_title {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #E1E1E1;
            margin-bottom: 40px;

            .title {
                width: 103px;
                font-size: 22px;
                font-weight: bold;
                color: #5570f1;
                border-bottom: 3px solid #5570f1;
            }
        }

        .article-author {
            margin-top: 12px;
            color: #999;
            font-size: 18px;

            span {
                font-weight: 400;
                font-size: 18px;
                color: #6A82F3;
                text-align: center;
                // margin-right: 16px;
                display: block;
                line-height: 30px;
            }
        }
    }

    .comment-section {
        // padding: 24px 32px;
        background: #fff;
        border-radius: 8px;

        .comment-title {
            font-weight: bold;
            font-size: 22px;
            color: #5570F1;
            // font-size: 16px;
            // font-weight: bold;
            // color: #333;
            margin-bottom: 8px;
            text-align: left;
        }

        // 蓝色短分割线，宽度10%，居中
        .el-divider {
            margin: 8px auto 16px auto;
            border: none;
            height: 0;
            width: 10%;
            min-width: 40px;
            max-width: 100px;
            border-top: 2px solid #5570F1;
            border-radius: 2px;
            background: transparent;
        }

        .comment-list {
            margin-top: 40px;
            margin-bottom: 16px;
            min-height: 200px;

            .comment_li {
                background: #FAFAFA;
                border: solid 1px #E1E1E1;
                overflow: hidden;
                margin-bottom: 20px;
            }

            .comment_li_img {
                float: left;
                width: 52px;
                height: 52px;
                border-radius: 50%;
                margin: 30px 0px 30px 30px;
            }

            .comment_li_name {
                float: left;
                margin: 44px 0px 44px 20px;
                color: #333;
                font-size: 16px;
                line-height: 24px;
            }

            .comment_li_text {
                float: left;
                margin: 45px 0px 11px 20px;
                color: #333;
                font-size: 16px;
                line-height: 24px;
                font-weight: bold;
                max-width: 1000px;
            }

            .comment_li_time {
                float: right;
                margin: 44px 30px 44px 0px;
                color: #999;
                font-size: 16px;
                line-height: 24px;
            }



            .comment-item {
                display: flex;
                align-items: center;
                padding: 12px 0;
                border-bottom: 1px solid #f0f0f0;

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

                .comment-avatar {
                    width: 36px;
                    height: 36px;
                    margin-right: 12px;
                }

                .comment-content {
                    .comment-user {
                        font-size: 15px;
                        color: #555;
                        font-weight: 500;
                    }

                    .comment-time {
                        font-size: 12px;
                        color: #aaa;
                        margin-top: 2px;
                    }
                }
            }
        }

        .comment-actions {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 12px;
        }
    }

    .article-meta-item1 {
        position: relative;
        padding-left: 27px;

        &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('../../assets/notice/notice1.png') no-repeat center center;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 4px;
        }
    }

    .article-meta-item2 {
        position: relative;
        padding-left: 27px;
        margin-left: 40px;

        &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('../../assets/notice/notice2.png') no-repeat center center;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 4px;
        }
    }

    .article-meta-item3 {
        position: relative;
        padding-left: 27px;
        margin-left: 40px;

        &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('http://img.bjzxtw.org.cn/master/www/admin/wechat.png') no-repeat center center;
            background-size: contain;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 4px;
        }
    }

    .top-button {
        margin-left: 30px;
    }

    .background-color {
        min-height: 617px;
        background: #f0f2f5;
        padding: 10px 20px 0px 20px;
    }

    .clearfix::after {
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }

    .box_1 {
        border-bottom: solid 1px #E9EDF7;
        box-sizing: border-box;
    }

    .box_in {
        font-weight: bold;
        float: left;
        font-size: 22px;
        color: #5570F1;
        height: 33px;
        line-height: 33px;
        border-bottom: solid 2px #5570F1;
        margin-bottom: -1px;
    }
}

.article_box {
    margin-top: 11;
    overflow: hidden;
}

.article_panel {
    transition: max-height 0.3s;
    overflow: hidden;
    position: relative;
    max-height: none;

    // 展开时无高度限制
    &.collapsed {
        max-height: 270px; // 固定高度

        // 可选：加渐变遮罩
        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            // height: 36px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 80%);
            pointer-events: none;
        }
    }
}

.article_panel_btn {
    display: inline-block;
    color: #5570F1;
    cursor: pointer;
    margin-top: 8px;
    font-size: 15px;
}

.dot1 {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>