邻里互助
This commit is contained in:
		| @@ -17,7 +17,7 @@ | ||||
|             </el-form-item> | ||||
|             <el-form-item label="发布内容" prop="content" style="width: 100%;" :rules="[{required: true, message: '请输入发布内容', trigger: 'change'}]"> | ||||
|               <!-- <ai-editor v-model="form.content" :instance="instance"/> --> | ||||
|               <el-input type="textarea" placeholder="请输入内容" v-model="form.content" rows="8" maxlength="500"></el-input> | ||||
|               <el-input type="textarea" placeholder="请输入内容" v-model="form.content" rows="8" maxlength="500" :show-word-limit="true"></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item label="图片" prop="files" style="width: 100%;"> | ||||
|               <ai-uploader | ||||
|   | ||||
| @@ -28,41 +28,42 @@ | ||||
|               :limit="1"> | ||||
|             </ai-uploader> --> | ||||
|           </div> | ||||
|           <div class="comment-list"> | ||||
|           <div class="comment-list" v-if="commontList.length"> | ||||
|             <div class="title">评论</div> | ||||
|             <div class="item"> | ||||
|             <div class="item" v-for="(item, index) in commontList" :key="index"> | ||||
|               <div class="user"> | ||||
|                 <img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt=""> | ||||
|                 <img :src="item.createUserAvatar" alt=""> | ||||
|                 <div class="info-flex"> | ||||
|                   <h2>张三</h2> | ||||
|                   <span>2023-03-16 09:34:02</span> | ||||
|                   <h2>{{item.createUserName}}</h2> | ||||
|                   <span>{{item.createTime}}</span> | ||||
|                 </div> | ||||
|               </div> | ||||
|               <div class="content-flex"> | ||||
|                 <p>评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p> | ||||
|                 <div>删除</div> | ||||
|                 <p>{{item.content}}</p> | ||||
|                 <div @click="delCommont(item)">删除</div> | ||||
|               </div> | ||||
|               <div class="reply-list"> | ||||
|                 <div class="reply-item"> | ||||
|               <div class="reply-list" v-if="item.replyList && item.replyList.length && item.isShowReply"> | ||||
|                 <div class="reply-item" v-for="(reply, indexs) in item.replyList" :key="indexs"> | ||||
|                   <div class="reply-user"> | ||||
|                     <img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt=""> | ||||
|                     <div  class="reply-name"> | ||||
|                       <span>李四</span>回复<span>张三</span> | ||||
|                       <span>{{reply.createUserName}}</span>回复<span>{{item.createUserName}}</span> | ||||
|                     </div> | ||||
|                     <span class="reply-time">2023-03-16 09:34:02</span> | ||||
|                     <span class="reply-time">{{reply.createTime}}</span> | ||||
|                   </div> | ||||
|                   <div class="content-flex"> | ||||
|                     <p>评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复</p> | ||||
|                     <div>删除</div> | ||||
|                     <p>{{reply.content}}</p> | ||||
|                     <div @click="delReply(item, indexs)">删除</div> | ||||
|                   </div> | ||||
|                 </div> | ||||
|               </div> | ||||
|               <div class="reply-more" @click="isShowMore = !isShowMore" :class="[isShowMore ? 'active' : '']"> | ||||
|                 <span class="line"></span>{{isShowMore ? '收起' : `展开3条回复`}} | ||||
|               <div class="reply-more" @click="item.isShowReply = !item.isShowReply" :class="[item.isShowReply ? 'active' : '']"> | ||||
|                 <span class="line"></span>{{item.isShowReply ? '收起' : `展开${item.replyList.length}条回复`}} | ||||
|                 <i class="el-icon-arrow-down"></i> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|           <ai-empty v-else>暂无评论</ai-empty> | ||||
|         </template> | ||||
|       </ai-card> | ||||
|     </template> | ||||
| @@ -83,7 +84,6 @@ | ||||
|       return { | ||||
|         commontList: [], | ||||
|         info: {}, | ||||
|         isShowMore: false | ||||
|       } | ||||
|     }, | ||||
|  | ||||
| @@ -100,8 +100,11 @@ | ||||
|  | ||||
|     methods: { | ||||
|       getList() { | ||||
|         this.instance.post(`/app/appneighborhoodassistance/commontList?id=${this.params.id}`).then(res => { | ||||
|         this.instance.post(`/app/appneighborhoodassistance/commontList?id=${this.params.id}&size=100`).then(res => { | ||||
|           if (res.code == 0) { | ||||
|             res.data.records.map((item) => { | ||||
|               item.isShowReply = false | ||||
|             }) | ||||
|             this.commontList = res.data.records | ||||
|           } | ||||
|         }) | ||||
| @@ -122,6 +125,28 @@ | ||||
|           type: 'List', | ||||
|           isRefresh: true | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       delCommont(row) { | ||||
|         this.$confirm('确定删除该评论?').then(() => { | ||||
|           this.instance.post(`/app/appneighborhoodassistance/delete?id=${id}`).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success('删除成功!') | ||||
|               this.getList() | ||||
|             } | ||||
|           }) | ||||
|         }) | ||||
|       }, | ||||
|  | ||||
|       delReply(row, indexs) { | ||||
|         this.$confirm('确定删除该回复?').then(() => { | ||||
|           this.instance.post(`/app/appneighborhoodassistance/delete?id=${id}`).then(res => { | ||||
|             if (res.code == 0) { | ||||
|               this.$message.success('删除成功!') | ||||
|               this.getList() | ||||
|             } | ||||
|           }) | ||||
|         }) | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| @@ -134,16 +159,16 @@ | ||||
|       display: flex; | ||||
|       margin-bottom: 8px; | ||||
|       img { | ||||
|         width: 80px; | ||||
|         height: 80px; | ||||
|         width: 60px; | ||||
|         height: 60px; | ||||
|         margin-right: 16px; | ||||
|         border-radius: 50%; | ||||
|       } | ||||
|       .info { | ||||
|         width: calc(100% - 96px); | ||||
|         width: calc(100% - 76px); | ||||
|         h2 { | ||||
|           font-size: 24px; | ||||
|           line-height: 40px; | ||||
|           font-size: 20px; | ||||
|           line-height: 30px; | ||||
|           font-weight: 400; | ||||
|         } | ||||
|         .time-flex { | ||||
| @@ -151,7 +176,7 @@ | ||||
|           justify-content: space-between; | ||||
|           color: #999; | ||||
|           font-size: 14px; | ||||
|           line-height: 40px; | ||||
|           line-height: 30px; | ||||
|           .area-name { | ||||
|             color: #666; | ||||
|           } | ||||
| @@ -182,18 +207,18 @@ | ||||
|         display: flex; | ||||
|         margin-bottom: 8px; | ||||
|         img { | ||||
|           width: 80px; | ||||
|           height: 80px; | ||||
|           width: 60px; | ||||
|           height: 60px; | ||||
|           margin-right: 16px; | ||||
|           border-radius: 50%; | ||||
|         } | ||||
|         .info-flex { | ||||
|           width: calc(100% - 96px); | ||||
|           width: calc(100% - 76px); | ||||
|           display: flex; | ||||
|           justify-content: space-between; | ||||
|           line-height: 60px; | ||||
|           h2 { | ||||
|             font-size: 24px; | ||||
|             line-height: 40px; | ||||
|             font-size: 20px; | ||||
|             font-weight: 400; | ||||
|           } | ||||
|           span { | ||||
| @@ -207,6 +232,7 @@ | ||||
|         font-size: 16px; | ||||
|         line-height: 30px; | ||||
|         margin-bottom: 8px; | ||||
|         padding-left: 76px; | ||||
|         p { | ||||
|           width: calc(100% - 50px); | ||||
|           word-break: break-all; | ||||
| @@ -215,6 +241,7 @@ | ||||
|           color: #26f; | ||||
|           width: 50px; | ||||
|           text-align: right; | ||||
|           cursor: pointer; | ||||
|         } | ||||
|       } | ||||
|       .reply-list { | ||||
| @@ -223,13 +250,11 @@ | ||||
|           margin-bottom: 8px; | ||||
|           .reply-user { | ||||
|             font-size: 14px; | ||||
|             margin-bottom: 8px; | ||||
|             img { | ||||
|               width: 50px; | ||||
|               height: 50px; | ||||
|               border-radius: 50%; | ||||
|               vertical-align: middle; | ||||
|               margin-right: 8px; | ||||
|             } | ||||
|             .reply-name { | ||||
|               display: inline-block; | ||||
| @@ -248,11 +273,12 @@ | ||||
|           .content-flex { | ||||
|             font-size: 14px; | ||||
|             line-height: 24px; | ||||
|             padding-left: 58px; | ||||
|           } | ||||
|         } | ||||
|       } | ||||
|       .reply-more { | ||||
|         font-size: 16px; | ||||
|         font-size: 14px; | ||||
|         line-height: 28px; | ||||
|         color: #333; | ||||
|         .line { | ||||
|   | ||||
| @@ -63,7 +63,7 @@ | ||||
|               </ai-uploader> | ||||
|             </el-form-item> | ||||
|             <el-form-item label="引导页名称" style="width: 100%" prop="title" :rules="[{required: true, message: '请输入引导页名称', trigger: 'blur'}]"> | ||||
|               <el-input v-model="form.title" size="small" placeholder="请输入引导页名称"></el-input> | ||||
|               <el-input v-model="form.title" size="small" placeholder="请输入引导页名称" maxlength="20"></el-input> | ||||
|             </el-form-item> | ||||
|           </el-form> | ||||
|         </ai-dialog> | ||||
|   | ||||
| @@ -9,13 +9,14 @@ | ||||
|         <template #content> | ||||
|           <el-form class="ai-form" :model="form" label-width="120px" ref="form"> | ||||
|             <el-form-item prop="title" style="width: 100%;" label="话题名称" :rules="[{required: true, message: '请输入话题名称', trigger: 'change'}]"> | ||||
|               <el-input size="small" placeholder="请输入话题名称" v-model="form.title"></el-input> | ||||
|               <el-input size="small" placeholder='如“社会保障”仅限4个字' v-model="form.title" maxlength="4" :show-word-limit="true"></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item prop="title" style="width: 100%;" label="排序" :rules="[{required: true, message: '请输入排序', trigger: 'change'}]"> | ||||
|               <el-input-number v-model="form.showIndex" :min="1" :max="100" size="small"></el-input-number> | ||||
|               <span class="tips">请输入数字,数字越小排序越前</span> | ||||
|             </el-form-item> | ||||
|             <el-form-item label="话题描述" prop="description" style="width: 100%;" :rules="[{required: true, message: '请输入发布内容', trigger: 'change'}]"> | ||||
|               <el-input type="textarea" placeholder="请输入内容" v-model="form.description" rows="8" maxlength="500"></el-input> | ||||
|               <el-input type="textarea" placeholder="限500字" v-model="form.description" rows="8" maxlength="500" :show-word-limit="true"></el-input> | ||||
|             </el-form-item> | ||||
|             <el-form-item label="话题图标" prop="files" style="width: 100%;" :rules="[{required: true, message: '请上传话题图标', trigger: 'change'}]"> | ||||
|               <ai-uploader | ||||
| @@ -25,7 +26,7 @@ | ||||
|                 :limit="1"> | ||||
|               </ai-uploader> | ||||
|             </el-form-item> | ||||
|             <el-form-item prop="title" style="width: 100%;" label="是否启用" :rules="[{required: true}]"> | ||||
|             <el-form-item prop="status" style="width: 100%;" label="是否启用" :rules="[{required: true}]"> | ||||
|               <el-radio-group v-model="form.status"> | ||||
|                 <el-radio label="1">是</el-radio> | ||||
|                 <el-radio label="0">否</el-radio> | ||||
| @@ -115,4 +116,10 @@ | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|   .tips { | ||||
|     display: inline-block; | ||||
|     margin-left: 8px; | ||||
|     color: #999; | ||||
|     font-size: 12px; | ||||
|   } | ||||
| </style> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user