全栈项目|小书架|微信小程序-书籍详情功能实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

效果图

实现分析

从效果图上分析，书籍详情是通过点击首页的item后进入。

进入详情页之后页面顶部显示书籍的相关信息，同时判断用户是否登录，未登录则弹出一个授权登录窗口。

点击登录之后即可加载出用户评论信息。

通过上图我们可以分析出静态页面的主要结构如下：

• 书籍信息
  • 左侧布局是图书图片
  • 中间布局从上到下是：名称、作者、出版社
  • 右侧布局是收藏icon
• 登录提示弹窗
  • 上部分是提示文本
  • 下部分是登录按钮
• 评论列表
  • 左侧是评论人头像
  • 右侧上部分是评论人名字
  • 右侧中间部分是评论信息
  • 右侧下部分是评论时间
• 评论按钮
  • 固定在底部的一个按钮

ps：如果不想看代码可直接跳过了，下面都是具体的代码实现了

具体实现

具体实现主要从wxml，wxss，js这三个文件去介绍。

wxml实现了页面的绘制，然后通过wxss美化页面的样式，最后通过js文件获取数据并将数据填充wxml。

顶部书籍信息实现

wxml规定了各个组件的摆放顺序。

<view class="book-container bg-white"> <view class="book-info">
// 书籍图片
<image class="book-image" mode="scaleToFill" src="{{bookInfo.bkcover}}"></image>
// 书籍文字信息
<view class="book-desc">
<text class="book-main-text">{{bookInfo.bkname}}</text>
<text class="book-text">{{bookInfo.bkauthor}}</text>
<text class="book-text">{{bookInfo.bkpublisher}}</text>
</view>
</view>// 收藏 icon
<view class="button-area" catchtap="onLikeClick">
<block wx:if="{{isLike}}">
<l-icon name="like" color="#FFE57F" size="50" />
</block>
<block wx:else>
<l-icon name="like" color="#34BFA3" size="50" />
</block>
</view> </view>


wxss样式美化了图书封面，图书名称，作者信息等内容

.book-container {
/*border: 1px solid black;*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 50rpx 30rpx;
}.book-info {
/*border: 1px solid red;*/
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}.book-image {
width: 200rpx;
height: 300rpx;
box-shadow: 0 0 10rpx #cdcdcd;
}.book-desc {
/*border: 1px solid yellow;*/
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding-left: 30rpx;
}.book-main-text {
color: #1e1e1e;
font-size: 35rpx;
}.book-text {
color: #8a8a8a;
font-size: 30rpx;
}.button-area {
/*border: 1px solid blue;*/
display: flex;
flex-direction: row;
align-items: center;
}


js文件伪代码如下：获取了书籍信息、用户是否收藏图书的信息

// 获取书籍信息
_getBookInfo(bk_id) {
bookModel.getBookInfo(bk_id)
.then(res => {
this.data.bookInfo = res
this.setData({
bookInfo: this.data.bookInfo
});
})
},// 获取用户是否收藏该书籍
_getUserLikeIt(bk_id) {
bookModel.getLikeStatus(bk_id)
.then(res => {
this.data.bookIsLike = res
this.setData({
isLike: this.data.bookIsLike
});
})
},


登录弹窗实现

弹窗使用了lin-ui中的l-popup组件，具体的组件使用可查看 官方文档。

wxml文件实现了组件的摆放顺序。

<!-- 弹出登录弹窗 -->
<l-popup show="{{unLogin}}" content-align="center" showMask="true" bind:lintap="onPopupTap" locked="{{true}}"> <view class='center'>
<text>收藏功能需要</text>
<text>登录之后才能使用呢~</text>
<l-button bind:getuserinfo="getUserInfo" open-type="getUserInfo">允许登录</l-button>
</view>
</l-popup>


wxss文件控制了弹窗居中显示，已经窗口大小、字体大小等内容。

.center {
height: 250rpx;
width: 500rpx;
line-height: 100rpx;
background: #fff;
text-align: center;
align-items: center;
justify-content: center;
align-content: center;
color: #555;
border-radius: 8rpx;
font-size: 28rpx;
}


js文件中判断了用户是否登录，根据不同的登录状态控制弹窗是否显示

if (app.globalData.userInfo != null) {
that.setData({
unLogin: false
})
// 评论需要登录
this._getCommentData(that.data.bk_id)
} else {
that.setData({
unLogin: true
})
}


评论列表实现

进入评论列表，首先会加载loading进度条，如果没有评论列表会显示暂无评论的提示，如果有评论数据会显示评论数据。

评论列表的wxml如下：

<view class="comment-container">
<view class="comment-title">
<text>--------- 评论 ---------</text>
</view>// 加载中进度条
<view class="comment-loading" wx:if="{{commentLoading}}">
<view class="donut"></view>
</view>// 评论布局列表
<view class="comment-area" wx:else>
// 有评论数据
<block wx:if="{{commentList.length > 0}}">
<view class="comment-item" wx:for="{{commentList}}" wx:key="index">
// 头像
<view class="avatar-container">
<image mode="scaleToFill" src="{{item.uavatar}}" class="user-avatar"></image>
</view>
// 用户名、内容、评论时间
<view class="comment-content">
<text class="user-name">{{item.uname}}</text>
<text class="user-comment">{{item.ucontent}}</text>
<text class="comment-time">{{item.created_at}}</text>
</view>
</view>
</block>
// 没有评论提示布局
<block wx:else>
<view class="comment-placeholder">来当第一个评论的人吧～</view>
</block> </view>
</view>


评论列表的wxss如下：

.comment-container {
padding-top: 30rpx;
}.comment-title {
/*border: 1px solid black;*/
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30rpx;
}.comment-title > text {
font-size: 30rpx;
color: #cdcdcd;
}.comment-area {
/*border: 1px solid black;*/
padding: 20rpx 30rpx;
}.comment-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 20rpx;
}.comment-placeholder {
display: flex;
justify-content: center;
align-items: center;
color: #dcdcdc;
}.comment-item:last-child {
margin-bottom: 180rpx;
}.avatar-container {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
}.user-avatar {
width: 80rpx;
height: 80rpx;
/*border: 1px solid red;*/
}.comment-content {
display: flex;
max-width: 590rpx;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}.user-name {
color: #8a8a8a;
font-size: 30rpx;
}.user-comment {
display: inline-block;
margin-top: 10rpx;
color: #1e1e1e;
font-size: 35rpx;
}.comment-time {
display: inline-block;
margin-top: 10rpx;
color: #cdcdcd;
font-size: 20rpx;
}.comment-loading {
display: flex;
justify-content: center;
align-items: center;
}


评论列表的js如下：调用接口获取数据库中的评论数据。

_getCommentData(bk_id) {
let that = this
bookModel.getPageData(bk_id)
.then(res => {
console.log(res)
if (res.length > 0) {
// 关闭进度条
that._commentSetTimeOut(res, false)
} else if (res.error_code == 10006) {
// token 不合法，需要登录
app.showInfo('token不合法，请去登录');
// 关闭进度条
that._commentSetTimeOut([], false)
} else {
// 关闭进度条
that._commentSetTimeOut([], false)
} })
.catch(err => {
console.log('错误信息：' + err);
// 关闭进度条
that._commentSetTimeOut([], false)
})
},


底部固定的评论按钮实现

主要就是如何使按钮底部固定，同时不会遮挡住评论列表

wxml如下：有意思的是class中也能直接写样式，新发现！

<view class="fixed-bottom block-full-width flex-container bg-white">
<button class="full-button" type="primary" open-type="getUserInfo" catchtap="goComment" data-id="{{bookInfo.id}}" data-name="{{bookInfo.name}}"> 写评论 </button>
</view>


以上就是本次的介绍。

扫码关注公众号，轻撩即可。