<template>
|
<view class="box" v-if="info">
|
<view class="box-title">{{info.name}}</view>
|
<view class="box-time">发布时间：{{info.createDate}}</view>
|
<view class="box-content">
|
<u-parse :content="info.content"></u-parse>
|
</view>
|
<view class="xian"></view>
|
<view class="pl">
|
<view class="pl-title">评论 {{info.commentCount || 0}}</view>
|
<view class="pl-wu" v-if="commentList.length === 0">
|
<image src="/static/images/default_nocomment@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="pl-item" v-for="(item, index) in commentList" :key="item.id" v-else @click="openTwo(item.id, item)">
|
<view class="pl-item-tx">
|
<image :src="item.memberImgUrl" mode="widthFix"></image>
|
</view>
|
<view class="pl-item-info">
|
<view class="pl-item-info-name">{{item.nikeName}}</view>
|
<view class="pl-item-info-content" v-if="item.content">
|
{{item.content}}
|
</view>
|
<view class="pl-item-info-list" v-if="item.multifileList && item.multifileList.length > 0">
|
<view class="pl-item-info-list-image" v-for="(child, i) in item.multifileList" :key="i" @click="yulan(child.fileFullUrl, item.multifileList)">
|
<image :src="child.fileFullUrl" mode="widthFix"></image>
|
</view>
|
<view style="width: 132rpx; height: 0;"></view>
|
<view style="width: 132rpx; height: 0;"></view>
|
</view>
|
<view class="pl-item-info-data">
|
<view class="pl-item-info-data-time">{{$u.timeFormat(new Date(item.createDate).getTime())}}</view>
|
<view class="pl-item-info-data-list">
|
<view class="pl-item-info-data-list-item" @click="sendChild(item.id, index)">
|
<image src="/static/icon/ic_reply2@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="pl-item-info-data-list-item" @click.stop="dianzanpl(item)">
|
<image src="/static/icon/dianzan.png" mode="widthFix" v-if="!item.zanStatus || item.zanStatus == 0"></image>
|
<image src="/static/icon/detail_ic_zan_sel@2x.png" mode="widthFix" v-else></image>
|
<text :style="{color: (!item.zanStatus || item.zanStatus == 0) ? '#AAAAAA' : '#004096'}">{{item.zanCount}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="pl-item" style="border: none;" v-for="(child, a) in item.childern" :key="child.id" @click="openTwo(item.id, child)">
|
<view class="pl-item-tx">
|
<image :src="child.memberImgUrl" mode="widthFix"></image>
|
</view>
|
<view class="pl-item-info">
|
<view class="pl-item-info-name">{{child.nikeName}}</view>
|
<view class="pl-item-info-content" v-if="child.content">
|
{{child.content}}
|
</view>
|
<view class="pl-item-info-list" v-if="child.multifileList && child.multifileList.length > 0">
|
<view class="pl-item-info-list-image" v-for="(child1, i) in child.multifileList" :key="i">
|
<image :src="child1.fileFullUrl" mode="widthFix"></image>
|
</view>
|
<view style="width: 132rpx; height: 0;"></view>
|
<view style="width: 132rpx; height: 0;"></view>
|
</view>
|
<view class="pl-item-info-data">
|
<view class="pl-item-info-data-time">{{child.createDate}}</view>
|
<view class="pl-item-info-data-list">
|
<view class="pl-item-info-data-list-item">
|
<image src="/static/icon/ic_reply2@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="pl-item-info-data-list-item" @click.stop="dianzanpl(child)">
|
<image src="/static/icon/dianzan.png" mode="widthFix" v-if="!child.zanStatus || child.zanStatus == 0"></image>
|
<image src="/static/icon/detail_ic_zan_sel@2x.png" mode="widthFix" v-else></image>
|
<text :style="{color: (!child.zanStatus || child.zanStatus == 0) ? '#AAAAAA' : '#004096'}">{{child.zanCount}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="pl-more" v-if="item.childern.length > 0">展开2条回复</view>
|
</view>
|
</view>
|
</view>
|
<view style="width: 100%; height: calc(100rpx + env(safe-area-inset-bottom));"></view>
|
<view class="footer">
|
<view class="footer-box">
|
<input type="text" placeholder="快来说点什么吧～" disabled @click="show1 = true" />
|
<view class="footer-box-images">
|
<image src="/static/icon/ic_like_sel@2x.png" mode="widthFix" @click="dianzan(1)" v-if="info.zanStatus == 1"></image>
|
<image src="/static/icon/ic_like@2x.png" mode="widthFix" @click="dianzan(2)" v-else></image>
|
<image src="/static/icon/ic_collect_sel@2x.png" mode="widthFix" @click="shoucang(1)" v-if="info.collectStatus === 1"></image>
|
<image src="/static/icon/ic_collect@2x.png" mode="widthFix" @click="shoucang(2)" v-else></image>
|
<view class="fenxiang">
|
<button open-type="share">分享</button>
|
<image src="/static/icon/ic_share@2x.png" mode="widthFix"></image>
|
</view>
|
|
</view>
|
</view>
|
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
|
</view>
|
<!-- 删除评论 -->
|
<u-popup :show="show" round="5" mode="bottom">
|
<view class="dele">
|
<view class="dele-title">删除我的评论</view>
|
<view class="dele-item" style="color: #E4001D;">删除</view>
|
<view class="dele-item" @click="show = false">取消</view>
|
</view>
|
</u-popup>
|
<!-- 发布评论 -->
|
<u-popup :show="show1" round="5" mode="bottom" @close="closePush">
|
<view class="pus">
|
<view class="pus-content">
|
<textarea placeholder="说点什么吧～" v-model="value"></textarea>
|
<view class="pus-content-list" v-if="multifileList.length > 0">
|
<view class="pus-content-list-item" v-for="(item, index) in multifileList" :key="index">
|
<view class="shanchu" @click.stop="deleImg(index)">
|
<image src="/static/icon/ic_delete2@2x.png" mode="widthFix"></image>
|
</view>
|
<image :src="item.fileFullUrl" mode="widthFix"></image>
|
</view>
|
<view style="width: 100rpx; height: 0;"></view>
|
<view style="width: 100rpx; height: 0;"></view>
|
<view style="width: 100rpx; height: 0;"></view>
|
</view>
|
</view>
|
<view class="pus-cz">
|
<image src="/static/icon/ic_pic@2x.png" mode="widthFix" @click="uploadFile"></image>
|
<view class="pus-cz-btn" @click="sendComment">发送</view>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import { dateConversion } from '@/utils/utils.js'
|
export default {
|
computed: {
|
...mapState(['userInfo', 'token'])
|
},
|
data() {
|
return {
|
id: null,
|
show: false,
|
show1: false,
|
info: null,
|
content: '',
|
commentList: [],
|
page: 1,
|
next: true,
|
value: '',
|
multifileList: [],
|
|
commentId: null,
|
item: null
|
}
|
},
|
onLoad(option) {
|
this.id = option.id
|
this.getDetails()
|
},
|
onShareAppMessage(e) {
|
if (e.from === 'button') {
|
return {
|
title: this.info.name,
|
path: '/pages/article-details/article-details?id=' + this.info.id
|
}
|
}
|
},
|
methods: {
|
// 点赞
|
dianzanpl(item) {
|
if (!item.zanStatus || item.zanStatus == 0) {
|
this.$u.api.zanCreate({
|
objId: item.id,
|
objType: 1
|
}).then(res => {
|
if (res.code === 200) {
|
item.zanStatus = 1
|
item.zanCount += 1
|
}
|
})
|
} else {
|
this.$u.api.zanCancel({
|
objId: item.id,
|
objType: 1
|
}).then(res => {
|
if (res.code === 200) {
|
item.zanStatus = 0
|
item.zanCount -= 1
|
}
|
})
|
}
|
},
|
// 二级评论
|
openTwo(commentId, item) {
|
this.item = item
|
this.commentId = commentId
|
this.show1 = true
|
},
|
// 删除图片
|
deleImg(index) {
|
this.multifileList.splice(index, 1)
|
},
|
// 预览评论图片
|
yulan(current, arr) {
|
uni.previewImage({
|
urls: arr.map(item => item.fileFullUrl),
|
current
|
})
|
},
|
// 上传图片
|
uploadFile() {
|
var that = this;
|
uni.chooseImage({
|
count: 9,
|
sizeType: ['compressed'],
|
success: function (res) {
|
let total = res.tempFilePaths.length;
|
let index = 0
|
let down = async () => {
|
if (res.tempFilePaths[index]) {
|
uni.uploadFile({
|
url: `${that.$baseUrl}public/upload`,
|
filePath: res.tempFilePaths[index],
|
name: 'file',
|
fileType: 'image',
|
header: { 'token': that.token },
|
formData: { folder: 'commet' },
|
success: (uploadFileRes) => {
|
let result = JSON.parse(uploadFileRes.data)
|
that.multifileList.push({
|
fileFullUrl: result.data.url,
|
fileurl: result.data.imgaddr
|
})
|
index++
|
if (index !== total) {
|
down()
|
}
|
}
|
});
|
}
|
}
|
down()
|
}
|
});
|
},
|
closePush() {
|
this.item = null
|
this.commentId = null
|
this.value = ''
|
this.multifileList = []
|
this.show1 = false
|
},
|
// 评论
|
sendComment() {
|
if (!this.value && this.multifileList.length === 0) return uni.showToast({
|
title: '评论内容不能为空',
|
icon: 'none'
|
})
|
this.$u.api.commentApply({
|
activityId: this.info.id,
|
content: this.value,
|
multifileList: this.multifileList,
|
commentId: this.commentId,
|
replyId: this.item ? this.item.id : null
|
}).then(res => {
|
if (res.code === 200) {
|
res.data.createDate = dateConversion(res.data.createDate)
|
res.data.activityReplyCommentDTO = []
|
// 子级插数据
|
if (this.commentId) {
|
this.commentList.forEach(item => {
|
if (item.id === this.commentId) {
|
item.commentList.childern.unshift(res.data)
|
}
|
})
|
} else {
|
this.commentList.unshift(res.data)
|
}
|
this.multifileList = []
|
this.value = ''
|
this.show1 = false
|
}
|
})
|
},
|
// 一级评论列表
|
getList() {
|
if (!this.next) return;
|
this.$u.api.findActivityCommentDTOPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
activityId: this.info.id,
|
status: 0,
|
type: 0,
|
memberId: this.userInfo ? this.userInfo.id : null
|
}
|
}).then(res => {
|
if (res.code === 200) {
|
res.data.records.forEach(item => {
|
item.createDate = dateConversion(item.createDate)
|
item.childern = []
|
if (item.activityReplyCommentDTO) {
|
item.activityReplyCommentDTO.createDate = dateConversion(item.activityReplyCommentDTO.createDate)
|
item.childern.push(item.activityReplyCommentDTO)
|
}
|
})
|
this.page++
|
this.commentList.push(...res.data.records)
|
if (this.commentList.length === res.data.total) {
|
this.next = false
|
}
|
}
|
})
|
},
|
shoucang(type) {
|
if (type === 1) {
|
this.$u.api.cancelbatch({
|
ids: this.info.id,
|
objType: 0
|
}).then(res => {
|
if (res.code === 200) {
|
this.info.collectStatus = 0
|
}
|
})
|
} else {
|
this.$u.api.saveCollect({
|
objId: this.info.id,
|
type: 0
|
}).then(res => {
|
if (res.code === 200) {
|
this.info.collectStatus = 1
|
}
|
})
|
}
|
},
|
dianzan(type) {
|
if (type === 1) {
|
this.$u.api.zanCancel({
|
objId: this.info.id,
|
objType: 0
|
}).then(res => {
|
if (res.code === 200) {
|
this.info.zanStatus = 0
|
}
|
})
|
} else {
|
this.$u.api.zanCreate({
|
objId: this.info.id,
|
objType: 0
|
}).then(res => {
|
if (res.code === 200) {
|
this.info.zanStatus = 1
|
}
|
})
|
}
|
},
|
getDetails() {
|
this.$u.api.getArticleDetail({
|
id: this.id,
|
memberId: this.userInfo.id
|
}).then(res => {
|
if (res.code === 200) {
|
this.info = res.data
|
this.getList()
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
.pus {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.pus-cz {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
image {
|
width: 48rpx;
|
height: 48rpx;
|
}
|
.pus-cz-btn {
|
width: 124rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #004096;
|
border-radius: 40rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #FFFFFF;
|
}
|
}
|
.pus-content {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: #F3F3F3;
|
border-radius: 16rpx;
|
textarea {
|
width: 100%;
|
height: 100rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
.pus-content-list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
.pus-content-list-item {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
position: relative;
|
margin-bottom: 7rpx;
|
.shanchu {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 32rpx;
|
height: 32rpx;
|
z-index: 99;
|
image {
|
width: 100%;
|
}
|
}
|
image {
|
width: 100%;
|
}
|
}
|
}
|
}
|
}
|
.dele {
|
width: 100%;
|
.dele-title {
|
width: 100%;
|
height: 114rpx;
|
line-height: 114rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #777777;
|
}
|
.dele-item {
|
width: 100%;
|
height: 102rpx;
|
line-height: 102rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #333333;
|
border-top: 1rpx solid #E5E5E5;
|
}
|
}
|
.footer {
|
width: 100%;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 999;
|
background-color: #ffffff;
|
height: calc(100rpx + env(safe-area-inset-bottom));
|
.footer-box {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
input {
|
flex: 1;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
height: 64rpx;
|
background: #F7F7F7;
|
border-radius: 32rpx;
|
border: 1rpx solid #E5E5E5;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #111111;
|
}
|
.footer-box-images {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
margin-left: 40rpx;
|
.fenxiang {
|
width: 48rpx;
|
height: 48rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
margin-right: 30rpx;
|
position: relative;
|
button {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
opacity: 0;
|
}
|
image {
|
width: 100%;
|
}
|
}
|
image {
|
width: 48rpx;
|
height: 48rpx;
|
margin-right: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
.pl {
|
width: 100%;
|
margin-top: 20rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
.pl-title {
|
width: 100%;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
margin-bottom: 30rpx;
|
}
|
.pl-wu {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 356rpx;
|
height: 356rpx;
|
margin-top: 50rpx;
|
}
|
}
|
.pl-more {
|
padding-left: 92rpx;
|
box-sizing: border-box;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #557593;
|
}
|
.pl-item {
|
width: 100%;
|
padding: 24rpx 0;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #E5E5E5;
|
display: flex;
|
align-items: flex-start;
|
.pl-item-tx {
|
flex-shrink: 0;
|
margin-right: 24rpx;
|
width: 68rpx;
|
height: 68rpx;
|
border-radius: 50%;
|
overflow: hidden;
|
image {
|
width: 100%;
|
}
|
}
|
.pl-item-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.pl-item-info-name {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #777777;
|
}
|
.pl-item-info-content {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
margin-top: 16rpx;
|
}
|
.pl-item-info-list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
margin-top: 20rpx;
|
.pl-item-info-list-image {
|
width: 132rpx;
|
height: 132rpx;
|
border-radius: 16rpx;
|
overflow: hidden;
|
image {
|
width: 100%;
|
}
|
}
|
}
|
.pl-item-info-data {
|
width: 100%;
|
margin-top: 24rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.pl-item-info-data-time {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
.pl-item-info-data-list {
|
display: flex;
|
align-items: center;
|
.pl-item-info-data-list-item {
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
image {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #AAAAAA;
|
margin-left: 8rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.box-title {
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
font-weight: 500;
|
font-size: 44rpx;
|
color: #222222;
|
}
|
.box-time {
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
margin-top: 20rpx;
|
}
|
.xian {
|
width: 100%;
|
height: 20rpx;
|
background-color: #F9F9FB;
|
}
|
.box-content {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-top: 36rpx;
|
background-color: #ffffff;
|
}
|
}
|
</style>
|
