inleft
2022-08-26 87317f44d9cc20ad70b6971168667e1c843e03d8
commit | author | age
00e46d 1 <template>
I 2     <div class="myModal">
6461f5 3         <a-modal v-drag-modal v-model="visible" title="天涯共此时.." :footer="null"
00e46d 4             :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
I 5
054cde 6             <div class="myComment" v-for="item in dataList" style="display: flex;padding: 0px 10px 10px 10px;">
I 7                 <div style="min-width: 15%;">
8                     <a :href="item.visitorHomePage" target="_blank" v-if="item.visitorHomePage!=''">
9                         <a-tooltip placement="bottomLeft" :title="item.visitorNickName">
10                             <span class="myTip">{{item.visitorNickName}} :</span>
11                         </a-tooltip>
12                     </a>
13                     <a-tooltip placement="bottomLeft" :title="item.visitorNickName" v-else>
14                         <span class="myTip">{{item.visitorNickName}} :</span>
15                     </a-tooltip>
16                 </div>
17                 <div>
18                     <div style="padding-bottom: 10px;">
19                         在
20                         <router-link to="/comment" @click.native="handleCancel()" v-if="item.commentType==1">
21                             {{item.articleTitle}}
22                         </router-link>
23                         <router-link :to="{path:'/mdDetail',query:{id:item.articleId}}" :title="item.articleTitle"
24                             @click.native="handleCancel()" v-else>
25                             {{item.articleTitle}}
26                         </router-link>
27                         中留言
00e46d 28                     </div>
054cde 29                     <div class="commentContent" v-html="parseContent(item.commentContent)"></div>
I 30                 </div>
31             </div>
00e46d 32
054cde 33             <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
I 34                 <a-button @click="loadMore" :disabled="refresh" v-if="showButton">
35                     加载更多
36                 </a-button>
37                 <a-button disabled v-else>
38                     更多记录就不展示啦..
39                 </a-button>
40                 <span style="margin: 20px;">
41                     <a-button @click="reload" :disabled="refresh">
42                         <a-icon type="redo" />
43                     </a-button>
44                 </span>
45             </div>
00e46d 46         </a-modal>
I 47     </div>
48
49 </template>
50
51 <script>
52     import {
53         history
54     } from '../../api/blogArticleComment.js'
054cde 55     import OwOjsonConfig from '../../assets/OwO.json'
00e46d 56     export default {
I 57         data() {
58             return {
59                 dataList: [],
60                 visible: false,
61                 loading: false,
62                 pageNo: 1,
054cde 63                 pageSize: 3,
00e46d 64                 showButton: true,
I 65                 refresh: false,
054cde 66                 myOwOConfig: {},
I 67                 re: new RegExp(":&\\(\\S*?\\)", "g"),
00e46d 68             }
I 69         },
70         beforeMount() {},
71         mounted() {
0dd41b 72             this.loadMore()
054cde 73
I 74             let packages = Object.keys(OwOjsonConfig)
75             for (let i = 0; i < packages.length; i++) {
76                 let opackage = OwOjsonConfig[packages[i]].container
77                 let type = OwOjsonConfig[packages[i]].type
78                 for (let j = 0; j < opackage.length; j++) {
79                     if (type == 'image') {
80                         this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css +
81                             `" src="` + opackage[j].icon + `">`
82                     }
83                 }
84             }
00e46d 85         },
I 86         methods: {
054cde 87             parseContent(content) {
I 88                 let tempStrArray = content.match(this.re);
89
90                 if (tempStrArray == null) {
91                     return content;
92                 }
93
94                 for (var i = 0; i < tempStrArray.length; i++) {
95                     if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) {
96                         continue;
97                     }
98                     content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]])
99                 }
100
101                 return content;
102             },
00e46d 103             loadMore() {
I 104                 this.$message.info("拉取信息中..")
105                 this.loadData()
106             },
2795be 107             reload() {
I 108                 this.$message.info("重新拉取信息..")
109                 this.pageNo = 1;
054cde 110                 this.pageSize = 3;
2795be 111                 this.showButton = true;
I 112                 this.dataList = [];
113                 setTimeout(() => {
114                     this.loadData()
115                 }, 100);
116             },
00e46d 117             loadData() {
I 118                 this.refresh = true;
119                 setTimeout(() => {
120                     this.refresh = false;
121                 }, 1000);
122
123                 history({
124                     pageNo: this.pageNo++,
125                     pageSize: this.pageSize
126                 }).then((res) => {
127                     if (res.code == 200) {
128                         this.dataList = this.dataList.concat(res.data.records);
129                         if (res.data.pages <= this.pageNo - 1) {
130                             this.showButton = false
131                         }
132
133                     } else {
134                         this.$notification.error({
135                             message: '好像哪里不对劲..',
136                             description: res.message,
137                             placement: 'bottomRight'
138                         });
139                     }
140                 })
141             },
142             showModal() {
143                 this.visible = true;
144             },
145             handleCancel(e) {
146                 this.visible = false;
147             },
148
149         },
150     }
151 </script>
054cde 152 <style lang="less">
00e46d 153     .loadmore-list {
I 154         min-height: 350px;
155     }
156
054cde 157     .commentContent {
00e46d 158
054cde 159         * {
I 160             max-width: 100% !important;
161         }
a23166 162
00e46d 163     }
I 164
054cde 165     .myComment {
I 166         a {
167             color: black;
168             font-size: 15px;
169         }
00e46d 170
054cde 171         img {
I 172             margin-bottom: 0.2rem;
937681 173             height: 2rem;
054cde 174         }
00e46d 175     }
a23166 176
I 177     .myComment:hover {
178         // background: #d0d7dc;
179         background: #f5f8fa;
180         border-radius: 14px;
181     }
00e46d 182 </style>