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-25 00:58:01 +08:00
parent 8d78bd6636
commit 46cf912cb4
7 changed files with 1027 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
pages/comments/comments.vue
View File

@@ -2,40 +2,71 @@
<view class="container">
<view class="header">
<!-- 顶部导航栏 -->
<z-nav-bar title="书评" bgColor="red"></z-nav-bar>
<z-nav-bar :title="productInfo.name+'-书评'"></z-nav-bar>
</view>
<view class="bookInfo flexbox">
<image :src="productInfo.images" mode="aspectFill"></image>
<view class="bookInfo">
<!-- <image :src="productInfo.images" mode="aspectFill"></image>
<view>
<span class="title">{{productInfo.name}}</span>
<view class="description" v-if="productInfo.description == ''">暂无简介内容</view>
<view class="description">{{productInfo.description}}</view>
</view>
</view> -->
<view class="flexbox" style="margin-bottom: 20px;">
<image :src="productInfo.images" mode="aspectFill" class="imageradius bookinfoimage"></image>
<view class="bookInfo-inner">
<span class="title">{{productInfo.name}}</span>
<span class="author">作者：{{productInfo.authorName}}</span>
<!-- <view class="description">{{productInfo.bookdesc}}</view> -->
<span class="author">听书、读书打卡、立即购买</span>
</view>
</view>
<view class="description" v-if="productInfo.content == ''">暂无简介内容</view>
<view class="description" v-else>简介：{{productInfo.content}}</view>
</view>
<view class="mainContent">
<view v-if="shupingList.length > 0">
<view class="item" @click.stop="toDetail(item)" v-for="(item,index) in shupingList" :key="index">
<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>
<text class="title">{{item.title}}</text>
<!-- <view class="description" v-html="item.content">
{{item.content}}
</view> -->
<view class="btns flexbox">
<span class="time">{{item.updateTime}}</span>
<span class="flexbox opbtns">
<!-- <span class="flexbox" @click="dianzan('1')">
<u-icon name="heart" color="#55aa00" size="26"></u-icon>
<text>2656</text>
</span> -->
<span class="flexbox pingjia" @click.stop="pinglun(item.id)">
<u-icon name="chat" color="#55aa00" size="26"></u-icon>
<!-- <text>2656</text> -->
</span>
</span>
</view>
</view>
<view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in shupingList" :key="index">
<view class="title">{{item.title}}</view>
<image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image>
<view class="description" v-html="item.content">
</view>
<!-- <image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="aspectFill"></image> -->
<view class="btns flexbox" style="margin-top:10rpx;">
<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
<span class="right flexbox opbtns">
<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill"></image>
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"></image>
<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>
<view style="color: #C0C4CC;" @click.stop="pinglun(item.id)">{{item.commentNum}}</view>
</span>
</view>
<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" 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-else :src="item.image" mode="scaleToFill" style="width: 100%;"></image>
<text class="title">{{item.title}}</text> -->
<!-- <view class="description" v-html="item.content">
{{item.content}}
</view> -->
<!-- <view class="btns flexbox">
<span class="time">{{item.updateTime}}</span>
<span class="flexbox opbtns">
<span class="flexbox" @click="dianzan('1')">
<u-icon name="heart" color="#55aa00" size="26"></u-icon>
<text>2656</text>
</span>
<span class="flexbox pingjia" @click.stop="pinglun(item.id)">
<u-icon name="chat" color="#55aa00" size="26"></u-icon>
<text>2656</text>
</span>
</span>
</view> -->
</view>
</view>
<view class="quesheng" v-else>
暂无书评内容~
@@ -153,6 +184,35 @@ import { data } from 'jquery';
...mapState(['userInfo']),
},
methods: {
formatTimeDifferenceFromT(dateTimeT) {
const now = new Date();
const t = new Date(dateTimeT);
const differenceInSeconds = Math.floor((now - t) / 1000);
if (differenceInSeconds <= 3600) {
const minutes = Math.floor(differenceInSeconds / 60);
return `${minutes} 分钟前`;
} else if (differenceInSeconds <= 86400) {
const hours = Math.floor(differenceInSeconds / 3600);
return `${hours} 小时前`;
} else if (differenceInSeconds <= 2592000) {
const days = Math.floor(differenceInSeconds / 86400);
return `${days} 天前`;
} else {
const currentYear = now.getFullYear();
const tYear = t.getFullYear();
if (currentYear === tYear) {
const month = t.getMonth() + 1;
const day = t.getDate();
return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
} else {
const year = t.getFullYear();
const month = t.getMonth() + 1;
const day = t.getDate();
return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
}
}
},
// 书评详情
toDetail(val){
console.log(val,'val')
@@ -404,32 +464,113 @@ import { data } from 'jquery';
}}
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
.bookInfo{justify-content: space-between; margin-bottom: 15px; background-color: #fff; padding:10px; border: 1px splid #999;
view{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
.title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;
}
.description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
.bookInfo{
justify-content: space-between;
margin-bottom: 15px;
background-color: #fff;
padding:10px;
border: 1px splid #999;
box-sizing: border-box;
padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
.imageradius{
border-radius: 20rpx;
border:1rpx solid #e9e9e9;
}
image{width: 150px !important; }
.bookinfoimage{
width: 100px;
height:100px;
}
.bookInfo-inner{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 100px);
.title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
.author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
}
.description{
font-size: 28rpx;
line-height: 20px;
width: 100%;
color:#888;
padding-left: 0;
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 9;
display: -webkit-box;
-webkit-box-orient: vertical;
}
// view{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
// .title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;
// }
// .description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
// }
// image{width: 150px !important; }
}
.mainContent{background-color: #fff;
.item{padding: 10px; margin-bottom: 30rpx;}
.feng{margin-bottom: 15px; overflow: hidden;}
.title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
.description{ overflow: hidden; color: #666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 28rpx; margin-bottom: 15px; margin-top:5px;
.mainContent{
background-color: #fff;
padding: 20rpx;
border-radius: 20rpx;
.item{
// padding: 10px;
margin-bottom: 30rpx;
// border: 1px solid #999;
box-sizing: border-box;
padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
}
.btns{font-size: 24rpx; justify-content: space-between;
.time{font-size: 24rpx; color: #666; }
.feng{margin:10rpx 0 0 0;height: 200rpx;width: 200rpx;float:right;border-radius: 20rpx;border:1rpx solid #e9e9e9;}
.title{font-size: 30rpx; font-weight: 700; color: #000; overflow: hidden;}
.description{
overflow: hidden;
color: #666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
font-size: 28rpx;
margin-bottom: 15px;
margin-top:5px;
min-height: 186rpx;
}
// .btns{
// font-size: 24rpx;
// justify-content: space-between;
// align-items: center;
// .time{font-size: 24rpx; color: #666; }
// .opbtns{
// .pingjia{margin-left: 10px;}
// }
// }
.btns{
font-size: 22rpx;
justify-content: space-between;
align-items: center;
.left{
width: 300rpx;
color: #a1a1a1;
}
.right{
width: 300rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.gzicon{
margin:0 0 0 20rpx;
height: 40rpx;
width: 40rpx;
// float:left;
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
}
.opbtns{
.pingjia{margin-left: 10px;}
}

300
pages/comments/commentsDetail.vue
View File

@@ -2,26 +2,34 @@
<view class="container">
<view class="header">
<!-- 顶部导航栏 -->
<z-nav-bar title="书评详情" bgColor="red"></z-nav-bar>
<z-nav-bar title="书评详情"></z-nav-bar>
</view>
<view class="bookInfo flexbox">
<image :src="productInfo.images" mode="aspectFill"></image>
<view class="bookInfo">
<!-- <image :src="productInfo.images" mode="aspectFill"></image>
<view>
<span class="title">{{productInfo.name}}</span>
<view class="description">{{productInfo.description}}</view>
</view>
</view>
<view class="mainContent">
</view> -->
<!-- <view class="flexbox" style="margin-bottom: 20px;">
<image :src="productInfo.images" mode="aspectFill" class="imageradius bookinfoimage"></image>
<view class="bookInfo-inner">
<span class="title">{{productInfo.name}}</span>
<span class="author">作者：{{productInfo.authorName}}</span>
<view class="description" v-if="productInfo.description == ''">暂无简介内容</view>
<view class="description" v-else>简介：{{productInfo.description}}</view>
</view>
</view> -->
<view class="item">
<image v-if="commentInfo.image != ''" class="feng" :src="commentInfo.image" mode="scaleToFill" style=""></image>
<text class="title">{{commentInfo.title}}</text>
<view class="title">{{commentInfo.title}}</view>
<view style="display:flex;">
<image v-if="productInfo.images != ''" class="feng" :src="productInfo.images" mode="aspectFill" style="" @click="previewImage(productInfo.images)"></image>
<image v-if="commentInfo.image != ''" class="feng" :src="commentInfo.image" mode="aspectFill" style="" @click="previewImage(commentInfo.image)"></image>
</view>
<!-- <view class="description">
</view> -->
<view class="mbtns flexbox">
<span class="time">{{commentInfo.updateTime}}</span>
<view class="btns flexbox">
<!-- <span class="time">{{commentInfo.createTime}}</span> -->
<span class="flexbox opbtns">
<!-- <span class="flexbox" @click="dianzan('1')">
<u-icon name="heart" color="#55aa00" size="22"></u-icon>
@@ -30,26 +38,51 @@
</span>
</view>
<view class="zhengwen" v-html="commentInfo.content"></view>
<view class="btns flexbox">
<span class="left"></span>
<span class="right flexbox opbtns" style="color:#C0C4CC;">
{{formatTimeDifferenceFromT(commentInfo.createTime)}}
</span>
</view>
<view class="btns flexbox" style="margin-top:10rpx;">
<span class="left" style="color: #C0C4CC;"></span>
<span class="right flexbox opbtns">
<image class="gzicon" v-if="commentInfo.ilike" src="../../static/icon/gz2.png" mode="aspectFill"></image>
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"></image>
<view style="color: #C0C4CC;">{{commentInfo.contlike}}</view>
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun()"></image>
<view style="color: #C0C4CC;" @click="pinglun()">{{commentInfo.commentNum}}</view>
</span>
</view>
</view>
</view>
<view class="mainContent">
</view>
<view class="pinglunMain" >
<u-button class="addPl" type='success' plain @click="pinglun()">添加评论</u-button>
<h4>~ 精彩热评 ~</h4>
<!-- <u-button class="addPl" type='success' plain @click="pinglun()">添加评论</u-button>
<view class="">
<view style="font-weight: 700;margin:30rpx 0rpx 30rpx;font-size: 30rpx;color:#55aa00;">精彩热评</view>
</view> -->
<!-- <h4>~ 精彩热评 ~</h4> -->
<view v-if="plList.length > 0">
<view class="item mb30" v-for="item in plList" :key="item.id">
<view class="content" v-html="item.phtml"></view>
<view class="btns flexbox">
<span class="time">{{item.createTime}}</span>
<!-- <span class="flexbox opbtns">
<span class="flexbox pingjia" @click="pinglun(item.id)">
<u-icon name="chat" color="#888" size="26"></u-icon>
</span>
</span> -->
<view class="item mb30" v-for="item in plList" :key="item.id">
user
<view class="content" v-html="item.phtml"></view>
<view class="btns flexbox">
<span class="time">{{item.createTime}}</span>
<!-- <span class="flexbox opbtns">
<span class="flexbox pingjia" @click="pinglun(item.id)">
<u-icon name="chat" color="#888" size="26"></u-icon>
</span>
</span> -->
</view>
</view>
</view>
</view>
<view class="quesheng" v-else>
<text>暂无评论内容~</text>
</view>
@@ -148,6 +181,35 @@
...mapState(['userInfo']),
},
methods: {
formatTimeDifferenceFromT(dateTimeT) {
const now = new Date();
const t = new Date(dateTimeT);
const differenceInSeconds = Math.floor((now - t) / 1000);
if (differenceInSeconds <= 3600) {
const minutes = Math.floor(differenceInSeconds / 60);
return `${minutes} 分钟前`;
} else if (differenceInSeconds <= 86400) {
const hours = Math.floor(differenceInSeconds / 3600);
return `${hours} 小时前`;
} else if (differenceInSeconds <= 2592000) {
const days = Math.floor(differenceInSeconds / 86400);
return `${days} 天前`;
} else {
const currentYear = now.getFullYear();
const tYear = t.getFullYear();
if (currentYear === tYear) {
const month = t.getMonth() + 1;
const day = t.getDate();
return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
} else {
const year = t.getFullYear();
const month = t.getMonth() + 1;
const day = t.getDate();
return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
}
}
},
// 获得书评评论列表
getCommPL(){
let data = {
@@ -161,7 +223,8 @@
.then(res => {
if(res.code == 0){
console.log(res,'书评评论')
this.plList = this.plList.concat(res.page.list)
// this.plList = this.plList.concat(res.page.list)
this.plList = res.page.list
this.pTotal = res.page.totalPage
this.status = 3
// 评论格式化
@@ -324,6 +387,13 @@
// 点赞
dianzan(val){},
// 放大图片
previewImage(url) {
console.log(url)
uni.previewImage({
urls: [url]
});
},
// 显示评论框
pinglun(val){
console.log(val)
@@ -372,16 +442,20 @@
components:{
musicPlay,
emotion
}
}
</script>
<style lang="scss" scoped>
.addPl{padding-top: 20rpx; margin-bottom: 20rpx;}
.addPl{padding-top: 0rpx; margin-bottom: 0rpx;}
.pinglunMain{
.content{margin-bottom: 15px; line-height: 40rpx; color: #666; }
.content{
margin-bottom: 15rpx;
line-height: 40rpx;
color: #666;
font-size: 30rpx;
}
background-color: #fff; padding: 10px;
h4{color: #55aa00; font-size: 40rpx; margin:30rpx 0 ; text-align: center;}
.time{color: #888; font-size: 24rpx;}
@@ -390,8 +464,8 @@
}
}
.mbtns{padding: 5px; background-color: #f4fff5; border-radius: 10px; font-size: 34rpx; color: #8b8a91; margin:15px 0; justify-content: space-between;}
.zhengwen{line-height: 50rpx; font-size: 30rpx;}
// .mbtns{padding: 5px; background-color: #f4fff5; border-radius: 10px; font-size: 34rpx; color: #8b8a91; margin:15px 0; justify-content: space-between;}
.zhengwen{line-height: 50rpx; font-size: 30rpx;margin-top: 20rpx;}
.flexbox{display: flex;}
.container{padding: 10px;}
.star{display: inline-block; width: 20px; height: 20px; margin-right: 10rpx;}
@@ -431,30 +505,160 @@
}
}}
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx;}
.bookInfo{justify-content: space-between; margin-bottom: 15px; background-color: #fff; padding:10px; border: 1px splid #999;
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
// .bookInfo{justify-content: space-between; margin-bottom: 15px; background-color: #fff; padding:10px; border: 1px splid #999;
view{ padding-left: 30rpx;width: calc(100% - 150rpx); box-sizing: border-box;
.title{font-size: 38rpx; margin-top: 20rpx; margin-bottom: 20rpx; display: block;}
.description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
text{margin-left: 10px; line-height: 20px; color: #888; padding-left: 0;}
}
image{width: 150px; height: 150px;}
// view{ padding-left: 30rpx;width: calc(100% - 150rpx); box-sizing: border-box;
// .title{font-size: 38rpx; margin-top: 20rpx; margin-bottom: 20rpx; display: block;}
// .description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
// text{margin-left: 10px; line-height: 20px; color: #888; padding-left: 0;}
// }
// image{width: 150px; height: 150px;}
}
.mainContent{background-color: #fff;
.item{padding: 10px; margin-bottom: 30rpx;}
.feng{margin-bottom: 15px; overflow: hidden;}
.title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
.description{ overflow: hidden; color: #666;
font-size: 28rpx; margin-bottom: 15px; margin-top:5px;
}
.btns{font-size: 24rpx; justify-content: space-between;
.time{font-size: 24rpx; color: #888; }
// }
.bookInfo{
justify-content: space-between;
margin-bottom: 15px;
background-color: #fff;
padding:10px;
border: 1px splid #999;
box-sizing: border-box;
padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
// .imageradius{
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
// }
// .bookInfo-inner{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
// .title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
// .author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
// .description{
// font-size: 28rpx;
// line-height: 20px;
// width: 100%;
// color:#888;
// padding-left: 0;
// overflow:hidden;
// text-overflow: ellipsis;
// -webkit-line-clamp: 9;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// }
// }
// .bookinfoimage{width: 150px !important; }
// view{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
// .title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;
// }
// .description{line-height: 20px; width: 100%; color:#888; padding-left: 0;}
// }
// image{width: 150px !important; }
.btns{
font-size: 22rpx;
justify-content: space-between;
align-items: center;
.left{
width: 300rpx;
color: #a1a1a1;
}
.right{
width: 300rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.gzicon{
margin:0 0 0 20rpx;
height: 40rpx;
width: 40rpx;
// float:left;
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
}
.opbtns{
.pingjia{margin-left: 10px;}
}
}
.feng{
// margin:10rpx 0 0 0;
// height: 670rpx;
// width: 670rpx;
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
margin:10rpx 20rpx 0 0;
height: 360rpx;
width: 280rpx;
// float:left;
border-radius: 20rpx;
border:1rpx solid #e9e9e9;
}
.item{
// padding: 10px;
margin-bottom: 30rpx;
}
// .title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
.title{font-size: 32rpx; font-weight: 700; color: #000; overflow: hidden;padding-top: 20rpx;padding-bottom: 10rpx;}
.description{
overflow: hidden;
color: #666;
font-size: 28rpx;
margin-bottom: 30rpx;
margin-top:10rpx;
}
}
.mainContent{
background-color: #fff;
padding: 20rpx;
border-radius: 20rpx;
.item{
// padding: 10px;
margin-bottom: 30rpx;
}
.feng{
// margin:10rpx 0 0 0;
// height: 670rpx;
// width: 670rpx;
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
margin:10rpx 20rpx 0 0;
height: 160rpx;
width: 140rpx;
float:left;
border-radius: 20rpx;
border:1rpx solid #e9e9e9;
}
// .title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
.title{font-size: 32rpx; font-weight: 500; color: #55aa00; overflow: hidden;padding-top: 20rpx;}
.description{
overflow: hidden;
color: #666;
font-size: 28rpx;
margin-bottom: 15px;
margin-top:5px;
// overflow: hidden;
// color: #666;
// text-overflow: -o-ellipsis-lastline;
// overflow: hidden;
// text-overflow: ellipsis;
// display: -webkit-box;
// -webkit-line-clamp: 5;
// line-clamp: 5;
// -webkit-box-orient: vertical;
// font-size: 28rpx;
// margin-bottom: 15px;
// margin-top:5px;
// min-height: 186rpx;
}
}
.mb30{margin-bottom: 30rpx; overflow: hidden;}
</style>

26
pages/bookscomments/comments.vue → pages/comments/commentsList-old.vue
View File

@@ -310,16 +310,17 @@ import { data } from 'jquery';
.bookinfoimage{width: 150px !important; }
}
.mainContent{background-color: #fff;
.item{
// padding: 10px;
margin-bottom: 30rpx;
// border: 1px solid #999;
box-sizing: border-box;
padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
}
.mainContent{
background-color: #fff;
.item{
// padding: 10px;
margin-bottom: 30rpx;
// border: 1px solid #999;
box-sizing: border-box;
padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
}
.feng{margin:10rpx 0 0 0;height: 200rpx;width: 200rpx;float:right;border-radius: 20rpx;border:1rpx solid #e9e9e9;}
.title{font-size: 32rpx; font-weight: 500; color: #55aa00; overflow: hidden;}
.description{
@@ -337,7 +338,10 @@ import { data } from 'jquery';
margin-top:5px;
min-height: 144rpx;
}
.btns{font-size: 24rpx; justify-content: flex-start;
.btns{
font-size: 24rpx;
justify-content: flex-start;
align-items: center;
.time{font-size: 24rpx; color: #666; }
.opbtns{
.pingjia{margin-left: 10px;}

572
pages/comments/commentsList.vue Normal file
View File

@@ -0,0 +1,572 @@
<template>
<view class="container">
<view class="header">
<!-- 顶部导航栏 -->
<z-nav-bar title="书评列表"></z-nav-bar>
<view class="orderTabs">
<view v-for="(item,index) in commentsTabs" @click="commentsTabCLi(item.value)" :key="index"
:class="commentsListTab==item.value?'orderdefine ordStyle':'orderdefine'">{{item.name}}</view>
</view>
</view>
<!-- 站位 -->
<view class="orderTabs" style="z-index:0;position:unset;">
<view class="orderdefine">1</view>
</view>
<view v-if="commentsListTab == 1">
<view v-if="newList.length > 0">
<view class="bookInfo" v-for="(item,index) in newList" :key="index">
<view class="mainContent">
<view class="item" @click.stop="toDetail(item)">
<view class="title">{{item.title}}</view>
<image class="feng" v-if="item.bookimage" :src="item.bookimage" mode="aspectFill"></image>
<view class="description" v-html="item.content">
</view>
<view class="btns flexbox">
<span class="left">{{item.bookname}}</span>
<span class="right flexbox opbtns" style="color:#3c9cff;">
全文
</span>
</view>
<view class="btns flexbox" style="margin-top:10rpx;">
<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
<span class="right flexbox opbtns">
<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill"></image>
<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"></image>
<view style="color: #C0C4CC;">{{item.contlike}}</view>
<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill"></image>
<view style="color: #C0C4CC;">{{item.commentNum}}</view>
</span>
</view>
<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index<item.length-1"></view>
</view>
</view>
</view>
</view>
<view class="quesheng" v-else>
暂无书评内容~
</view>
</view>
<view v-if="commentsListTab == 3">
<view v-if="bookList.length > 0">
<view class="bookInfo3" v-for="(item,index) in bookList" :key="index">
<view class="mainContent3">
<view class="item">
<view class="btns flexbox" @click.stop="toMore(item)">
<view class="title">{{item.name}}</view>
<view class="pianshuping">{{item.id}}篇书评</view>
</view>
<image class="feng" v-if="item.images" :src="item.images" mode="aspectFill" @click.stop="toMore(item)"></image>
<view class="shupingList">
<view class="description" v-for="(item1,index1) in item.forums" :key="index1" @click.stop="toDetail(item1)">{{item1.title}}</view>
</view>
<view class="btns flexbox" @click.stop="toMore(item)">
<span class="left"></span>
<span class="right flexbox opbtns" style="color:#3c9cff;">
全部
</span>
</view>
</view>
</view>
</view>
</view>
<view class="quesheng" v-else>
暂无书评内容~
</view>
</view>
<view v-if="status==0" style="text-align: center;">
<u-loading-icon style="display: inline-block;"></u-loading-icon>
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
</view>
<view v-if="status==1" style="padding-bottom: 20rpx;">
<u-divider text="全部加载完成"></u-divider>
</view>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import musicPlay from '@/components/music.vue'
import { data } from 'jquery';
import {
mapState
} from 'vuex';
export default {
data() {
return {
// loadingNow : false,
playData:{},
emojiIcon:'cuIcon-emoji',
windowWidth:0,
bookid:null,
booklistpage: 1,
productList:[],
productInfo:{},
pingjiaShow:false, //添加评价
Pform:{ // 评价表单
star:0,
comment:'',
img:[],
html:''
},
emoji:[],
Files:[],
page:1,
pageSize:10,
total:0,
status:3,
shupingList:[],
bfaid:null,
commentsTabs: [{
name: '最新',
value: 1
}, {
name: '最热',
value: 2
}, {
name: '书集',
value: 3
}],
commentsListTab: 1,
newestpage: 1,
hotestpage: 1,
booksetpage: 1,
newList:[],
hotList:[],
bookList:[],
}
},
onPullDownRefresh() {
console.log('下拉刷新了')
uni.stopPullDownRefresh();
this.booklistpage=1, // 页码
this.productList = []
this.getBookList()
},
onReachBottom() {
this.booklistpage++
this.getBookList()
},
onLoad(e) {
this.windowWidth = uni.getSystemInfoSync().windowWidth;
console.log(e,'onload')
// this.bookid = e.bookid
this.getBookList(1, true)
},
computed:{
...mapState(['userInfo']),
},
methods: {
formatTimeDifferenceFromT(dateTimeT) {
const now = new Date();
const t = new Date(dateTimeT);
const differenceInSeconds = Math.floor((now - t) / 1000);
if (differenceInSeconds <= 3600) {
const minutes = Math.floor(differenceInSeconds / 60);
return `${minutes} 分钟前`;
} else if (differenceInSeconds <= 86400) {
const hours = Math.floor(differenceInSeconds / 3600);
return `${hours} 小时前`;
} else if (differenceInSeconds <= 2592000) {
const days = Math.floor(differenceInSeconds / 86400);
return `${days} 天前`;
} else {
const currentYear = now.getFullYear();
const tYear = t.getFullYear();
if (currentYear === tYear) {
const month = t.getMonth() + 1;
const day = t.getDate();
return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
} else {
const year = t.getFullYear();
const month = t.getMonth() + 1;
const day = t.getDate();
return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
}
}
},
// 切换tab状态
commentsTabCLi(e) {
this.commentsListTab = e
this.getBookList(this.commentsListTab, true)
},
// 查看本书更多书评
toMore(val){
console.log(val,'val')
uni.navigateTo({
url: '../comments/comments?bookid='+val.id,
});
},
// 书评详情
toDetail(val){
console.log(val,'val')
uni.navigateTo({
url:'../comments/commentsDetail?bookid='+val.bookid+'&bfa_id='+val.id
})
},
getBookList(flag, clear){
// 根据tab不同，获取最新书评、最热书评、书集列表
uni.showLoading({
title: '加载中'
});
var httpurl = ""
if(flag == 1){
httpurl = "forum/articles/getForumsNew?page=" + this.newestpage + '&limit=10'
}else if(flag == 2){
httpurl = "forum/articles/getForumsHot?page=" + this.hotestpage + '&limit=10'
}else{
httpurl = "forum/articles/getForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=10100'// + this.userId
}
this.$http
.post(httpurl)
.then(res => {
if(flag == 1){
this.newList = this.newList.concat(res.page.records)
}else if(flag == 2){
this.hotList = this.hotList.concat(res.page.records)
}else{
this.bookList = this.bookList.concat(res.page.records)
}
console.log(this.newList,'this.newList')
// let list = res.page.records
// console.log(list,'list')
// for(let i=0; i < list.length; i++){
// let data = {
// 'page': 1,
// 'limit': 3,
// 'bookid' : list[i].bookid
// }
// this.$http
// .post('forum/articles/descupdatelist', data)
// .then(res => {
// // this.total = res.page.totalPage
// // this.shupingList = this.shupingList.concat(res.page.list)
// list[i].shupingList = res.page.list
// console.log(res.page.list,'评论获取成功')
// console.log(list,'list')
// this.productList.push(list[i])
// console.log(this.productList,'productList')
// // this.status = 3
// }).catch((e)=>{
// console.log(e,'e')
// })
// }
if(res.page.records.size != 10){
this.status = 1
} else {
this.status = 0
}
uni.hideLoading();
}).catch((e)=>{
console.log(e,'e')
})
},
// 显示评论
pinglun(val){
this.bfaid = val
this.pingjiaShow = true
},
// 提交评论
submitPJ(){
if(this.Pform.comment != ''){
let data={
'content':this.Pform.comment,
'userid':this.userInfo.id,
'bookid':this.bookid,
'bfaid': this.bfaid
}
// console.log(data,'data')
$http.request({
url: "forum/comment/save",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data,
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
uni.showToast({
title:'评论成功！',
icon:'success'
})
this.pingjiaShow = false
this.Pform.comment = ''
this.pinglunId = null
}
})
}else{
uni.showToast({
title:'请先输入您的评价内容 ！',
icon:'none'
})
}
},
},
components:{
musicPlay,
emotion
}
}
</script>
<style lang="scss" scoped>
// @import '@/style/mixin.scss';
.orderTabs {
// margin: 70rpx 0 0 0;
width: 100%;
// padding: 0 3% 3% 3%;
position: fixed;
// top: 80rpx;
background-color: #f7faf9;
z-index: 100;
.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;
}
}
.flexbox{display: flex;}
.container{padding: 0 10px;}
.star{display: inline-block; width: 20px; height: 20px; margin-right: 10rpx;}
.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
.starLight{ background : url(../../static/icon/star_light.png) no-repeat; background-size: contain;}
.cuIcon-emoji {
background : url(../../static/biaoqing.png) no-repeat; background-size: contain; display: block; margin-right: 20rpx;
width: 30px; }
.cuIcon-keyboard{background : url(../../static/biaoqing.png) no-repeat; background-size: contain; display: block;
width: 30px; }
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
.dp_title {
font-size: 32rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_add {
position: absolute;
top: 40rpx;
right: 30rpx;
font-size: 22rpx;
background-color: #fd6004;
color: #fff;
border-radius: 10rpx;
padding: 5rpx 10rpx;
.u-icon {
display: inline-block;
margin-right: 5rpx;
}
}}
.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
.gengduoshuping{text-align: right; color: #0044ff; padding-bottom: 20rpx; padding-top: 20rpx;}
.bookInfo{
justify-content: space-between;
// margin-bottom: 15px;
background-color: #fff;
padding:20rpx;
border: 1px splid #999;
box-sizing: border-box;
// padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
// .imageradius{
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
// }
// .bookInfo-inner{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
// .title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
// .author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
// .description{
// font-size: 28rpx;
// line-height: 20px;
// width: 100%;
// color:#888;
// padding-left: 0;
// overflow:hidden;
// text-overflow: ellipsis;
// -webkit-line-clamp: 9;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// }
// }
// .bookinfoimage{width: 150px !important; }
}
.mainContent{
background-color: #fff;
.item{
// padding: 10px;
// margin-bottom: 30rpx;
// border: 1px solid #999;
box-sizing: border-box;
// padding-bottom: 20rpx;
border-radius: 20rpx;
// margin-bottom: 20rpx;
}
.feng{
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{
overflow: hidden;
color: #666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
font-size: 24rpx;
margin-bottom: 20rpx;
margin-top:10rpx;
min-height: 144rpx;
}
.btns{
font-size: 22rpx;
justify-content: space-between;
align-items: center;
.left{
width: 300rpx;
color: #a1a1a1;
}
.right{
width: 300rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.gzicon{
margin:0 0 0 20rpx;
height: 40rpx;
width: 40rpx;
// float:left;
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
}
.opbtns{
.pingjia{margin-left: 10px;}
}
}
}
.mb30{margin-bottom: 30rpx; overflow: hidden;}
.bookInfo3{
justify-content: space-between;
// margin-bottom: 15px;
background-color: #fff;
padding:20rpx;
border: 1px splid #999;
box-sizing: border-box;
// padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
.mainContent3{
background-color: #fff;
.item{
// padding: 10px;
// margin-bottom: 30rpx;
// border: 1px solid #999;
box-sizing: border-box;
// padding-bottom: 20rpx;
border-radius: 20rpx;
// margin-bottom: 20rpx;
}
.feng{
margin:10rpx 20rpx 0 0;
height: 240rpx;
width: 164rpx;
float:left;
border-radius: 20rpx;
border:1rpx solid #e9e9e9;
}
.title{font-size: 30rpx; font-weight: 700; color: #000; overflow: hidden;}
.pianshuping{
font-size: 24rpx;
color: red;
}
.shupingList{
min-height: 212rpx;
}
.description{
overflow: hidden;
color: #666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 24rpx;
margin-bottom: 20rpx;
margin-top:10rpx;
}
.btns{
font-size: 22rpx;
justify-content: space-between;
align-items: center;
.left{
width: 300rpx;
color: #a1a1a1;
}
.right{
width: 300rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.gzicon{
margin:0 0 0 20rpx;
height: 40rpx;
width: 40rpx;
// float:left;
// border-radius: 20rpx;
// border:1rpx solid #e9e9e9;
}
.opbtns{
.pingjia{margin-left: 10px;}
}
}
}
}
</style>