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-10-01 21:58:12 +08:00
parent dedd92e58f
commit 9ecd033775
2 changed files with 193 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
pages/comments/comments.vue
View File

@@ -18,7 +18,11 @@
<span class="author">作者：{{productInfo.authorName}}</span> <span class="author">作者：{{productInfo.authorName}}</span>
<!-- <view class="description">{{productInfo.bookdesc}}</view> --> <!-- <view class="description">{{productInfo.bookdesc}}</view> -->
<span class="author">听书、读书打卡、立即购买</span> <view class="ting-du-mai">
<view class="ting-du-mai-item" @click="toOtherPage(1,productInfo)">听书</view>
<view class="ting-du-mai-item" @click="toOtherPage(2,productInfo)">读书打卡</view>
<view class="ting-du-mai-item" @click="toOtherPage(3,productInfo)">立即购买</view>
</view>
</view> </view>
</view> </view>
@@ -29,6 +33,16 @@
</view> </view>
<view class="mainContent"> <view class="mainContent">
<view v-if="shupingList.length > 0"> <view v-if="shupingList.length > 0">
<view class="flexbox shuping-topbar">
<view class="shuping-topbar-tiao">{{shupingNum || 0}}条书评</view>
<view class="shuping-topbar-order">
<!-- <view v-for="(item,index) in orderTabs" @click="orderTabCLi(item.value)" :key="index"
:class="orderListTab==item.value?'orderdefine ordStyle':'orderdefine'">{{item.name}}</view> -->
<view :class="orderListTab==1?'orderdefine ordStyle':'orderdefine'" @click="orderTabCLi(1)">按时间</view>
<view style="border-left:2rpx solid #e9e9e9;height:36rpx;"></view>
<view :class="orderListTab==2?'orderdefine ordStyle':'orderdefine'" @click="orderTabCLi(2)">按热度</view>
</view>
</view>
<view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in shupingList" :key="index"> <view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in shupingList" :key="index">
<view class="title">{{item.title}}</view> <view class="title">{{item.title}}</view>
<image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image> <image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image>
@@ -39,14 +53,16 @@
<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"></image> <image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLike(item)"></image>
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"></image> <image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLike(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.stop="pinglun(item.id)"></image> <!-- <image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click.stop="pinglun(item.id)"></image>
<view style="color: #C0C4CC;" @click.stop="pinglun(item.id)">{{item.commentNum}}</view> <view style="color: #C0C4CC;" @click.stop="pinglun(item.id)">{{item.commentNum}}</view> -->
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill"></image>
<view style="color: #C0C4CC;">{{item.commentNum}}</view>
</span> </span>
</view> </view>
<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index1<shupingList.length-1"></view> <view style="border-bottom:2rpx solid #e9e9e9;height:36rpx;" v-if="index1<shupingList.length-1"></view>
<!-- <image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="scaleToFill" style="width: 100%;"></image> <!-- <image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="scaleToFill" style="width: 100%;"></image>
<image class="feng" v-else :src="item.image" mode="scaleToFill" style="width: 100%;"></image> <image class="feng" v-else :src="item.image" mode="scaleToFill" style="width: 100%;"></image>
<text class="title">{{item.title}}</text> --> <text class="title">{{item.title}}</text> -->
@@ -126,6 +142,15 @@ import { data } from 'jquery';
export default { export default {
data() { data() {
return { return {
orderListTab: 1,
orderTabs: [{
name: '按时间',
value: 1
}, {
name: '按热度',
value: 2
}],
shupingNum: 0,
loadingNow : false, loadingNow : false,
playData:{}, playData:{},
isShowEmj: false, isShowEmj: false,
@@ -156,7 +181,7 @@ import { data } from 'jquery';
this.page=1, // 页码 this.page=1, // 页码
this.shupingList = [] this.shupingList = []
this.getBookCom() this.getBookCom(this.orderListTab)
}, },
onReachBottom() { onReachBottom() {
@@ -165,7 +190,7 @@ import { data } from 'jquery';
this.page++ this.page++
console.log('加载',this.page) console.log('加载',this.page)
this.status = 0 this.status = 0
this.getBookCom() this.getBookCom(this.orderListTab)
}else{ }else{
this.status = 1 this.status = 1
@@ -178,12 +203,55 @@ import { data } from 'jquery';
console.log(e,'onload') console.log(e,'onload')
this.bookid = e.bookid this.bookid = e.bookid
this.getProDetail(e) this.getProDetail(e)
this.getBookCom() this.getBookCom(this.orderListTab)
}, },
computed:{ computed:{
...mapState(['userInfo']), ...mapState(['userInfo']),
}, },
methods: { methods: {
toOtherPage(e,productInfo) {
if(e==1){
// 跳转到听书
uni.navigateTo({
url: "../listen/listen?bookid=" + productInfo.id
});
}
if(e==2){
// 跳转到读书打卡
uni.navigateTo({
url: '../clock/clock?bookid='+ productInfo.id
})
}
if(e==3){
// 跳转到购买
uni.navigateTo({
url: '../bookShop/commodityDetail?id=' + productInfo.id
});
}
},
// 切换tab状态
orderTabCLi(e) {
this.orderListTab = e
this.page = 1
this.shupingList = []
this.getBookCom(this.orderListTab)
},
clickLike(item){
this.$http
.post("forum/articles/chickForumContlike?forum_id=" + item.id,)
.then(res => {
if (res.code == 0) {
uni.showToast({
title:'点赞成功！',
icon:'success'
})
item.contlike++
}
}).catch((e)=>{
console.log(e,'e')
})
},
formatTimeDifferenceFromT(dateTimeT) { formatTimeDifferenceFromT(dateTimeT) {
const now = new Date(); const now = new Date();
const t = new Date(dateTimeT); const t = new Date(dateTimeT);
@@ -237,24 +305,26 @@ import { data } from 'jquery';
}) })
}, },
// 获得书评 // 获得书评
getBookCom(){ getBookCom(flag){
let data = { let data = {
'page': this.page, 'page': this.page,
'limit': this.pageSize, 'limit': this.pageSize,
'bookid' : this.bookid 'bookId' : this.bookid,
'order' : flag
} }
console.log(data,'data') console.log(data,'data')
this.$http this.$http
.post('forum/articles/descupdatelist', data) .post('forum/articles/getForumByBook', data)
.then(res => { .then(res => {
console.log(res,'获取成功') console.log(res,'获取成功')
this.total = res.page.totalPage this.total = res.page.pages
this.shupingList = this.shupingList.concat(res.page.list) this.shupingNum = res.page.total
this.shupingList = this.shupingList.concat(res.page.records)
// console.log(res,'已购买') // console.log(res,'已购买')
this.status = 3 this.status = 3
}).catch((e)=>{ }).catch((e)=>{
console.log(e,'e') console.log(e,'e')
}) })
}, },
// 获得输入的表情数组 // 获得输入的表情数组
handleEmj(i) { handleEmj(i) {
@@ -462,18 +532,59 @@ import { data } from 'jquery';
margin-right: 5rpx; margin-right: 5rpx;
} }
}} }}
.shuping-topbar{
display: flex;
justify-content: space-between;
align-items: center;
.shuping-topbar-tiao{
font-size: 28rpx;
color: #8b8a91;
}
.shuping-topbar-order{
width: 280rpx;
display: flex;
justify-content: space-between;
align-items: center;
.orderdefine {
display: inline-block;
padding: 20rpx 0 20rpx 0;
// margin: 40rpx 0 15rpx 0;
width:230rpx;
text-align: center;
font-size: 30rpx;
}
.ordStyle {
// border-bottom: 4rpx solid #54a966;
// color: #54a966;
font-weight: bold;
}
}
}
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;} .quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
.bookInfo{ .bookInfo{
justify-content: space-between; justify-content: space-between;
margin-bottom: 15px; margin-bottom: 15px;
background-color: #fff; background-color: #fff;
padding:10px; padding:10px;
border: 1px splid #999; // border: 1px splid #999;
box-sizing: border-box; box-sizing: border-box;
padding-bottom: 20rpx; padding-bottom: 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.ting-du-mai{
display: flex;
justify-content: space-between;
align-content: center;
font-size: 28rpx;
width: 400rpx;
.ting-du-mai-item{
color: deepskyblue;
border: 1px solid deepskyblue;
border-radius: 6rpx;
padding: 4rpx 6rpx;
}
}
.imageradius{ .imageradius{
border-radius: 20rpx; border-radius: 20rpx;
border:1rpx solid #e9e9e9; border:1rpx solid #e9e9e9;
@@ -522,8 +633,20 @@ import { data } from 'jquery';
border-radius: 20rpx; border-radius: 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.feng{margin:10rpx 0 0 0;height: 200rpx;width: 200rpx;float:right;border-radius: 20rpx;border:1rpx solid #e9e9e9;} .feng{
.title{font-size: 30rpx; font-weight: 700; color: #000; overflow: hidden;} margin:10rpx 20rpx 0 0;
height: 160rpx;
width: 140rpx;
float:left;
border-radius: 20rpx;
border:1rpx solid #e9e9e9;
}
.title{
font-size: 30rpx;
font-weight: 700;
color: #000;
overflow: hidden;
}
.description{ .description{
overflow: hidden; overflow: hidden;
color: #666; color: #666;
@@ -534,10 +657,10 @@ import { data } from 'jquery';
-webkit-line-clamp: 5; -webkit-line-clamp: 5;
line-clamp: 5; line-clamp: 5;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
font-size: 28rpx; font-size: 26rpx;
margin-bottom: 15px; margin-bottom: 20rpx;
margin-top:5px; margin-top:10rpx;
min-height: 186rpx; height: 172rpx;
} }
// .btns{ // .btns{
// font-size: 24rpx; // font-size: 24rpx;

72
pages/comments/commentsDetail.vue
View File

@@ -72,7 +72,7 @@
<view v-if="plList.length > 0"> <view v-if="plList.length > 0">
<view class="pl-item" v-for="item in plList" :key="item.id"> <view class="pl-item" v-for="item in plList" :key="item.id">
<view class="plusername">{{item.user.name}}</view> <view class="plusername">{{item.user.name}}</view>
<view class="content" v-html="item.phtml"></view> <view class="content" v-html="item.content"></view>
<!-- <view class="btns flexbox"> --> <!-- <view class="btns flexbox"> -->
<!-- <span class="time">{{formatTimeDifferenceFromT(item.createTime)}}</span> --> <!-- <span class="time">{{formatTimeDifferenceFromT(item.createTime)}}</span> -->
<!-- <span class="flexbox opbtns"> <!-- <span class="flexbox opbtns">
@@ -106,6 +106,7 @@
<!-- <view style="color: #C0C4CC;" @click="pinglun(item1)">{{item1.commentsNum}}</view> --> <!-- <view style="color: #C0C4CC;" @click="pinglun(item1)">{{item1.commentsNum}}</view> -->
</span> </span>
</view> </view>
<view style="border-bottom:2rpx solid #e9e9e9;height:20rpx;" v-if="index<item.comments.length-1"></view>
</view> </view>
</view> </view>
<!-- </view> --> <!-- </view> -->
@@ -258,18 +259,15 @@
this.status = 3 this.status = 3
// 评论格式化 // 评论格式化
var newarr = [] var newarr = []
plList1.forEach((item1)=>{ plList1.forEach((item1)=>{
var pjstr = '' item1.content = this.getHtmlComment(item1.content)
pjstr = this.getHtmlComment(item1.content) if(item1.comments && item1.comments.length>0){
item1.phtml = pjstr item1.comments.forEach((item2)=>{
if(item1.comments && item1.comments.length>0){ item2.content = this.getHtmlComment(item2.content)
item1.comments.forEach((item2)=>{ })
var pjstr1 = '' }
item2.content = this.getHtmlComment(item2.content) // console.log(pjstr)
}) newarr.push(item1)
}
// console.log(pjstr)
newarr.push(item1)
}) })
this.plList = this.plList.concat(newarr) this.plList = this.plList.concat(newarr)
@@ -508,18 +506,40 @@
.post("forum/articles/pushMsgToForum", data) .post("forum/articles/pushMsgToForum", data)
.then(res => { .then(res => {
if (res.code == 0) { if (res.code == 0) {
if (res.code == 0) { uni.showToast({
uni.showToast({ title:'评论成功！',
title:'评论成功！', icon:'success'
icon:'success' })
}) // this.getCommPL()
// this.getCommPL() this.pingjiaShow = false
this.pingjiaShow = false this.Pform.comment = ''
this.Pform.comment = '' this.Pform.name = ''
this.Pform.name = '' this.Pform.pid = ''
this.Pform.pid = '' this.Pform.puserId = ''
this.Pform.puserId = '' // this.pinglunId = null
// this.pinglunId = null
// 把回复的评论拼进this.plList回复列表中
let comment = res.comment
// 第一种情况：1级回复
if(comment&&comment.pid == 0){
comment.content = this.getHtmlComment(comment.content)
console.log('this.userInfo',this.userInfo)
comment.user = this.userInfo
comment.comments = []
this.plList.unshift(comment)
}else if(comment&&comment.pid > 0){// 第二种情况：回复第1级回复和回复第2级回复
for(let i=0;i<this.plList.length;i++){
if(this.plList[i].id == comment.pid){
comment.content = this.getHtmlComment(comment.content)
console.log('this.userInfo',this.userInfo)
comment.user = this.userInfo
comment.puser = this.plList[i].user
// comment.comments = []
this.plList[i].comments.push(comment)
}
}
} }
} }
}).catch((e)=>{ }).catch((e)=>{
@@ -569,7 +589,7 @@
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
.pl-son{ .pl-son{
margin: 14rpx 0 14rpx 60rpx; margin: 14rpx 0 14rpx 60rpx;
padding: 0 0 14rpx 14rpx; padding: 0 14rpx 14rpx 14rpx;
background-color: #f0f0f0; background-color: #f0f0f0;
border-radius: 10rpx; border-radius: 10rpx;
.pl-son-item{ .pl-son-item{