src/components/group/MyMessage.vue

@@ -1,56 +1,48 @@
<template>
   <div class="myModal">
      <a-modal v-model="visible" title="天涯共此时.." :footer="null"
      <a-modal v-drag-modal v-model="visible" title="天涯共此时.." :footer="null"
         :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
         <!-- <template #actions>
            <a-button>
               未读
               <a-icon type="bell" />
            </a-button>
         </template> -->
         <a-list item-layout="horizontal" :data-source="dataList">
            <template slot="renderItem" slot-scope="item">
               <a-list-item>
                  <a-list-item-meta :description="item.commentContent">
                     <template #avatar>
                        <a :href="item.visitorHomePage" target="_blank" v-if="item.visitorHomePage!=''">
                           <a-tooltip placement="bottomLeft" :title="item.visitorNickName">
                              <span class="myTip">{{item.visitorNickName}} :</span>
                           </a-tooltip>
                        </a>
                        <a-tooltip placement="bottomLeft" :title="item.visitorNickName" v-else>
                           <span class="myTip">{{item.visitorNickName}} :</span>
                        </a-tooltip>
                     </template>
                     <template #title>
                        在
                        <router-link to="/comment" v-if="item.commentType==1" @click.native="handleCancel()">碎碎念
                        </router-link>
                        <router-link :to="{path:'/mdDetail',query:{id:item.articleId}}"
                           :title="item.articleTitle" @click.native="handleCancel()" v-else>
                           {{item.articleTitle}}
                        </router-link>
                        中留言
                     </template>

                  </a-list-item-meta>
                  <!-- <template #extra>
                     {{item.createDate}}
                  </template> -->
               </a-list-item>
            </template>
            <template #loadMore>
               <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                  <a-button @click="loadMore" :disabled="refresh" v-if="showButton">
                     加载更多
                  </a-button>
                  <a-button disabled v-else>
                     更多记录就不展示啦..
                  </a-button>
         <div class="myComment" v-for="item in dataList" style="display: flex;padding: 0px 10px 10px 10px;">
            <div style="min-width: 15%;">
               <a :href="item.visitorHomePage" target="_blank" v-if="item.visitorHomePage!=''">
                  <a-tooltip placement="bottomLeft" :title="item.visitorNickName">
                     <span class="myTip">{{item.visitorNickName}} :</span>
                  </a-tooltip>
               </a>
               <a-tooltip placement="bottomLeft" :title="item.visitorNickName" v-else>
                  <span class="myTip">{{item.visitorNickName}} :</span>
               </a-tooltip>
            </div>
            <div>
               <div style="padding-bottom: 10px;">
                  在
                  <router-link to="/comment" @click.native="handleCancel()" v-if="item.commentType==1">
                     {{item.articleTitle}}
                  </router-link>
                  <router-link :to="{path:'/mdDetail',query:{id:item.articleId}}" :title="item.articleTitle"
                     @click.native="handleCancel()" v-else>
                     {{item.articleTitle}}
                  </router-link>
                  中留言
               </div>
            </template>
         </a-list>
               <div class="commentContent" v-html="parseContent(item.commentContent)"></div>
            </div>
         </div>

         <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
            <a-button @click="loadMore" :disabled="refresh" v-if="showButton">
               加载更多
            </a-button>
            <a-button disabled v-else>
               更多记录就不展示啦..
            </a-button>
            <span style="margin: 20px;">
               <a-button @click="reload" :disabled="refresh">
                  <a-icon type="redo" />
               </a-button>
            </span>
         </div>
      </a-modal>
   </div>

@@ -60,7 +52,7 @@
   import {
      history
   } from '../../api/blogArticleComment.js'

   import OwOjsonConfig from '../../assets/OwO.json'
   export default {
      data() {
         return {
@@ -68,19 +60,59 @@
            visible: false,
            loading: false,
            pageNo: 1,
            pageSize: 5,
            pageSize: 3,
            showButton: true,
            refresh: false,
            myOwOConfig: {},
            re: new RegExp(":&\\(\\S*?\\)", "g"),
         }
      },
      beforeMount() {},
      mounted() {
         this.loadData()
         this.loadMore()

         let packages = Object.keys(OwOjsonConfig)
         for (let i = 0; i < packages.length; i++) {
            let opackage = OwOjsonConfig[packages[i]].container
            let type = OwOjsonConfig[packages[i]].type
            for (let j = 0; j < opackage.length; j++) {
               if (type == 'image') {
                  this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css +
                     `" src="` + opackage[j].icon + `">`
               }
            }
         }
      },
      methods: {
         parseContent(content) {
            let tempStrArray = content.match(this.re);

            if (tempStrArray == null) {
               return content;
            }

            for (var i = 0; i < tempStrArray.length; i++) {
               if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) {
                  continue;
               }
               content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]])
            }

            return content;
         },
         loadMore() {
            this.$message.info("拉取信息中..")
            this.loadData()
         },
         reload() {
            this.$message.info("重新拉取信息..")
            this.pageNo = 1;
            this.pageSize = 3;
            this.showButton = true;
            this.dataList = [];
            setTimeout(() => {
               this.loadData()
            }, 100);
         },
         loadData() {
            this.refresh = true;
@@ -117,24 +149,34 @@
      },
   }
</script>
<style scoped>
<style lang="less">
   .loadmore-list {
      min-height: 350px;
   }

   .ant-list-item-meta-avatar {
      width: 65px;
   .commentContent {

      * {
         max-width: 100% !important;
      }

   }

   .myhiden {
      display: -webkit-container;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      overflow: hidden;
   .myComment {
      a {
         color: black;
         font-size: 15px;
      }

      img {
         margin-bottom: 0.2rem;
         height: 2rem;
      }
   }

   a {
      color: black;
   .myComment:hover {
      // background: #d0d7dc;
      background: #f5f8fa;
      border-radius: 14px;
   }
</style>