diff --git a/pages/comments/comments.vue b/pages/comments/comments.vue index cea64d3..50eaa45 100644 --- a/pages/comments/comments.vue +++ b/pages/comments/comments.vue @@ -2,40 +2,71 @@ - + - - + + + + + + {{productInfo.name}} + 作者：{{productInfo.authorName}} + + + 听书、读书打卡、立即购买 + + + + + 暂无简介内容 + 简介：{{productInfo.content}} - - - - {{item.title}} - - - {{item.updateTime}} - - - - - - - - - + + {{item.title}} + + + + + + + {{formatTimeDifferenceFromT(item.createTime)}} + + + + {{item.contlike}} + + {{item.commentNum}} + + + + + + + 暂无书评内容~ @@ -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;} } diff --git a/pages/comments/commentsDetail.vue b/pages/comments/commentsDetail.vue index b04867f..9da0ab6 100644 --- a/pages/comments/commentsDetail.vue +++ b/pages/comments/commentsDetail.vue @@ -2,26 +2,34 @@ - + - - + + + - - {{commentInfo.title}} + {{commentInfo.title}} + + + + - - {{commentInfo.updateTime}} + + + - - - - {{item.createTime}} - + + user + + + {{item.createTime}} + + - 暂无评论内容~ @@ -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 - } } diff --git a/pages/bookscomments/comments.vue b/pages/comments/commentsList-old.vue similarity index 96% rename from pages/bookscomments/comments.vue rename to pages/comments/commentsList-old.vue index 1cf0457..2142354 100644 --- a/pages/bookscomments/comments.vue +++ b/pages/comments/commentsList-old.vue @@ -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;} diff --git a/pages/comments/commentsList.vue b/pages/comments/commentsList.vue new file mode 100644 index 0000000..23a34e5 --- /dev/null +++ b/pages/comments/commentsList.vue @@ -0,0 +1,572 @@ + + + + + diff --git a/static/icon/gz.png b/static/icon/gz.png new file mode 100644 index 0000000..1babeb6 Binary files /dev/null and b/static/icon/gz.png differ diff --git a/static/icon/gz2.png b/static/icon/gz2.png new file mode 100644 index 0000000..937a32c Binary files /dev/null and b/static/icon/gz2.png differ diff --git a/static/icon/pinglun.png b/static/icon/pinglun.png new file mode 100644 index 0000000..7821d3f Binary files /dev/null and b/static/icon/pinglun.png differ