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;}
}