admin_home/src/views/chat/businessDistrictDetail.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 }}
                  <el-tag type="info" class="article-tag">{{ dataInfo.topicname }}</el-tag>
                </div>
                <div class="article-meta">
                  <span class="article-meta-item1">{{ dataInfo.nickname }}</span>
                  <span class="article-meta-item2">{{ dataInfo.group_name }}</span>
                  <el-button  class="top-button" type="primary" @click="viewGroupChat">查看群聊</el-button>
                </div>
                <el-divider></el-divider>
                <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="!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 @click="goBack">返回</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添加展开状态
        //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;
        },
        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);
          // 这里一般不需要监听自己发的事件，除非有特殊需求
        }
    },
    mounted() {
      // 1.获取详情数据
      self.id = this.$route.query.id+'';
      this.getDataINfo();
      this.getTopicReplyList();
      // 可选：如果你需要监听（一般只在调试时用）
      emitter.on('view-group-chat', this.handleViewGroupChat);
    },
    beforeDestroy() {
      emitter.off('view-group-chat', this.handleViewGroupChat);
    }
  }
  </script>
  
  <style scoped lang="less">
   .article-detail {
    // padding: 24px;
    // background: #f5f7fa;
    min-height: 100vh;

  .article-card {
    margin-bottom: 24px;
    padding: 24px 0px;
    background: #fff;
    // border-radius: 8px;
    // box-shadow: 0 2px 8px rgba(0,0,0,0.04);

    .article-title {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      font-size: 28px;
      color: #333333;
      display: flex;
      align-items: center;
      .article-tag {
        background: rgba(85,112,241,0.16) !important;
        border-radius: 3px 3px 3px 3px !important;
        margin-left: 12px;
        font-size: 14px;
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        border-radius: 4px;
        font-weight: 400;
        font-size: 14px;
        color: #5570F1;
      }
    }
    .article-meta {
      margin-top: 31px;
      color: #888;
      font-size: 16px;
      display: flex;
      align-items: center;
      .article-link {
        margin-left: 12px;
      }
    }
    .article-content {
      // margin: 18px 0 12px 0;
      color: #444;
      font-size: 15px;
      line-height: 1.8;
      word-break: break-all;
    }
    .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;
        .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;width:1000px; }
        .comment_li_time{float:right;margin:44px 30px 44px 0px;color:#999;font-size:16px;line-height:24px; }
      margin-bottom: 16px;
      .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('http://img.bjzxtw.org.cn/master/www/admin/renwu.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('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{
    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>