zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

书评多层回复和表情等

Browse Source
This commit is contained in:
yanwenlong
2023-09-28 00:29:54 +08:00
parent 20805ef922
commit 125e22c42f
1 changed files with 84 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
pages/comments/commentsDetail.vue
View File

@@ -70,8 +70,8 @@
</view> --> </view> -->
<!-- <h4>~ 精彩热评 ~</h4> --> <!-- <h4>~ 精彩热评 ~</h4> -->
<view v-if="plList.length > 0"> <view v-if="plList.length > 0">
<view class="item mb30" v-for="item in plList" :key="item.id"> <view class="pl-item" v-for="item in plList" :key="item.id">
user <view class="plusername">{{item.user.name}}</view>
<view class="content" v-html="item.phtml"></view> <view class="content" v-html="item.phtml"></view>
<!-- <view class="btns flexbox"> --> <!-- <view class="btns flexbox"> -->
<!-- <span class="time">{{formatTimeDifferenceFromT(item.createTime)}}</span> --> <!-- <span class="time">{{formatTimeDifferenceFromT(item.createTime)}}</span> -->
@@ -80,16 +80,34 @@
<u-icon name="chat" color="#888" size="26"></u-icon> <u-icon name="chat" color="#888" size="26"></u-icon>
</span> </span>
</span> --> </span> -->
<view class="btns flexbox" style="margin-top:10rpx;"> <view class="btns flexbox" style="margin-top:10rpx;">
<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span> <span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
<span class="right flexbox opbtns"> <span class="right flexbox opbtns">
<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image> <image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image>
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image> <image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image>
<view style="color: #C0C4CC;">{{item.contlike}}</view> <view style="color: #C0C4CC;">{{item.contlike}}</view>
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun()"></image> <image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun(item)"></image>
<view style="color: #C0C4CC;" @click="pinglun()">{{item.commentNum}}</view> <view style="color: #C0C4CC;" @click="pinglun(item)">{{item.commentsNum}}</view>
</span> </span>
</view>
<view class="pl-son" v-if="item.comments.length > 0">
<view class="pl-son-item" v-for="(item1,index) in item.comments" :key="index">
<view class="pl-son-item-content">
<text class="pl-son-atob">{{item1.user.name + " 回复 " + item1.puser.name}}：</text>
<text v-html="item1.content"></text>
</view>
<view class="btns flexbox" style="margin-top:10rpx;">
<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item1.createTime)}}</span>
<span class="right flexbox opbtns">
<image class="gzicon" v-if="item1.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikehuifu(item1)"></image>
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikehuifu(item1)"></image>
<view style="color: #C0C4CC;">{{item1.contlike}}</view>
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun(item1)"></image>
<!-- <view style="color: #C0C4CC;" @click="pinglun(item1)">{{item1.commentsNum}}</view> -->
</span>
</view>
</view> </view>
</view>
<!-- </view> --> <!-- </view> -->
</view> </view>
</view> </view>
@@ -102,10 +120,11 @@
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font> <font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
</view> </view>
<u-divider v-if="status == 1" text="已加载全部评论"></u-divider> <u-divider v-if="status == 1" text="已加载全部评论"></u-divider>
<!-- 评价对话框 --> <!-- 评论书评对话框 -->
<!-- 回复评论对话框 -->
<u-popup :show="pingjiaShow" :round="10" @close="closePingjia"> <u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
<view class="tanchu"> <view class="tanchu">
<view class="dp_title">添加评论</view> <view class="dp_title">{{Pform.name?("回复："+Pform.name):"添加评论"}}</view>
<view style="max-height: 1000rpx;overflow-y: scroll;"> <view style="max-height: 1000rpx;overflow-y: scroll;">
<!-- <u-button type="success" @click="submitPJ">提交评价</u-button> --> <!-- <u-button type="success" @click="submitPJ">提交评价</u-button> -->
<!-- 提交 --> <!-- 提交 -->
@@ -162,7 +181,7 @@
commentInfo:{}, commentInfo:{},
pPage:1, pPage:1,
pTotal:0, // 评论的总条数 pTotal:0, // 评论的总条数
pinglunId:null, // pinglunId:null,
plList:[], // 书评的评论list plList:[], // 书评的评论list
} }
}, },
@@ -235,7 +254,7 @@
console.log(res,'书评评论') console.log(res,'书评评论')
// this.plList = this.plList.concat(res.page.list) // this.plList = this.plList.concat(res.page.list)
let plList1 = res.page.records let plList1 = res.page.records
this.pTotal = res.page.size this.pTotal = res.page.pages
this.status = 3 this.status = 3
// 评论格式化 // 评论格式化
var newarr = [] var newarr = []
@@ -243,6 +262,12 @@
var pjstr = '' var pjstr = ''
pjstr = this.getHtmlComment(item1.content) pjstr = this.getHtmlComment(item1.content)
item1.phtml = pjstr item1.phtml = pjstr
if(item1.comments && item1.comments.length>0){
item1.comments.forEach((item2)=>{
var pjstr1 = ''
item2.content = this.getHtmlComment(item2.content)
})
}
// console.log(pjstr) // console.log(pjstr)
newarr.push(item1) newarr.push(item1)
@@ -441,8 +466,16 @@
}, },
// 显示评论框 // 显示评论框
pinglun(val){ pinglun(val){
console.log(val) console.log('pinglun-val', val)
this.pinglunId = val || null if(val && val.user && val.user.name){
this.Pform.name = val.user.name || ''
this.Pform.pid = val.id
this.Pform.puserId = val.user.id || ''
} else {
// this.pinglunId = val || null
this.Pform.pid = ''
this.Pform.puserId = ''
}
this.pingjiaShow = true this.pingjiaShow = true
}, },
// 提交评论 // 提交评论
@@ -463,8 +496,8 @@
forumId : this.bfa_id, forumId : this.bfa_id,
userId: this.userInfo.id, userId: this.userInfo.id,
content: this.Pform.comment, content: this.Pform.comment,
pid: '', pid: this.Pform.pid,
puserId: '', puserId: this.Pform.puserId,
} }
this.$http this.$http
.post("forum/articles/pushMsgToForum", data) .post("forum/articles/pushMsgToForum", data)
@@ -478,7 +511,10 @@
// this.getCommPL() // this.getCommPL()
this.pingjiaShow = false this.pingjiaShow = false
this.Pform.comment = '' this.Pform.comment = ''
this.pinglunId = null this.Pform.name = ''
this.Pform.pid = ''
this.Pform.puserId = ''
// this.pinglunId = null
} }
} }
}).catch((e)=>{ }).catch((e)=>{
@@ -522,15 +558,39 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.addPl{padding-top: 0rpx; margin-bottom: 0rpx;} .addPl{padding-top: 0rpx; margin-bottom: 0rpx;}
.pinglunMain{ .pinglunMain{
.pl-item{
margin: 0 0 14rpx 0;
padding: 0 0 14rpx 0;
border-bottom: 1px solid #f0f0f0;
.pl-son{
margin: 14rpx 0 14rpx 60rpx;
padding: 0 0 14rpx 14rpx;
background-color: #f0f0f0;
border-radius: 10rpx;
.pl-son-item{
font-size: 26rpx;
padding-top: 28rpx;
.pl-son-item-content{
}
.pl-son-atob{
color: #a1a1a1;
}
}
}
}
.plusername{
font-size: 26rpx;
color: #a1a1a1;
}
.content{ .content{
margin-bottom: 15rpx; margin: 30rpx 0rpx;
line-height: 40rpx; line-height: 40rpx;
color: #666; color: #000;
font-size: 30rpx; font-size: 30rpx;
} }
background-color: #fff; padding: 10px; background-color: #fff; padding: 10px;
h4{color: #55aa00; font-size: 40rpx; margin:30rpx 0 ; text-align: center;} // h4{color: #55aa00; font-size: 40rpx; margin:30rpx 0 ; text-align: center;}
.time{color: #888; font-size: 24rpx;} .time{color: #888; font-size: 24rpx;}
.btns{ .btns{
font-size: 22rpx; font-size: 22rpx;