邻里互助
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