邻里互助

This commit is contained in:
liuye
2023-03-16 14:41:48 +08:00
parent 7be3016bfa
commit 8614b5a369
4 changed files with 69 additions and 36 deletions

View File

@@ -17,7 +17,7 @@
</el-form-item> </el-form-item>
<el-form-item label="发布内容" prop="content" style="width: 100%;" :rules="[{required: true, message: '请输入发布内容', trigger: 'change'}]"> <el-form-item label="发布内容" prop="content" style="width: 100%;" :rules="[{required: true, message: '请输入发布内容', trigger: 'change'}]">
<!-- <ai-editor v-model="form.content" :instance="instance"/> --> <!-- <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>
<el-form-item label="图片" prop="files" style="width: 100%;"> <el-form-item label="图片" prop="files" style="width: 100%;">
<ai-uploader <ai-uploader

View File

@@ -28,41 +28,42 @@
:limit="1"> :limit="1">
</ai-uploader> --> </ai-uploader> -->
</div> </div>
<div class="comment-list"> <div class="comment-list" v-if="commontList.length">
<div class="title">评论</div> <div class="title">评论</div>
<div class="item"> <div class="item" v-for="(item, index) in commontList" :key="index">
<div class="user"> <div class="user">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt=""> <img :src="item.createUserAvatar" alt="">
<div class="info-flex"> <div class="info-flex">
<h2>张三</h2> <h2>{{item.createUserName}}</h2>
<span>2023-03-16 09:34:02</span> <span>{{item.createTime}}</span>
</div> </div>
</div> </div>
<div class="content-flex"> <div class="content-flex">
<p>评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</p> <p>{{item.content}}</p>
<div>删除</div> <div @click="delCommont(item)">删除</div>
</div> </div>
<div class="reply-list"> <div class="reply-list" v-if="item.replyList && item.replyList.length && item.isShowReply">
<div class="reply-item"> <div class="reply-item" v-for="(reply, indexs) in item.replyList" :key="indexs">
<div class="reply-user"> <div class="reply-user">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt=""> <img src="https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png" alt="">
<div class="reply-name"> <div class="reply-name">
<span>李四</span>回复<span>张三</span> <span>{{reply.createUserName}}</span>回复<span>{{item.createUserName}}</span>
</div> </div>
<span class="reply-time">2023-03-16 09:34:02</span> <span class="reply-time">{{reply.createTime}}</span>
</div> </div>
<div class="content-flex"> <div class="content-flex">
<p>评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复评论回复</p> <p>{{reply.content}}</p>
<div>删除</div> <div @click="delReply(item, indexs)">删除</div>
</div> </div>
</div> </div>
</div> </div>
<div class="reply-more" @click="isShowMore = !isShowMore" :class="[isShowMore ? 'active' : '']"> <div class="reply-more" @click="item.isShowReply = !item.isShowReply" :class="[item.isShowReply ? 'active' : '']">
<span class="line"></span>{{isShowMore ? '收起' : `展开3条回复`}} <span class="line"></span>{{item.isShowReply ? '收起' : `展开${item.replyList.length}条回复`}}
<i class="el-icon-arrow-down"></i> <i class="el-icon-arrow-down"></i>
</div> </div>
</div> </div>
</div> </div>
<ai-empty v-else>暂无评论</ai-empty>
</template> </template>
</ai-card> </ai-card>
</template> </template>
@@ -83,7 +84,6 @@
return { return {
commontList: [], commontList: [],
info: {}, info: {},
isShowMore: false
} }
}, },
@@ -100,8 +100,11 @@
methods: { methods: {
getList() { 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) { if (res.code == 0) {
res.data.records.map((item) => {
item.isShowReply = false
})
this.commontList = res.data.records this.commontList = res.data.records
} }
}) })
@@ -122,6 +125,28 @@
type: 'List', type: 'List',
isRefresh: true 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; display: flex;
margin-bottom: 8px; margin-bottom: 8px;
img { img {
width: 80px; width: 60px;
height: 80px; height: 60px;
margin-right: 16px; margin-right: 16px;
border-radius: 50%; border-radius: 50%;
} }
.info { .info {
width: calc(100% - 96px); width: calc(100% - 76px);
h2 { h2 {
font-size: 24px; font-size: 20px;
line-height: 40px; line-height: 30px;
font-weight: 400; font-weight: 400;
} }
.time-flex { .time-flex {
@@ -151,7 +176,7 @@
justify-content: space-between; justify-content: space-between;
color: #999; color: #999;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 30px;
.area-name { .area-name {
color: #666; color: #666;
} }
@@ -182,18 +207,18 @@
display: flex; display: flex;
margin-bottom: 8px; margin-bottom: 8px;
img { img {
width: 80px; width: 60px;
height: 80px; height: 60px;
margin-right: 16px; margin-right: 16px;
border-radius: 50%; border-radius: 50%;
} }
.info-flex { .info-flex {
width: calc(100% - 96px); width: calc(100% - 76px);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
line-height: 60px;
h2 { h2 {
font-size: 24px; font-size: 20px;
line-height: 40px;
font-weight: 400; font-weight: 400;
} }
span { span {
@@ -207,6 +232,7 @@
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
margin-bottom: 8px; margin-bottom: 8px;
padding-left: 76px;
p { p {
width: calc(100% - 50px); width: calc(100% - 50px);
word-break: break-all; word-break: break-all;
@@ -215,6 +241,7 @@
color: #26f; color: #26f;
width: 50px; width: 50px;
text-align: right; text-align: right;
cursor: pointer;
} }
} }
.reply-list { .reply-list {
@@ -223,13 +250,11 @@
margin-bottom: 8px; margin-bottom: 8px;
.reply-user { .reply-user {
font-size: 14px; font-size: 14px;
margin-bottom: 8px;
img { img {
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
vertical-align: middle; vertical-align: middle;
margin-right: 8px;
} }
.reply-name { .reply-name {
display: inline-block; display: inline-block;
@@ -248,11 +273,12 @@
.content-flex { .content-flex {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
padding-left: 58px;
} }
} }
} }
.reply-more { .reply-more {
font-size: 16px; font-size: 14px;
line-height: 28px; line-height: 28px;
color: #333; color: #333;
.line { .line {

View File

@@ -63,7 +63,7 @@
</ai-uploader> </ai-uploader>
</el-form-item> </el-form-item>
<el-form-item label="引导页名称" style="width: 100%" prop="title" :rules="[{required: true, message: '请输入引导页名称', trigger: 'blur'}]"> <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-item>
</el-form> </el-form>
</ai-dialog> </ai-dialog>

View File

@@ -9,13 +9,14 @@
<template #content> <template #content>
<el-form class="ai-form" :model="form" label-width="120px" ref="form"> <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-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>
<el-form-item prop="title" style="width: 100%;" label="排序" :rules="[{required: true, message: '请输入排序', trigger: 'change'}]"> <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> <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>
<el-form-item label="话题描述" prop="description" style="width: 100%;" :rules="[{required: true, message: '请输入发布内容', trigger: 'change'}]"> <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>
<el-form-item label="话题图标" prop="files" style="width: 100%;" :rules="[{required: true, message: '请上传话题图标', trigger: 'change'}]"> <el-form-item label="话题图标" prop="files" style="width: 100%;" :rules="[{required: true, message: '请上传话题图标', trigger: 'change'}]">
<ai-uploader <ai-uploader
@@ -25,7 +26,7 @@
:limit="1"> :limit="1">
</ai-uploader> </ai-uploader>
</el-form-item> </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-group v-model="form.status">
<el-radio label="1"></el-radio> <el-radio label="1"></el-radio>
<el-radio label="0"></el-radio> <el-radio label="0"></el-radio>
@@ -115,4 +116,10 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.tips {
display: inline-block;
margin-left: 8px;
color: #999;
font-size: 12px;
}
</style> </style>