learning-system-portal/src/views/homepage/leavingMessage.vue

<template>
    <!--评论组件-->
    <div class="leaving-message">
       <el-button @click="backto()" class="backbut"  icon="el-icon-arrow-left" type="text">返回主页</el-button>
      <div style="margin-top:20px">
        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="textarea" maxlength="200" show-word-limit></el-input>
        <el-button class="lea-btn" type="primary" @click="add()">发布</el-button>
      </div>
      <h6 class="lea-num">{{count}}条留言</h6>
      <div>
        <ul class="lea-ul">
            <li class="lea-li" v-for="(item, idx) in leavingList" :key="item.id">
                <div class="lev-li">
                    <div class="li-img">
                      <author-img :avatar="item.authorInfo.avatar" :aid="item.authorInfo.aid" :sex="item.authorInfo.sex"></author-img>
                    </div>
                    <div class="li-text">
                        <p class="portal-title-tow">{{item.authorInfo.name}} <span class="portal-summary-text">{{item.authorInfo.sign}}</span></p>
                        <p>{{item.content}}</p>
                    </div>
                    <div class="li-right">
                      <div class="replys-icon" @click="showReplyInput(item, idx)"><svg-icon style="margin-right: 4px;font-size: 14px;" icon-class="comment"></svg-icon>回复</div>
                      <div style="margin-top:4px">
                        <interactBar :type="7" :data="item" :comments="false" :shares="false" :views="false" :favorites="false"></interactBar>
                      </div>
                      <div class="replys-icon" style="margin-right:0px;margin-left:10px" v-if="userInfo.aid == item.sysCreateAid" @click="delReply(item)"><svg-icon icon-class="notedel" style="margin-right: 4px;font-size: 14px;"></svg-icon>删除</div>
                    </div>
                </div>
                <!-- 回复框 -->
                <div class="replys-input" style="padding-left: 60px;margin:10px 0" v-if="item.isReplys">
                  <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="replysContent" maxlength="200" show-word-limit></el-input>
                  <el-button class="lea-btn" type="primary" @click="addReplys(item,item)">回复</el-button>
                </div>
                <!-- 回复框 -->
                <div class="lev-li-tow" v-for="(rep,index) in item.replyList" :key="index">
                    <div class="lev-li">
                        <div class="li-img"><author-img :avatar="rep.authorInfo.avatar" :aid="rep.authorInfo.aid" :sex="rep.authorInfo.sex"></author-img></div>
                        <div class="li-text">
                            <p class="portal-title-tow">{{rep.authorInfo.name}} <span class="portal-summary-text">{{rep.authorInfo.sign}}</span></p>
                            <p>{{rep.content}}</p>
                        </div>
                        <div class="li-right">
                           <div class="replys-icon" @click="showReplyInput(rep, idx)"><svg-icon style="margin-right: 4px;font-size: 14px;" icon-class="comment"></svg-icon>回复</div>
                          <!-- <interactBar :type="7" :data="rep" :comments="false" :shares="false" :views="false" :favorites="false"></interactBar> -->
                          <div class="replys-icon" style="margin-right:0px;margin-left:10px"  v-if="userInfo.aid == item.sysCreateAid" @click="delReplySon(item,index)"><svg-icon icon-class="notedel" style="margin-right: 4px;font-size: 14px;"></svg-icon>删除</div>
                        </div>
                    </div>
                    <div class="replys-input" style="padding-left: 60px;margin:10px 0" v-if="rep.isReplys">
                      <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="replysContent" maxlength="200" show-word-limit></el-input>
                      <el-button class="lea-btn" type="primary" @click="addReplys(item,rep)">回复</el-button>
                    </div>
                </div>

            </li>
        </ul>
        <div style="text-align: center; margin-top:57px;" v-show="count > 0">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
            </el-pagination>
        </div>
      </div>
    </div>
  </template>
  <script>
    import showTime from '@/components/Portal/datetimeShow.vue'
    import apiComment from '@/api/modules/comments.js'
    import apiUser from '@/api/system/user.js'
    import apiGuestbook from '@/api/phase2/guestbook.js'
    import authorImg from '@/components/Portal/authorImg.vue';
    // import author from '@/components/Portal/author.vue';
    import interactBar from "@/components/Portal/interactBar.vue";
    import { mapGetters } from 'vuex';
    export default {
        props:{

        },
      components:{showTime,authorImg,interactBar},
      computed: {
        ...mapGetters(['userInfo'])
      },
     data() {
         return {
            textarea:'',
            replysContent:'',
            leavingList:[],
            count:0,
            page:{
              pageIndex:1,
              pageSize:10,
              aid:''
            },
            replysData:{
              id:'',
              reply:[],
            }
         }
     },
      created() {
        this.pageId =this.$xpage.getHomeId(this.$route);
        if(this.pageId){
          this.getList();
        }else{
          this.$router.push({path:'/404'})
        }
      },
      methods: {
        backto(){
          this.$router.go(-1);
        },
        delReplySon(item,index) { //子级的删除手动删掉，调用保存接口
          //修改后，替换为下面的情况
          apiGuestbook.del(item.id).then(res=>{
            if(res.status==200){
               item.replyList.splice(index,1);
               this.$message.success('删除成功');
            }else{
               this.$message.error('删除失败'+res.message);
            }
          });
        },
        delReply(item) {
          this.$confirm('此操作将永久删除该留言, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            apiGuestbook.del(item.id).then(res=>{
               if(res.status == 200) {
                this.getList();
                this.$message({type: 'success',message: '删除成功!' });
               }
            })
          }).catch(() => {
            this.$message({type: 'info', message: '已取消删除'});
          });
        },
        showReplyInput(item,idx) {
          //关闭其它的
          this.leavingList.forEach(top=>{
            if(top.id!=item.id){
              top.isReplys=false;
            }
            
            top.replyList.forEach(reply=>{
              if(reply.id!=item.id){
                 reply.isReplys=false;
              }
             
            })
          })
          if(item.isReplys){
            item.isReplys =false;
          }else{
            item.isReplys =true;
          }

          this.replysData.id = item.id;
          //this.replysData.reply = item.replyList;
        },
        addReplys(top,p) {
          if(this.replysContent.trim().length  == 0) {
            return this.$message.warning('请填写内容！');
          }
          let postData={
             content:this.replysContent,
             topId:top.id,
             parentId:p.id,
             level:2,
             replys:0
          }
          let $this=this;
          apiGuestbook.answer(postData).then(res=>{
            this.replysContent = '';
            if(res.status == 200) {
               this.$message.success('回复留言成功');
               p.isReplys = false;
               res.result.authorInfo=$this.userInfo;
               top.replyList.push(res.result);
               //直接追加到列表后面
               // this.leavingList.forEach(item=>{
               //    item.isReplys = false;
               // })
            }else{
               this.$message.error('回复留言失败');
            }
          })
        },
        getList() {
          this.page.aid = this.pageId;
          apiGuestbook.givelist(this.page).then(res=>{
            if(res.status == 200) {
              this.count = res.result.count;
              let ids=[];
              res.result.list.forEach(item=>{
                if(!item.replyList){
                   item.replyList = [];
                }
                ids.push(item.sysCreateAid);
                item.isReplys = false;
                item.authorInfo = { aid: "",name: "",orgInfo: "",avatar: "",sex: null,sign:'' }
                item.replyList.forEach(child=>{
                   child.isReplys=false;
                   child.authorInfo= { aid: "",name: "",orgInfo: "",avatar: "",sex: null,sign:'' }
                   ids.push(child.sysCreateAid);
                })
              })
              this.leavingList = res.result.list;
              this.getUserData(ids,this.leavingList);
            }
          })
        },
        add() {
          if(this.textarea.trim().length  == 0) {
            return this.$message.warning('请填写内容！');
          }
          let data = {
            content:this.textarea,//留言内容
            aid:this.pageId,//  要留言的人的id
          }
          apiGuestbook.save(data).then(res=>{
             if(res.status == 200) {
              this.textarea = '';
              // this.leavingList.push(res.result);
              this.getList();
              this.$message.success('留言发布成功');
             } else {
              this.$message.error(res.message);
             }
          })
        },
        getUserData(ids,list) {

          const noReapetIds = [...new Set(ids)];
          apiUser.getByIds(noReapetIds).then(res => {
              if (res.status == 200) {
                  list.forEach((item, index) => {
                      res.result.some(author => {
                          if (author.aid == item.sysCreateAid) {
                              item.authorInfo = author;
                              return true;
                          } else {
                              return false;
                          }
                      });
                      item.replyList.forEach(child=>{
                         res.result.some(author => {
                             if (author.aid == child.sysCreateAid) {
                                 child.authorInfo = author;
                                 return true;
                             } else {
                                 return false;
                             }
                         });
                      })
                  });
              } else {
              this.$message.error(res.message);
              }
          });


       },
       handleSizeChange(val) {
           this.page.pageSize = val;
           this.page.pageIndex = 1;
           this.getList();
       },
       handleCurrentChange(val) {
           this.page.pageIndex = val;
           this.getList();
       },
      }
    }
  </script>

  <style lang="scss" scoped>
    .backbut{
      position: absolute;
      top: 10px;
      left: 10px;
    }
  .leaving-message{
    flex: 1;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 48px 48px;
    position: relative;
    .lea-btn {
        float: right;
        cursor: pointer;
        margin-top: 26px;
        width: 80px;
        height: 30px;
        line-height: 10px;
        background: #87B3FF;
        box-shadow: 1px 2px 8px 1px rgba(56,125,247,0.31);
        border-radius: 4px;
        border: none;
    }
    .lea-num{
        margin: 97px 0 0 0;
        font-size: 20px;
        font-weight: 600;
        color: #333333;
    }
    .lea-ul{
        margin: 46px 0 0 0;
        .lev-li-tow{
            margin-left: 60px;
        }
        .lev-li{
            display: flex;
            margin-top: 38px;
            .li-img{
               width: 40px;
               height: 40px;
               img{
                width: 40px;
                height: 40px;
               }
            }
            .li-text{
                flex: 100%;
                margin: 0 40px 0 20px;
                &:first-child{
                  font-size: 16px !important;
                }
                p:last-child{
                  margin-top: 16px;
                  font-size: 14px;
                  color: #333333;
                }
            }
           .replys-input{
            padding-left: 50px;
              // display: flex;
              // .el-textarea{
              //   width: 80%;
              // }
            }
            .li-right{
              display: flex;
              margin-top: 40px;
              .replys-icon{
                width: 50px;
                cursor: pointer;
                color: #6E7B84;
                font-size: 12px;
                margin-right: 22px;
                margin-top: 8px;
              }
            }
        }
    }
}
  </style>