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

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>